Add function for resetting values

gurbindersingh · Jul 5, 2024 · 30771be · 30771be
1 parent 3857590
commit 30771be
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 38 deletions.
diff --git a/src/render.ts b/src/render.ts
@@ -4,28 +4,32 @@ export function renderInputs() {
     console.log("Rendering input elements");
 
     const settingsMap = new Map(Object.entries(settings));
+    const inputElements = inputs
+        .map(({ label, description, settingsKey, isPercentage, id }) => {
+            const value = settingsMap.get(settingsKey)!;
+            return `
+        <div class="field cell">
+            <label class="label">${label}</label>
+            <input 
+                value="${isPercentage ? (100 * value).toPrecision(3) : value}"
+                step="${isPercentage ? 0.05 : 1}"
+                aria-label="${label}"
+                id="${id}"
+                class="input"
+                type="number"
+                min="0"
+            />
+            <p class="help">${description}</p>
+        </div>`;
+        })
+        .join("");
 
     document.getElementById("controls")!.innerHTML =
         `<h3 class="is-sr-only">Inputs</h3>` +
-        inputs
-            .map(({ label, description, settingsKey, isPercentage, id }) => {
-                const value = settingsMap.get(settingsKey)!;
-                return `
-            <div class="field cell">
-                <label class="label">${label}</label>
-                <input 
-                    value="${isPercentage ? (100 * value).toPrecision(3) : value}"
-                    step="${isPercentage ? 0.05 : 1}"
-                    aria-label="${label}"
-                    id="${id}"
-                    class="input"
-                    type="number"
-                    min="0"
-                />
-                <p class="help">${description}</p>
-            </div>`;
-            })
-            .join("");
+        inputElements +
+        `<button id="reset" class="button is-ghost has-text-grey-light m-auto">
+            Reset values
+        </button>`;
 }
 
 // renderInputs();
diff --git a/src/settings.ts b/src/settings.ts
@@ -22,23 +22,25 @@ interface Inputs {
     id: string;
 }
 
-const settings: Settings = window.localStorage.getItem("settings")
+const defaults = {
+    currentAge: 30,
+    retirementAge: 65,
+    lifeExpectancy: 90,
+    netSalary: 30000,
+    salaryIncrease: 0.02,
+    savingsPercentage: 0.15,
+    currentSavings: 0,
+    livingCosts: 0,
+    averageInflation: 0.03,
+    retirementIncome: 50000,
+    retirementIncomeIncrease: 0,
+    rateOfReturn: 0.075,
+    tax: 0.275
+};
+
+let settings: Settings = window.localStorage.getItem("settings")
     ? JSON.parse(window.localStorage.getItem("settings")!)
-    : {
-          currentAge: 30,
-          retirementAge: 65,
-          lifeExpectancy: 90,
-          netSalary: 30000,
-          salaryIncrease: 0.02,
-          savingsPercentage: 0.15,
-          currentSavings: 0,
-          livingCosts: 0,
-          averageInflation: 0.03,
-          retirementIncome: 50000,
-          retirementIncomeIncrease: 0,
-          rateOfReturn: 0.075,
-          tax: 0.275
-      };
+    : defaults;
 
 const inputs: Inputs[] = [
     {
@@ -127,4 +129,13 @@ const inputs: Inputs[] = [
     }
 ];
 
-export { settings, inputs };
+function resetSettings() {
+    settings = defaults;
+    saveSettings();
+}
+
+function saveSettings() {
+    window.localStorage.setItem("settings", JSON.stringify(settings));
+}
+
+export { settings, inputs, resetSettings, saveSettings };
diff --git a/src/setup.ts b/src/setup.ts
@@ -1,6 +1,7 @@
 import { drawChart } from "./chart";
 import { createProjection } from "./projection";
-import { inputs, settings } from "./settings";
+import { renderInputs } from "./render";
+import { inputs, resetSettings, settings } from "./settings";
 
 export function setupEventListeners() {
     inputs.forEach((input) =>
@@ -13,9 +14,14 @@ export function setupEventListeners() {
                 : element.valueAsNumber;
             // console.log(settings);
 
-            window.localStorage.setItem("settings", JSON.stringify(settings));
             const data = createProjection();
             drawChart(data);
         })
     );
+    document.getElementById("reset")!.addEventListener("click", () => {
+        resetSettings();
+        renderInputs();
+        const data = createProjection();
+        drawChart(data);
+    });
 }