diff --git a/Clock/index.css b/Clock/index.css index 81c1a15..29530a7 100644 --- a/Clock/index.css +++ b/Clock/index.css @@ -1,37 +1,104 @@ -#clockContainer{ - position: relative; - margin: auto; - height: 40vw; - width: 40vw; - background: url(clock.png) no-repeat; - background-size: 100%; -} - -#hour, #minute, #second{ - position: absolute; - background: black; - border-radius: 10px; - transform-origin: bottom; -} -#hour{ - width: 1.8%; - height: 25%; - top: 25%; - left: 48.85%; - opacity: 0.8; -} -#minute{ - width: 1.6%; - height: 30%; - top: 19%; - left: 48.9%; - opacity: 0.8; -} -#second{ - width: 1%; - height: 40%; - top: 9%; - left: 49.25%; - opacity: 0.8; - -} \ No newline at end of file +/* Basic layout */ +body { + margin: 0; + height: 100vh; + background: linear-gradient(135deg, #141e30, #243b55); + display: flex; + justify-content: center; + align-items: center; + font-family: "Poppins", sans-serif; + overflow: hidden; +} + +/* Title */ +.title { + color: #ffffff; + font-size: 2rem; + letter-spacing: 2px; + margin-bottom: 1rem; + text-align: center; +} + +/* Clock container */ +.wrapper { + text-align: center; + backdrop-filter: blur(20px); + background: rgba(255, 255, 255, 0.05); + padding: 30px 50px; + border-radius: 20px; + box-shadow: 0 0 25px rgba(0, 0, 0, 0.4); +} + +/* Analog clock design */ +#clockContainer { + position: relative; + height: 280px; + width: 280px; + margin: auto; + border: 10px solid rgba(255, 255, 255, 0.2); + border-radius: 50%; + background: radial-gradient(circle, #1f2933, #111); + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 255, 255, 0.1); +} + +/* Clock hands */ +#hour, #minute, #second { + position: absolute; + transform-origin: bottom center; + border-radius: 8px; +} + +#hour { + width: 6px; + height: 70px; + background: #e0e0e0; + top: 65px; + left: calc(50% - 3px); + box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); +} + +#minute { + width: 4px; + height: 95px; + background: #b0b0b0; + top: 40px; + left: calc(50% - 2px); + box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); +} + +#second { + width: 2px; + height: 110px; + background: #ff5252; + top: 25px; + left: calc(50% - 1px); + box-shadow: 0 0 10px rgba(255, 82, 82, 0.8); + transition: transform 0.05s linear; +} + +/* Center dot */ +#centerDot { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 14px; + height: 14px; + background: #ff5252; + border-radius: 50%; + box-shadow: 0 0 10px rgba(255, 82, 82, 0.8); +} + +/* Digital clock */ +#digitalClock { + margin-top: 1.5rem; + font-size: 2rem; + color: #ffffff; + background: rgba(255, 255, 255, 0.1); + padding: 10px 20px; + border-radius: 12px; + display: inline-block; + box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); + letter-spacing: 2px; + text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); +} diff --git a/Clock/index.html b/Clock/index.html index 13664bd..e1b0fe8 100644 --- a/Clock/index.html +++ b/Clock/index.html @@ -1,17 +1,22 @@ - - - Clock Using Pure JS - - + + + Modern Analog & Digital Clock + + +
+

PeerClock

-
-
-
+
+
+
+
+
+
- \ No newline at end of file + diff --git a/Clock/index.js b/Clock/index.js index 835800b..2a1a455 100644 --- a/Clock/index.js +++ b/Clock/index.js @@ -1,13 +1,31 @@ -setInterval(() => { - d = new Date(); - htime = d.getHours(); - mtime = d.getMinutes(); - stime = d.getSeconds(); - hrotation = 30*htime + mtime/2; - mrotation = 6*mtime; - srotation = 6*stime; - - hour.style.transform = `rotate(${hrotation}deg)`; - minute.style.transform = `rotate(${mrotation}deg)`; - second.style.transform = `rotate(${srotation}deg)`; -}, 1000); \ No newline at end of file +function updateClock() { + const d = new Date(); + const htime = d.getHours(); + const mtime = d.getMinutes(); + const stime = d.getSeconds(); + const ms = d.getMilliseconds(); + + // continuous smooth second hand + const srotation = 6 * (stime + ms / 1000); + const mrotation = 6 * (mtime + stime / 60); + const hrotation = 30 * (htime % 12 + mtime / 60); + + const hour = document.getElementById("hour"); + const minute = document.getElementById("minute"); + const second = document.getElementById("second"); + + hour.style.transform = `rotate(${hrotation}deg)`; + minute.style.transform = `rotate(${mrotation}deg)`; + second.style.transform = `rotate(${srotation}deg)`; + + // Digital clock display + const digital = document.getElementById("digitalClock"); + const formattedHours = htime.toString().padStart(2, "0"); + const formattedMinutes = mtime.toString().padStart(2, "0"); + const formattedSeconds = stime.toString().padStart(2, "0"); + + digital.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`; +} + +// Run every frame for smooth movement +setInterval(updateClock, 50); 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

    + + +
    + + + +