diff --git a/index.html b/index.html new file mode 100644 index 0000000..38ca693 --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + + Thermometer Application + + +
+ +
+

Temperature Scale Convertor

+
+ +
+ + +
+ +
+ + + +
+ +
+ Fahrenheit + Celsius + Kelvin + Rankine +
+ +
+
+ 0 F +
+
+ 0 C +
+
+ 0 K +
+
+ 0 R +
+
+ +
+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..2a44510 --- /dev/null +++ b/main.css @@ -0,0 +1,85 @@ + +#convertorContainer { + 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; +} + +#valueScale { + font-size: 22px; + margin-bottom: 3px; + text-align: left; +} + +#scaleText { + margin-left: 80px; +} + +#tempValueText { + margin-left: 200px; +} + +#tempValueBox { + width: 160px; + height: 35px; + border: 2px solid black; + text-align: center; + font-size: 20px; +} + +#calcButton { + width: 160px; + height: 40px; + background-color: #dde8faff; + border: 2px solid #728ebbff; + font-size: 20px; +} + +#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 diff --git a/script.js b/script.js new file mode 100644 index 0000000..9c17e4e --- /dev/null +++ b/script.js @@ -0,0 +1,125 @@ + +let celsiusTextVal = document.querySelector('#celsiusVal') +let fahrenheitTextVal = document.querySelector('#fahrenheitVal') +let kelvinTextVal = document.querySelector('#kelvinVal') +let rankineTextVal = document.querySelector('#rankineVal') +let scaleType = document.querySelector('#scaleType') + +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 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' +} +//End Rankine Conversions + +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() + } +} + + +