JS Clone Project [to-do list]

JS Clone Project [to-do list] - 1,2

Kai1996 2021. 12. 5. 23:27

The following code will cover generating a to-do list and delete button.

- todo.js

const todoForm = document.querySelector("#todo-form");
const todoList = document.querySelector("#todo-list");
const todoInput = document.querySelector("#todo-form input");
// const list_key = "userList"; //Will be used later on 


//3. Delete selected todo list 
function deleteTodo(event){
    //We can identify which li called this event by inspecting event.target object. 
    console.log(event.target);
    console.dir(event.target.parentElement.innerText);

    //I designate the selected li element 
    const li = event.target.parentElement;

    //Remove the list
    li.remove();
     
}

//2. Creating HTML element
function paintToDo(newTodo){
    //Desired structure of HTML is 
    // <li> 
    //      <span> lalalal </span>
    //      <button> X </button>
    //</li>


    const list = document.createElement("li");
    const span = document.createElement("span");
    span.innerHTML = newTodo;

    const button = document.createElement("button");
    button.innerHTML = "X";
    
    //Calls for deleteing selected toDo list function 
    button.addEventListener("click", deleteTodo);

    list.appendChild(span);
    list.appendChild(button);
    todoList.appendChild(list);
}

- index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="css/style.css">
    
    <title>Clone Momentum App</title>
</head>

<body>
    <form id ="login-form" class = "hidden">

        
        <input required maxlength="15" type ="text" placeholder=" What is your name?"/>
        <button> Log In </button>
        
    </form>
    <h1 id = "greeting" class = "hidden"> </h1> 
    
    <form id = "todo-form">
        <input type = "text" placeholder="Write a To Do and Press Enter" required>
    </form>

    <ul id = "todo-list">

    </ul>

    <h2 id ="clock"></h2>

    <div id ="quote">
        <span > </span>
        <span > </span>
    </div>
   

    <script src = "js/quotes.js"></script>
    <script src = "js/greeting.js"></script>
    <script src = "js/clock.js"></script>
    <script src = "js/background.js"></script>
    <script src = "js/todo.js"></script>
</body>

</html>

--> Added :

1. form for "todo-form"

2. ul for "todo-list"