Scribd
Upload
4 views9 pages

Arrays + DOM in JavaScript-1

JavaScript basics Stay and Dom

Uploaded by

abduollahmusa
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
4 views9 pages

Arrays + DOM in JavaScript-1

JavaScript basics Stay and Dom

Uploaded by

abduollahmusa
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
@ Arrays + DOM In a JavaScript Pr @ Arrays + DOM in JavaScript Learning how to combine JavaScript Arrays with the DOM is a major milestone for every aspiring web developer. Today, let’s build a Simple Todo List App where we can Add and Delete tasks. & This project will teach you how to: acre MS -lalalella | * Use arrays to store dynamic data 9 © Render array data to the DOM © * Update the UI with real-time changes 5) Muneer Ahmed Covet lirre arent of @G Project: Todo List (Add & Delete Items) eis yo beste M EY Mele Coste) ea Ceres ere eto prirnetesbeeeries errs © An input box to write a task * Abutton to add it © An empty list () to show tasks 5) Muneer Ahmed Covet lirre arent of BB) Peelers 1a) Re UN ease c We use an array to store all tasks entered by the user. 5) Muneer Ahmed Covet lirre arent of Cole ea) Se Mele a altel) CeCe One Cae eee art Coca oa a const task = [Link]. trim(); if (task === "*) return alert(*Please enter a task!*); CeCe [Link] = ""; : Ce ea nor Cele an eV Reet RN -m aleve ¢ Adds it to the todos array Cee lcmaal-alaleleia * Calls displayTodos() to refresh the UI 5) LY re) Covet lirre arent of © Step 4: Display Tasks in the DOM mesure nt en Cae earner aed Cece ens Petraes eres oy Peo otc mr eae et ee a acs r. > * Clears the list each time ¢ Loops through the todos array e Appends each item with a delete button 5) Muneer Ahmed Covet lirre arent of Cole ea) > Step 5: Delete Todo Function function deleteTodo(index) { cee TEC UL Soe PL eS Cres CNaCs 10 Pe " t Col ooM aM UNE lag * Calls displayTodos() again 5) LY re) Covet lirre arent of Pr ¢ What You Learn from This: © Working with arrays (push, splice) © Manipulating the DOM (innerHTML, getElementByld) * Event handling (click events) S@ynamic rendering using JavaScript logic Pm aa) ame) yee (-y-CH * Add edit functionality \ © Save to localStorage mm © Add checkbox for completed tasks @ Ce NAICS IMM Ala Re(ele(cle Rem ecules 5) Muneer Ahmed Covet lirre arent of ColeereCA) CALL-TO-ACTION want to Learn More? Follow me for more tips on Web Development! Ya re) (ened lilerere arent

You might also like