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..10c235c --- /dev/null +++ b/root/app.js @@ -0,0 +1,59 @@ +function tempConvert() { + 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": //Takes the value of fahrenheit and converts to other scales + document.querySelector("#getFahrenheit").innerHTML = inputNum + " F"; + + document.querySelector("#getCelsius").innerHTML = + (inputNum - 32) * (5 / 9) + " C"; + + document.querySelector("#getKelvin").innerHTML = + (inputNum - 32) * (5 / 9) + 273.15 + " K"; + + document.querySelector("#getRankine").innerHTML = + inputNum + 459.67 + " R"; + break; + + case "Celsius": + document.querySelector("#getCelsius").innerHTML = inputNum + " C"; + + document.querySelector("#getFahrenheit").innerHTML = + inputNum * (9 / 5) + 32 + " F"; + + document.querySelector("#getKelvin").innerHTML = inputNum + 273.15 + " K"; + + document.querySelector("#getRankine").innerHTML = + inputNum + 9 / 5 + 491.67 + " R"; + break; + + case "Kelvin": + document.querySelector("#getCelsius").innerHTML = + inputNum - 273.15 + " C"; + + document.querySelector("#getFahrenheit").innerHTML = + (inputNum - 273.15) * (9 / 5) + 32 + " F"; + + document.querySelector("#getKelvin").innerHTML = inputNum + " K"; + + document.querySelector("#getRankine").innerHTML = inputNum * 1.8 + " R"; + break; + + case "Rankine": + document.querySelector("#getCelsius").innerHTML = + ((inputNum - 491.67) * 5) / 9 + " C"; + + document.querySelector("#getFahrenheit").innerHTML = + inputNum - 459.67 + " F"; + + document.querySelector("#getKelvin").innerHTML = + inputNum * (5 / 9) + " K"; + + document.querySelector("#getRankine").innerHTML = inputNum + " R"; + break; + + default: + console.log("Select a scale and enter a value"); + } +} diff --git a/root/index.html b/root/index.html new file mode 100644 index 0000000..393f70f --- /dev/null +++ b/root/index.html @@ -0,0 +1,46 @@ + + + + + + + Temp Converter + + + + + +

Temperature Scale Convertor

+
+
+ + + + + + + + + +
+
+ +
+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/root/style.css b/root/style.css new file mode 100644 index 0000000..562fc5b --- /dev/null +++ b/root/style.css @@ -0,0 +1,41 @@ +* { + /* 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; +} + +.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; +}