DEV Community

Cover image for πŸ‘¨β€πŸ’» Daily Code 41 | πŸŸ₯ HTML, 🟦 CSS, and 🟨 JS now all together
Gregor Schafroth
Gregor Schafroth

Posted on

πŸ‘¨β€πŸ’» Daily Code 41 | πŸŸ₯ HTML, 🟦 CSS, and 🟨 JS now all together

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>
Enter fullscreen mode Exit fullscreen mode
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;
}
Enter fullscreen mode Exit fullscreen mode
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();
}
Enter fullscreen mode Exit fullscreen mode

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs