Merge pull request #17 from princemuel/staging

feat: update application structure
princemuel · Jul 13, 2024 · 74ce33f · 74ce33f
2 parents 5428f1f + 89ec13b
commit 74ce33f
Show file tree

Hide file tree

Showing 12 changed files with 369 additions and 419 deletions.
diff --git a/client/index.html b/client/index.html
@@ -30,9 +30,9 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <div class="flex items-center gap-4">
             <p>Theme</p>
             <div>
-              <button type="button" data-keytype="" data-id=""></button>
-              <button type="button" data-keytype="" data-id=""></button>
-              <button type="button" data-keytype="" data-id=""></button>
+              <button type="button" data-type="" data-id=""></button>
+              <button type="button" data-type="" data-id=""></button>
+              <button type="button" data-type="" data-id=""></button>
             </div>
           </div>
         </header>
@@ -54,7 +54,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="seven"
-            data-keytype="number"
+            data-type="number"
             data-id="seven"
             class="cursor-pointer border px-3 py-2"
           >
@@ -63,7 +63,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="eight"
-            data-keytype="number"
+            data-type="number"
             data-id="eight"
             class="cursor-pointer border px-3 py-2"
           >
@@ -72,7 +72,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="nine"
-            data-keytype="number"
+            data-type="number"
             data-id="nine"
             class="cursor-pointer border px-3 py-2"
           >
@@ -81,7 +81,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="delete"
-            data-keytype="delete"
+            data-type="delete"
             data-id="delete"
             class="cursor-pointer border px-3 py-2"
           >
@@ -91,7 +91,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="four"
-            data-keytype="number"
+            data-type="number"
             data-id="four"
             class="cursor-pointer border px-3 py-2"
           >
@@ -100,7 +100,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="five"
-            data-keytype="number"
+            data-type="number"
             data-id="five"
             class="cursor-pointer border px-3 py-2"
           >
@@ -109,7 +109,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="six"
-            data-keytype="number"
+            data-type="number"
             data-id="six"
             class="cursor-pointer border px-3 py-2"
           >
@@ -118,7 +118,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="plus"
-            data-keytype="operator"
+            data-type="operator"
             data-id="plus"
             class="cursor-pointer border px-3 py-2"
           >
@@ -128,7 +128,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="one"
-            data-keytype="number"
+            data-type="number"
             data-id="one"
             class="cursor-pointer border px-3 py-2"
           >
@@ -137,7 +137,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="two"
-            data-keytype="number"
+            data-type="number"
             data-id="two"
             class="cursor-pointer border px-3 py-2"
           >
@@ -146,7 +146,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="three"
-            data-keytype="number"
+            data-type="number"
             data-id="three"
             class="cursor-pointer border px-3 py-2"
           >
@@ -155,7 +155,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="minus"
-            data-keytype="operator"
+            data-type="operator"
             data-id="minus"
             class="cursor-pointer border px-3 py-2"
           >
@@ -165,7 +165,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="decimal"
-            data-keytype="decimal"
+            data-type="decimal"
             data-id="decimal"
             class="cursor-pointer border px-3 py-2"
           >
@@ -174,7 +174,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="zero"
-            data-keytype="number"
+            data-type="number"
             data-id="zero"
             class="cursor-pointer border px-3 py-2"
           >
@@ -183,7 +183,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="divide"
-            data-keytype="operator"
+            data-type="operator"
             data-id="divide"
             class="cursor-pointer border px-3 py-2"
           >
@@ -192,7 +192,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="times"
-            data-keytype="operator"
+            data-type="operator"
             data-id="times"
             class="cursor-pointer border px-3 py-2"
           >
@@ -202,7 +202,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="reset"
-            data-keytype="reset"
+            data-type="reset"
             data-id="reset"
             class="cursor-pointer border px-3 py-2 [grid-area:reset]"
           >
