Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>
Idioma: En

3 Steps Simple Javascript To Do List

INTRODUCTION
SERVER-SIDE SCRIPTS NOT REQUIRED

Welcome to a tutorial on how to create a simple Javascript to do list. Looking to do a web application without the help of server-side scripts? Yep, you read that right – This is a pure vanilla Javascript to do list that uses the local storage API, no PHP and no database required. Read on to find out how!

I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

Related Articles

CONFESSION
AN HONEST DISCLOSURE

Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!

NAVIGATION
TABLE OF CONTENTS

Step 1
The HTML

Step 2
The CSS

Section C
The Javascript

Extra
Download & Demo

Closing
What’s Next?

STEP 1
THE HTML

Let us start with the easiest part of the project, by building the HTML and interface first.

THE LANDING PAGE

index.html


  
    
      Simple Javascript To Do List
    

      
TO DO LIST

The HTML should be pretty straightforward, and the to do “widget” is contained in 

. There are 4 sub-sections within this container:
  • The header… Self-explanatory.
  • Add new item section, which is a simple HTML form.
  • Controls to delete items.
  • Lastly, yet another container 
    to put the to-do items in. These will be done with Javascript later.

    STEP 2
    THE CSS

    Next, we move on to make the interface look nice with some CSS.

    COSMETICS

    todo.css
    /* [FONT] */
html, body, input {
  font-family: arial, sans-serif;
}
html, body {
  padding: 0;
  margin: 0;
}

/* [FORM] */
#todo-wrap input {
  box-sizing: border-box;
  font-size: 0.9em;
}
#todo-wrap input[type=text] {
  padding: 10px 8px;
}
#todo-wrap input[type=button], #todo-wrap input[type=submit] {
  padding: 8px 5px;
  color: #fff;
  background: #CF585C;
  border: 2px solid #CF585C;
  cursor: pointer;
}

/* [CLEARFIX] */
#todo-wrap .clearfix {
  overflow: auto;
}
#todo-wrap .clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* [WRAPPER] */
#todo-wrap {
  max-width: 500px;
  background: #f2f2f2;
  padding: 20px;
  margin: 0 auto;
}

/* [HEADER] */
#todo-wrap h1 {
  font-size: 1.5em;
  margin: 0;
  color: #333;
}

/* [ADD] */
#todo-form {
  margin: 10px 0;
}
#todo-form input {
  display: block;
  float: left;
}
#todo-form input[type=text] {
  width: 85%;
}
#todo-form input[type=submit] {
  width: 15%;
  background: #5866CF;
  border: 2px solid #5866CF;
}

/* [DELETE] */
#todo-del {}

