<meta name="author" content="ametoresu">
<meta name="description" content="converts temperatures from Celcius, Fahrenheit, and Kelvin.">
<meta name="robots" content="index, follow">
- <title>Temperature Converter by ametoresu</title>
+ <title>Temperature Converter</title>
<link rel="icon" type="image/ico" href="/assets/icons/favicon.ico">
<meta property="og:type" content="website">
- <meta property="og:title" content="Temperature Converter by ametoresu">
+ <meta property="og:title" content="Temperature Converter">
<meta property="og:description" content="a web application that converts temperatures on various units.">
<meta property="og:image" content="/assets/pfp/profile.jpg">
<meta property="og:url" content="https://tenkyuu.dev">
<meta name="twitter:card" content="summary_large_image">
+ <link rel="stylesheet" href="styles.css">
<body>
-
+ <header></header>
+ <main>
+ <div class="summary">
+ <h1>Temperature Converter</h1>
+ <p>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.</p>
+ </div>
+ <div class="converter-ctn">
+ <div class="">Convert <span id="convertFromTxt"></span> to <span id="convertToTxt"></span></div>
+ <div class="convertion-wrapper">
+ <div class="selection-wrapper">
+ <select name="unitFrom" id="unitFrom">
+ <option value="Celcius" selected>°C</option>
+ <option value="Fahrenheit">°F</option>
+ <option value="Kelvin">K</option>
+ </select>
+ <select name="unitTo" id="unitTo">
+ <option value="Celcius">°C</option>
+ <option value="Fahrenheit" selected>°F</option>
+ <option value="Kelvin">K</option>
+ </select>
+ </div>
+ <input type="text" name="userInput" id="userInput" onkeyup="calculate(this.value)">
+ </div>
+ </div>
+ <div id="result">0°C = 32.00°F
+ <!-- <span id="resultFrom">0</span><span id="resultUnitFrom">°C</span> =
+ <span id ="resultTo">32</span><span id="resultUnitTo">°F</span> -->
+ </div>
+ <hr>
+ <div id="solution"></div>
+ </main>
+ <script src="script.js"></script>
</body>
</html>
\ No newline at end of file
--- /dev/null
+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
repos / temperature-converter.git / commitdiff