Complete Temperature Scale Convertor

app.js

@@ -0,0 +1,126 @@
+const button = document.getElementById("calculate-btn");
+const dropDown = document.getElementById("dropdownMenu2");
+const dropDownItems = document.getElementsByClassName("dropdown-item");
+
+// Object for spelling and to ensure there is always a space after. This makes the arrow look nicer in the dropdown menu.
+const Temperatures = {
+  Fahraenheit: "Fahrenheit ",
+  Celsius: "Celsius ",
+  Kelvin: "Kelvin ",
+  Rankine: "Rankine ",
+}
+
+// Give each drop down item an event listener. When clicked, they will update the main text of the dropdown.
+for (let i = 0; i < dropDownItems.length; i++) {
+  dropDownItems[i].addEventListener("click", (event) => {
+    setDropDownText(event.target.innerText);
+  })
+}
+
+// Calculate button.
+button.addEventListener("click", () => {
+  calculate();
+});
+
+// Allows keyboard shortcuts to quickly change the current dropdown option. Or to calculate.
+document.body.addEventListener("keypress", (event) => {
+  if (event.key === "Enter") {
+    calculate();
+  } else if (event.key === "F" || event.key === "f") {
+    setDropDownText(Temperatures.Fahraenheit);
+  } else if (event.key === "C" || event.key === "c") {
+    setDropDownText(Temperatures.Celsius);
+  } else if (event.key === "K" || event.key === "k") {
+    setDropDownText(Temperatures.Kelvin);
+  } else if (event.key === "R" || event.key === "r") {
+    setDropDownText(Temperatures.Rankine);
+  }
+});
+
+
+
+
+
+
+
+function setDropDownText(dropDownOption) {
+  // For some reason, innerText passed to this function is trimmed. So need to add space again.
+  dropDown.innerText = dropDownOption + " ";
+}
+
+// Use innertext of dropdown menu to determine what to convert from (from Fahrenheit, from Celsius, etc).
+function calculate() {
+  const userInputElement = document.getElementById("value");
+  const convertFrom = dropDown.innerText;
+  const degrees = parseFloat(userInputElement.value);
+  if (isNaN(degrees)) {
+    alert("That is not a number");
+    return;
+  }
+
+  const fara = convertToFahrenheit(convertFrom, degrees);
+  const celsius = convertToCelsius(convertFrom, degrees);
+  const kelvin = convertToKelvin(convertFrom, degrees);
+  const rankine = convertToRankine(convertFrom, degrees);
+
+  updateTemperatureDisplays(fara, celsius, kelvin, rankine);
+}
+
+function updateTemperatureDisplays(fara, celsius, kelvin, rankine) {
+  document.getElementById("fahrenheit-num").innerText = fara.toFixed(2) + " F";
+  document.getElementById("celsius-num").innerText = celsius.toFixed(2) + " C";
+  document.getElementById("kelvin-num").innerText = kelvin.toFixed(2) + " K";
+  document.getElementById("rankine-num").innerText = rankine.toFixed(2) + " R";
+}
+
+function convertToFahrenheit(convertFrom, d) {
+  if (convertFrom === Temperatures.Fahraenheit) {
+    return d;
+  } else if (convertFrom === Temperatures.Celsius) {
+    return d * 1.8 + 32;
+  } else if (convertFrom === Temperatures.Kelvin) {
+    return d * 1.8 - 459.67;
+  } else if (convertFrom === Temperatures.Rankine) {
+    return d - 459.67;
+  }
+  console.error("Could not find conversion");
+}
+
+function convertToCelsius(convertFrom, d) {
+  if (convertFrom === Temperatures.Fahraenheit) {
+    return (d - 32) / 1.8;
+  } else if (convertFrom === Temperatures.Celsius) {
+    return d;
+  } else if (convertFrom === Temperatures.Kelvin) {
+    return d - 273.15;
+  } else if (convertFrom === Temperatures.Rankine) {
+    return (d - 32 - 459.67) / 1.8;
+  }
+  console.error("Could not find conversion");
+}
+
+function convertToKelvin(convertFrom, d) {
+  if (convertFrom === Temperatures.Fahraenheit) {
+    return (d + 459.67) / 1.8;
+  } else if (convertFrom === Temperatures.Celsius) {
+    return d + 273.15;
+  } else if (convertFrom === Temperatures.Kelvin) {
+    return d;
+  } else if (convertFrom === Temperatures.Rankine) {
+    return d / 1.8;
+  }
+  console.error("Could not find conversion");
+}
+
+function convertToRankine(convertFrom, d) {
+  if (convertFrom === Temperatures.Fahraenheit) {
+    return d + 459.67;
+  } else if (convertFrom === Temperatures.Celsius) {
+    return d * 1.8 + 32 + 459.67;
+  } else if (convertFrom === Temperatures.Kelvin) {
+    return d * 1.8;
+  } else if (convertFrom === Temperatures.Rankine) {
+    return d;
+  }
+  console.error("Could not find conversion");
+}

