@
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 = Input.value. trim();
if (task === "*) return alert(*Please enter a task!*);
CeCe
Anput.value = ""; :
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
