To Do List

Native JavaScript

<html> 
<body> 
   <form> 
      <input type="text" name="todo"/> 
      <input type="button" onclick="handleAdd()" value="Add"/> 
      <input type="button" onclick="handleClear()" value="Clear"/> 
   </form> 
   <ul id="todos"></ul> 

   <script> 
      const form = document.querySelector('form');   
      const input = document.querySelector("[name='todo']");   
      const todoList = document.getElementById('todos');   
      const existingTodos = JSON.parse(localStorage.getItem('todos') )  
      const array_ToDoData = existingTodos || []; 
      array_ToDoData.forEach(todo => { 
          displayTodo(todo); 
      }); 

      function displayTodo(todoText) { 
         const li = document.createElement('li');   
         li.innerHTML = todoText; 
         todoList.appendChild(li); 
         localStorage.setItem('todos', JSON.stringify(array_ToDoData) );   
      }; 

      function handleAdd() { 
         event.preventDefault(); 
         if (input.value != "") { 
            array_ToDoData.push(input.value); 
            displayTodo(input.value); 
         } 
      }; 

      function handleClear() { 
         localStorage.setItem('todos', JSON.stringify( [] ));  
         location.reload(); 
      }; 

   </script> 
</body> 
</html>

Functional Component

<!DOCTYPE html> 
<html> 
<head> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
</head> 
<body> 
   <div id="app"></div> 
   <script type="text/babel"> 

   function Component_ToDo() { 
      const [todos, setTodos] = React.useState( [] ); 
      const todoText = React.useRef(); 

      React.useEffect( () => { 
         const existingTodos = localStorage.getItem('todos');    
         setTodos( existingTodos ? JSON.parse(existingTodos) : [] ); 
      }, []); 

      function handleAdd(event) { 
         event.preventDefault(); 
         if (todoText.current.value != "") { 
            const next = [...todos, todoText.current.value]; 
            setTodos(next); 
            localStorage.setItem('todos', JSON.stringify(next));    
         } 
      } 

      function handleClear() { 
         console.log("clearing"); 
         localStorage.setItem('todos', JSON.stringify( [] ));   
         setTodos( [] ); 
      }; 

      return ( 
        <div> 
           <form onSubmit={handleAdd}> 
              <input type="text" ref={todoText} /> 
              <input type="submit" value="Add" /> 
              <input type="button" onClick={handleClear} value="Clear"/> 
           </form> 
           <ul> 
              { todos.map( (todo) => (<li key={todo}> {todo} </li> ) ) } 
           </ul> 
        </div> 
      ); 
   } 
   ReactDOM.render(<Component_ToDo/>, document.getElementById('app'));   

</script> 
</body> 
</html>