index.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+    crossorigin="anonymous">
+  <link rel="stylesheet" type="text/css" href="./styles.css">
+</head>
+
+<body>
+
+
+  <!-- container -->
+  <div class="container rounded-border my-5 px-5 bg-color">
+
+    <div class="row mt-4 pt-3">
+      <div class="column mx-auto">
+        <h1>Temperature Scale Convertor</h1>
+      </div>
+    </div>
+
+
+    <div class="row mt-3">
+      <div class="column mx-auto">
+        <p>Press F, C, K and R keys to change scale type. Enter to submit.</p>
+      </div>
+    </div>
+
+
+    <div class="row my-5">
+      <div class="col-4 mx-auto">
+        <h4 class="mx-auto w-fit-content">Scale</h4>
+        <div class="dropdown mx-auto w-fit-content">
+          <button class="btn btn-light dropdown-toggle input-width input-padding" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Fahrenheit
+          </button>
+          <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+            <button class="dropdown-item" type="button">Fahrenheit </button>
+            <button class="dropdown-item" type="button">Celsius </button>
+            <button class="dropdown-item" type="button">Kelvin </button>
+            <button class="dropdown-item" type="button">Rankine </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-4 mx-auto">
+        <h4 class="mx-auto w-fit-content">Value</h4>
+        <div class="input-group input-group-sm mb-3 mx-auto input-width">
+          <input id="value" type="number" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" value="32">
+        </div>
+      </div>
+
+      <div class="col-4 mx-auto">
+        <h4 class="mx-auto w-fit-content">&nbsp</h4> <!-- White space so that this column has same spacing as other items in row that do have h4 tags.-->
+        <div class="mx-auto w-fit-content">
+          <button id="calculate-btn" class="btn btn-light input-width input-padding">
+            <div class="btn-text-center">Calculate</div>
+          </button>
+        </div>
+      </div>
+    </div>
+
+
+
+    <div class="row mb-3">
+      <div class="col-3 mx-auto">
+        <h4 class="mx-auto w-fit-content">Fahrenheit</h4>
+        <p id="fahrenheit-num" class="mx-auto w-fit-content">32 F</p>
+      </div>
+
+      <div class="col-3 mx-auto">
+        <h4 class="mx-auto w-fit-content">Celsius</h4>
+        <p id="celsius-num" class="mx-auto w-fit-content">0 C</p>
+      </div>
+
+      <div class="col-3 mx-auto">
+        <h4 class="mx-auto w-fit-content">Kelvin</h4>
+        <p id="kelvin-num" class="mx-auto w-fit-content">273.15 K</p>
+      </div>
+
+      <div class="col-3 mx-auto">
+        <h4 class="mx-auto w-fit-content">Rankine</h4>
+        <p id="rankine-num" class="mx-auto w-fit-content">491.67 R</p>
+      </div>
+    </div>
+
+  </div>
+  <!-- end of container -->
+
+
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+    crossorigin="anonymous"></script>
+  <script src="./app.js"></script>
+
+</body>
+
+</html>

styles.css

@@ -0,0 +1,40 @@
+.flex-center {
+  display: flex;
+  justify-content: center;
+}
+
+/* For mx-auto to center a div, the div must have a width. Use this class in that case. */
+.w-fit-content {
+  width: fit-content;
+}
+
+.input-width {
+  width: 12rem;
+}
+
+.input-padding {
+  padding: 0.15rem 0;
+}
+
+input {
+  text-align: center;
+}
+
+body {
+  background-color: #66c992;
+}
+
+.bg-color {
+  background-color: #41b675;
+}
+
+.rounded-border {
+  border-radius: 3rem;
+  border-style: none;
+}
+
+@media (max-width: 775px) {
+  .container {
+    min-width: 700px;
+  }
+}