Day 1 — Storage 101
Week 1
-
Learn: localStorage &
sessionStorage
- Mini task: Save a username and show it on reload
Hints
-
localStorage.setItem(key, value),
localStorage.getItem(key)
-
Remember: values are strings → use
JSON.stringify /
JSON.parse for objects
Day 2 — Timers
Week 1
-
Learn: setTimeout & setInterval
- Mini task: Build a digital clock
Hints
- Update DOM every second with
setInterval
- Cleanup with
clearInterval when needed
Day 3 — Promises
Week 1
-
Learn: Promise,
.then &
.catch
- Mini task: Fake data loading with a promise + timeout
Hints
-
new Promise((res) => setTimeout(res, 1000))
-
Chain
.then and handle errors with
.catch
Day 4 — Fetch API
Week 1
- Learn: fetch basics
- Mini task: Fetch posts and display titles
Hints
fetch(url).then(r => r.json())- Render into a
<ul> dynamically
Day 5 — Async/Await
Week 1
- Learn: async / await
- Mini task: Rebuild Day 4 using async/await
Hints
const data = await (await fetch(url)).json()- Wrap in
try...catch to handle errors
Day 6 — Closures
Week 1
- Learn: Closures
- Mini task: Counter with increment & reset
Hints
- Return an inner function that "remembers" outer scope
- Expose methods:
inc(), reset()
Day 7 — Project: Todo (v1)
Week 1
- Add tasks
- Save in localStorage
- Render on reload
Hints
-
Persist array of todos →
JSON.stringify /
JSON.parse
- Re-render list after each change
Day 8 — ES Modules
Week 2
- Learn: export / import
- Mini task: Split utils into a separate file
Hints
- Use
type="module" on your script tag
- Named vs default exports
Day 9 — Event Delegation
Week 2
- One listener to rule them all
- Mini task: Handle clicks for a dynamic list
Hints
- Listen on parent; check
event.target
- Great for dynamic elements (e.g., todo delete)
Day 10 — Error Handling
Week 2
- Learn: try...catch, graceful UI errors
- Mini task: Show a user-friendly error box on failed fetch
Hints
- Network can fail → always handle it
- Consider retry or offline message
Day 11 — Array Power-Ups
Week 2
-
Learn:
some, every, find
- Mini task: Search/filter a list
Hints
-
some = any match, every = all match
find returns the first matching item
Day 12 — JSON Mastery
Week 2
-
Learn: JSON.stringify /
JSON.parse
- Mini task: Persist & retrieve a settings object
Hints
- Store as string; parse back into object
- Version your schema if you iterate later
Day 13 — Project: Weather App
Week 2
- Fetch real or mock weather data
- Show city, temp, condition
Hints
- Free APIs exist; or mock with a local JSON file
- Indicate loading + error states
Day 14 — Project: Todo (v2)
Week 2
- Add delete & complete toggles
- Filters: All / Active / Completed
- Optional: Persist with a simple module structure
Hints
- Use event delegation for list actions
- Sync state ↔ storage on each change