NepTechTribe · devsdenepal · Oct 27, 2025 · Oct 26, 2025 · Oct 26, 2025 · Oct 27, 2025
diff --git a/js/hacktoberfest2025/stopwatch/index.html b/js/hacktoberfest2025/stopwatch/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Modern Stopwatch</title>
+  <link rel="stylesheet" href="style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
+</head>
+<body>
+  <main class="stopwatch">
+    <div class="timer" id="timer">00 : 00 : 00</div>
+
+    <div class="controls">
+      <button id="startBtn" class="btn" data-color="green">Start</button>
+      <button id="stopBtn"  class="btn" data-color="red">Stop</button>
+      <button id="resetBtn" class="btn" data-color="blue">Reset</button>
+    </div>
+  </main>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/js/hacktoberfest2025/stopwatch/script.js 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();
+});
diff --git a/js/hacktoberfest2025/stopwatch/style.css 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; }
+}
diff --git a/web/Quiz App/index.html b/web/Quiz App/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quiz App using Javascript</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="quiz-container">
+        <div id="quiz">
+            <h2 id="question">Question Text</h2>
+            <ul>
+                <li>
+                    <input type="radio" name="answer" id="a" class="answer" >
+                    <label for="a" id="a_text" >Answer A</label>
+                </li>
+                <li>
+                    <input type="radio" name="answer" id="b" class="answer">
+                    <label for="b" id="b_text">Answer B</label>
+                </li>
+
+                <li>
+                    <input type="radio" name="answer" id="c" class="answer">
+                    <label for="c" id="c_text">Answer C</label>
+                </li>
+
+                <li>
+                    <input type="radio" name="answer" id="d" class="answer">
+                    <label for="d" id="d_text">Answer D</label>
+                </li>
+            </ul>
+            <button id="submit">Submit</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/web/Quiz App/script.js 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: "<script>",
+        b: "<head>",
+        c: "<meta>",
+        d: "<style>",
+        correct: "a",
+    },
+    {
+        question: "Which one is the ternary operator in JavaScript?",
+        a: "#",
+        b: "::",
+        c: "&:",
+        d: "?:",
+        correct: "d",
+    },
+    {
+        question: "Which symbol is used for comments in JavaScript?",
+        a: "\\",
+        b: "//",
+        c: "/* */",
+        d: "*/",
+        correct: "b",
+    },
+    {
+        question: "What are the types of pop-up boxes available in JavaScript?",
+        a: "Alert",
+        b: "Prompt",
+        c: "Confirm",
+        d: "All of the above",
+        correct: "d",
+    },
+    {
+        question: "Which of the following methods checks if its argument is not a number?",
+        a: "isNaN()",
+        b: "nonNaN()",
+        c: "NaN()",
+        d: "None of the above",
+        correct: "a",
+    },
+];
+
+const quiz = document.getElementById('quiz');
+const questionEl = document.getElementById('question');
+const a_text = document.getElementById('a_text');
+const b_text = document.getElementById('b_text');
+const c_text = document.getElementById('c_text');
+const d_text = document.getElementById('d_text');
+const submitBtn = document.getElementById('submit');
+const answerEls = document.querySelectorAll('.answer');
+
+let currentQuiz = 0;
+let score = 0;
+let answers = [];
+
+loadQuiz();
+
+function loadQuiz() {
+    deselectAnswers();
+    const currentQuizData = quizData[currentQuiz];
+    questionEl.innerText = currentQuizData.question;
+    a_text.innerText = currentQuizData.a;
+    b_text.innerText = currentQuizData.b;
+    c_text.innerText = currentQuizData.c;
+    d_text.innerText = currentQuizData.d;
+}
+
+function getSelected() {
+    let answer = undefined;
+    answerEls.forEach(answerEl => {
+        if (answerEl.checked) {
+            answer = answerEl.id;
+        }
+    });
+    return answer;
+}
+
+function deselectAnswers() {
+    answerEls.forEach(answerEl => {
+        answerEl.checked = false;
+    });
+}
+
+submitBtn.addEventListener('click', () => {
+    const answer = getSelected();
+
+    if (answer) {
+        // Save the user's answer
+        answers.push({ question: quizData[currentQuiz].question, answer, correctAnswer: quizData[currentQuiz].correct });
+
+        if (answer === quizData[currentQuiz].correct) {
+            score++;
+        }
+
+        currentQuiz++;
+
+        if (currentQuiz < quizData.length) {
+            loadQuiz();
+        } else {
+            // Show quiz result
+            showResult();
+        }
+    }
+});
+
+function showResult() {
+    quiz.innerHTML = `
+        <h2>You answered ${score}/${quizData.length} questions correctly</h2>
+        <ul>
+            ${answers.map((ans, index) => `
+                <li class="${ans.answer === ans.correctAnswer ? 'correct' : 'wrong'}">
+                    <strong>Question ${index + 1}:</strong> ${ans.question} <br>
+                    <span>Your answer: ${ans.answer.toUpperCase()}</span> <br>
+                    <span>Correct answer: ${ans.correctAnswer.toUpperCase()}</span>
+                </li>
+            `).join('')}
+        </ul>
+        <button onclick="location.reload()">Replay</button>
+    `;
+}
+