<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exam Prep Helper</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <h1>Exam Prep Helper</h1>

        <button onclick="toggleDarkMode()">Toggle Dark Mode</button>

        <h2>Task List</h2>
        <div class="task-input">
            <input type="text" id="taskInput" placeholder="Enter a task">
            <button onclick="addTask()"><i class="fas fa-plus"></i> Add Task</button>
        </div>
        <ul id="taskList"></ul>

        <h2>Exam Countdown</h2>
        <div class="exam-input">
            <input type="date" id="examDate">
            <button onclick="updateCountdown()">Show Days Left</button>
        </div>
        <p id="countdown" class="countdown-text"></p>

        <h2>Daily Timetable</h2>
        <textarea id="timetableInput" rows="5" placeholder="Enter your daily timetable"></textarea>
        <button onclick="showTimetable()">Show Today's Timetable</button>
        <p id="timetableDisplay" class="timetable-text"></p>
    </div>
  <h4> Made by atharva.a.s </h4>
  <p> From Ainapur devloper </p
   >

    <script src="script.js"></script>
</body>
</html>

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f8;
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

h2 {
    color: #0056b3;
    margin-top: 20px;
}

.task-input, .exam-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

input, textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #0056b3;
    border-radius: 8px;
    transition: border-color 0.3s;
}

input:focus, textarea:focus {
    border-color: #004494;
    outline: none;
}

button {
    padding: 10px 15px;
    background-color: #0056b3;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #004494;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 8px;
    margin: 5px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

li:hover {
    background-color: #d6d9db;
}

p {
    background-color: #e9ecef;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
}

.countdown-text {
    font-weight: bold;
    color: #d9534f; /* Bootstrap danger color */
}

.timetable-text {
    font-style: italic;
    color: #5bc0de; /* Bootstrap info color */
}

/* Dark Mode Styles */
.dark-mode {
    background-color: #333;
    color: #fff;
}

.dark-mode .container {
    background: #444;
}

.dark-mode input, .dark-mode textarea {
    background-color: #555;
    color: #fff;
    border: 2px solid #777;
}

.dark-mode button {
    background-color: #007bff;
}

.completed {
    text-decoration: line-through;
    color: #6c757d; /* Bootstrap muted color */
}

let tasks = [];

// Load tasks from local storage
window.onload = () => {
    const storedTasks = JSON.parse(localStorage.getItem("tasks"));
    if (storedTasks) {
        tasks = storedTasks;
        updateTaskList();
    }
};

function addTask() {
    const taskInput = document.getElementById("taskInput");
    const task = taskInput.value;
    if (task) {
        tasks.push({ text: task, completed: false }); // Store task object
        taskInput.value = ""; // Clear the input
        updateTaskList();
        saveTasksToLocalStorage(); // Save tasks
    } else {
        alert("Please enter a task.");
    }
}

function updateTaskList() {
    const taskList = document.getElementById("taskList");
    taskList.innerHTML = ""; // Clear current list
    tasks.forEach((task, index) => {
        const li = document.createElement("li");
        li.textContent = task.text;
        li.className = task.completed ? 'completed' : ''; // Add class if completed
        li.onclick = () => toggleTaskCompletion(index); // Toggle completion on click
        taskList.appendChild(li);
    });
}

function toggleTaskCompletion(index) {
    tasks[index].completed = !tasks[index].completed; // Toggle completion status
    updateTaskList();
    saveTasksToLocalStorage(); // Save tasks
}

function deleteTask(index) {
    tasks.splice(index, 1);
    updateTaskList();
    saveTasksToLocalStorage(); // Save tasks
}

function saveTasksToLocalStorage() {
    localStorage.setItem("tasks", JSON.stringify(tasks)); // Save tasks to local storage
}

function updateCountdown() {
    const examDate = new Date(document.getElementById("examDate").value);
    const today = new Date();
    const timeDiff = examDate - today;
    const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
    const countdown = document.getElementById("countdown");
    
    if (daysLeft >= 0) {
        countdown.textContent = `Days left until exam: ${daysLeft}`;
        notifyUser(`You have ${daysLeft} days left until your exam!`);
    } else {
        countdown.textContent = "Exam date has passed!";
    }
}

function notifyUser(message) {
    if (Notification.permission === "granted") {
        new Notification("Exam Reminder", {
            body: message,
        });
    } else if (Notification.permission !== "denied") {
        Notification.requestPermission().then(permission => {
            if (permission === "granted") {
                new Notification("Exam Reminder", {
                    body: message,
                });
            }
        });
    }
}

function showTimetable() {
    const timetableInput = document.getElementById("timetableInput").value;
    const timetableDisplay = document.getElementById("timetableDisplay");
    timetableDisplay.textContent = timetableInput.trim() || "No timetable entered.";
}

function toggleDarkMode() {
    document.body.classList.toggle("dark-mode");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.