From c030696da9a48c327e3f5e61465f41e84045f2fd Mon Sep 17 00:00:00 2001 From: Amariah Del Mar Date: Wed, 30 Oct 2019 23:05:06 -0700 Subject: [PATCH] added ln, arcsin, arccos, and arctan buttons, as well as fixed a spelling error in the dark theme file --- dark-light-theme-toggle.js | 4 ++-- index.html | 7 ++++++- new_cal/dark-light-theme-toggle.js | 4 ++-- new_cal/index.html | 6 +++++- new_cal/script.js | 17 +++++++++++++++++ new_cal/style.css | 6 +++--- new_cal/style.scss | 4 ++-- script.js | 16 ++++++++++++++++ style.css | 6 +++--- style.scss | 6 +++--- 10 files changed, 59 insertions(+), 17 deletions(-) diff --git a/dark-light-theme-toggle.js b/dark-light-theme-toggle.js index 6a3810a..f22b900 100644 --- a/dark-light-theme-toggle.js +++ b/dark-light-theme-toggle.js @@ -2,10 +2,10 @@ let themeToggle = document.getElementById('themeToggle'); themeToggle.addEventListener('change', () => { let lightThemeEnabled = document.body.classList.toggle('light-theme'); - localStorage.setItem('light-theme-enadled', lightThemeEnabled); + localStorage.setItem('light-theme-enabled', lightThemeEnabled); }); -if (JSON.parse(localStorage.getItem('light-theme-enadled'))) { +if (JSON.parse(localStorage.getItem('light-theme-enabled'))) { document.body.classList.add('light-theme'); themeToggle.setAttribute('checked', 'checked'); } diff --git a/index.html b/index.html index 2a64dfc..11cf6aa 100644 --- a/index.html +++ b/index.html @@ -21,8 +21,13 @@

JavaScript Calculator

You broke it!
- + + + + + + diff --git a/new_cal/dark-light-theme-toggle.js b/new_cal/dark-light-theme-toggle.js index 6a3810a..f22b900 100644 --- a/new_cal/dark-light-theme-toggle.js +++ b/new_cal/dark-light-theme-toggle.js @@ -2,10 +2,10 @@ let themeToggle = document.getElementById('themeToggle'); themeToggle.addEventListener('change', () => { let lightThemeEnabled = document.body.classList.toggle('light-theme'); - localStorage.setItem('light-theme-enadled', lightThemeEnabled); + localStorage.setItem('light-theme-enabled', lightThemeEnabled); }); -if (JSON.parse(localStorage.getItem('light-theme-enadled'))) { +if (JSON.parse(localStorage.getItem('light-theme-enabled'))) { document.body.classList.add('light-theme'); themeToggle.setAttribute('checked', 'checked'); } diff --git a/new_cal/index.html b/new_cal/index.html index 2a64dfc..b5d80e5 100644 --- a/new_cal/index.html +++ b/new_cal/index.html @@ -21,8 +21,12 @@

JavaScript Calculator

You broke it!
- + + + + + diff --git a/new_cal/script.js b/new_cal/script.js index 507adeb..ebc7c77 100644 --- a/new_cal/script.js +++ b/new_cal/script.js @@ -115,6 +115,10 @@ TODO: resultNum = oldNum ** theNum; break; + case "ln": + resultNum = Math.log(oldNum); + break; + case "sin": resultNum = Math.sin(oldNum); break; @@ -126,6 +130,18 @@ TODO: case "tan": resultNum = Math.tan(oldNum); break; + + case "arcsin": + resultNum = Math.asin(oldNum); + break; + + case "arccos": + resultNum = Math.acos(oldNum); + break; + + case "arctan": + resultNum = Math.atan(oldNum); + break; // If equal is pressed without an operator, keep number and continue default: @@ -134,6 +150,7 @@ TODO: // If NaN or Infinity returned if (!isFinite(resultNum)) { + console.log("not finite"); if (!isInt(resultNum) || !isFloat(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators resultNum = "You broke it!"; } else { // If result is infinity, set off by dividing by zero diff --git a/new_cal/style.css b/new_cal/style.css index a2fa90c..2282da9 100644 --- a/new_cal/style.css +++ b/new_cal/style.css @@ -34,7 +34,7 @@ h1 { .calculator { font-size: 28px; margin: 0 auto; - width: 10em; + width: 16em; } .calculator::before, @@ -79,7 +79,7 @@ button { float: left; font: inherit; margin: 0.25em; - width: 2em; + width: 3em; height: 2em; transition: all 0.5s; } @@ -302,7 +302,7 @@ html.transition *:after { @media (min-width: 420px) { .calculator { - width: 12em; + width: 16em; } .viewer { diff --git a/new_cal/style.scss b/new_cal/style.scss index 58f2b78..fa97fe0 100644 --- a/new_cal/style.scss +++ b/new_cal/style.scss @@ -34,7 +34,7 @@ h1 { .calculator { font-size: 28px; margin: 0 auto; - width: 10em; + width: 16em; &::before, &::after { @@ -73,7 +73,7 @@ button { float: left; font: inherit; margin: 0.25em; - width: 2em; + width: 3em; height: 2em; transition: all 0.5s; diff --git a/script.js b/script.js index 507adeb..7e7a324 100644 --- a/script.js +++ b/script.js @@ -115,6 +115,10 @@ TODO: resultNum = oldNum ** theNum; break; + case "ln": + resultNum = Math.log(oldNum); + break; + case "sin": resultNum = Math.sin(oldNum); break; @@ -127,6 +131,18 @@ TODO: resultNum = Math.tan(oldNum); break; + case "arcsin": + resultNum = Math.asin(oldNum); + break; + + case "arccos": + resultNum = Math.acos(oldNum); + break; + + case "arctan": + resultNum = Math.atan(oldNum); + break; + // If equal is pressed without an operator, keep number and continue default: resultNum = theNum; diff --git a/style.css b/style.css index 9d746b4..df9f4ac 100644 --- a/style.css +++ b/style.css @@ -39,7 +39,7 @@ h1 { .calculator { font-size: 28px; margin: 0 auto; - width: 10em; + width: 16em; } .calculator::before, @@ -84,7 +84,7 @@ button { float: left; font: inherit; margin: 0.25em; - width: 2em; + width: 3em; height: 2em; transition: all 0.5s; border-radius: 6px; @@ -319,7 +319,7 @@ html.transition *:after { @media (min-width: 420px) { .calculator { - width: 12em; + width: 16em; } .viewer { diff --git a/style.scss b/style.scss index 58f2b78..b2dded0 100644 --- a/style.scss +++ b/style.scss @@ -34,7 +34,7 @@ h1 { .calculator { font-size: 28px; margin: 0 auto; - width: 10em; + width: 16em; &::before, &::after { @@ -73,7 +73,7 @@ button { float: left; font: inherit; margin: 0.25em; - width: 2em; + width: 3em; height: 2em; transition: all 0.5s; @@ -328,7 +328,7 @@ html.transition { @media (min-width: 420px) { .calculator { - width: 12em; + width: 16em; } .viewer {