DEV Community

loading...

To-do list App using HTML,CSS,JS

umapreethidev profile image Umapreethi Santhanakrishnan ・1 min read

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

In index.js ,

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

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

Discussion (0)

pic
Editor guide