code-differently · vpkonkiel · Dec 2, 2020 · Dec 2, 2020 · Dec 3, 2020 · Dec 3, 2020
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+    <head lang="en">
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <div class="container">
+            <h1 class="header">Temperature Scale Converter</h1>
+            <div class="row">
+                <div class="scale-entity">
+                    <p class="scale">Scale</p>
+                    <select name="temperature" id="temperature">
+                        <option id="dropdown-fah" value="fahrenheit">Fahrenheit</option>
+                        <option id="dropdown-cel" value="celsius">Celsius</option>
+                        <option id="dropdown-kel" value="kelvin">Kelvin</option>
+                        <option id="dropdown-ran" value="rankine">Rankine</option>
+                    </select>
+                </div>
+                <div class="value">
+                    <p>Value</p>
+                    <input type="text" value="">
+                </div>
+                <button type="button" class="calculate-button">Calculate</button>
+            </div>
+            <div class="results">
+                <div class="fahrenheit-results">
+                    <p class="fahrenheit-output"><strong>Fahrenheit</strong></p>
+                    <p class="fahrenheit-value"></p>
+                </div>
+                <div class="celsius-results">
+                    <p class="celsius"><strong>Celsius</strong></p>
+                    <p class="celsius-value"></p>
+                </div>
+                <div class="kelvin-results">
+                    <p class="kelvin"><strong>Kelvin</strong></p>
+                    <p class="kelvin-value"></p>
+                </div>
+                <div class="rankine-results">
+                    <p class="rankine"><strong>Rankine</strong></p>
+                    <p class="rankine-value"></p>
+                </div>
+            </div>
+        </div>
+        <script src="main.js"></script>
+    </body>
+</html>
diff --git a/main.js 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";
+                }
+});
diff --git a/style.css 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;
+}