Skip to content

Commit

Permalink
Add error message for invalid inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
gurbindersingh committed Jul 11, 2024
1 parent 6964449 commit eaee3e8
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 6 deletions.
17 changes: 16 additions & 1 deletion src/inputs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { settings } from "./settings";
interface Inputs {
label: string;
description: string;
errorMessage?: string;
settingsKey: string;
isPercentage: boolean;
id: string;
Expand All @@ -16,6 +17,7 @@ const inputs: Inputs[] = [
{
label: "Current Age",
description: "",
errorMessage: "This value must not be greater than your retirement age!",
isPercentage: false,
settingsKey: "currentAge",
id: "current-age",
Expand All @@ -26,6 +28,7 @@ const inputs: Inputs[] = [
{
label: "Retirement Age",
description: "",
errorMessage: "This value must not be greater than the life expectancy!",
isPercentage: false,
settingsKey: "retirementAge",
id: "retirement-age",
Expand Down Expand Up @@ -153,4 +156,16 @@ const inputs: Inputs[] = [
}
];

export { inputs };
function toggleInputErrorHints(inputId: string, isValid: boolean) {
if (isValid) {
document.getElementById(`${inputId}`)!.classList.remove("is-danger");
document.getElementById(`${inputId}-help`)!.classList.remove("is-hidden");
document.getElementById(`${inputId}-error`)!.classList.add("is-hidden");
} else {
document.getElementById(`${inputId}`)!.classList.add("is-danger");
document.getElementById(`${inputId}-help`)!.classList.add("is-hidden");
document.getElementById(`${inputId}-error`)!.classList.remove("is-hidden");
}
}

export { inputs, toggleInputErrorHints };
2 changes: 2 additions & 0 deletions src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import { createProjection } from "./projection";
import { drawChart } from "./chart";
import { renderControls, renderFootnotes } from "./render";
import { setupEventListeners } from "./setup";
import { inputs, toggleInputErrorHints } from "./inputs";

const startTime = Date.now();
renderControls();
renderFootnotes();
setupEventListeners();
const data = createProjection();
drawChart(data);
inputs.forEach(input => toggleInputErrorHints(input.id, input.isValid()))
console.log(`Time to render: ${Date.now() - startTime} ms`);
5 changes: 5 additions & 0 deletions src/render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ function renderControls() {
const {
label,
description,
errorMessage,
settingsKey,
isPercentage,
id,
Expand All @@ -25,6 +26,9 @@ function renderControls() {
const helpText = `<p id="${id}-help" class="help">
${description} ${footnoteLink}
</p>`;
const errorText = `<p id="${id}-error" class="help is-danger is-hidden">
${errorMessage ? errorMessage : ""}
</p>`;

return `<div class="field cell">
<label class="label">${label}</label>
Expand All @@ -39,6 +43,7 @@ function renderControls() {
max="${max}"
/>
${helpText}
${errorText}
</div>`;
})
.join("");
Expand Down
15 changes: 10 additions & 5 deletions src/setup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,28 @@ import { drawChart } from "./chart";
import { createProjection } from "./projection";
import { renderControls } from "./render";
import { resetSettings, settings } from "./settings";
import { inputs } from "./inputs";
import { inputs, toggleInputErrorHints } from "./inputs";

export function setupEventListeners() {
inputs.forEach((input) =>
document.getElementById(input.id)!.addEventListener("change", (event) => {
const element = event.target as HTMLInputElement;
console.log(element);

(settings as any)[input.settingsKey] = input.isPercentage
const newValue = input.isPercentage
? element.valueAsNumber / 100
: element.valueAsNumber;
// console.log(settings);

(settings as any)[input.settingsKey] = newValue;
window.localStorage.setItem("settings", JSON.stringify(settings));

if (input.isValid()) {
toggleInputErrorHints(input.id, input.isValid());
const start = Date.now();
const data = createProjection();
drawChart(data);
console.log(`Time to render: ${Date.now() - start} ms`);
} else {
toggleInputErrorHints(input.id, input.isValid())
}
})
);
Expand Down

0 comments on commit eaee3e8

Please sign in to comment.