/* [LIST ITEMS] */
#todo-list .clearfix {
  margin-top: 8px;
}
#todo-list .clearfix div, #todo-list .clearfix input {
  box-sizing: border-box;
  float: left;
  display: block;
}
#todo-list .item {
  border: 1px solid #ddd;
  background: #fff;
  width: 80%;
  padding: 10px;
}
#todo-list .item.cx {
  background: #FFE1D7;
  text-decoration: line-through;
}
#todo-list .item.done {
  background: #DCFFD7;
}
#todo-list .clearfix input {
  width: 10%;
}
#todo-list input.bdone {
  background: #4AA53D;
  border: 2px solid #4AA53D;
}

    Yep, this looks like a whole bunch of confusing code but is actually only some cosmetics. I tried to keep it in proper sections, so you can easily change these to fit your own project.

    STEP 3
    THE JAVASCRIPT

    Finally, we deal with the heavyweight that will do all the processing – The Javascript.

    HEAVYWEIGHT SCRIPT

    todo.js
    var todo = {
  data: [], // holder for todo list array
  load: function () {
  // todo.load() : attempt to load todo list from local storage

    // Init localstorage
    if (localStorage.list == undefined) {
      localStorage.list = "[]";
    }

    // Parse JSON
    // [0] = Task
    // [1] = Status : 0 not done, 1 completed, 2 cancelled
    todo.data = JSON.parse(localStorage.list);
    todo.list();
  },

  save: function () {
  // todo.save() : save the current data to local storage

    localStorage.list = JSON.stringify(todo.data);
    todo.list();
  },

  list: function () {
  // todo.list() : update todo list HTML

    // Clear the old list
    var container = document.getElementById("todo-list");
    container.innerHTML = "";

    // Rebuild list
    if (todo.data.length > 0) {
      var row = "", el = "";
      for (var key in todo.data) {
        // Row container
        row = document.createElement("div");
        row.classList.add("clearfix");
        row.dataset.id = key;

        // Item text
        el = document.createElement("div");
        el.classList.add("item");
        if (todo.data[key][1] == 1) {
          el.classList.add("done");
        }
        if (todo.data[key][1] == 2) {
          el.classList.add("cx");
        }
        el.innerHTML = todo.data[key][0];
        row.appendChild(el);

        // Add cancel button
        el = document.createElement("input");
        el.setAttribute("type", "button");
        el.value = "\u2716";
        el.classList.add("bdel");
        el.addEventListener("click", function () {
          todo.status(this, 2);
        });
        row.appendChild(el);

        // Add done button
        el = document.createElement("input");
        el.setAttribute("type", "button");
        el.value = "\u2714";
        el.classList.add("bdone");
        el.addEventListener("click", function () {
          todo.status(this, 1);
        });
        row.appendChild(el);

        // Add row to list
        container.appendChild(row);
      }
    }
  },

  add: function () {
  // todo.add() : add a new item

    todo.data.push([
      document.getElementById("todo-add").value, 0
    ]);
    document.getElementById("todo-add").value = "";
    todo.save();
  },

  status: function (el, stat) {
  // todo.status() : update item status

    var parent = el.parentElement;
    todo.data[parent.dataset.id][1] = stat;
    todo.save();
  },

  del: function (type) {
  // todo.del() : delete items
 
    if (confirm("Delete tasks?")) {
      // Delete all
      if (type == 0) {
        todo.data = [];
        todo.save();
      }
      // Filter, keep only not completed
      else {
        todo.data = todo.data.filter(row => row[1]==0);
        todo.save();
      }
    }
  }
};

// Page init
window.addEventListener("load", function () {
  document.getElementById("todo-da").addEventListener("click", function () {
    todo.del(0);
  });
  document.getElementById("todo-dc").addEventListener("click", function () {
    todo.del(1);
  });
  document.getElementById("todo-form").addEventListener("submit", function (evt) {
    evt.preventDefault();
    todo.add();
  });
  todo.load();
});

    Holy smokes. This looks like some possible brain damaging code, but let us walk through it step-by-step.

    todo.dataThis is an array that will hold the raw to-do list.
    todo.save()JSON encode, and saves the current todo.data into localStorage.list.
    todo.load()Load and JSON decode localStorage.list into todo.data.
    todo.list()Draw the HTML to-do list with todo.data.
    todo.add()Add a new item into todo.data, which is just a simple array push.
    todo.del()Delete all – Simply sets todo.data as an empty array.

    Delete completed tasks – Keeps only the not-completed tasks.

    Finally, the bottom part of the script simply attaches the onclick and onsubmit actions on the buttons and forms.

    EXTRA
    DOWNLOAD & DEMO

    That’s it for all the code, and here is the download link as promised – Plus a small extra that may be useful to you.

    THE DEMO

    TO DO LIST

    LOCALSTORAGE API

    Just how does the Javascript localStorage work? Check out the reference on Mozilla Developer.

    SOURCE CODE DOWNLOAD

    Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

    CLOSING
    WHAT’S NEXT?

    Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!



    The post 3 Steps Simple Javascript To Do List appeared first on Code Boxx.



This post first appeared on Xxxxxxxxx, please read the originial post: here

Share the post

3 Steps Simple Javascript To Do List

×

Subscribe to Xxxxxxxxx

Get updates delivered right to your inbox!

Thank you for your subscription

×