From f16acd0ae09c8bc523d648fb8094de5fa71dc280 Mon Sep 17 00:00:00 2001 From: sabin khatri Date: Sun, 26 Oct 2025 18:15:01 +0545 Subject: [PATCH 1/2] add stopwatch code --- js/hacktoberfest2025/stopwatch/index.html | 23 +++++ js/hacktoberfest2025/stopwatch/script.js | 58 +++++++++++++ js/hacktoberfest2025/stopwatch/style.css | 101 ++++++++++++++++++++++ 3 files changed, 182 insertions(+) create mode 100644 js/hacktoberfest2025/stopwatch/index.html create mode 100644 js/hacktoberfest2025/stopwatch/script.js create mode 100644 js/hacktoberfest2025/stopwatch/style.css diff --git a/js/hacktoberfest2025/stopwatch/index.html b/js/hacktoberfest2025/stopwatch/index.html new file mode 100644 index 0000000..0d6a3cb --- /dev/null +++ b/js/hacktoberfest2025/stopwatch/index.html @@ -0,0 +1,23 @@ + + + + + + Modern Stopwatch + + + + +
+
00 : 00 : 00
+ +
+ + + +
+
+ + + + \ No newline at end of file diff --git a/js/hacktoberfest2025/stopwatch/script.js b/js/hacktoberfest2025/stopwatch/script.js new file mode 100644 index 0000000..8c04d64 --- /dev/null +++ b/js/hacktoberfest2025/stopwatch/script.js @@ -0,0 +1,58 @@ + +const timerEl = document.getElementById('timer'); +const startBtn = document.getElementById('startBtn'); +const stopBtn = document.getElementById('stopBtn'); +const resetBtn = document.getElementById('resetBtn'); +const container = document.querySelector('.stopwatch'); + + +let ms = 0, secs = 0, mins = 0; +let running = false; +let rafId = null; + + +const pad = n => (n < 10 ? `0${n}` : n); + + +const render = () => { + timerEl.textContent = `${pad(mins)} : ${pad(secs)} : ${pad(ms)}`; +}; + +let last = 0; +const tick = now => { + if (!last) last = now; + const delta = now - last; + + if (delta >= 10) { + ms++; + if (ms === 100) { ms = 0; secs++; } + if (secs === 60) { secs = 0; mins++; } + render(); + last = now; + } + rafId = requestAnimationFrame(tick); +}; + + +startBtn.addEventListener('click', () => { + if (running) return; + running = true; + container.classList.add('running'); + last = 0; + rafId = requestAnimationFrame(tick); +}); + +stopBtn.addEventListener('click', () => { + if (!running) return; + running = false; + container.classList.remove('running'); + cancelAnimationFrame(rafId); +}); + +resetBtn.addEventListener('click', () => { + running = false; + container.classList.remove('running'); + cancelAnimationFrame(rafId); + ms = secs = mins = 0; + render(); +}); \ No newline at end of file diff --git a/js/hacktoberfest2025/stopwatch/style.css b/js/hacktoberfest2025/stopwatch/style.css new file mode 100644 index 0000000..ef9d48b --- /dev/null +++ b/js/hacktoberfest2025/stopwatch/style.css @@ -0,0 +1,101 @@ + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { font-family: 'Roboto Mono', monospace; } + +body { + min-height: 100vh; + background: linear-gradient(135deg, #1e3c72, #2a5298); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.stopwatch { + background: rgba(255, 255, 255, 0.12); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-radius: 20px; + padding: 2rem 2.5rem; + box-shadow: 0 8px 32px rgba(0,0,0,.37); + text-align: center; + max-width: 90vw; + width: 360px; + transition: transform .3s ease; +} + +.timer { + font-size: clamp(2.5rem, 8vw, 4rem); + font-weight: 500; + letter-spacing: .08em; + margin-bottom: .8rem; + user-select: none; +} + +.stopwatch.running .timer { + animation: pulse 1.2s infinite ease-in-out; +} +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.04); } +} + + +.controls { + display: flex; + gap: .8rem; + justify-content: center; + flex-wrap: wrap; +} + +.btn { + --clr: #555; + background: var(--clr); + color: #fff; + border: none; + border-radius: 12px; + padding: .9rem 1.6rem; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all .25s cubic-bezier(.4,0,.2,1); + position: relative; + overflow: hidden; + min-width: 90px; +} + + +.btn[data-color="green"] { --clr: #4caf50; } +.btn[data-color="red"] { --clr: #f44336; } +.btn[data-color="blue"] { --clr: #2196f3; } + + +.btn::after { + content: ""; + position: absolute; + inset: 0; + background: rgba(255,255,255,.3); + border-radius: inherit; + transform: scale(0); + transition: transform .4s ease; +} +.btn:active::after { transform: scale(2); opacity: 0; transition: 0s; } + +.btn:hover, +.btn:focus-visible { + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0,0,0,.3); +} + +@media (max-width: 380px) { + .stopwatch { padding: 1.5rem; } + .btn { padding: .7rem 1.2rem; font-size: .9rem; } +} \ No newline at end of file From f9e43646b6ead0eb560942b0e787c355b08753c6 Mon Sep 17 00:00:00 2001 From: sabin khatri Date: Mon, 27 Oct 2025 09:20:31 +0545 Subject: [PATCH 2/2] Add Quiz App using html css and js for Hacktoberfest 2025 --- web/Quiz App/index.html | 38 +++++++++++ web/Quiz App/script.js | 138 ++++++++++++++++++++++++++++++++++++++++ web/Quiz App/style.css | 56 ++++++++++++++++ 3 files changed, 232 insertions(+) create mode 100644 web/Quiz App/index.html create mode 100644 web/Quiz App/script.js create mode 100644 web/Quiz App/style.css diff --git a/web/Quiz App/index.html b/web/Quiz App/index.html new file mode 100644 index 0000000..f6d38f4 --- /dev/null +++ b/web/Quiz App/index.html @@ -0,0 +1,38 @@ + + + + + + Quiz App using Javascript + + + +
+
+

Question Text

+
    +
  • + + +
    • +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • +
+ +
+
+ + + \ No newline at end of file diff --git a/web/Quiz App/script.js b/web/Quiz App/script.js new file mode 100644 index 0000000..8aabb68 --- /dev/null +++ b/web/Quiz App/script.js @@ -0,0 +1,138 @@ +const quizData = [ + { + question: "Which of the following is not a JavaScript Data Type?", + a: "Undefined", + b: "Number", + c: "Boolean", + d: "Float", + correct: "d", + }, + { + question: "Which company developed JavaScript?", + a: "Netscape", + b: "Bell Labs", + c: "Sun Microsystems", + d: "IBM", + correct: "a", + }, + { + question: "Inside which HTML element do we put the JavaScript?", + a: "