From 59732c8d34a56a05bc663d0f3033e03d8dd7f981 Mon Sep 17 00:00:00 2001
From: ametoresu <mail@tenkyuu.dev>
Date: Mon, 23 Dec 2024 23:00:53 +0800
Subject: [PATCH] somehow working

---
 index.html |  9 +++----
 script.js  | 74 +++++++++++++++++++++---------------------------------
 2 files changed, 31 insertions(+), 52 deletions(-)

diff --git a/index.html b/index.html
index 235fa56..39d023b 100644
--- a/index.html
+++ b/index.html
@@ -26,12 +26,12 @@
       <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">
+          <select name="tempUnitFrom" id="tempUnitFrom">
             <option value="Celcius" selected>&deg;C</option>
             <option value="Fahrenheit">&deg;F</option>
             <option value="Kelvin">K</option>
           </select>
-          <select name="unitTo" id="unitTo">
+          <select name="tempUnitTo" id="tempUnitTo">
             <option value="Celcius">&deg;C</option>
             <option value="Fahrenheit" selected>&deg;F</option>
             <option value="Kelvin">K</option>
@@ -40,10 +40,7 @@
         <input type="text" name="userInput" id="userInput" onkeyup="calculate(this.value)">
       </div>
     </div>
-    <div id="result">0&deg;C &equals; 32.00&deg;F
-      <!-- <span id="resultFrom">0</span><span id="resultUnitFrom">&deg;C</span> &equals; 
-      <span id ="resultTo">32</span><span id="resultUnitTo">&deg;F</span> -->
-    </div>
+    <div id="result">0&deg;C &equals; 32.00&deg;F</div>
     <hr>
     <div id="solution"></div>
   </main>
diff --git a/script.js b/script.js
index b3d8231..51fd3c0 100644
--- a/script.js
+++ b/script.js
@@ -1,8 +1,9 @@
-const tempUnitFrom = document.getElementById("unitFrom");
-const tempUnitTo = document.getElementById("unitTo");
+const tempUnitFrom = document.getElementById("tempUnitFrom");
+const tempUnitTo = document.getElementById("tempUnitTo");
 const result = document.getElementById("result");
 const fromTxt = document.getElementById("convertFromTxt");
 const toTxt = document.getElementById("convertToTxt");
+const userInput = document.getElementById("userInput");
 
 const convert = (num, from, to) => {
   let result = "";
@@ -36,59 +37,40 @@ const convert = (num, from, to) => {
   return result;
 }
 
-const updateUI = () => {
-  
+const updateOutputTxt = (from, to, num) => {
+  const units = {
+
+  }
+  return `${userInput.value}&deg;${from} &equals; ${num}&deg;${to}`;
 }
 
-const calculate = (value) => {
-  const from = tempUnitFrom.value;
-  const to = tempUnitTo.value;
+const updateConversionTxt = (from, to) => {
+  fromTxt.innerText = from;
+  toTxt.innerText = to;
+  calculate(userInput);
+}
 
-  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 onDropdownChange = () => {
+  const tempFrom = tempUnitFrom.value;
+  const tempTo = tempUnitTo.value;
+  updateConversionTxt(tempFrom, tempTo);
+}
+
+tempUnitFrom.addEventListener("change", onDropdownChange);
+tempUnitTo.addEventListener("change", onDropdownChange);
 
-  const noSpace = value.replace(/[^\d]/g, ""); //remove whitespaces and non-numerical characters
+const calculate = (value) => {
+  const noSpace = value.replace(/[^\d.]/g, ""); //remove whitespaces and non-numerical characters
   const parsedInt = parseInt(noSpace);
+  const from = tempUnitFrom.value;
+  const to = tempUnitTo.value;
 
   if (!parsedInt || isNaN(parsedInt)) {
-    result.innerHTML = `0&deg;C &equals; 32.00&deg;F`;
+    result.innerHTML = updateOutputTxt(from, to, convert(parsedInt, from, to));
     return;
   } else {
-    document.getElementById("result").innerHTML = convert(parsedInt, from, to);
-    // updateUI();
+    document.getElementById("result").innerHTML = updateOutputTxt(from, to, convert(parsedInt, from, to));
   }
 }
 
-document.addEventListener("DOMContentLoaded", calculate);
\ No newline at end of file
+document.addEventListener("DOMContentLoaded", onDropdownChange);
\ No newline at end of file
-- 
2.39.5