From be27ef2afcd9fb96389b70d84a44f84f9b84d525 Mon Sep 17 00:00:00 2001 From: AntsmithCode Date: Wed, 6 Jan 2021 22:51:03 -0500 Subject: [PATCH 1/4] App-Final --- root/Psuedo.md | 26 ++++++++++++++++++++++++++ root/app.js | 7 +++++++ root/index.html | 34 ++++++++++++++++++++++++++++++++++ root/style.css | 27 +++++++++++++++++++++++++++ 4 files changed, 94 insertions(+) create mode 100644 root/Psuedo.md create mode 100644 root/app.js create mode 100644 root/index.html create mode 100644 root/style.css diff --git a/root/Psuedo.md b/root/Psuedo.md new file mode 100644 index 0000000..f294338 --- /dev/null +++ b/root/Psuedo.md @@ -0,0 +1,26 @@ +# Html Structure + + -Set Temperature Scale as a header

+ -Add strong tags to header + + -Set Fahrenheit as a paragraph element

+ -Set value as an input element / input type numbers + -Set calculate as a button / input type submit ~ may need to change later + + -Set Celsius as a paragraph element

with strong tags and a class + +# CSS + + -Add a solid border around all elements + - Center Header + - Align fahrenheit, value input and calculate button in a row. Center + - Set Button to blue + - Center Celsius + +# Javascript + +- Read the value inside of input box +- Grab the value inside of input +- Add value to the formula for celsius +- Output the value next to celsius element +- diff --git a/root/app.js b/root/app.js new file mode 100644 index 0000000..b498c26 --- /dev/null +++ b/root/app.js @@ -0,0 +1,7 @@ +function tempConvert() { + let celsiusCalc = parseFloat(document.getElementById("degrees").value); //onchange Event can be applied as alternative + + document.getElementById("getCelsius").innerHTML = Math.round( + celsiusCalc * (9 / 5) + 32 + ); +} diff --git a/root/index.html b/root/index.html new file mode 100644 index 0000000..e0b74ca --- /dev/null +++ b/root/index.html @@ -0,0 +1,34 @@ + + + + + + + Temp Converter + + + + + +

Temperature Scale Convertor

+
+
+ +

Fahrenheit

+ + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/root/style.css b/root/style.css new file mode 100644 index 0000000..f131fc7 --- /dev/null +++ b/root/style.css @@ -0,0 +1,27 @@ +* { + /* Set All Non Selectors To 0 Padding & Margin */ + padding: 0; + margin: 0; +} + +h1 { + text-align: center; +} + +body { + border-style: solid; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + justify-content: space-evenly; +} + +.celsius { + display: flex; + justify-content: center; + align-items: center; +} From 89f4270c81fe51f4c71df29b0c8390f6b229bbc9 Mon Sep 17 00:00:00 2001 From: AntsmithCode Date: Thu, 7 Jan 2021 22:41:47 -0500 Subject: [PATCH 2/4] (Feature) Added Scale Options --- root/app.js | 2 +- root/index.html | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/root/app.js b/root/app.js index b498c26..dfbf3fb 100644 --- a/root/app.js +++ b/root/app.js @@ -1,7 +1,7 @@ function tempConvert() { let celsiusCalc = parseFloat(document.getElementById("degrees").value); //onchange Event can be applied as alternative - document.getElementById("getCelsius").innerHTML = Math.round( +switch () document.getElementById("getCelsius").innerHTML = Math.round( celsiusCalc * (9 / 5) + 32 ); } diff --git a/root/index.html b/root/index.html index e0b74ca..3aefbd4 100644 --- a/root/index.html +++ b/root/index.html @@ -14,8 +14,13 @@

Temperature Scale Convertor


- -

Fahrenheit

+ + From 22a43ba0e3c88af774c1e10337daab917a944ae7 Mon Sep 17 00:00:00 2001 From: AntsmithCode Date: Thu, 7 Jan 2021 23:28:55 -0500 Subject: [PATCH 3/4] (APP) Added Switch Function Case Fahrenheit and Tested-Success --- root/app.js | 24 ++++++++++++++++++++---- root/index.html | 4 ++-- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/root/app.js b/root/app.js index dfbf3fb..ce4a9ef 100644 --- a/root/app.js +++ b/root/app.js @@ -1,7 +1,23 @@ function tempConvert() { - let celsiusCalc = parseFloat(document.getElementById("degrees").value); //onchange Event can be applied as alternative + let scaleCalc = document.getElementById("selectScale").value; //Grabs the value of + let inputNum = parseFloat(document.getElementById("inputValue").value); -switch () document.getElementById("getCelsius").innerHTML = Math.round( - celsiusCalc * (9 / 5) + 32 - ); + switch (scaleCalc) { + case "Fahrenheit": + document.getElementById("getCelsius").innerHTML = Math.round( + inputNum * (9 / 5) + 32 + ); + break; + case "Celsius": + + + ); + break; + case "Kelvin": + + + + break; + case "Rankine": + } } diff --git a/root/index.html b/root/index.html index 3aefbd4..b4af90c 100644 --- a/root/index.html +++ b/root/index.html @@ -22,9 +22,9 @@

Temperature Scale Convertor

- + - + From 2c8e681d516a2ab4c7bfd003ec6ec27338c98471 Mon Sep 17 00:00:00 2001 From: AntsmithCode Date: Fri, 8 Jan 2021 00:32:57 -0500 Subject: [PATCH 4/4] (APP) Added Remaing Formulas For Converting Fahrenheit --- root/app.js | 28 +++++++++++++--------------- root/index.html | 9 ++++++++- root/style.css | 16 +++++++++++++++- 3 files changed, 36 insertions(+), 17 deletions(-) diff --git a/root/app.js b/root/app.js index ce4a9ef..85318a9 100644 --- a/root/app.js +++ b/root/app.js @@ -1,23 +1,21 @@ function tempConvert() { - let scaleCalc = document.getElementById("selectScale").value; //Grabs the value of - let inputNum = parseFloat(document.getElementById("inputValue").value); + let scaleCalc = document.querySelector("#selectScale").value; //Takes the value of scale selector + let inputNum = parseFloat(document.querySelector("#inputValue").value); //Takes the value of user input switch (scaleCalc) { - case "Fahrenheit": - document.getElementById("getCelsius").innerHTML = Math.round( - inputNum * (9 / 5) + 32 - ); - break; - case "Celsius": + case "Fahrenheit": //Takes the value of fahrenheit and converts to other scales + document.querySelector("#getCelsius").innerHTML = + Math.round(inputNum * (9 / 5) + 32) + " C"; - - ); - break; - case "Kelvin": + document.querySelector("#getFahrenheit").innerHTML = + Math.round(inputNum) + " F"; + + document.querySelector("#getKelvin").innerHTML = + (inputNum - 32) * (5 / 9) + 273.15 + " K"; - - + document.querySelector("#getRankine").innerHTML = + inputNum + 459.67 + " R"; break; - case "Rankine": + //case "Celsius": } } diff --git a/root/index.html b/root/index.html index b4af90c..393f70f 100644 --- a/root/index.html +++ b/root/index.html @@ -30,7 +30,14 @@

Temperature Scale Convertor


- + +
+ + + + +
+ diff --git a/root/style.css b/root/style.css index f131fc7..562fc5b 100644 --- a/root/style.css +++ b/root/style.css @@ -20,8 +20,22 @@ body { justify-content: space-evenly; } -.celsius { +.conversions { display: flex; + flex-direction: row; justify-content: center; align-items: center; + justify-content: space-evenly; +} + +/* Chrome, Safari, Edge, Opera Remove Arrows and Spinners */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox Remove Arrows and Spinners*/ +#inputValue { + -moz-appearance: textfield; }