diff --git a/app.js b/app.js new file mode 100644 index 0000000..6c28750 --- /dev/null +++ b/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"); +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..6cce808 --- /dev/null +++ b/index.html @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + +
+ +
+
+

Temperature Scale Convertor

+
+
+ + +
+
+

Press F, C, K and R keys to change scale type. Enter to submit.

+
+
+ + +
+
+

Scale

+
+ +
+ + + + +
+
+
+ +
+

Value

+
+ +
+
+ +
+

 

+
+ +
+
+
+ + + +
+
+

Fahrenheit

+

32 F

+
+ +
+

Celsius

+

0 C

+
+ +
+

Kelvin

+

273.15 K

+
+ +
+

Rankine

+

491.67 R

+
+
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4ee42a1 --- /dev/null +++ b/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; + } +} \ No newline at end of file