Build to-do list web-app with code

You are here: Home » MiltonMarketing Blog » Computer Programming Languages » Web App » To-do-list app » Build to-do list web-app with code

Build to-do list web-app with code

Build to-do list web-app with code: Now use all the new skills you’ve learnt to build the to-do list app.

Use JavaScript with the DOM and localStorage APIs to make a to-do-list that a user can add items to.

Make sure that when user completes a task they can click on the item to remove it from the list.

When you code your app use HTML and JavaScript and the new APIs. Make sure you include these things:

  • A function that adds an item to the list, using the DOM
  • A function that removes an item from the list, using the DOM
  • A function that saves the list, using localStorage
  • A function that loads the list, using localStorage
  • A text box the user can type the items into
  • A button that the user can click to add an item to the list

    Save your file in your Coding folder and call it todoapp.html.

    Your final code should look like this:

    <!DOCTYPE html>
    <html>
    <head>
     <title>To-Do List App</title>
     <script>
     function addItem() {
     var newItem = document.createElement("div");
     newItem.innerHTML = document.getElementById("box").value;
     newItem.onclick = removeItem;
     document.getElementById("list").appendChild(newItem);
     saveList();
     }
     function removeItem() {
     document.getElementById("list").removeChild(this);
     saveList();
     }
     function saveList() {
     localStorage.storedList = document.getElementById("list").innerHTML;
     }
     function loadList() {
     document.getElementById("list").innerHTML = localStorage.storedList;
     for(var i = 0; i < list.children.length; i++) {
       list.children[i].onclick = removeItem;
     }
     }
     </script>
    </head>
    
    <body>
     <p>Hello World!</p>
     <p>Hello World! To-Do List</p>
     <br/>
     <input type="text" id="box" value="Type here to add task"/>
     <br/>
     <input type="button" value="Add item" onclick="addItem();"/>
     <br/>
     <div id="list"></div>
     <script>
      if(localStorage.storedList) {
       loadList();
      }
     </script>
    </body>
    </html>
    

    Now use CSS to change the GUI (graphical user interface) of your app. Keep in mind the vast use of handheld devices.

    Using APIs like the DOM and localStorage when you’re coding with HTML, CSS and JavaScript allow you to create more complex and interactive web pages or web-based apps.

    Now you can use the DOM to access some powerful features in your browser. It allows you to dynamically make changes to the HTML as your user interacts with your page or app. Great work!

Run your existing code now to see how it looks.

Related Posts:

The background-color CSS property

MORE CSS PROPERTIES

Building a web page with HTML tags

Tips and tricks for USING THE DOM API

Create a PayPal Donation Shortcode – WordPress

CODING WITH CSS: The style attribute

The color CSS property

Alignment CSS properties

By |2019-02-08T19:22:43-04:00April 2nd, 2018|Categories: Computer Programming Languages, To-do-list app, Web App|Tags: |

About the Author:

I am a loving father, & husband. I am a computer enthusiast. I have used and enjoyed computers since I was young and I enjoy teaching young minds how to code, because it teaches them how to think. Today with YouTube, and social media garbage our youth are losing the ability to think on their own and solve problems. I believe this is a serious epidemic as kids today dont understand that technology is a tool. This tool is being abused, and its underlying effects are taking its toll on kids behaviour, and learning.