diff --git a/Temperature-Converter/CSS/style.css b/Temperature-Converter/CSS/style.css index 5337508..1b10705 100644 --- a/Temperature-Converter/CSS/style.css +++ b/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; -} \ No newline at end of file + 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; + } + \ No newline at end of file diff --git a/Temperature-Converter/Js/script.js b/Temperature-Converter/Js/script.js index ed76bdb..503196b 100644 --- a/Temperature-Converter/Js/script.js +++ b/Temperature-Converter/Js/script.js @@ -1,69 +1,94 @@ -console.log('Welcome to 🌡️ Temperature Converter'); - -const tempLoad = () => { - let 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 = ""; - 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 = '
  • No history yet
    • '; + 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; + \ No newline at end of file diff --git a/Temperature-Converter/index.html b/Temperature-Converter/index.html index 41b0a58..dbae78b 100644 --- a/Temperature-Converter/index.html +++ b/Temperature-Converter/index.html @@ -1,67 +1,45 @@ - - - - - - - - - - - - - - - - - - - Temperature Converter + + + Temperature Converter + - +
    +

    Temperature Converter

    -

    Temperature Converter

    + -
    - -
    -
    - -
    -
    - -
    -
    + - - -
    - -
    + to - - + - - +
    + + +
    - - - - +

    - \ No newline at end of file +

    Conversion History

    + + +
    + + + +