From c3a7c4a593499ece5fc32796c2a10da7bcdab47b Mon Sep 17 00:00:00 2001 From: ametoresu Date: Mon, 23 Dec 2024 21:59:46 +0800 Subject: [PATCH] im already halfway, just saving because i dont know what to do next --- index.html | 38 ++++++++++++++++++++-- script.js | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 41 ++++++++++++++++++++++++ 3 files changed, 170 insertions(+), 3 deletions(-) create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html index dbd4901..235fa56 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,47 @@ - Temperature Converter by ametoresu + Temperature Converter - + + - +
+
+
+

Temperature Converter

+

This web application allows users to convert temperatures between various units, including Celsius, Fahrenheit, and Kelvin. It provides a straightforward interface for quick and accurate conversions.

+
+
+
Convert to
+
+
+ + +
+ +
+
+
0°C = 32.00°F + +
+
+
+
+ \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b3d8231 --- /dev/null +++ b/script.js @@ -0,0 +1,94 @@ +const tempUnitFrom = document.getElementById("unitFrom"); +const tempUnitTo = document.getElementById("unitTo"); +const result = document.getElementById("result"); +const fromTxt = document.getElementById("convertFromTxt"); +const toTxt = document.getElementById("convertToTxt"); + +const convert = (num, from, to) => { + let result = ""; + + if (from === "Celcius") { + if (to === "Fahrenheit") { + result = (num * 1.8) + 32; + } else if (to === "Kelvin") { + result = num + 273.15; + } else { + result = num; + } + } else if (from === "Fahrenheit") { + if (to === "Celcius") { + result = (num - 32) / (9 / 5); + } else if (to === "Kelvin") { + result = (num + 459.67) / 1.8; + } else { + result = num; + } + } else if (from === "Kelvin") { + if (to === "Celcius") { + result = num - 273.15; + } else if (to === "Fahrenheit") { + result = (num * 1.8) - 459.67; + } else { + result = num; + } + } + + return result; +} + +const updateUI = () => { + +} + +const calculate = (value) => { + const from = tempUnitFrom.value; + const to = tempUnitTo.value; + + if (from === "Celcius") { + if (to === "Fahrenheit") { + fromTxt.innerText = "Celcius"; + toTxt.innerText = "Fahrenheit"; + } else if (to === "Kelvin") { + fromTxt.innerText = "Celcius"; + toTxt.innerText = "Kelvin"; + } else { + fromTxt.innerText = "Celcius"; + toTxt.innerText = "Celcius"; + } + } else if (from === "Fahrenheit") { + if (to === "Celcius") { + fromTxt.innerText = "Fahrenheit"; + toTxt.innerText = "Celcius"; + } else if (to === "Kelvin") { + fromTxt.innerText = "Fahrenheit"; + toTxt.innerText = "Kelvin"; + } else { + fromTxt.innerText = "Fahrenheit"; + toTxt.innerText = "Fahrenheit"; + } + } else if (from === "Kelvin") { + if (to === "Celcius") { + fromTxt.innerText = "Kelvin"; + toTxt.innerText = "Celcius"; + } else if (to === "Fahrenheit") { + fromTxt.innerText = "Kelvin"; + toTxt.innerText = "Fahrenheit"; + } else { + fromTxt.innerText = "Kelvin"; + toTxt.innerText = "Kelvin"; + } + } + + const noSpace = value.replace(/[^\d]/g, ""); //remove whitespaces and non-numerical characters + const parsedInt = parseInt(noSpace); + + if (!parsedInt || isNaN(parsedInt)) { + result.innerHTML = `0°C = 32.00°F`; + return; + } else { + document.getElementById("result").innerHTML = convert(parsedInt, from, to); + // updateUI(); + } +} + +document.addEventListener("DOMContentLoaded", calculate); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c841771 --- /dev/null +++ b/styles.css @@ -0,0 +1,41 @@ +:root { + --button: #0031a2; +} +*, +::before, +::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} +html { + /* font-size: 62.5%; */ +} +main { + width: 90%; + margin: 0 auto; +} +.converter-ctn { + box-shadow: 0rem 0.2rem 0.8rem #00000025; + padding: 1rem 2rem; + margin-top: 1.4rem; +} +.convertion-wrapper { + white-space: nowrap; +} +.selection-wrapper { + border: none; + display: block; + margin-top: 0.4rem; +} +select { + width: 50%; +} +input { + margin-top: 0.4rem; + width: 100%; +} +#result { + text-align: center; + padding: 1rem; +} \ No newline at end of file -- 2.39.5