From 95b8f7461f2c08cbbfc8c0c9ae276bac3a9ba77a Mon Sep 17 00:00:00 2001 From: gglowe Date: Sun, 6 Dec 2020 23:41:16 -0500 Subject: [PATCH] added finished index.html/main.js/style.css --- index.html | 64 +++++++++++++++++++++++++ main.js | 134 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 88 +++++++++++++++++++++++++++++++++++ 3 files changed, 286 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..4dcc594 --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ + + + + + + + Thermometer Application + + +
+ +
+ +
+

Temperature Scale Convertor

+
+ +
+ + +
+ +
+ + + + +
+ +
+ Fahrenheit + Celsius + Kelvin + Rankine +
+ +
+ +
+ 0 F +
+ +
+ 0 C +
+ +
+ 0 K +
+ +
+ 0 R +
+
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..d2d6842 --- /dev/null +++ b/main.js @@ -0,0 +1,134 @@ +let celsiusTextVal = document.querySelector('#celsiusVal') +let fahrenheitTextVal = document.querySelector('#fahrenheitVal') +let kelvinTextVal = document.querySelector('#kelvinVal') +let rankineTextVal = document.querySelector('#rankineVal') + +document.querySelector('#calcButton').addEventListener('click', totalConverts) + + +// Fahrenheit Function Conversions + +function fahrenheitToCelsius () { + let fahrenheitInput = document.querySelector('#tempValueBox').value + let product = (parseInt(fahrenheitInput) - 32) * 5/9 + celsiusTextVal.innerHTML = product.toFixed(2) + ' C' +} + +function fahrenheitValue () { + fahrenheitVal.innerHTML = document.querySelector('#tempValueBox').value + ' F' +} + +function fahrenheitToKelvin () { + let fahrenheitInput = document.querySelector('#tempValueBox').value + let product = (parseInt(fahrenheitInput) - 32) * 5/9 + 273.15 + kelvinTextVal.innerHTML = product.toFixed(2) + ' K' +} + +function fahrenheitToRankine () { + let fahrenheitInput = document.querySelector('#tempValueBox').value + let product = parseInt(fahrenheitInput) + 459.67 + rankineTextVal.innerHTML = product.toFixed(2) + ' R' +} + +// End Fahrenheit Function Conversions + +// Celsius Function Conversions + +function celsiusValue () { + celsiusTextVal.innerHTML = document.querySelector('#tempValueBox').value + ' C' +} + +function celsiusToFahrenheit () { + let celsiusInput = document.querySelector('#tempValueBox').value + let product = (parseInt(celsiusInput) * 9/5) + 32 + fahrenheitTextVal.innerHTML = product.toFixed(2) + ' F' +} + +function celsiusToKelvin () { + let celsiusInput = document.querySelector('#tempValueBox').value + let product = parseInt(celsiusInput) + 273.15 + kelvinTextVal.innerHTML = product.toFixed(2) + ' K' +} + +function celsiusToRankine () { + let celsiusInput = document.querySelector('#tempValueBox').value + let product = parseInt(celsiusInput) * 9/5 + 491.67 + rankineTextVal.innerHTML = product.toFixed(2) + ' R' +} + +// End Celsius Function Conversions + +// Kelvin Function Conversions + +function kelvinValue () { + kelvinTextVal.innerHTML = document.querySelector('#tempValueBox').value + ' K' +} + +function kelvinToFahrenheit () { + let kelvinInput = document.querySelector('#tempValueBox').value + let product = (parseInt(kelvinInput) - 273.15) * 9/5 + 32 + fahrenheitTextVal.innerHTML = product.toFixed(2) + ' F' +} + +function kelvinToCelsius () { + let kelvinInput = document.querySelector('#tempValueBox').value + let product = parseInt(kelvinInput) - 273.15 + celsiusTextVal.innerHTML = product.toFixed(2) + ' C' +} + +function kelvinToRankine () { + let kelvinInput = document.querySelector('#tempValueBox').value + let product = parseInt(kelvinInput) * 1.8 + rankineTextVal.innerHTML = product.toFixed(2) + ' R' +} + +// End Kelvin Function Conversions + +// Rankine Function Conversions + +function rankineValue () { + rankineTextVal.innerHTML = document.querySelector('#tempValueBox').value + ' R' +} + +function rankineToFahrenheit () { + let rankineInput = document.querySelector('#tempValueBox').value + let product = parseInt(rankineInput) - 459.67 + fahrenheitTextVal.innerHTML = product.toFixed(2) + ' F' +} + +function rankineToCelsius () { + let rankineInput = document.querySelector('#tempValueBox').value + let product = (parseInt(rankineInput) - 491.67) * 5/9 + celsiusTextVal.innerHTML = product.toFixed(2) + ' C' +} + +function rankineToKelvin () { + let rankineInput = document.querySelector('#tempValueBox').value + let product = parseInt(rankineInput) * 5/9 + kelvinTextVal.innerHTML = product.toFixed(2) + ' K' +} + +function totalConverts () { + + if (scaleType.value === 'fahrenheit') { + fahrenheitToCelsius() + fahrenheitValue() + fahrenheitToKelvin() + fahrenheitToRankine() + } else if (scaleType.value === 'celsius') { + celsiusValue() + celsiusToFahrenheit() + celsiusToKelvin() + celsiusToRankine() + } else if (scaleType.value === 'kelvin') { + kelvinValue() + kelvinToFahrenheit() + kelvinToCelsius() + kelvinToRankine() + } else if (scaleType.value === 'rankine') { + rankineValue() + rankineToFahrenheit() + rankineToCelsius() + rankineToKelvin() + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e52db91 --- /dev/null +++ b/style.css @@ -0,0 +1,88 @@ +#convertorDiv { + width: 720px; + height: 420px; + border: 2px solid black; + margin: auto; + text-align: center; +} + +#topRow { + font-size: 25px; + margin-left: auto; + margin-bottom: 60px; +} + +#midRow { + display: flex; + justify-content: space-around; + align-items: baseline; + margin-bottom: 90px; + font-size: 20px; + padding-top: 5px; +} + +#valueScaleDiv { + font-size: 22px; + /* padding-left: 5px; */ + margin-bottom: 3px; + /* margin-right: 40px; */ + text-align: left; +} + +#scaleText { + margin-left: 80px; +} + +#tempValueText { + margin-left: 200px; +} + +#tempValueBox { + width: 160px; + height: 35px; + border: 2px solid black; + /* margin-left: 100px; + margin-right: 40px; */ + text-align: center; + font-size: 20px; +} + +#calcButton { + width: 160px; + height: 40px; + background-color: #dde8faff; + border: 2px solid #728ebbff; +} + +#bottomRow { + display: flex; + justify-content: space-around; + font-size: 20px; + font-weight: 600; + +} + +#bottomRowOutput { + display: flex; + justify-content: space-around; + font-size: 20px; + margin-left: 20px; + margin-top: 20px; +} + +#scaleType { + width: 160px; + height: 40px; + border: 2px solid black; + font-size: 20px; +} + +#celsiusVal { + margin-left: 20px; +} + +.outputValueBox { + width: 100px; + height: 35px; + text-align: center; +} \ No newline at end of file