@@ -212,7 +212,7 @@ <h1 class="font-bold text-3xl">unocalc</h1>
           <button
             type="button"
             name="equals"
-            data-keytype="equals"
+            data-type="equals"
             data-id="equals"
             class="cursor-pointer border px-3 py-2 [grid-area:equal]"
           >

diff --git a/client/src/assets/scripts/calculator.ts b/client/src/assets/scripts/calculator.ts
@@ -18,27 +18,27 @@ form.addEventListener("click", (e) => {
   const key = e.target;
 
   if (key instanceof HTMLButtonElement) {
-    if (key.dataset.keytype === "number") {
+    const key_type = key.dataset.type;
+
+    if (key_type === "number") {
       const operator = (key.textContent ?? "").trim().toLowerCase();
-      const digit = number_guard(operator);
-      calculator.input_digit(digit);
+      calculator.input_digit(operator);
     }
 
-    if (key.dataset.keytype === "operator") {
+    if (key_type === "operator") {
       const operator = (key.textContent ?? "").trim().toLowerCase();
       const operation = operations.get(operator);
-      if (operation) calculator.input_operation(operation);
+      if (operation) calculator.set_operation(operation);
     }
 
-    if (key.dataset.keytype === "decimal") calculator.input_decimal();
-    if (key.dataset.keytype === "delete") calculator.delete_last_digit();
-    if (key.dataset.keytype === "reset") calculator.reset();
-    if (key.dataset.keytype === "equals") calculator.calculate();
+    if (key_type === "decimal") calculator.input_digit(".");
+    if (key_type === "delete") calculator.backspace();
+    if (key_type === "reset") calculator.reset();
+    if (key_type === "equals") calculator.calculate();
 
-    console.log("stored_value", calculator.stored_value());
-    console.log("current_operation", calculator.current_operation());
-    console.log("current_value", calculator.current_value());
-    console.log("decimal_place", calculator.decimal_place());
-    output.textContent = calculator.current_value().toString();
+    const result = number_guard(
+      calculator.input_buffer() || calculator.current_value()
+    );
+    output.textContent = new Intl.NumberFormat().format(result);
   }
 });
diff --git a/pkg/README.md b/pkg/README.md
@@ -18,7 +18,6 @@ The challenge is to build out this calculator app and our users should be able t
 
 (Timeline): 2 days
 
-- See the size of the elements adjust based on their device's screen size
 - Adjust the color theme based on their preference
 - Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
 

diff --git a/pkg/unocalc.d.ts b/pkg/unocalc.d.ts
@@ -17,44 +17,41 @@ export class Calculator {
 */
   static new(): Calculator;
 /**
-* @returns {number}
 */
-  current_value(): number;
+  reset(): void;
 /**
-* @returns {number | undefined}
 */
-  stored_value(): number | undefined;
+  backspace(): void;
 /**
-* @returns {Operation | undefined}
+* @param {string} value
 */
-  current_operation(): Operation | undefined;
+  input_digit(value: string): void;
 /**
-* @returns {boolean}
-*/
-  has_decimal(): boolean;
-/**
-* @returns {number}
+* @param {Operation} operation
 */
-  decimal_place(): number;
+  set_operation(operation: Operation): void;
 /**
-* @returns {number | undefined}
 */
-  calculate(): number | undefined;
+  calculate(): void;
 /**
-* @param {Operation} operation
+* @returns {number}
 */
-  input_operation(operation: Operation): void;
+  current_value(): number;
 /**
-* @param {number} digit
+* @returns {Operation | undefined}
 */
-  input_digit(digit: number): void;
+  current_operation(): Operation | undefined;
 /**
+* @returns {string}
 */
-  input_decimal(): void;
+  input_buffer(): string;
 /**
+* @returns {(HistoryEntry)[]}
 */
-  reset(): void;
+  history(): (HistoryEntry)[];
+}
 /**
 */
-  delete_last_digit(): void;
+export class HistoryEntry {
+  free(): void;
 }