diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..72a9d2a Binary files /dev/null and b/.DS_Store differ diff --git a/img/index.html b/img/index.html new file mode 100644 index 0000000..a9edfe6 --- /dev/null +++ b/img/index.html @@ -0,0 +1,55 @@ + + + + + + + + + +
+

Temperature Scale Converter

+
+
+ + +
+
+

Scale

+

Value

+ +
+
+
+ +

Fahrenheit

+
F
+ +

Celsius

+
C
+ +

Kelvin

+
K
+ +

Rankine

+
R
+ +
+
+
+ +
+ +
+ + + + + + + diff --git a/img/mockup.js b/img/mockup.js new file mode 100644 index 0000000..9af1508 --- /dev/null +++ b/img/mockup.js @@ -0,0 +1,167 @@ + +let celsiusText = document.querySelector('#outputC') +let fahrenheitText = document.querySelector('#outputF') +let kelvinText = document.querySelector('#outputK') +let rankineText = document.querySelector('#outputR') +let scaleType = document.querySelector('#scale') + + +function findCelsius(){ + let fahrenheit = document.getElementById("textbox").value; + let celsius; + if(fahrenheit != ''){ + console.log({fahrenheit}); + const parsedF = parseFloat(fahrenheit); + console.log({parsedF}) + celsius = (parseFloat(fahrenheit) - 32) * 5/9; + celsius = celsius.toFixed(2) + " C"; + console.log(typeof fahrenheit); + document.getElementById("outputC").innerHTML = celsius; + } +} + +function findKelvin(){ + let fahrenheit = document.getElementById("textbox").value; + let kelvin; + if(fahrenheit != ''){ + console.log({fahrenheit}); + const parsedF = parseFloat(fahrenheit); + console.log({parsedF}) + kelvin = (parseFloat(fahrenheit) - 32) * 5/9 + 273.15; + kelvin = kelvin.toFixed(2)+ " K"; + console.log(typeof fahrenheit); + document.getElementById("outputK").innerHTML = kelvin; + } +} + +function findRankine(){ + let fahrenheit = document.getElementById("textbox").value; + let rankine; + if(fahrenheit != ''){ + console.log({fahrenheit}); + const parsedF = parseFloat(fahrenheit); + console.log({parsedF}) + rankine = (parseFloat(fahrenheit) + 459.67); + rankine = rankine.toFixed(2)+ " R"; + console.log(typeof fahrenheit); + document.getElementById("outputR").innerHTML = rankine; + } +} + + +function findFahrenheit(){ + let fahrenheit = document.getElementById("textbox").value; + document.getElementById("outputF").innerHTML = fahrenheit + " F"; +} + + +function celsisusToCelsius () { + let celsius = document.querySelector("textbox").value; + document.getElementById("outputC").innerHTML = celsius + " C"; +} + + +function celsiusToFahrenheit () { + let celsiusInput = document.querySelector("textbox").value + let product = (parseInt(celsiusInput) * 9/5) + 32 + fahrenheitText.innerHTML = product.toFixed(2) + ' F' +} + +function celsiusToKelvin () { + let celsiusInput = document.querySelector("textbox").value + let product = (parseInt(celsiusInput + 273.15)) + kelvinText.innerHTML = product.toFixed(2) + ' K' +} + +function celsiusToRankine () { + let celsiusInput = document.querySelector("textbox").value + let product = (parseInt(celsiusInput) * 9/5 + 491.67) + kelvinText.innerHTML = product.toFixed(2) + ' R' +} + + +function kelvinToKelvin () { + let kelvin = document.querySelector("textbox").value; + document.getElementById("outputK").innerHTML = kelvin + " K"; +} + +function kelvinToFahrenheit () { + let kelvinInput = document.querySelector("textbox").value + let product = (parseInt(kelvinInput - 273) * 9/5 +32); + fahrenheitText.innerHTML = product.toFixed(2) + ' F' +} + +function kelvinToCelsius () { + let kelvinInput = document.querySelector("textbox").value + let product = (parseInt(kelvinInput - 273.15)); + celsiusText.innerHTML = product.toFixed(2) + ' C' +} + +function kelvinToRankine () { + let kelvinInput = document.querySelector("textbox").value + let product = (parseInt(kelvinInput * 1.8)) + rankineText.innerHTML = product.toFixed(2) + ' R' +} + + +function rankineToRankine () { + let rankine = document.querySelector("textbox").value; + document.getElementById("outputR").innerHTML = rankine + " R"; +} + +function rankineToFahrenheit () { + let rankineInput = document.querySelector("textbox").value + let product = (parseInt(rankineInput - 459.67)); + fahrenheitText.innerHTML = product.toFixed(2) + ' F' +} + + +function rankineToCelsius () { + let kelvinInput = document.querySelector("textbox").value + let product = (parseInt(kelvinInput - 491.67) * 5/9); + fahrenheitText.innerHTML = product.toFixed(2) + ' C' +} + +function rankineToKelvin () { + let kelvinInput = document.querySelector("textbox").value + let product = (parseInt(kelvinInput * 5/9)); + fahrenheitText.innerHTML = product.toFixed(2) + ' K' +} + +function conversions () { + +if (scaleType.value === 'faherenheit') { + findFahrenheit() + findCelsius() + findKelvin() + findRankine() +} else if (scaleType.value === 'celsius'){ + celsisusToCelsius() + celsiusToFahrenheit() + celsiusToRankine() + celsiusToKelvin() +} +else if (scaleType.value === 'kelvin'){ + kelvinToKelvin() + kelvinToCelsius() + kelvinToRankine() + kelvinToFahrenheit() +} +else if (scaleType.value === 'rankine') { + rankineToRankine() + rankineToFahrenheit() + rankineToCelsius() + rankineToKelvin() +} +} + + + + +function ClickCalculate(){ + findKelvin() + findCelsius() + findRankine() + findFahrenheit( + ) + } \ No newline at end of file diff --git a/img/style.css b/img/style.css new file mode 100644 index 0000000..8250daf --- /dev/null +++ b/img/style.css @@ -0,0 +1,106 @@ +#box { + width: 600px; + border: solid black 2px; + height: 300px; +} + +.dropdown { + float: left; + margin-top: 65px; + margin-left: 40px; +} + +.degree { + float: center; +} + +.calculate { + float: right; + margin-right: 80px; + margin-bottom: 100px; + margin-top: -135px; +} + + +#textbox { + margin-left: 100px; + margin-top: -40px; + width: 130px; + height: 25px; + border: solid black 2px; +} + +.value { + margin-left: 260px; +} + +#scale { + margin-left: -60px; + float: left; + +} + + + +.h1 { + margin-left: 60px; +} + + +#fahrenheit { + margin-left: 60px; + font-weight: bold; + margin-top: -15px; +} + + +#outputF { + margin-left: 60px; + margin-top: -15px; +} + +#celsius { + margin-left: 200px; + font-weight: bold; + margin-top: -35px; +} + +#outputC { + margin-left: 190px; + margin-top: -10px; +} + +#kelvin { + margin-right: 250px; + font-weight: bold; + margin-top: -50px; + float: right; +} + +#outputK { + margin-right: 250px; + margin-top: -19px; + float: right; +} + +#rankine { + margin-left: 440px; + font-weight: bold; + margin-top: -45px; +} + +#outputR { + margin-right: -190px; + margin-top: -20px; + float: right; +} + +#button { + display: inherit; + margin-left: 12%; + background-color: #9cbdf0; +} + + + +