diff --git a/app/index.html b/app/index.html index e406223..c722314 100644 --- a/app/index.html +++ b/app/index.html @@ -866,14 +866,14 @@ function render() { actCard.appendChild(totals); const actionRow = el('div', {style:{display:'flex', gap:'10px', marginTop:'16px'}}); + const actionFeedback = el('div', {style:{marginTop:'10px'}}); - const saveBtn = el('button', {className:'kb-btn kb-btn--ghost', style:{flex:'0 0 20%'}, onClick: onSave}, 'Save'); + const saveBtn = el('button', {className:'kb-btn kb-btn--ghost', style:{flex:'0 0 20%'}}, 'Save'); + saveBtn.addEventListener('click', () => saveState()); - const validateBtn = el('button', {className:'kb-btn kb-btn--ghost', style:{flex:'0 0 20%'}}); - validateBtn.textContent = 'Validate'; + const validateBtn = el('button', {className:'kb-btn kb-btn--ghost', style:{flex:'0 0 20%'}}, 'Validate'); validateBtn.addEventListener('click', () => { - const valBox = $('#val-box'); - valBox.innerHTML = ''; + actionFeedback.innerHTML = ''; const errs = validate(); if (errs.length) { const note = el('div', {className:'kb-note kb-note--error'}); @@ -881,13 +881,11 @@ function render() { const txt = el('div'); txt.innerHTML = 'Please fix the following:
' + errs.join('
'); note.appendChild(txt); - valBox.appendChild(note); - valBox.scrollIntoView({behavior:'smooth'}); + actionFeedback.appendChild(note); } else { const note = el('div', {className:'kb-note kb-note--success'}); note.innerHTML = `
All good. The form is ready to download.
`; - valBox.appendChild(note); - valBox.scrollIntoView({behavior:'smooth'}); + actionFeedback.appendChild(note); } }); @@ -895,7 +893,7 @@ function render() { genBtn.innerHTML = `Download reimbursement form`; actionRow.append(saveBtn, validateBtn, genBtn); - actCard.appendChild(actionRow); + actCard.append(actionRow, actionFeedback); wrap.appendChild(actCard); app.appendChild(wrap);