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
THE DOCUMENT OBJECT MODEL (DOM)
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
Learn about Numpy Arrays in Python programming
Learn about programming Functions in Python
Building a web-based JavaScript game
Learn about MAKING THE TO-DO LIST APP JavaScript
Introduction to JavaScript – Control Flow: True and False values
Tips and tricks for CSS coding
Learn Python Hello World Program
SAVING YOUR TO-DO LIST ITEMS to localStorage
Increase User Engagement & Why It Matters for SEO
Why JavaScript developers are choosing TypeScript
College graduates not learning a programming language that’s vital for top tech jobs.