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

Temperature Scale Converter

+
+
+

Scale

+ +
+
+

Value

+ +
+ +
+
+
+

Fahrenheit

+

+
+
+

Celsius

+

+
+
+

Kelvin

+

+
+
+

Rankine

+

+
+
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..4d40a30 --- /dev/null +++ b/main.js @@ -0,0 +1,138 @@ +//functions +function convertFToCelsius(fahrenheit) { + let celsius = (fahrenheit-32) * 5/9; + return celsius; +} + +function convertFToKelvin(fahrenheit) { + let kelvin = (fahrenheit-32) * 5/9 + 273.15; + return kelvin; +} + +function convertFToRankine(fahrenheit) { + let rankine = (fahrenheit + 459.67); + return rankine; +} + +function convertCToFahrenheit(celsius) { + let fahrenheit = (celsius * 9/5) + 32; + return fahrenheit; +} + +function convertCToKelvin(celsius) { + let kelvin = celsius + 273.15; + return kelvin; +} + +function convertCToRankine(celsius) { + let rankine = celsius * 9/5 + 491.67; + return rankine; +} + +function convertKToFahrenheit(kelvin) { + let fahrenheit = (kelvin - 273.15) * 9/5 + 32; + return fahrenheit; +} + +function convertKToCelsius(kelvin) { + let celsius = kelvin - 273.15; + return celsius; +} + +function convertKToRankine(kelvin) { + let rankine = kelvin * 1.8; + return rankine; +} + +function convertRToFahrenheit(rankine) { + let fahrenheit = rankine - 459.67; + return fahrenheit; +} + +function convertRToCelsius(rankine) { + let celsius = (rankine - 491.67) * 5/9; + return celsius; +} + +function convertRToKelvin(rankine) { + let kelvin = rankine * 5/9; + return kelvin; +} + +//Calculate button +let button = document.getElementsByClassName("calculate-button"); +let selectElement = document.getElementById("temperature"); +let selection = selectElement.children; + +button[0].addEventListener("click", () => { + + if(selectElement.value == "fahrenheit") { + let userInput = document.getElementsByTagName("input"); + let fahrenheit = userInput[0].value; + let celsius = convertFToCelsius(fahrenheit); + let celsiusOutput = document.getElementsByClassName("celsius-value"); + celsiusOutput[0].textContent = celsius + " C"; + + let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); + fahrenheitOutput[0].textContent = fahrenheit + " F"; + + let kelvin = convertFToKelvin(fahrenheit); + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin + " K"; + + let rankine = convertFToRankine(parseInt(fahrenheit)); + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine + " R"; + } else if(selectElement.value == "celsius") { + let userInput = document.getElementsByTagName("input"); + let celsius = userInput[0].value; + let celsiusOutput = document.getElementsByClassName("celsius-value"); + celsiusOutput[0].textContent = celsius + " C"; + + let fahrenheit = convertCToFahrenheit(celsius); + let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); + fahrenheitOutput[0].textContent = fahrenheit + " F"; + + let kelvin = convertCToKelvin(celsius); + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin + " K"; + + let rankine = convertCToRankine(celsius); + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine + " R"; + } else if(selectElement.value == "kelvin") { + let userInput = document.getElementsByTagName("input"); + let kelvin = userInput[0].value; + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin + " K"; + + let celsius = convertKToCelsius(kelvin); + let celsiusOutput = document.getElementsByClassName("celsius-value"); + celsiusOutput[0].textContent = celsius + " C"; + + let fahrenheit = convertKToFahrenheit(kelvin); + let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); + fahrenheitOutput[0].textContent = fahrenheit + " F"; + + let rankine = convertKToRankine(kelvin); + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine + " R"; + } else if(selectElement.value == "rankine") { + let userInput = document.getElementsByTagName("input"); + let rankine = userInput[0].value; + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine + " R"; + + let kelvin = convertRToKelvin(rankine); + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin + " K"; + + let celsius = convertRToCelsius(rankine) + let celsiusOutput = document.getElementsByClassName("celsius-value"); + celsiusOutput[0].textContent = celsius + " C"; + + let fahrenheit = convertRToFahrenheit(rankine); + let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); + fahrenheitOutput[0].textContent = fahrenheit + " F"; + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a8f8376 --- /dev/null +++ b/style.css @@ -0,0 +1,74 @@ +.container { + margin-left: 25%; + margin-top: 10%; + width: 50%; + border: solid; + padding-bottom: 75px; + height: 235px; +} + +.header { + text-align: center; +} + +.row{ + display: inline-block; + width: 100%; +} + +.scale-entity { + display: inherit; + text-align: center; + margin-left: 15%; +} + +.value { + display: inherit; + margin-left: 13%; +} + +.value p { + text-align: center; +} + +.value input { + border: solid; + width: 100px; + text-align: center; +} + +.calculate-button { + display: inherit; + margin-left: 12%; + background-color: #DBE8FC; + border: solid, #7293C2; +} + +.results { + display: inline-block; + width: 100%; +} + +.fahrenheit-results { + display: inherit; + margin-left: 15%; + text-align: center; +} + +.celsius-results { + display: inherit; + margin-left: 9%; + text-align: center; +} + +.kelvin-results { + display: inherit; + margin-left: 9%; + text-align: center; +} + +.rankine-results { + display: inherit; + margin-left: 9%; + text-align: center; +} \ No newline at end of file