Build to-do list using the dom 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.

Build to-do list web-app with code

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

Learn BUILDING THE BASIC to-do list APP

Building a web page with HTML tags

Tips and tricks for USING THE DOM API

Tips and Tricks for WRITING JAVASCRIPT code

Create a PayPal Donation Shortcode – WordPress

CODING WITH CSS: The style attribute

The color CSS property

Alignment CSS properties

Learn Python Lists

Learn about Numpy Arrays in Python programming

Learn about programming Functions in Python

Adding Python Comments

Building a web-based JavaScript game

JavaScript Glossary

Learn about MAKING THE TO-DO LIST APP JavaScript

Introduction to JavaScript – Control Flow: True and False values

Tips and tricks for CSS coding

HTML paragraph tag: p

More than one CSS class

Learn Python Hello World Program

SAVING YOUR TO-DO LIST ITEMS to localStorage

Increase User Engagement & Why It Matters for SEO

What is Kodi or XBMC?

Android Studios

Why JavaScript developers are choosing TypeScript

College graduates not learning a programming language that’s vital for top tech jobs.

W3School Window localStorage Property

What is Python?