Untitled
unknown
plain_text
9 days ago
5.6 kB
3
Indexable
Never
<!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="styles.css"> </head> <body> <header> <h1>To-Do List</h1> </header> <main> <!-- To-Do Form --> <section id="todo-form"> <h2>Add New To-Do</h2> <form id="new-todo-form"> <label for="todo-title">Title:</label> <input type="text" id="todo-title" name="todo-title" required> <label for="todo-desc">Description:</label> <textarea id="todo-desc" name="todo-desc" required></textarea> <button type="submit">Add To-Do</button> </form> </section> <!-- To-Do List Section --> <section id="todo-list"> <h2>Your To-Dos</h2> <div id="cards-container"> <!-- Cards will be added here dynamically --> </div> </section> </main> <script src="script.js"></script> </body> </html> body { font-family: 'Roboto', sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } header { background-color: #4CAF50; color: white; padding: 1em 0; text-align: center; } #todo-form, #todo-list { max-width: 600px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } h2 { margin-bottom: 15px; font-size: 1.5em; color: #333; } #new-todo-form label { display: block; margin: 10px 0 5px; font-weight: bold; } #new-todo-form input, #new-todo-form textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; } #new-todo-form button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } #new-todo-form button:hover { background-color: #45a049; } #cards-container { display: flex; flex-direction: column; gap: 20px; } .card { background-color: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 20px; position: relative; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .card h3 { margin: 0 0 10px; } .card p { margin: 0 0 15px; } .card-buttons { position: absolute; top: 20px; right: 20px; } .card button { background-color: #f44336; color: white; border: none; padding: 5px 10px; margin-left: 10px; border-radius: 5px; cursor: pointer; } .card button.update { background-color: #ffa726; } .card button:hover { opacity: 0.8; } // Initialize to-do list const todoList = JSON.parse(localStorage.getItem('todos')) || []; // DOM Elements const todoForm = document.getElementById('new-todo-form'); const cardsContainer = document.getElementById('cards-container'); let updateMode = false; let currentIndex = null; // Function to create a new card function createCard(todo, index) { const card = document.createElement('div'); card.classList.add('card'); card.innerHTML = ` <h3>${todo.title}</h3> <p>${todo.description}</p> <div class="card-buttons"> <button class="delete" onclick="deleteTodo(${index})">Delete</button> <button class="update" onclick="editTodo(${index})">Update</button> </div> `; cardsContainer.appendChild(card); } // Load stored To-Dos on page load window.onload = function () { todoList.forEach((todo, index) => { createCard(todo, index); }); }; // Form submission event todoForm.addEventListener('submit', function (e) { e.preventDefault(); // Get form values const title = document.getElementById('todo-title').value; const description = document.getElementById('todo-desc').value; // Regex Validation: Title must be at least 3 characters const titleRegex = /^[A-Za-z0-9 ]{3,}$/; if (!titleRegex.test(title)) { alert('Title must be at least 3 characters long and only contain letters and numbers.'); return; } // Check if we're in update mode if (updateMode) { todoList[currentIndex] = { title, description }; updateMode = false; currentIndex = null; } else { // Create new to-do object const newTodo = { title: title, description: description }; // Add to list and local storage todoList.push(newTodo); } // Update localStorage localStorage.setItem('todos', JSON.stringify(todoList)); // Refresh the UI renderTodos(); // Reset the form todoForm.reset(); }); // Function to render all to-dos function renderTodos() { cardsContainer.innerHTML = ''; // Clear existing cards todoList.forEach((todo, index) => { createCard(todo, index); }); } // Function to delete a todo function deleteTodo(index) { todoList.splice(index, 1); // Remove the to-do localStorage.setItem('todos', JSON.stringify(todoList)); // Update localStorage renderTodos(); // Re-render the list } // Function to edit a todo function editTodo(index) { const todo = todoList[index]; document.getElementById('todo-title').value = todo.title; document.getElementById('todo-desc').value = todo.description; updateMode = true; currentIndex = index; }
Leave a Comment