From 75e5711b96c0b500af7882db1d060cdc32b66231 Mon Sep 17 00:00:00 2001 From: Tajanae Boone Date: Sun, 6 Dec 2020 23:08:55 -0500 Subject: [PATCH] dom lab --- .DS_Store | Bin 0 -> 6148 bytes img/index.html | 55 ++++++++++++++++ img/mockup.js | 167 +++++++++++++++++++++++++++++++++++++++++++++++++ img/style.css | 106 +++++++++++++++++++++++++++++++ 4 files changed, 328 insertions(+) create mode 100644 .DS_Store create mode 100644 img/index.html create mode 100644 img/mockup.js create mode 100644 img/style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..72a9d2aecf7310de910bdb2f4c33396cfbe1590b GIT binary patch literal 6148 zcmeH~JqiLr422W55Nx)zoW=uqgF*BJUO-e7L9r0~Il3=DjjOdR@&d^>$!yr&SL|#= zL|4z_Qlt}+DcmRv3q4chW4Xvp&Zpz!u)p80R&pC9tpM+&x1ZYt6`%rCfC^9nDli}g z@*tni2J}pP6e>UkhM|Cc9}3)9lP&0<4g?uRzEqg^zI56wHPO))TycF}?arq#hf1*kwzfpO%Wo&Ov7xB0) + + + + + + + + +

Temperature Scale Converter

+
+

+ + +

+
+

Scale

Value

+ +
+
+
+ +

Fahrenheit

+ +

Celsius

+ +

Kelvin

+ +

Rankine

+ +
+
+

+ +

+ + + + + + + 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; +} + + + +