Simple Todo List Web App with Javscript and localStorge

Preview:

Description:

Create a minimalist todo list app on your web page using pure vanilla Javascript. It uses the HTML5 localStorge API to add your todo list to your browser’s history.

How to use it:

Load the required stylesheet and JavaScript in the web page.

<link rel="stylesheet" href="css/style.css">
<script src="js/todo.js"></script>

Create the Html structure for the todo list web app.

<div id="container">
  <div id="header">
    <h1>Todo List</h1>
  </div>
  <div id="inputContainer">
    <input id="taskInput" type="text" placeholder="Add a task" maxlength="50" />
  </div>
  <div id="listWrapper">
    <ul id="taskList">
    </ul>
  </div>
  <div id="deleteBtnWrapper" >
    <button id="deleteCompletedBtn" onclick="deleteCompleted()">Delete Completed</button>
    <button id="clearTasksBtn" onclick="deleteAll()">Clear</button>
  </div>
</div>

Done. Type something inside the input filed and Press the ‘Enter’ key to add a todo task.