From c0f21773ac020ae8ec581dc8c7fe730cd326ded0 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Thu, 3 Dec 2020 13:26:20 -0500 Subject: [PATCH 01/40] Create index.html and app.js --- app.js | 1 + index.html | 14 ++++++++++++++ 2 files changed, 15 insertions(+) create mode 100644 app.js create mode 100644 index.html diff --git a/app.js b/app.js new file mode 100644 index 0000000..80bdedb --- /dev/null +++ b/app.js @@ -0,0 +1 @@ +console.log("helloooo"); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..403ff3b --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + + + + +

Hello World

+ + + + \ No newline at end of file From 99015a443150172423cd95e475aa2c10d4b74027 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Thu, 3 Dec 2020 13:30:05 -0500 Subject: [PATCH 02/40] Add styles.css --- app.js | 3 ++- index.html | 1 + styles.css | 3 +++ 3 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 styles.css diff --git a/app.js b/app.js index 80bdedb..6415516 100644 --- a/app.js +++ b/app.js @@ -1 +1,2 @@ -console.log("helloooo"); \ No newline at end of file +console.log("helloooo"); + diff --git a/index.html b/index.html index 403ff3b..20bdf8e 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..88a15cf --- /dev/null +++ b/styles.css @@ -0,0 +1,3 @@ +body { + background-color: seagreen; +} \ No newline at end of file From 6ae7a3c262960e35b6a82f68833ac24a317b4dc8 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Thu, 3 Dec 2020 13:54:01 -0500 Subject: [PATCH 03/40] Import and use Bootstrap --- index.html | 37 ++++++++++++++++++++++++++++++++++++- styles.css | 5 +++++ 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 20bdf8e..4faa204 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,46 @@ + + + -

Hello World

+ + + +
+ +
+
+

Temperature Scale Convertor

+
+
+ +
+
+
Fahrenheight
+
+ +
+
+
Value
+ +
+
+ +
+ +
+
+ +
+ + + diff --git a/styles.css b/styles.css index 88a15cf..4be85ec 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,8 @@ +.flex-center { + display: flex; + justify-content: center; +} + body { background-color: seagreen; } \ No newline at end of file From 8bacbbcc47e792dff2729b102933d099e907877c Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Thu, 3 Dec 2020 14:50:46 -0500 Subject: [PATCH 04/40] Set up layout with some styling --- index.html | 35 +++++++++++++++++++++++++++++------ styles.css | 5 +++++ 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 4faa204..ee8bc4f 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,14 @@ - + -
+
@@ -23,16 +23,22 @@

Temperature Scale Convertor

+
+
+
Scale
+
+
+
Value
+
+
+
Fahrenheight
-
-
Value
- -
+
@@ -40,6 +46,23 @@

Temperature Scale Convertor

+
+
+

Fahrenheit

+

212 F

+
+ +
+

Fahrenheit

+

212 F

+
+ +
+

Fahrenheit

+

212 F

+
+
+
diff --git a/styles.css b/styles.css index 4be85ec..6dc7926 100644 --- a/styles.css +++ b/styles.css @@ -3,6 +3,11 @@ justify-content: center; } +/* For mx-auto to center a div, the div must have a width. Use this class in that case. */ +.w-fit-content { + width: fit-content; +} + body { background-color: seagreen; } \ No newline at end of file From a00234c4fa1746fa61a8a0c916e7d8c82924e213 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Thu, 3 Dec 2020 14:56:36 -0500 Subject: [PATCH 05/40] Re-style second row --- index.html | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index ee8bc4f..9e0d689 100644 --- a/index.html +++ b/index.html @@ -23,29 +23,33 @@

Temperature Scale Convertor

-
-
-
Scale
-
-
-
Value
-
-
+
-
-
Fahrenheight
+
+

Scale

+
+ +
-
- +
+

Scale

+
+ +
-
- +
+

Scale

+
+ +
+ +

Fahrenheit

From be9a1622e2460575589971246fcbeafa77c42e36 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Thu, 3 Dec 2020 15:01:23 -0500 Subject: [PATCH 06/40] Fill values --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 9e0d689..26b4447 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,8 @@ - + @@ -34,14 +34,14 @@

Scale

-

Scale

+

Value

-

Scale

+

 

