Create a to-do list with JavaScript

JavascriptWeb DevelopmentFront End TechnologyObject Oriented Programming


Following is the code to create a to-do list −

 Live Demo

<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//">
<script src=""></script>
<script src=""></script>
   <input type="text" placeholder="Please Enter your Task Here.." id="txtData">
   <button onclick="todoList()">AddTaskToDo</button>
   <ul id="to_do_list">
   function todoList() {
      const myTask = document.getElementById('txtData');
      const addToDoList = document.getElementById('to_do_list');
      let originalValue = `<li> ${myTask.value} </li>`;
      myTask.value = '';
      addToDoList.insertAdjacentHTML('beforeend', originalValue);

To run the above program, save the file name “anyName.html(index.html)”. Right click on the file and select the option “Open with Live Server” in VSCode editor −

This will produce the following output −

Now here, I am going to enter first task.

After entering the first task, click the button.


This will produce the following output on console −

Again, I am entering one more task.

After clicking the button, you will get the following output −

Published on 09-Nov-2020 06:42:25