did some tweaks, leaving tasks for tommorrow

diff --git a/script.js b/script.js
index 51fd3c0534c1422a67e08424a1b3b169b091c82f..577bdc482cffbbf7c02d5eb80a4c6cda410f3b8b 100644 (file)
--- a/script.js
+++ b/script.js
@@ -5,7 +5,7 @@ const fromTxt = document.getElementById("convertFromTxt");
 const toTxt = document.getElementById("convertToTxt");
 const userInput = document.getElementById("userInput");
 
-const convert = (num, from, to) => {
+const convert = (num, from, to) => { //converts the num to the temp unit assigned
   let result = "";
 
   if (from === "Celcius") {
@@ -34,31 +34,39 @@ const convert = (num, from, to) => {
     }
   }
 
-  return result;
+  return result.toFixed(2);
 }
 
-const updateOutputTxt = (from, to, num) => {
+const updateOutputTxt = (from, to, num) => { //updates the output text
   const units = {
-
+    "Celcius": "°C",
+    "Fahrenheit": "°F",
+    "Kelvin": "K"
   }
-  return `${userInput.value}°${from} = ${num}°${to}`;
+  const noSpace = userInput.value.replace(/[^\d.]/g, "");
+  const fromUnit = units[from];
+  const toUnit = units[to];
+
+  return `${noSpace}${fromUnit} = ${num}${toUnit}`;
 }
 
-const updateConversionTxt = (from, to) => {
+const updateConversionTxt = (from, to) => { //updates the text above the conversion
   fromTxt.innerText = from;
   toTxt.innerText = to;
   calculate(userInput);
 }
 
-const onDropdownChange = () => {
+const onDropdownChange = () => { //executes if user change the option on the select element
   const tempFrom = tempUnitFrom.value;
   const tempTo = tempUnitTo.value;
   updateConversionTxt(tempFrom, tempTo);
 }
 
+//checks changes on the select element
 tempUnitFrom.addEventListener("change", onDropdownChange);
 tempUnitTo.addEventListener("change", onDropdownChange);
 
+//executes when user input a number
 const calculate = (value) => {
   const noSpace = value.replace(/[^\d.]/g, ""); //remove whitespaces and non-numerical characters
   const parsedInt = parseInt(noSpace);
@@ -73,4 +81,4 @@ const calculate = (value) => {
   }
 }
 
-document.addEventListener("DOMContentLoaded", onDropdownChange);
\ No newline at end of file
+document.addEventListener("DOMContentLoaded", onDropdownChange); //run once on page onload
\ No newline at end of file

diff --git a/styles.css b/styles.css
index c84177124f1dab35c22531eae4fd0a770b33541e..13750beef742fe572bce90113e49b649d60843eb 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -38,4 +38,10 @@ input {
 #result {
   text-align: center;
   padding: 1rem;
+}
+
+@media only screen and (min-width: 1240px) {
+  main {
+    width: 50%;
+  }
 }
\ No newline at end of file