From 018707c6afdd69c1c5685aa6ff1d75c9c8162143 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Thu, 3 Dec 2020 15:05:30 -0500 Subject: [PATCH 07/40] Give container and all rows margin of 5rem on its y axis --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 26b4447..6ea193a 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,9 @@ -
+
-
+

Temperature Scale Convertor

@@ -25,7 +25,7 @@

Temperature Scale Convertor

-
+

Scale

@@ -50,7 +50,7 @@

 

-
+
@@ -51,18 +51,23 @@

 

- +
diff --git a/styles.css b/styles.css index b2a7903..10ae9db 100644 --- a/styles.css +++ b/styles.css @@ -12,6 +12,11 @@ body { background-color: seagreen; } +#calculate-btn { + width: 12rem; + padding: 0.15rem 0; +} + @media (max-width: 775px) { .container { min-width: 700px; From a53ea142642f68405d7f783812c9ae6dfbb1070b Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 4 Dec 2020 21:04:28 -0500 Subject: [PATCH 10/40] Add click event for button --- app.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app.js b/app.js index 6415516..e9cdc39 100644 --- a/app.js +++ b/app.js @@ -1,2 +1,4 @@ -console.log("helloooo"); - +const button = document.getElementById("calculate-btn"); +button.addEventListener("click", () => { + console.log("jfdksl"); +}); \ No newline at end of file From 07ada3b31388a54ec9deb3df9881edcf5b2080a5 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 4 Dec 2020 21:12:29 -0500 Subject: [PATCH 11/40] Add Bootstrap dropdown menu --- app.js | 5 ++++- index.html | 18 ++++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index e9cdc39..be30399 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,7 @@ const button = document.getElementById("calculate-btn"); button.addEventListener("click", () => { console.log("jfdksl"); -}); \ No newline at end of file +}); + +const dropDownMenu = document.getElementById("dropdownMenu2"); +dropDownMenu.innerText = "Fahrenheit"; \ No newline at end of file diff --git a/index.html b/index.html index 6a88e88..e682490 100644 --- a/index.html +++ b/index.html @@ -28,8 +28,16 @@

Temperature Scale Convertor

Scale

-
- +
+ +
+ + + + +
@@ -78,7 +86,13 @@

Rankine

+ + + + \ No newline at end of file From aee2562830ac1c7fc7fb4cd13953d53e46c5b94c Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 4 Dec 2020 21:19:16 -0500 Subject: [PATCH 12/40] Set width and padding for dropdown --- index.html | 4 ++-- styles.css | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index e682490..9a3f3bf 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@

Temperature Scale Convertor

Scale

-
@@ -51,7 +51,7 @@

Value

 

-
diff --git a/styles.css b/styles.css index 10ae9db..4d1e2f4 100644 --- a/styles.css +++ b/styles.css @@ -12,8 +12,11 @@ body { background-color: seagreen; } -#calculate-btn { +.input-width { width: 12rem; +} + +.input-padding { padding: 0.15rem 0; } From c8d8aa03f5db801e017339999fdeeb270b536db1 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 4 Dec 2020 21:39:18 -0500 Subject: [PATCH 13/40] Add event listener to all dropdown items --- app.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app.js b/app.js index be30399..c1e91bd 100644 --- a/app.js +++ b/app.js @@ -4,4 +4,12 @@ button.addEventListener("click", () => { }); const dropDownMenu = document.getElementById("dropdownMenu2"); -dropDownMenu.innerText = "Fahrenheit"; \ No newline at end of file +dropDownMenu.innerText = "Fahraenheit"; + + +const dropDownItems = document.getElementsByClassName("dropdown-item"); +for (let i = 0; i < dropDownItems.length; i++) { + dropDownItems[i].addEventListener("click", (event) => { + console.log(event.target); + }) +} \ No newline at end of file From f6fba55b0f405260fdd0cf512d21c4b03fdc7772 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 4 Dec 2020 21:57:17 -0500 Subject: [PATCH 14/40] Convert Farenheit to celcius --- app.js | 21 ++++++++++++++++----- index.html | 4 ++-- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index c1e91bd..26acd7b 100644 --- a/app.js +++ b/app.js @@ -1,15 +1,26 @@ const button = document.getElementById("calculate-btn"); button.addEventListener("click", () => { - console.log("jfdksl"); + const valueElement = document.getElementById("value"); + const celcius = calculate(valueElement.value); + setValue(celcius); }); -const dropDownMenu = document.getElementById("dropdownMenu2"); -dropDownMenu.innerText = "Fahraenheit"; - - const dropDownItems = document.getElementsByClassName("dropdown-item"); for (let i = 0; i < dropDownItems.length; i++) { dropDownItems[i].addEventListener("click", (event) => { console.log(event.target); }) +} + +function setDropDown() { + const dropDownMenu = document.getElementById("dropdownMenu2"); + dropDownMenu.innerText = "Fahraenheit"; +} + +function calculate(value) { + return (value - 32) * 5/9; +} + +function setValue() { + console.log(celcius); } \ No newline at end of file diff --git a/index.html b/index.html index 9a3f3bf..7e39d7c 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@

