fixed issue #172 temperature enhancement

Temperature-Converter/CSS/style.css

@@ -1,49 +1,104 @@
-@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap');
-
-*{
-    font-family: 'Mulish', sans-serif;
-}
-
-body{
-    width: 100%;
-    height: 85vh;
-    background-color: #eae2b7;
-    display: grid;
-    justify-content: center;
-    align-items: center;
-    place-items: center;
-}
-
-#fa{
-    font-size: 60px;
-}
-
-form{
-    background-color: #fab1a0;
-    padding: 50px;
+body {
+    font-family: 'Segoe UI', sans-serif;
+    background: linear-gradient(135deg, #e8eaf6, #c5cae9);
     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;
-}
-
-#tempCalc label{
-    font-size: 30px;
-}
-
-/* [type="submit"]{
-    height: 35px;
-    margin: 20px;
-    width: 100px;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+  }
+
+  .converter {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+    padding: 30px;
+    width: 340px;
+    text-align: center;
+  }
+
+  h2 {
+    color: #3f51b5;
+    margin-bottom: 15px;
+  }
+
+  input, select, button {
+    width: 90%;
+    padding: 10px;
+    margin: 8px 0;
+    border: 1px solid #ccc;
+    border-radius: 8px;
     font-size: 15px;
-    border: none;
-    border-radius: 4px;
-    background-color: black;
+  }
+
+  button {
+    background-color: #3f51b5;
     color: white;
-} */
-
-#resultContainer{
-    font-size: 35px;
-}
+    font-weight: bold;
+    cursor: pointer;
+    transition: 0.3s;
+  }
+
+  button:hover {
+    background-color: #283593;
+  }
+
+  #swapBtn {
+    background-color: #7986cb;
+    width: 45%;
+  }
+
+  #swapBtn:hover {
+    background-color: #5c6bc0;
+  }
+
+  .btn-group {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  #result {
+    margin-top: 15px;
+    font-size: 18px;
+    color: #1a237e;
+    font-weight: 500;
+  }
+
+  h3 {
+    color: #303f9f;
+    margin-top: 20px;
+    margin-bottom: 8px;
+  }
+
+  #historyList {
+    list-style: none;
+    padding: 0;
+    max-height: 150px;
+    overflow-y: auto;
+    text-align: left;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background: #f4f6fb;
+  }
+
+  #historyList li {
+    padding: 8px 10px;
+    border-bottom: 1px solid #ddd;
+    font-size: 14px;
+  }
+
+  #historyList li:last-child {
+    border-bottom: none;
+  }
+
+  #clearBtn {
+    background-color: #e53935;
+    width: 50%;
+    margin-top: 10px;
+  }
+
+  #clearBtn:hover {
+    background-color: #c62828;
+  }
+

Temperature-Converter/Js/script.js

@@ -1,69 +1,94 @@
-console.log('Welcome to 🌡️ Temperature Converter');
-
-const tempLoad = () => {
-    let fa = document.getElementById('fa');
-    fa.innerHTML = "&#xf2cb";
-    fa.style.color = "#ffa41b";
-
-    setTimeout(() => {
-        fa.innerHTML = "";
-        fa.style.color = "#ffa41b";
-    }, 1000)
-
-    setTimeout(() => {
-        fa.innerHTML = "";
-    }, 2000)
-
-    setTimeout(() => {
-        fa.innerHTML = "";
-    }, 3000)
-
-    setTimeout(() => {
-        fa.innerHTML = "";
-        fa.style.color = "#ff5151";
-    }, 4000)
-}
-
-setInterval(() => {
-    fa.style.color = "#ffa41b";
-    tempLoad();
-}, 5000);
-
-
-tempLoad();
-
-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;
+function convertTemp(saveHistory = false) {
+    const input = parseFloat(document.getElementById('inputValue').value);
+    const from = document.getElementById('fromUnit').value;
+    const to = document.getElementById('toUnit').value;
+    const resultField = document.getElementById('result');
+
+    if (isNaN(input)) {
+      resultField.textContent = "Please enter a valid number.";
+      return;
     }
-
-    // Convert temperature from Fahrenheit to Celsius
-    const fahTOcel = (fehr) => {
-        let celsius = ((fehr - 32) * 5 / 9);
-        return celsius;
+
+    // Convert everything via Kelvin
+    const toKelvin = {
+      C: (v) => v + 273.15,
+      F: (v) => (v - 32) * 5/9 + 273.15,
+      K: (v) => v,
+      R: (v) => v * 5/9
+    };
+
+    const fromKelvin = {
+      C: (v) => v - 273.15,
+      F: (v) => (v - 273.15) * 9/5 + 32,
+      K: (v) => v,
+      R: (v) => v * 9/5
+    };
+
+    const kelvinValue = toKelvin[from](input);
+    const finalValue = fromKelvin[to](kelvinValue);
+
+    resultField.textContent = `${input}°${from} = ${finalValue.toFixed(2)}°${to}`;
+
+    // Save to history only when button pressed
+    if (saveHistory) {
+      saveToHistory(input, from, to, finalValue);
     }
-
-    let result;
-    if (valeTemp == "cel") {
-        result = celTOfah(numberTemp);
-        document.getElementById('resultContainer').innerHTML = `= ${result}°Fahrenheit`;
-    } else {
-        result = fahTOcel(numberTemp);
-        document.getElementById('resultContainer').innerHTML = `= ${result}°Celsius`;
+  }
+
+  // Real-time preview only (no save)
+  document.getElementById('inputValue').addEventListener('input', () => convertTemp(false));
+  document.getElementById('fromUnit').addEventListener('change', () => convertTemp(false));
+  document.getElementById('toUnit').addEventListener('change', () => convertTemp(false));
+
+  // Convert button explicitly saves history
+  document.querySelector('button[onclick="convertTemp()"]').onclick = () => convertTemp(true);
+
+  // Swap button
+  document.getElementById('swapBtn').addEventListener('click', () => {
+    const fromSelect = document.getElementById('fromUnit');
+    const toSelect = document.getElementById('toUnit');
+    const temp = fromSelect.value;
+    fromSelect.value = toSelect.value;
+    toSelect.value = temp;
+    convertTemp(false);
+  });
+
+  // History
+  function saveToHistory(input, from, to, output) {
+    const record = {
+      input: `${input}°${from}`,
+      output: `${output.toFixed(2)}°${to}`,
+      time: new Date().toLocaleString()
+    };
+
+    const history = JSON.parse(localStorage.getItem('tempHistory')) || [];
+    history.unshift(record);
+    localStorage.setItem('tempHistory', JSON.stringify(history));
+    renderHistory();
+  }
+
+  function renderHistory() {
+    const historyList = document.getElementById('historyList');
+    const history = JSON.parse(localStorage.getItem('tempHistory')) || [];
+    historyList.innerHTML = '';
+
+    if (history.length === 0) {
+      historyList.innerHTML = '<li>No history yet</li>';
+      return;
     }
-
-    setTimeout(() => {
-        window.location.reload();
-    }, 1500);
-}
-
+
+    history.forEach(item => {
+      const li = document.createElement('li');
+      li.textContent = `${item.time}: ${item.input} → ${item.output}`;
+      historyList.appendChild(li);
+    });
+  }
+
+  function clearHistory() {
+    localStorage.removeItem('tempHistory');
+    renderHistory();
+  }
+
+  document.getElementById('clearBtn').addEventListener('click', clearHistory);
+  window.onload = renderHistory;
+