From d12106789fa150b0bf71d78e49802fd2245f77a5 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Sun, 3 Mar 2024 17:20:20 -0500 Subject: [PATCH 01/21] Added index.html biolerplat --- index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 00000000..d01f779f --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file From 96017afd5e816197f5b0abefb395195dbd2e9383 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 13:32:52 -0500 Subject: [PATCH 02/21] Added html layout for calculator --- index.html | 47 ++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 38 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index d01f779f..33140c74 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,40 @@ - - - - Document - - - - - \ No newline at end of file + + + + JS Calculator + + +
+ +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+ +
+ + + + From c8889ad60af89637fafb07cd80381ab949d5f577 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 13:55:44 -0500 Subject: [PATCH 03/21] added stylesheet and fixed typo --- index.html | 55 +++++++++++++++++++++++++++--------------------------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 33140c74..af748ee1 100644 --- a/index.html +++ b/index.html @@ -4,37 +4,36 @@ JS Calculator + +
- -
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
- -
- + +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
From e7d41981c00f13f27a8aa9533d98052c2238aeb8 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 14:04:59 -0500 Subject: [PATCH 04/21] Create stylesheet and set bg color --- style.css | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 00000000..4a02401f --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +.calculator { + background-color: black; +} From d9005fad33e37579f946e5db16b21dc7da8cb012 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 14:14:24 -0500 Subject: [PATCH 05/21] added nesting divs --- index.html | 48 ++++++++++++++++++++++++++---------------------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index af748ee1..5d985bb5 100644 --- a/index.html +++ b/index.html @@ -9,30 +9,34 @@
- -
- - - - -
-
- - - - -
-
- - - - +
+
- - - - +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
From efcef7f5d89984daa1615e6166ab2de6ba82eced Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 14:27:36 -0500 Subject: [PATCH 06/21] Added normalize & reset css --- index.html | 2 + normalize.css | 349 ++++++++++++++++++++++++++++++++++++++++++++++++++ reset.css | 47 +++++++ 3 files changed, 398 insertions(+) create mode 100644 normalize.css create mode 100644 reset.css diff --git a/index.html b/index.html index 5d985bb5..6c8cea83 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ JS Calculator + + diff --git a/normalize.css b/normalize.css new file mode 100644 index 00000000..192eb9ce --- /dev/null +++ b/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..2ee7ab0f --- /dev/null +++ b/reset.css @@ -0,0 +1,47 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} From ee8fc00375155332c455839e93ba9f5075d48824 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 14:37:41 -0500 Subject: [PATCH 07/21] affixed class label button to correct div --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 6c8cea83..a707c537 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,8 @@
-
-
+
+
From 616385142198a28c6be9091523c2ddc4e69afcc8 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 14:38:53 -0500 Subject: [PATCH 08/21] styled shape and input window of calculator --- style.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/style.css b/style.css index 4a02401f..5e716abf 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,18 @@ +* { + box-sizing: border-box; +} .calculator { + height: 400px; + width: 300px; background-color: black; + border-radius: 30px; +} + +.window { + height: 30%; + padding: 10% 10%; +} +input { + width: 100%; + height: 100%; } From a408e00cfe0558b5182ef7e2a0815e870b4c7fc3 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 15:30:36 -0500 Subject: [PATCH 09/21] Rename button class to button-container --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a707c537..00dbb8df 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
-
+
From c076186c1aa460e7a7791643d896436d285212d8 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 15:31:15 -0500 Subject: [PATCH 10/21] Changed css style to use flexbox --- style.css | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index 5e716abf..8cda3145 100644 --- a/style.css +++ b/style.css @@ -2,17 +2,43 @@ box-sizing: border-box; } .calculator { - height: 400px; - width: 300px; + display: flex; + flex-direction: column; + height: 600px; + width: 450px; background-color: black; border-radius: 30px; } .window { - height: 30%; - padding: 10% 10%; + flex: 2; + margin: 20% 10% 0 10%; } input { width: 100%; + height: 80%; +} + +.button-container { + flex: 8; + display: flex; + flex-direction: column; + justify-content: space-evenly; + margin-bottom: 10%; +} + +.button-container div { + display: flex; + flex-direction: row; + justify-content: space-evenly; height: 100%; + margin: 2.5% 12%; +} + +button { + height: 100%; + width: 100%; + margin: 0 5px; + padding: 0px; + border-radius: 50%; } From 60c008fed333a49b95298e3f653d807bd621811a Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 15:37:32 -0500 Subject: [PATCH 11/21] adjusted font and weight --- style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/style.css b/style.css index 8cda3145..94b1ea26 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,9 @@ * { box-sizing: border-box; } +body { + font-family: Arial; +} .calculator { display: flex; flex-direction: column; @@ -41,4 +44,6 @@ button { margin: 0 5px; padding: 0px; border-radius: 50%; + font-size: 2.5em; + font-weight: bold; } From 1e132f3d9aebd86b904779cf415f98e218d71ea8 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 17:14:56 -0500 Subject: [PATCH 12/21] Added placeholder value and changed font style globally --- index.html | 2 +- style.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 00dbb8df..1ef28a8c 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
- +
diff --git a/style.css b/style.css index 94b1ea26..af4bf17c 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,8 @@ } body { font-family: Arial; + font-size: 2.5em; + font-weight: bold; } .calculator { display: flex; @@ -44,6 +46,4 @@ button { margin: 0 5px; padding: 0px; border-radius: 50%; - font-size: 2.5em; - font-weight: bold; } From 2b7aac32a08304d0fee0d47fc26d27cbecec9e50 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 17:21:15 -0500 Subject: [PATCH 13/21] added js script file and ref in index.html --- index.html | 1 + script.js | 1 + 2 files changed, 2 insertions(+) create mode 100644 script.js diff --git a/index.html b/index.html index 1ef28a8c..7f834bda 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + diff --git a/script.js b/script.js new file mode 100644 index 00000000..accefceb --- /dev/null +++ b/script.js @@ -0,0 +1 @@ +console.log("Hello World"); From 04e7536e69130888a788029586f2075c8879b00a Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Mon, 4 Mar 2024 18:19:54 -0500 Subject: [PATCH 14/21] added class to buttons --- index.html | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 7f834bda..0c1284e6 100644 --- a/index.html +++ b/index.html @@ -17,28 +17,28 @@
- - - - + + + +
- - - - + + + +
- - - - + + + +
- - - - + + + +
From f4e65a1f455332bba034026bba0d8a21579cffd3 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Tue, 5 Mar 2024 05:33:48 -0500 Subject: [PATCH 15/21] Added defer attribute to script tag so js file runs after all html is loaded --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 0c1284e6..5121d01a 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + From 66278614a981474a18f97399ae88b7dbedc547d7 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Tue, 5 Mar 2024 06:19:31 -0500 Subject: [PATCH 16/21] Added logic to capture button input --- script.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index accefceb..36923317 100644 --- a/script.js +++ b/script.js @@ -1 +1,14 @@ -console.log("Hello World"); +//Create a NodeList of all html elements with .button class +let btns = document.querySelectorAll(".button"); + +//map through node list and add an eventListener that fires on click. +// anonymous function so that the actual function with an argument (buttonPress) can be attached to the event listener +btns.forEach((btn) => + btn.addEventListener("click", () => { + buttonPress(btn.textContent); + }) +); + +function buttonPress(buttonValue) { + alert(`${buttonValue}`); +} From 39a6e4be2a7bb5d9c7efce3fcca0eb842203e5ce Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Tue, 5 Mar 2024 07:42:36 -0500 Subject: [PATCH 17/21] Added id to input --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 5121d01a..fe287dde 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
- +
From 4065bc8697dc7525ff6eaff7ba5f8ef8625e6ed9 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Tue, 5 Mar 2024 07:43:08 -0500 Subject: [PATCH 18/21] Added calculator computation logic --- script.js | 40 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/script.js b/script.js index 36923317..c1c54858 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,9 @@ //Create a NodeList of all html elements with .button class -let btns = document.querySelectorAll(".button"); - +const btns = document.querySelectorAll(".button"); +const display = document.getElementById("display"); +let num1; +let input = 0; +let operator; //map through node list and add an eventListener that fires on click. // anonymous function so that the actual function with an argument (buttonPress) can be attached to the event listener btns.forEach((btn) => @@ -10,5 +13,36 @@ btns.forEach((btn) => ); function buttonPress(buttonValue) { - alert(`${buttonValue}`); + if (buttonValue == "=") { + switch (operator) { + case "+": + alert(num1 + Number(input)); + break; + case "-": + alert(num1 - Number(input)); + break; + case "X": + alert(num1 * Number(input)); + break; + case "/": + alert(num1 / Number(input)); + break; + num1 = 0; + input = ""; + operator = ""; + } + } else if ( + buttonValue == "+" || + buttonValue == "-" || + buttonValue == "X" || + buttonValue == "/" + ) { + operator = buttonValue; + num1 = Number(input); + input = ""; + alert(num1); + } else { + input += buttonValue; + alert(input); + } } From 85aeb8943d7a41e6287f2a26ec35f2004a578c9a Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Wed, 6 Mar 2024 06:00:03 -0500 Subject: [PATCH 19/21] Modify to allow user to use operators multiple times --- script.js | 62 ++++++++++++++++++++++++++++++++----------------------- 1 file changed, 36 insertions(+), 26 deletions(-) diff --git a/script.js b/script.js index c1c54858..194db98e 100644 --- a/script.js +++ b/script.js @@ -2,8 +2,9 @@ const btns = document.querySelectorAll(".button"); const display = document.getElementById("display"); let num1; -let input = 0; -let operator; +let operator = null; +let operator2 = null; +display.value = ""; //map through node list and add an eventListener that fires on click. // anonymous function so that the actual function with an argument (buttonPress) can be attached to the event listener btns.forEach((btn) => @@ -11,38 +12,47 @@ btns.forEach((btn) => buttonPress(btn.textContent); }) ); - +function calculation() { + switch (operator) { + case "+": + display.value = num1 + Number(display.value); + break; + case "-": + display.value = num1 - Number(display.value); + break; + case "X": + display.value = num1 * Number(display.value); + break; + case "/": + display.value = num1 / Number(display.value); + break; + } + num1 = display.value; + operator = operator2; + operator2 = null; +} function buttonPress(buttonValue) { if (buttonValue == "=") { - switch (operator) { - case "+": - alert(num1 + Number(input)); - break; - case "-": - alert(num1 - Number(input)); - break; - case "X": - alert(num1 * Number(input)); - break; - case "/": - alert(num1 / Number(input)); - break; - num1 = 0; - input = ""; - operator = ""; - } + calculation(); } else if ( buttonValue == "+" || buttonValue == "-" || buttonValue == "X" || buttonValue == "/" ) { - operator = buttonValue; - num1 = Number(input); - input = ""; - alert(num1); + if (operator == null) { + operator = buttonValue; + num1 = Number(display.value); + display.value = ""; + // isOperatorStored = true; + } else { + operator2 = buttonValue; + calculation(); + } } else { - input += buttonValue; - alert(input); + if (operator != null) { + display.value = ""; + } + display.value += buttonValue; } } From a2c141d02780ef4e60942a946f684e4499627903 Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Fri, 8 Mar 2024 10:56:41 -0500 Subject: [PATCH 20/21] Refactor and add functionality Code was refactored to seperate logic into functions Functionality was expanded to be able to calculate a) when users want to continue to calculate with result after pushing =. eg user enters 2+2 then pushes equal to get answer fo 4 and then want to continue calculation with the answer of 4 b) users enter multiple calculations one after another without entering = eg 2+2+2+2 --- script.js | 72 ++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 50 insertions(+), 22 deletions(-) diff --git a/script.js b/script.js index 194db98e..739924b2 100644 --- a/script.js +++ b/script.js @@ -1,10 +1,12 @@ //Create a NodeList of all html elements with .button class const btns = document.querySelectorAll(".button"); const display = document.getElementById("display"); -let num1; +let storedNumber = null; +let displayNumber = ""; let operator = null; let operator2 = null; display.value = ""; +let equalEntered = false; //map through node list and add an eventListener that fires on click. // anonymous function so that the actual function with an argument (buttonPress) can be attached to the event listener btns.forEach((btn) => @@ -12,47 +14,73 @@ btns.forEach((btn) => buttonPress(btn.textContent); }) ); -function calculation() { +//calculate function +function computation() { switch (operator) { case "+": - display.value = num1 + Number(display.value); + display.value = +storedNumber + Number(displayNumber); break; case "-": - display.value = num1 - Number(display.value); + display.value = +storedNumber - Number(displayNumber); break; case "X": - display.value = num1 * Number(display.value); + display.value = +storedNumber * Number(displayNumber); break; case "/": - display.value = num1 / Number(display.value); + display.value = +storedNumber / Number(displayNumber); break; } - num1 = display.value; - operator = operator2; + storedNumber = display.value; //store the calculated number + operator = operator2; //in scenario where user is entering values and operators without pushing = operator2 = null; + displayNumber = ""; //resets the displayNumber variable } + +//evaluate when keypress is an operator +function operatorEval(buttonValue) { + //check to make sure no number is stored from previous calculation + if (storedNumber == null) { + operator = buttonValue; + storedNumber = displayNumber; + } + //run if there is a stored number from previous calculation + else { + //scenario: previous calculation completed with equal + if (equalEntered) { + operator = buttonValue; + equalEntered = false; //reset flag for equal being pushed. + } + //scenario: previous calculation not completed because = wasn't entered. + //instead operator was entered again. + //must store operator2 and run computation with operator1 + //eg user enters, 2+2+ (when second operator is pressed store it and must compute 2+2) + else { + operator2 = buttonValue; + computation(); + } + } + displayNumber = ""; +} + +function displayScreen(buttonValue) { + display.value = ""; + displayNumber += buttonValue; + display.value = displayNumber; +} + +//evaluate button entered and call appropriate function function buttonPress(buttonValue) { if (buttonValue == "=") { - calculation(); + equalEntered = true; + computation(); } else if ( buttonValue == "+" || buttonValue == "-" || buttonValue == "X" || buttonValue == "/" ) { - if (operator == null) { - operator = buttonValue; - num1 = Number(display.value); - display.value = ""; - // isOperatorStored = true; - } else { - operator2 = buttonValue; - calculation(); - } + operatorEval(buttonValue); } else { - if (operator != null) { - display.value = ""; - } - display.value += buttonValue; + displayScreen(buttonValue); } } From 0a9c85dcc80ff439627d47d614b31caeabb58c8c Mon Sep 17 00:00:00 2001 From: Rahul Mohan <88761343+rmohanmd@users.noreply.github.com> Date: Fri, 8 Mar 2024 13:15:34 -0500 Subject: [PATCH 21/21] Fixed bug on starting new calculation after completing a previous one --- script.js | 1 + 1 file changed, 1 insertion(+) diff --git a/script.js b/script.js index 739924b2..3b3f4392 100644 --- a/script.js +++ b/script.js @@ -66,6 +66,7 @@ function displayScreen(buttonValue) { display.value = ""; displayNumber += buttonValue; display.value = displayNumber; + if (equalEntered) equalEntered = false; } //evaluate button entered and call appropriate function