■ Learn JavaScript in 7 Days – Week 2:
Intermediate Level
Welcome to **Week 2** of your JavaScript journey! ■ This guide continues where Week 1 left off —
now you’ll work with the DOM in more detail, handle user input, use localStorage, and connect to
real APIs. Each day has lessons, code you can test in VS Code, and small projects leading up to a
final app.
Day 1: Deep Dive into the DOM
• Learn about element creation and manipulation.
• ■ Example: const div = [Link]('div'); [Link] = 'Hello World';
[Link](div);
• ■ Practice: Create a webpage that adds new list items when a button is clicked.
Day 2: Handling Forms and Input
• Accessing form inputs and validating data.
• ■ Example: const input = [Link]('#name'); const btn =
[Link]('#submit'); [Link]('click', () => { alert(`Hello
${[Link]}`); });
• ■ Practice: Build a simple form that checks if all fields are filled before submitting.
Day 3: localStorage & Saving Data
• Learn how to store and retrieve data from localStorage.
• ■ Example: [Link]('username', 'Ayo'); const user =
[Link]('username'); [Link](user);
• ■ Practice: Save a user’s favorite color and apply it automatically on page load.
Day 4: Working with JSON & APIs
• Understand JSON format and use fetch() to get data from APIs.
• ■ Example: fetch('[Link] .then(res => [Link]()) .then(data =>
[Link](data));
• ■ Practice: Fetch user data from an API and display their name and avatar on the page.
Day 5: Asynchronous JavaScript
• Learn about Promises and async/await.
• ■ Example: async function getData() { const res = await
fetch('[Link] const data = await [Link](); [Link](data); }
getData();
• ■ Practice: Create a function that waits 3 seconds, then displays a message.
Day 6: Modular Code & Reusable Functions
• Break code into separate functions and files.
• ■ Example: export function greet(name) { return `Hello ${name}`; } // In another file import {
greet } from './[Link]'; [Link](greet('Tumi'));
• ■ Practice: Refactor one of your mini-projects into reusable modules.
Day 7: Final Project – Weather App ■■
• Combine everything you’ve learned!
• Features: - Search city weather using an API (like OpenWeatherMap) - Display temperature,
description, and icon - Save last searched city in localStorage
• ■ Starter Example: async function getWeather(city) { const res = await fetch(`[Link]
[Link]/data/2.5/weather?q=${city}&appid;=YOUR_API_KEY&units;=metric`); const
data = await [Link](); [Link](data); }
• ■ Challenge: Add error handling and design it beautifully using CSS.
■ **Next Steps After Week 2:** - Learn about ES Modules, npm packages, and build tools like Vite.
- Explore modern frameworks (React, Vue, or Svelte). - Build bigger apps such as Movie Search,
Chat App, or Budget Tracker. Keep practicing — you’re already coding like a developer! ■