Categories JavascriptPosted on

Javascript native todo list

Hi, here a small code that I create with javascript native that handle a “todo list” 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Javascript THIS</title>

        <style type="text/css">
            button {
                color: white;
                text-decoration: bold;
                font-size: 1em;
                width: 100px;
                height: 50px;
                background-color: #0000b2;
                margin-top: 50px;
                border-radius: 5px;
                margin-left: 30px;
            }
            </style>
    </head>
    <body>
        <h1>Enter a todo:</h1>
        <input type="text" id="userInput">
        <button id="userButton">Add</button>
        <h2>Todo list:</h2>
        <ul class="list" id="userList"></ul>

        <script src="app.js"></script>
    </body>
</html>
(function() {
    // Global variables to set id attributte to the <li>
    let indexId = 0;
    
    // Selecting current DOM elements 
    const userInput = document.getElementById('userInput');
    const userButton = document.getElementById('userButton');
    const userList = document.getElementById('userList');

    // Event listeners
    if (userInput) {
        userButton.addEventListener('click', createTodo); // Add to do on user click button
    }

    // Methods
    function createTodo() { // To create the <li> element
        // <li> element
        const li = document.createElement('li'); // creating <li> element
        li.appendChild(document.createTextNode(userInput.value)); // text of the <li>
        li.setAttribute("id", `${indexId++}`); // id to the <li>
        userList.appendChild(li); // adding <li> to <ul>
        userInput.value = ""; // cleaning the user input
        
        // <button> that delete in <li>
        const deleteButton = document.createElement('button');
        deleteButton.appendChild(document.createTextNode("X"));
        li.appendChild(deleteButton);
        deleteButton.addEventListener('click', () => {
            deleteTodo(li);
        });
    }

    function deleteTodo(li) { // To delete the <li> element
        li.parentNode.removeChild(li);
    }
})();

Result:

By Cristina Rojas.

React todo list