diff --git a/index.html b/index.html new file mode 100644 index 0000000..ff27fa5 --- /dev/null +++ b/index.html @@ -0,0 +1,49 @@ + + + + + + + + +
+

Temperature Scale Convertor

+ +
+ Scale + Value +
+ +
+ + + +
+ +
+ Celsius + Fahrenheit + Kelvin + Rankine +
+ +
+ C + F + K + R +
+ + +
+ + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..93d849a --- /dev/null +++ b/main.js @@ -0,0 +1,136 @@ +let selectedScale = document.getElementById("options") +let celsiusText = document.querySelector("#outputC") +let fahrenheitText = document.querySelector("#outputF") +let kelvinText = document.querySelector("#outputK") +let rankineText = document.querySelector("#outputR") + +document.querySelector("#button").addEventListener('click',clickMe) + +// Fahrenheit Conversions +function fahrenheitConversion(){ + let fahrenheit = document.getElementById("textbox").value; + fahrenheitText.innerHTML = fahrenheit + " F" +} + +function celsiusConversion(){ + let fahrenheitIn = document.querySelector("#textbox").value + let product = (parseInt(fahrenheitIn) -32) * 5/9 + celsiusText.innerHTML = product.toFixed(2) + ' C' + +} + +function kelvinConversion(){ + let fahrenheitIn = document.querySelector("#textbox").value + let product = (parseInt(fahrenheitIn) -32) * 5/9 +273.15; + kelvinText.innerHTML = product.toFixed(2) + ' K' + +} + +function rankineConversion(){ + let fahrenheitIn = document.querySelector("#textbox").value + let product = parseInt(fahrenheitIn) + 459.67 + rankineText.innerHTML = product.toFixed(2) + ' R' +} + +// Celsius Conversions +function celsiusVal(){ + let celsius = document.getElementById("textbox").value; + celsiusText.innerHTML = celsius + " C"; +} + +function celsiusToFahrenheit(){ + let celsiusIn = document.querySelector("#textbox").value + let product = (parseInt(celsiusIn) * 9/5) + 32 + fahrenheitText.innerHTML = product.toFixed(2) + ' F' +} + +function celsiusToKelvin(){ + let celsiusIn = document.querySelector("#textbox").value + let product = parseInt(celsiusIn) + 273.15 + kelvinText.innerHTML = product.toFixed(2) + ' K' +} + +function celsiusToRankine(){ + let celsiusIn = document.querySelector("#textbox").value + let product = parseInt(celsiusIn) * 9/5 + 491.67 + rankineText.innerHTML = product.toFixed(2) + ' R' +} + + +//Kelvin Conversions +function kelvinVal(){ + let kelvin = document.getElementById("textbox").value; + kelvinText.innerHTML = kelvin + " K"; +} + +function kelvinToFahrenheit(){ + let kelvinIn = document.querySelector("#textbox").value + let product = (parseInt(kelvinIn) - 273.15 ) * 9/5 + 32 + fahrenheitText.innerHTML = product.toFixed(2) + ' F' +} + +function kelvinToCelsius(){ + let kelvinIn = document.querySelector("#textbox").value + let product = parseInt(kelvinIn) - 273.15 + celsiusText.innerHTML = product.toFixed(2) + ' C' +} + +function kelvinToRankine(){ + let kelvinIn = document.querySelector("#textbox").value + let product = (parseInt(kelvinIn) * 1.8) + rankineText.innerHTML = product.toFixed(2) + ' R' +} + +//Rankine Conversions +function rankineVal(){ + let celsius = document.getElementById("textbox").value; + rankineText.innerHTML = celsius + " R"; +} + +function rankineToFahrenheit(){ + let rankineIn = document.querySelector("#textbox").value + let product = parseInt(rankineIn) - 459.67 + fahrenheitText.innerHTML = product.toFixed(2) + ' F' +} +function rankineToCelsius(){ + let rankineIn = document.querySelector("#textbox").value + let product = (parseInt(rankineIn) - 491.67) * 5/9 + celsiusText.innerHTML = product.toFixed(2) + ' C' +} + +function rankineToKelvin(){ + let rankineIn = document.querySelector("#textbox").value + let product = (parseInt(rankineIn) * 5/9) + kelvinText.innerHTML = product.toFixed(2) + ' K' +} + + + +function clickMe(){ + if(selectedScale.value === "Fahrenheit"){ + celsiusConversion(); + fahrenheitConversion(); + kelvinConversion(); + rankineConversion(); + } if (selectedScale.value === "Celsius"){ + celsiusVal(); + celsiusToFahrenheit(); + celsiusToKelvin(); + celsiusToRankine(); + } else if (selectedScale.value === "Kelvin"){ + kelvinVal(); + kelvinToFahrenheit(); + kelvinToCelsius(); + kelvinToRankine(); + } else if ( selectedScale.value === "Rankine"){ + rankineVal(); + rankineToFahrenheit(); + rankineToCelsius(); + rankineToKelvin(); + } +} + +function getSelectedScale(){ + let selectedScale = document.getElementById("options").value; + console.log(selectedScale) +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..6e2b760 --- /dev/null +++ b/styles.css @@ -0,0 +1,79 @@ +#scale { +width: 720px; +height: 420px; +margin:auto; +text-align:center; +border: 2px solid black; +} + +#heading{ +font-size: 25px; +margin-left: auto; +margin-bottom:60px; +} + +#topRow{ +text-align: center; +} + +#centerRow{ +display:flex; +justify-content: space-around; +align-items: baseline; +font-size: 20px; +padding-top:5px; +} + +#bottomRow{ +display: flex; +justify-content: space-evenly; +margin-bottom: 15px; +} + +#outputResults{ +display:flex; +justify-content: space-around; +} + +#button { +width: 150px; +margin-right: 50px; +background-color: #bfe6ff; +border-color: #bfe6ff; +} + +#textbox { +width: 150px; +margin-left: 10px; +} + +#options { +margin-bottom: 150px ; +margin-top: -20px; +margin-left: 40px; +width: 150px; +} +/* Words in topRow */ +#value{ +margin-right: 230px; + } + +#scaleword{ +margin-right: 175px; +} + +/* Output */ +#outputC{ +margin-left: 50px; +} + +#outputR{ +margin-right: 60px; +} +#outputK{ +margin-right: -15px; +} + +#outputF{ +margin-left: 10px; +}