Temperature Scale Convertor

Scale

@@ -44,7 +44,7 @@

Scale

Value

- +
From bea358835dd4c4f8de0df6890cbe9294c2e00e66 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 4 Dec 2020 22:00:19 -0500 Subject: [PATCH 15/40] Add event listener for enter key. Prints ayyoo --- app.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app.js b/app.js index 26acd7b..96477bc 100644 --- a/app.js +++ b/app.js @@ -5,6 +5,11 @@ button.addEventListener("click", () => { setValue(celcius); }); +document.body.addEventListener("keypress", (event) => { + if (event.key === "Enter") + console.log("ayyoo"); +}); + const dropDownItems = document.getElementsByClassName("dropdown-item"); for (let i = 0; i < dropDownItems.length; i++) { dropDownItems[i].addEventListener("click", (event) => { From 896a76111980de159837f18135adf38084d629ed Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 4 Dec 2020 22:16:34 -0500 Subject: [PATCH 16/40] Create enum for temperature units --- app.js | 56 ++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 44 insertions(+), 12 deletions(-) diff --git a/app.js b/app.js index 96477bc..59e45af 100644 --- a/app.js +++ b/app.js @@ -1,31 +1,63 @@ const button = document.getElementById("calculate-btn"); +const dropDownItems = document.getElementsByClassName("dropdown-item"); + +// Enum +let Temperature = { + Fahraenheit: 1, + Celcius: 2, + Kelvin: 3, + Rankine: 4, +} + button.addEventListener("click", () => { - const valueElement = document.getElementById("value"); - const celcius = calculate(valueElement.value); - setValue(celcius); + calculate(); }); document.body.addEventListener("keypress", (event) => { - if (event.key === "Enter") - console.log("ayyoo"); + if (event.key === "Enter") { + calculate(); + } }); -const dropDownItems = document.getElementsByClassName("dropdown-item"); for (let i = 0; i < dropDownItems.length; i++) { dropDownItems[i].addEventListener("click", (event) => { console.log(event.target); }) } -function setDropDown() { - const dropDownMenu = document.getElementById("dropdownMenu2"); - dropDownMenu.innerText = "Fahraenheit"; + + + +function calculate() { + const valueElement = document.getElementById("value"); + const celcius = convertToFahrenheit(Temperature.Fahraenheit, valueElement.value); + setValue(celcius); +} + +function convertToFahrenheit(temperature, value) { + if (temperature === Temperature.Fahraenheit) { + return (value - 32) * 5/9; + } + console.log(Temperature); } -function calculate(value) { - return (value - 32) * 5/9; +function convertToCelsius() { + } -function setValue() { +function convertToKelvin() { + +} + +function convertToRankine() { + +} + +function setValue(celcius) { console.log(celcius); +} + +function setDropDown() { + const dropDownMenu = document.getElementById("dropdownMenu2"); + dropDownMenu.innerText = "Fahraenheit"; } \ No newline at end of file From 7fa295274694d167f45d54a55c858c9abfa0237f Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 4 Dec 2020 22:27:13 -0500 Subject: [PATCH 17/40] Get conversion type from Scale dropdown and pass to function --- app.js | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/app.js b/app.js index 59e45af..2f4f311 100644 --- a/app.js +++ b/app.js @@ -1,13 +1,16 @@ +let Temperature = { + Fahraenheit: "Fahrenheit", + Celcius: "Celcius", + Kelvin: "Kelvin", + Rankine: "Rankine", +} + const button = document.getElementById("calculate-btn"); +const dropDown = document.getElementById("dropdownMenu2"); const dropDownItems = document.getElementsByClassName("dropdown-item"); -// Enum -let Temperature = { - Fahraenheit: 1, - Celcius: 2, - Kelvin: 3, - Rankine: 4, -} + + button.addEventListener("click", () => { calculate(); @@ -30,15 +33,23 @@ for (let i = 0; i < dropDownItems.length; i++) { function calculate() { const valueElement = document.getElementById("value"); - const celcius = convertToFahrenheit(Temperature.Fahraenheit, valueElement.value); + const convertFrom = dropDown.innerText.trim(); + const celcius = convertToFahrenheit(convertFrom, valueElement.value); setValue(celcius); } function convertToFahrenheit(temperature, value) { if (temperature === Temperature.Fahraenheit) { return (value - 32) * 5/9; + } else if (temperature === Temperature.Celcius) { + + } else if (temperature === Temperature.Kelvin) { + + } else if (temperature === Temperature.Rankine) { + + } else { + console.error("Could not find conversion"); } - console.log(Temperature); } function convertToCelsius() { @@ -58,6 +69,5 @@ function setValue(celcius) { } function setDropDown() { - const dropDownMenu = document.getElementById("dropdownMenu2"); - dropDownMenu.innerText = "Fahraenheit"; + dropDown.innerText = "Fahraenheit"; } \ No newline at end of file From c776edd119038ff22b2db409dffed5f421f4a3ae Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 4 Dec 2020 22:37:09 -0500 Subject: [PATCH 18/40] Clean up function --- app.js | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/app.js b/app.js index 2f4f311..a08fadf 100644 --- a/app.js +++ b/app.js @@ -1,6 +1,6 @@ -let Temperature = { +let Temperatures = { Fahraenheit: "Fahrenheit", - Celcius: "Celcius", + Celsius: "Celsius", Kelvin: "Kelvin", Rankine: "Rankine", } @@ -24,7 +24,8 @@ document.body.addEventListener("keypress", (event) => { for (let i = 0; i < dropDownItems.length; i++) { dropDownItems[i].addEventListener("click", (event) => { - console.log(event.target); + //console.log(event.target); + setDropDown(event.target); }) } @@ -35,21 +36,18 @@ function calculate() { const valueElement = document.getElementById("value"); const convertFrom = dropDown.innerText.trim(); const celcius = convertToFahrenheit(convertFrom, valueElement.value); - setValue(celcius); + updateTempDisplays(celcius); } function convertToFahrenheit(temperature, value) { - if (temperature === Temperature.Fahraenheit) { - return (value - 32) * 5/9; - } else if (temperature === Temperature.Celcius) { - - } else if (temperature === Temperature.Kelvin) { - - } else if (temperature === Temperature.Rankine) { - - } else { - console.error("Could not find conversion"); + if (temperature === Temperatures.Celsius) { + return (value - 32) * 5 / 9; + } else if (temperature === Temperatures.Kelvin) { + return (value - 32) / 1.8; + } else if (temperature === Temperatures.Rankine) { + return -1; } + console.error("Could not find conversion"); } function convertToCelsius() { @@ -64,10 +62,10 @@ function convertToRankine() { } -function setValue(celcius) { +function updateTempDisplays(celcius) { console.log(celcius); } -function setDropDown() { - dropDown.innerText = "Fahraenheit"; +function setDropDown(selectedItem) { + dropDown.innerText = selectedItem.innerText; } \ No newline at end of file From 01bb95337917b687c779ea5784c0ca657081daaf Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Fri, 4 Dec 2020 22:49:52 -0500 Subject: [PATCH 19/40] Web page now shows numbers upon conversion --- app.js | 22 +++++++++++++--------- index.html | 8 ++++---- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/app.js b/app.js index a08fadf..6e37bb8 100644 --- a/app.js +++ b/app.js @@ -38,13 +38,14 @@ function calculate() { const celcius = convertToFahrenheit(convertFrom, valueElement.value); updateTempDisplays(celcius); } - -function convertToFahrenheit(temperature, value) { - if (temperature === Temperatures.Celsius) { - return (value - 32) * 5 / 9; - } else if (temperature === Temperatures.Kelvin) { - return (value - 32) / 1.8; - } else if (temperature === Temperatures.Rankine) { +//return (degrees - 32) * 5 / 9; + +function convertToFahrenheit(convertFrom, degrees) { + if (convertFrom === Temperatures.Celsius) { + return (degrees - 32) / 1.8; + } else if (convertFrom === Temperatures.Kelvin) { + return ((degrees - 32) / 1.8) + 273.15; + } else if (convertFrom === Temperatures.Rankine) { return -1; } console.error("Could not find conversion"); @@ -62,8 +63,11 @@ function convertToRankine() { } -function updateTempDisplays(celcius) { - console.log(celcius); +function updateTempDisplays(fara, celsius, kelvin, rankine) { + document.getElementById("fahrenheit-num").innerText = fara; + document.getElementById("celsius-num").innerText = fara; + document.getElementById("kelvin-num").innerText = fara; + document.getElementById("rankine-num").innerText = fara; } function setDropDown(selectedItem) { diff --git a/index.html b/index.html index 7e39d7c..e6c0543 100644 --- a/index.html +++ b/index.html @@ -63,22 +63,22 @@

 

-
+

Temperature Scale Convertor

+
+
+

Press F, C, K or R keys to change scale type. Enter to submit.

+
+
+
diff --git a/styles.css b/styles.css index 4d1e2f4..de51ced 100644 --- a/styles.css +++ b/styles.css @@ -8,10 +8,6 @@ width: fit-content; } -body { - background-color: seagreen; -} - .input-width { width: 12rem; } @@ -20,6 +16,10 @@ body { padding: 0.15rem 0; } +body { + background-color: seagreen; +} + @media (max-width: 775px) { .container { min-width: 700px; From f074155e43d3bb19ad829d03a85eeac4c009f8bf Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Sat, 5 Dec 2020 00:04:58 -0500 Subject: [PATCH 27/40] Change spacing and background colors --- index.html | 8 ++++---- styles.css | 10 +++++++++- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index db83136..fd76fe8 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,9 @@ -
+
-
+

Temperature Scale Convertor

@@ -57,7 +57,7 @@

Value

 

-
@@ -66,7 +66,7 @@

 

-
+
-
+

Temperature Scale Convertor

diff --git a/styles.css b/styles.css index 7f86ef0..4ee42a1 100644 --- a/styles.css +++ b/styles.css @@ -28,8 +28,9 @@ body { background-color: #41b675; } -.border { +.rounded-border { border-radius: 3rem; + border-style: none; } @media (max-width: 775px) { From 5fcbce12c1ec6b4ccd3018bfe4427b96a7b98087 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Sat, 5 Dec 2020 00:40:15 -0500 Subject: [PATCH 36/40] Refactor and add comments --- app.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/app.js b/app.js index 3bfe28b..25b2781 100644 --- a/app.js +++ b/app.js @@ -3,17 +3,26 @@ const dropDown = document.getElementById("dropdownMenu2"); const dropDownItems = document.getElementsByClassName("dropdown-item"); // Object for spelling and to ensure there is always a space after. This makes the arrow look nicer in the dropdown menu. -let Temperatures = { +const Temperatures = { Fahraenheit: "Fahrenheit ", Celsius: "Celsius ", Kelvin: "Kelvin ", Rankine: "Rankine ", } +// Give each drop down item an event listener. When clicked, they will update the main text of the dropdown. +for (let i = 0; i < dropDownItems.length; i++) { + dropDownItems[i].addEventListener("click", (event) => { + setDropDownText(event.target.innerText); + }) +} + +// Calculate button. button.addEventListener("click", () => { calculate(); }); +// Allows keyboard shortcuts to quickly change the current dropdown option. Or to calculate. document.body.addEventListener("keypress", (event) => { if (event.key === "Enter") { calculate(); @@ -28,11 +37,7 @@ document.body.addEventListener("keypress", (event) => { } }); -for (let i = 0; i < dropDownItems.length; i++) { - dropDownItems[i].addEventListener("click", (event) => { - setDropDownText(event.target.innerText); - }) -} + From 5c237367c096161e1ac526d0d7ba19bf7e44956d Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Sat, 5 Dec 2020 01:31:17 -0500 Subject: [PATCH 37/40] Fix glitch where dropdown no longer working thanks to the added space in the dropdown names --- app.js | 6 +++--- index.html | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index 25b2781..0d3b900 100644 --- a/app.js +++ b/app.js @@ -44,13 +44,13 @@ document.body.addEventListener("keypress", (event) => { function setDropDownText(dropDownOption) { - dropDown.innerText = dropDownOption; + dropDown.innerText = dropDownOption + " "; } function calculate() { - const valueInputElement = document.getElementById("value"); + const userInputElement = document.getElementById("value"); const convertFrom = dropDown.innerText; - const degrees = parseFloat(valueInputElement.value); + const degrees = parseFloat(userInputElement.value); const fara = convertToFahrenheit(convertFrom, degrees); const celsius = convertToCelsius(convertFrom, degrees); diff --git a/index.html b/index.html index 1c22e4b..6cce808 100644 --- a/index.html +++ b/index.html @@ -39,10 +39,10 @@

Scale

Fahrenheit
- - - - + + + +
From a986e3ae2790c2a0c1dd08bc8abd4806234de909 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Sat, 5 Dec 2020 14:13:09 -0500 Subject: [PATCH 38/40] Put isNaN() check to make sure user inputted a number --- app.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app.js b/app.js index 0d3b900..28ce50d 100644 --- a/app.js +++ b/app.js @@ -51,6 +51,8 @@ function calculate() { const userInputElement = document.getElementById("value"); const convertFrom = dropDown.innerText; const degrees = parseFloat(userInputElement.value); + if (isNaN(degrees)) + return; const fara = convertToFahrenheit(convertFrom, degrees); const celsius = convertToCelsius(convertFrom, degrees); From aaefa122fba8a23ad48123eb45d091a40f951d24 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Sat, 5 Dec 2020 14:17:42 -0500 Subject: [PATCH 39/40] Add comments and refactor --- app.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index 28ce50d..18e2f21 100644 --- a/app.js +++ b/app.js @@ -44,22 +44,25 @@ document.body.addEventListener("keypress", (event) => { function setDropDownText(dropDownOption) { + // For some reason, innerText passed to this function is trimmed. So need to add space again. dropDown.innerText = dropDownOption + " "; } +// Use innertext of dropdown menu to determine what to convert from (from Fahrenheit, from Celsius, etc). function calculate() { const userInputElement = document.getElementById("value"); const convertFrom = dropDown.innerText; const degrees = parseFloat(userInputElement.value); - if (isNaN(degrees)) - return; - const fara = convertToFahrenheit(convertFrom, degrees); - const celsius = convertToCelsius(convertFrom, degrees); - const kelvin = convertToKelvin(convertFrom, degrees); - const rankine = convertToRankine(convertFrom, degrees); + // Only calculate if user inputted a number. + if (!isNaN(degrees)) { + const fara = convertToFahrenheit(convertFrom, degrees); + const celsius = convertToCelsius(convertFrom, degrees); + const kelvin = convertToKelvin(convertFrom, degrees); + const rankine = convertToRankine(convertFrom, degrees); - updateTemperatureDisplays(fara, celsius, kelvin, rankine); + updateTemperatureDisplays(fara, celsius, kelvin, rankine); + } } function updateTemperatureDisplays(fara, celsius, kelvin, rankine) { From f2876c6aa704146a5ffba47006da2f2dc8863297 Mon Sep 17 00:00:00 2001 From: michael-mcmasters Date: Sat, 5 Dec 2020 14:35:06 -0500 Subject: [PATCH 40/40] Alert user if they do not input a number --- app.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/app.js b/app.js index 18e2f21..6c28750 100644 --- a/app.js +++ b/app.js @@ -53,16 +53,17 @@ function calculate() { const userInputElement = document.getElementById("value"); const convertFrom = dropDown.innerText; const degrees = parseFloat(userInputElement.value); + if (isNaN(degrees)) { + alert("That is not a number"); + return; + } - // Only calculate if user inputted a number. - if (!isNaN(degrees)) { - const fara = convertToFahrenheit(convertFrom, degrees); - const celsius = convertToCelsius(convertFrom, degrees); - const kelvin = convertToKelvin(convertFrom, degrees); - const rankine = convertToRankine(convertFrom, degrees); + const fara = convertToFahrenheit(convertFrom, degrees); + const celsius = convertToCelsius(convertFrom, degrees); + const kelvin = convertToKelvin(convertFrom, degrees); + const rankine = convertToRankine(convertFrom, degrees); - updateTemperatureDisplays(fara, celsius, kelvin, rankine); - } + updateTemperatureDisplays(fara, celsius, kelvin, rankine); } function updateTemperatureDisplays(fara, celsius, kelvin, rankine) {