TnDgla · Muskan-gupta37 · Nov 14, 2024 · Nov 17, 2024 · Nov 17, 2024
diff --git a/Alarm System/alarm.css b/Alarm System/alarm.css
@@ -0,0 +1,43 @@
+body{
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    background-color: beige;
+}
+
+.alarm-container{
+    margin: top 100px;
+
+}
+
+.clock{
+    font-size: 2rem;
+    margin-bottom: 20px;
+
+}
+
+.alarm-settings input{
+    font-size: 1rem;
+    padding: 5px;
+}
+
+.hidden{
+    display:none;
+}
+
+#alarm-alert {
+    margin-top: 20px;
+    background-color: burlywood;
+    color: white;
+    padding: 15px;
+    border-radius: 5px;
+    animation: flash 1s infinite;
+  }
+
+  @keyframes flash {
+    0%, 100% {
+      background-color:crimson;
+    }
+    50% {
+      background-color: #ff7961;
+    }
+  }
diff --git a/Alarm System/alarm.html b/Alarm System/alarm.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Alarm System</title>
+  <link rel="stylesheet" href="alarm.css">
+</head>
+<body>
+  <div class="alarm-container">
+    <h1>Alarm System</h1>
+    <div class="clock" id="current-time">00:00:00</div>
+    <div class="alarm-settings">
+      <input type="time" id="alarm-time">
+      <button id="set-alarm">Set Alarm</button>
+    </div>
+    <div id="alarm-alert" class="hidden">
+      <p>Alarm is ringing!</p>
+      <button id="snooze-alarm">Snooze</button>
+      <button id="stop-alarm">Stop</button>
+    </div>
+  </div>
+  <script src="alarm.js"></script>
+</body>
+</html>
diff --git a/Alarm System/alarm.js b/Alarm System/alarm.js
@@ -0,0 +1,58 @@
+const currentTimeElement = document.getElementById("current-time");
+const alarmTimeInput = document.getElementById("alarm-time");
+const setAlarmButton = document.getElementById("set-alarm");
+const alarmAlert = document.getElementById("alarm-alert");
+const snoozeAlarmButton = document.getElementById("snooze-alarm");
+const stopAlarmButton = document.getElementById("stop-alarm");
+
+let alarmTime = null;
+let alarmTimeout = null;
+
+function updateTime() {
+  const now = new Date();
+  const timeString = now.toLocaleTimeString("en-US", { hour12: false });
+  currentTimeElement.textContent = timeString;
+
+  if (timeString === alarmTime) {
+    triggerAlarm();
+  }
+}
+
+setInterval(updateTime, 1000);
+
+
+setAlarmButton.addEventListener("click", () => {
+  alarmTime = alarmTimeInput.value + ":00"; 
+  if (alarmTime) {
+    alert(`Alarm set for ${alarmTime}`);
+  } else {
+    alert("Please select a valid time.");
+  }
+});
+
+
+function triggerAlarm() {
+  alarmAlert.classList.remove("hidden");
+  alarmTimeout = setTimeout(() => {
+    playSound();
+  }, 500);
+}
+
+
+snoozeAlarmButton.addEventListener("click", () => {
+  alarmAlert.classList.add("hidden");
+  alarmTime = null; 
+});
+
+
+stopAlarmButton.addEventListener("click", () => {
+  alarmAlert.classList.add("hidden");
+  alarmTime = null;
+  clearTimeout(alarmTimeout);
+});
+
+
+function playSound() {
+  const audio = new Audio("alarm-sound.mp3");
+  audio.play();
+}
diff --git a/To-Do-List/index.html b/To-Do-List/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>To-Do List</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <button id="toggleFormButton">Create To-Do</button>
+    <button id="deleteAllButton">Delete All</button> <!-- New Delete All button -->
+    <div id="todoFormContainer" class="hidden">
+      <h2>To-Do List</h2>
+      <form id="todoForm">
+        <input type="hidden" id="todoId">
+        <label for="task">Task:</label>
+        <input type="text" id="task" required>
+
+        <label for="date">Date:</label>
+        <input type="date" id="date" required>
+
+        <label for="time">Time:</label>
+        <input type="time" id="time" required>
+
+        <button type="submit" id="submitButton">Add Task</button>
+      </form>
+    </div>
+    <ul id="todoList"></ul>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/To-Do-List/script.js b/To-Do-List/script.js
@@ -0,0 +1,86 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const toggleFormButton = document.getElementById("toggleFormButton");
+    const deleteAllButton = document.getElementById("deleteAllButton"); // New Delete All button
+    const todoFormContainer = document.getElementById("todoFormContainer");
+    const todoForm = document.getElementById("todoForm");
+    const todoList = document.getElementById("todoList");
+    const submitButton = document.getElementById("submitButton");
+
+    let todos = JSON.parse(localStorage.getItem("todos")) || [];
+    let isEditing = false;
+    let editingIndex = null;
+
+    toggleFormButton.addEventListener("click", () => {
+      todoFormContainer.classList.toggle("hidden");
+      todoForm.reset();
+      isEditing = false;
+      editingIndex = null;
+      submitButton.textContent = "Add Task";
+    });
+
+    deleteAllButton.addEventListener("click", () => {
+      todos = [];
+      localStorage.setItem("todos", JSON.stringify(todos)); // Update local storage
+      renderTodos(); // Refresh the task list
+    });
+
+    todoForm.addEventListener("submit", (e) => {
+      e.preventDefault();
+
+      const task = document.getElementById("task").value;
+      const date = document.getElementById("date").value;
+      const time = document.getElementById("time").value;
+
+      if (isEditing) {
+        todos[editingIndex] = { task, date, time };
+        isEditing = false;
+        submitButton.textContent = "Add Task";
+      } else {
+        todos.push({ task, date, time });
+      }
+
+      localStorage.setItem("todos", JSON.stringify(todos)); // Save updated todos to local storage
+      renderTodos();
+      todoForm.reset();
+      todoFormContainer.classList.add("hidden");
+    });
+
+    function renderTodos() {
+      todoList.innerHTML = "";
+      todos.forEach((todo, index) => {
+        const li = document.createElement("li");
+        li.className = "todo-item";
+
+        li.innerHTML = `
+          <span>${todo.task} - ${todo.date} ${todo.time}</span>
+          <div>
+            <button onclick="editTask(${index})">Edit</button>
+            <button onclick="deleteTask(${index})">Delete</button>
+          </div>
+        `;
+        todoList.appendChild(li);
+      });
+    }
+
+    window.editTask = function(index) {
+      const todo = todos[index];
+      document.getElementById("task").value = todo.task;
+      document.getElementById("date").value = todo.date;
+      document.getElementById("time").value = todo.time;
+
+      isEditing = true;
+      editingIndex = index;
+      submitButton.textContent = "Update Task";
+      todoFormContainer.classList.remove("hidden");
+    };
+
+    window.deleteTask = function(index) {
+      todos.splice(index, 1);
+      localStorage.setItem("todos", JSON.stringify(todos)); // Update local storage
+      renderTodos();
+    };
+
+    // Initial render of stored todos
+    renderTodos();
+  });
+
diff --git a/To-Do-List/style.css b/To-Do-List/style.css
@@ -0,0 +1,82 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f5f5f5;
+  }
+
+  .container {
+    width: 300px;
+  }
+
+  button {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #caf3ca;
+    color: #f50b26;
+    border: none;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: #ec7bc2;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  form {
+    background-color: none;
+    padding: 20px;
+    border: 1px solid #6407f9;
+    margin-bottom: 10px;
+  }
+
+  label {
+    display: block;
+    margin: 10px 0 5px;
+  }
+
+  input {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ef067e;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  .todo-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    margin-bottom: 5px;
+  }
+
+  .todo-item button {
+    background-color: #a2a1f4;
+    color: white;
+    border: none;
+    padding: 5px;
+    cursor: pointer;
+  }
+
+  .todo-item button:hover {
+    background-color: #efa5ac;
+  }
+