Untitled
unknown
plain_text
14 days ago
3.8 kB
2
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: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } header { background-color: #333; 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: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h2 { margin-bottom: 15px; } #new-todo-form label { display: block; margin: 10px 0 5px; } #new-todo-form input, #new-todo-form textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; } #new-todo-form button { background-color: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } #cards-container { display: flex; flex-wrap: wrap; gap: 20px; } .card { background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 15px; width: calc(50% - 10px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .card h3 { margin: 0 0 10px; } .card p { margin: 0; } // 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'); // Function to create a new card function createCard(todo) { const card = document.createElement('div'); card.classList.add('card'); card.innerHTML = ` <h3>${todo.title}</h3> <p>${todo.description}</p> `; cardsContainer.appendChild(card); } // Load stored To-Dos on page load window.onload = function () { todoList.forEach(todo => { createCard(todo); }); }; // Form validation with Regex and Add To-Do 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; } // Create new to-do object const newTodo = { title: title, description: description }; // Add to list and local storage todoList.push(newTodo); localStorage.setItem('todos', JSON.stringify(todoList)); // Add new to-do to the UI createCard(newTodo); // Reset the form todoForm.reset(); });
Leave a Comment