code-differently · gglowe · Dec 7, 2020
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>Thermometer Application</title>
+</head>
+<body>
+    <div id="entirePageDiv">
+
+        <div id="convertorDiv">
+
+            <div id="topRow">
+                <h1>Temperature Scale Convertor</h1>
+            </div>
+
+            <div id="valueScaleDiv">
+                <label for="scaleType" id="scaleText">Scale</label>
+                <label for="tempValueBox" id="tempValueText">Value</label> <!--input value label to be stacked on top of text input-->
+            </div>
+
+            <div id="midRow">
+
+                <select name="scaleType" id="scaleType">
+                    <option value="fahrenheit">Fahrenheit</option>
+                    <option value="celsius">Celsius</option>
+                    <option value="kelvin">Kelvin</option>
+                    <option value="rankine">Rankine</option>
+                </select>
+                <input type="text" id="tempValueBox" name="tempValue">
+                <button type="button" id="calcButton">Calculate</button>
+            </div>
+
+            <div id="bottomRow">
+                <span id="fahrenheitTitle">Fahrenheit</span>
+                <span id="celsiusTitle">Celsius</span>
+                <span id="kelvinTitle">Kelvin</span>
+                <span id="rankineTitle">Rankine</span>
+            </div>
+
+            <div id="bottomRowOutput">
+
+                <div id="fahrenheitVal" class="outputValueBox">
+                    <span>0 F</span>
+                </div>
+
+                <div id="celsiusVal" class="outputValueBox">
+                    <span>0 C</span>
+                </div>
+
+                <div id="kelvinVal" class="outputValueBox">
+                    <span>0 K</span>
+                </div>
+
+                <div id="rankineVal" class="outputValueBox">
+                    <span>0 R</span>
+                </div>
+        </div>
+    </div>
+    <script src="./main.js"></script>
+</body>
+</html>
+
diff --git a/main.js 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()
+    }
+}
diff --git a/style.css 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;
+}