Simple Todo List Web App with Javscript and localStorge

Category: Javascript | November 30, 2014
Author: HamzaAzeem
Views Total: 3,028 views
Official Page: Go to website
Last Update: November 30, 2014
License: MIT

Preview:

Simple Todo List Web App with Javscript and localStorge

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.

 

You Might Be Interested In:


Leave a Reply