Maybe it’s too boring but I just keep following the free SuperSimpleDev course. I just like it too much! Today the todo list from last time became much prettier. Check out my code :)
My Code
What I found most interesting this time is the grid pattern and how this works out with nicely aligning objects. Such a nice collaboration between 🟥 HTML, 🟦 CSS, and 🟨 JS!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo List</title> <link rel="stylesheet" href="styles/11-todo.css"> </head> <body> <p>Todo List</p> <div class="todo-input-grid"> <input placeholder="Todo name" class="js-name-input name-input"> <input type="date" class="js-due-date-input due-date-input"> <button onclick="addTodo();" class="add-todo-button">Add</button> </div> <div class="js-todo-list todo-grid"></div> <script src="scripts/11-todo.js"></script> </body> </html> body { font-family: Arial; } .todo-grid, .todo-input-grid { display: grid; grid-template-columns: 200px 150px 100px; column-gap: 10px; row-gap: 10px; align-items: center; } .todo-input-grid { margin-bottom: 10px; align-items: stretch; } .name-input, .due-date-input { font-size: 15px; padding: 6px; } .add-todo-button { background-color: green; color: white; border: none; font-size: 15px; cursor: pointer; } .delete-todo-button { background-color: darkred; color: white; border: none; font-size: 15; cursor: pointer; padding-top: 10px; padding-bottom: 10px; } const todoList = [{ name: 'make dinner', dueDate: '2024-01-20', }, { name: 'wash dishes', dueDate: '2024-01-24' }]; renderTodoList(); function renderTodoList() { let todoListHTML = ''; for (let i = 0; i < todoList.length; i++) { const todoObject = todoList[i]; const name = todoObject.name; const dueDate = todoObject.dueDate; const html = ` <div>${name}</div> <div>${dueDate}</div> <button onclick=" todoList.splice(${i}, 1); renderTodoList(); " class="delete-todo-button">Delete</button> `; todoListHTML += html; } document.querySelector('.js-todo-list').innerHTML = todoListHTML; } function addTodo() { const inputElement = document.querySelector('.js-name-input'); const name = inputElement.value; const dateInputElement = document.querySelector('.js-due-date-input'); const dueDate = dateInputElement.value; todoList.push({ name: name, dueDate, dueDate }); inputElement.value = '' renderTodoList(); } 
Top comments (0)