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();
}

👨‍💻 Daily Code 41 | 🟥 HTML, 🟦 CSS, and 🟨 JS now all together

My Code