Added and updated front-end features (HTML, CSS, JS enhancements)

Temperature-Converter/CSS/style.css

@@ -1,49 +1,125 @@
-@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap');
+/* Google Font */
+@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;500;700&display=swap');
 
-*{
+* {
     font-family: 'Mulish', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-body{
+/* ====== Body ====== */
+body {
     width: 100%;
-    height: 85vh;
-    background-color: #eae2b7;
-    display: grid;
+    height: 100vh;
+    background: linear-gradient(135deg, #fdfcdc, #eae2b7);
+    display: flex;
     justify-content: center;
     align-items: center;
-    place-items: center;
 }
 
-#fa{
+/* ====== Form Container ====== */
+form {
+    background: linear-gradient(135deg, #fcb69f, #ffecd2);
+    padding: 50px 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    border-radius: 15px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+    animation: popIn 0.6s ease;
+    transition: transform 0.3s ease;
+}
+
+form:hover {
+    transform: translateY(-5px);
+}
+
+/* ====== Header Icon ====== */
+#fa {
     font-size: 60px;
+    color: #2d3436;
+    margin-bottom: 10px;
 }
 
-form{
-    background-color: #fab1a0;
-    padding: 50px;
-    display: flex;
-    flex-direction: column;
-    -webkit-box-shadow: 0 10px 6px -6px #777;
-    -moz-box-shadow: 0 10px 6px -6px #777;
-    box-shadow: 0 10px 6px -6px #777;
-    border-radius: 10px;
+/* ====== Labels ====== */
+#tempCalc label {
+    font-size: 24px;
+    font-weight: 500;
+    color: #2d3436;
+    text-align: center;
 }
 
-#tempCalc label{
-    font-size: 30px;
+/* ====== Inputs & Selects ====== */
+input, select {
+    width: 100%;
+    padding: 12px;
+    font-size: 16px;
+    border-radius: 6px;
+    border: 1px solid #ccc;
+    transition: border-color 0.3s, box-shadow 0.3s;
 }
 
-/* [type="submit"]{
-    height: 35px;
-    margin: 20px;
-    width: 100px;
-    font-size: 15px;
-    border: none;
-    border-radius: 4px;
-    background-color: black;
+input:focus, select:focus {
+    border-color: #6c5ce7;
+    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
+    outline: none;
+}
+
+/* ====== Submit Button ====== */
+input[type="submit"] {
+    background-color: #2d3436;
     color: white;
-} */
+    border: none;
+    cursor: pointer;
+    padding: 12px 20px;
+    border-radius: 6px;
+    font-size: 16px;
+    transition: all 0.3s ease;
+}
+
+input[type="submit"]:hover {
+    background-color: #1e272e;
+    transform: scale(1.05);
+}
+
+/* ====== Result Text ====== */
+#resultContainer {
+    font-size: 28px;
+    font-weight: 600;
+    color: #2d3436;
+    text-align: center;
+}
 
-#resultContainer{
-    font-size: 35px;
-}
+/* ====== Animation ====== */
+@keyframes popIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* ====== Responsive Design ====== */
+@media (max-width: 600px) {
+    form {
+        width: 90%;
+        padding: 30px 20px;
+    }
+
+    #tempCalc label {
+        font-size: 20px;
+    }
+
+    #resultContainer {
+        font-size: 24px;
+    }
+
+    #fa {
+        font-size: 50px;
+    }
+}

Temperature-Converter/Js/script.js

@@ -1,69 +1,53 @@
 console.log('Welcome to 🌡️ Temperature Converter');
 
+// Animate temperature icon
 const tempLoad = () => {
-    let fa = document.getElementById('fa');
-    fa.innerHTML = "&#xf2cb";
+    const fa = document.getElementById('fa');
+    fa.innerHTML = "";
     fa.style.color = "#ffa41b";
 
-    setTimeout(() => {
-        fa.innerHTML = "";
-        fa.style.color = "#ffa41b";
-    }, 1000)
-
-    setTimeout(() => {
-        fa.innerHTML = "";
-    }, 2000)
-
-    setTimeout(() => {
-        fa.innerHTML = "";
-    }, 3000)
-
+    setTimeout(() => { fa.innerHTML = ""; }, 1000);
+    setTimeout(() => { fa.innerHTML = ""; }, 2000);
+    setTimeout(() => { fa.innerHTML = ""; }, 3000);
     setTimeout(() => {
         fa.innerHTML = "";
         fa.style.color = "#ff5151";
-    }, 4000)
-}
+    }, 4000);
+};
 
+// Repeat animation
 setInterval(() => {
+    const fa = document.getElementById('fa');
     fa.style.color = "#ffa41b";
     tempLoad();
 }, 5000);
 
-
 tempLoad();
 
+// Temperature conversion logic
 const calculateTemp = () => {
-    const numberTemp = document.getElementById('temp').value;
-    // console.log(numberTemp);
-
-    const tempSelected = document.querySelector('#temp_diff');
-    const valeTemp = temp_diff.options[tempSelected.selectedIndex].value;
-    // console.log(valeTemp);
-
-
-    // Convert temperature from Celcius to Fahrenheit
-    const celTOfah = (cel) => {
-        let fahrenheit = (cel * (9 / 5) + 32);
-        return fahrenheit;
+    const numberTemp = document.getElementById('temp').value.trim();
+    const tempSelect = document.querySelector('#temp_diff');
+    const valueTemp = tempSelect.options[tempSelect.selectedIndex].value;
+    const resultDiv = document.getElementById('resultContainer');
+
+    if (numberTemp === "" || isNaN(numberTemp)) {
+        resultDiv.innerHTML = "⚠️ Please enter a valid number!";
+        return;
     }
 
-    // Convert temperature from Fahrenheit to Celsius
-    const fahTOcel = (fehr) => {
-        let celsius = ((fehr - 32) * 5 / 9);
-        return celsius;
-    }
+    const celToFah = (cel) => (cel * 9/5 + 32).toFixed(2);
+    const fahToCel = (fah) => ((fah - 32) * 5/9).toFixed(2);
 
     let result;
-    if (valeTemp == "cel") {
-        result = celTOfah(numberTemp);
-        document.getElementById('resultContainer').innerHTML = `= ${result}°Fahrenheit`;
+    if (valueTemp === "cel") {
+        result = celToFah(numberTemp);
+        resultDiv.innerHTML = `= ${result}° Fahrenheit`;
     } else {
-        result = fahTOcel(numberTemp);
-        document.getElementById('resultContainer').innerHTML = `= ${result}°Celsius`;
+        result = fahToCel(numberTemp);
+        resultDiv.innerHTML = `= ${result}° Celsius`;
     }
 
-    setTimeout(() => {
-        window.location.reload();
-    }, 1500);
-}
-
+    // Optional input reset
+    document.getElementById('temp').value = "";
+};