To-do list App using HTML,CSS,JS

Second day of my 100 days of code.
I created a To-do list app using HTML,CSS,JS.

The user can add a task, mark the task as checked and delete the task.
Before creating the to-do list app, create the logic and write it down.

• Step 1: Create a input text box and add the button with onclick function.

  <h1>todo's</h1>
    <div class="to-do" id="to-do">
      <input type="text" id="content" />
      <button onclick="newElement()" class="addBtn">Add</button>
    </div>

• Step 2: To check the onclick function is working on button, get the input value from user using document.getElementById() and check it using console.log().

const inputVal = document.getElementById("content").value;
console.log(inputVal);

• Step 3: Once we got input from the user, we have to display it in the UI. For displaying the input value in UI, create a div with id/class and append the list to the div.

<div id="myList"></div>

In index.js ,

 // Creating a list
  const list = document.createElement("li");
  const text = document.createTextNode(inputVal);
  list.appendChild(text);
  const myList = document.getElementById("myList");

document.createTextNode creates a new TEXT node. We are creating the node for appending the child node.

So far, we can create a to-do list, to mark the task as checked and delete the task please refer to the Github resource