diff --git a/Temperature-Converter/CSS/style.css b/Temperature-Converter/CSS/style.css index 5337508..e5fa757 100644 --- a/Temperature-Converter/CSS/style.css +++ b/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; -} \ No newline at end of file +/* ====== 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; + } +} diff --git a/Temperature-Converter/Js/script.js b/Temperature-Converter/Js/script.js index ed76bdb..379378e 100644 --- a/Temperature-Converter/Js/script.js +++ b/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 = ""; + 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 = ""; +}; diff --git a/Temperature-Converter/index.html b/Temperature-Converter/index.html index 41b0a58..200bc47 100644 --- a/Temperature-Converter/index.html +++ b/Temperature-Converter/index.html @@ -2,66 +2,97 @@ - - - + + + - + 🌡️ Temperature Converter - + + - - + + - - + + - - + + - Temperature Converter + + + +
+
+

+ + Temperature Converter +

+

Convert temperatures between Celsius and Fahrenheit instantly.

+
-

Temperature Converter

- -
- -
-
- -
-
- -
-
- - - -
- + + +
+ + +
+ +
+ + +
+ + + + +
+
- - + + - - + + - - - + + + - \ No newline at end of file +