🍕 Example 3: Step-by-step Cooking

function cookPizza() {
    return new Promise(resolve => { setTimeout(() => resolve("🍕 Pizza ready!"), 3000); }); }
async function dinner() {
    console.log("Prepare ingredients...");
    await cookPizza();
     console.log("Eat pizza 🍕");
     console.log("Enjoy the night ✨"); }
dinner();

🔑 Key Takeaways
➤async → marks a function as asynchronous (always returns a Promise).
➤await → pauses until a Promise resolves.
➤try...catch → handles errors inside async functions.
➤async/await makes code look cleaner and easier to follow compared to callbacks or .then() chains.

Assignment:
➤async/await
https://youtu.be/9j1dZwFEJ-c?si=CvrJ2_zkzDgC9xmy
➤ try and catch errors
https://youtu.be/NwoAZF66_Go?si=MVW1y-0ciYh69Ib1

🌞 Week 5 Day 4 Challenges – async/await in Action

Hello campers 👋,

You’ve done amazing so far. Async/await might feel new, but once you practice it, you’ll see how clean and powerful it is.
Here are today’s challenges 👇 — choose any 3 of them to complete.

1️⃣ Sleepy Reminder

📝 Task: Write an async function that prints a message like:
"Start working..." immediately
After 3 seconds: "Don’t get distracted!"
After another 2 seconds: "Keep pushing 💪"
💡 Hint:
Use setTimeout wrapped in a Promise (like we did with delay(ms) in the lesson).
Use await to pause between messages.

2️⃣ Order and Delivery

📝 Task: Simulate ordering food online:
"Order placed 🍔" (immediate)
After 2 seconds → "Cooking started 👨‍🍳"
After 3 seconds → "Order ready 🚗"
After 1 second → "Delivered 🎉"
💡 Hint:
Use async function + multiple await delay(ms).
Each step should appear in order.

3️⃣ Simple Quiz Checker

📝 Task: Create an async function that simulates fetching quiz answers from a "server".
Fake a delay of 2 seconds.
Return a "Correct ✅" or "Wrong ❌" result randomly.
💡 Hint:
Use Math.random() to randomly decide if it’s correct or wrong.
Wrap it inside a Promise and use await to fetch.

4️⃣ Typing Simulation

📝 Task: Write an async function that "types out" a sentence one word at a time with a delay.
Example output:
Learning...
Learning JavaScript...
Learning JavaScript with async/await...
💡 Hint:
Use split(" ") on the sentence to get words.
Use a loop + await delay(ms) to print each word.

5️⃣ Download Simulator

📝 Task: Create an async function that simulates downloading a file.
Show progress like:
Downloading... 20%
Downloading... 40%
Downloading... 60%
Downloading... 80%
Download complete ✅
💡 Hint:
Use a loop that counts in steps.
await delay(1000) inside the loop for each step.

✨ Choose any 3 challenges to do. They’ll train your brain to think asynchronously and write cleaner code with async/await.

💥   share your solutions in the group,
💥invite a friend,
      and as always —

💥stay well, stay curious, and stay coding ✌️

🌞WEEK 5 DAY 5 APIs and Fetch

👋 Hello my brilliant campers!

I hope you are all doing amazing 💡. Today we’re stepping into a very exciting and practical part of JavaScript: APIs and Fetch. This is the moment where your code connects with the real world 🌍. Up until now, we’ve been building logic inside our browser. Now, we’ll learn how to talk to other computers (servers) and get real data like weather, jokes, news, or even football scores ⚽.
Let’s go step by step 👇

🔹 1. What is an API?

👉 API = Application Programming Interface.
Think of it as a restaurant menu 🍽️.
➤You go to a restaurant.
➤You don’t run into the kitchen and cook yourself (that’s dangerous 😂).
➤Instead, you look at the menu (the API) and tell the waiter what you want.
➤The waiter goes to the kitchen (server), prepares the dish, and brings it back to you (the data).
So an API is just a menu of services that a computer/server provides.

➡️ Example: A weather API lets you ask:
“Hey, what’s the temperature in Addis Ababa right now?”
And the API will send back the data.

🔹 2. Meet fetch()

In JavaScript, we use the built-in function fetch() to ask a server for data.
Basic syntax:

fetch("https://api.example.com/data")
   .then(response => response.json()) // convert response to JSON
   .then(data => console.log(data)) // use the data
   .catch(error => console.error("Error:", error));

➤fetch(url) → sends the request.
➤.then(response => response.json()) → when the server replies, we ask to convert it into JSON.
➤.then(data => …) → we finally get the usable data.
➤.catch(error => …) → catches any errors if something goes wrong.

🔹 3. What is JSON?

JSON = JavaScript Object Notation.
Think of it like a neatly packed lunchbox 🍱 where data is stored in pairs (name: value).
Example JSON data:

{ "name": "Megersa", "age": 25, "city": "Addis Ababa" }
➡️ It looks just like JavaScript objects, which makes it super easy to use.

🔹 4. First Example – Fetching a Joke 🤣
Let’s grab a joke from an API:

fetch("https://official-joke-api.appspot.com/random_joke")
  .then(response => response.json())
  .then(data => { console.log("Here's a joke for you:");
console.log(data.setup); // The start of the joke
console.log(data.punchline); // The funny ending })
  .catch(error => console.error("Oops! Something went wrong:", error));

💡 When you run this, it might print something like:
Here's a joke for you:
Why did the computer go to the doctor?
Because it caught a virus.

🔹 5. Async/Await version
Since we already know async/await, let’s rewrite the joke example in a cleaner way:

async function getJoke() { try {
   let response = await fetch("https://official-joke-api.appspot.com/random_joke");
  let data = await response.json();
console.log("Here's a joke for you:");
console.log(data.setup);
console.log(data.punchline); }
catch (error) { console.error("Oops! Something went wrong:", error); } }
getJoke();


💡 This looks more like step-by-step instructions → easier to read!

🔹 6. Example – Fetching Users 👥
Let’s fetch fake users from a placeholder API.

async function getUsers() {
   try {
        let response = await fetch("https://jsonplaceholder.typicode.com/users");
        let users = await response.json();
        console.log("Here are some users:");
       users.forEach(user => { console.log(👤 ${user.name} - 📧 ${user.email}); }); }
  catch (error) { console.error("Error fetching users:", error); } }
getUsers();

Output could be:
👤 Leanne Graham -
📧 Sincere@april.biz
👤 Ervin Howell -
📧 Shanna@melissa.tv ...

🔹 7. Errors in Fetching 🚨
Sometimes things don’t work:
➤Maybe you’re offline
➤Maybe the API is down
➤Maybe the URL is wrong
That’s why we use .catch() or try...catch.
Example

fetch("https://fakeurl.com/data")
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error("Error happened:", error));

This will print:
Error happened: TypeError: Failed to fetch

🔹 8. Analogy for Fetch

Think of fetch like sending a text message to your friend 📱:
➤You type “Hey, what’s up?” (the request).
➤Sometimes they reply instantly (fast API).
➤Sometimes they reply later (slow API).
➤Sometimes they don’t reply at all (API down 😅).
That’s why you always prepare for errors (“Maybe they’re busy, maybe I typed wrong number”).

🔹 9. Practical Mini-Examples
✅ Fetch a random quote:

async function getQuote() {
    let response = await fetch("https://api.quotable.io/random");
   let data = await response.json();
   console.log(💡 Quote: "${data.content}" — ${data.author}); }
getQuote();

✅ Fetch a to-do list:

async function getTodos() {
    let response = await fetch("https://jsonplaceholder.typicode.com/todos");
   let todos = await response.json();
   todos.slice(0, 5).forEach(todo => { console.log(${todo.title} ✅: ${todo.completed}); }); }
getTodos();

🔹 10. Why This Matters
This is HUGE 💥. With Fetch:
You can make
➤weather apps 🌤️
➤News apps 📰
➤Joke/quote apps 😂
➤Chatbots 💬
➤Stock trackers 📈
It’s your first bridge from theory to real-world projects.

🔹 More Fetch Examples
1. Fetching Random Dog Pictures 🐶
Sometimes APIs give images instead of text.

async function getDog() {
   try {
        let response = await fetch("https://dog.ceo/api/breeds/image/random");
         let data = await response.json();
         console.log("Here’s a random dog picture:");
         console.log(data.message); // URL of the dog image }
   catch (error) { console.error("Error fetching dog image:", error); } }
getDog();

💡 Output will be something like:

Here’s a random dog picture: https://images.dog.ceo/breeds/hound-afghan/n02088094_1007.jpg

👉 Students can paste the URL into the browser and see the dog 🐕.
Analogy: It’s like asking a friend, “Send me a selfie,” and they reply with a photo link.

2. Fetching Space Facts 🚀
Let’s use NASA’s public API.

async function getSpacePhoto() {
   try {
         let response = await fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY");
        let data = await response.json();
        console.log("🌌 Astronomy Picture of the Day:");
        console.log(data.title);
        console.log(data.url); }
  catch (error) { console.error("Error fetching space photo:", error); } }
getSpacePhoto();

💡 This gives you today’s astronomy picture with its title.
Analogy: Imagine every day NASA posts a new postcard from space. Fetch is like subscribing to their mailing list.

3. Fetching Random Advice 💡
Sometimes, APIs give wisdom.

async function getAdvice() {
     try {
        let response = await fetch("https://api.adviceslip.com/advice");
         let data = await response.json();
         console.log("💡 Advice of the day:");
         console.log(data.slip.advice); }
  catch (error) { console.error("Error fetching advice:", error); } }
getAdvice();

💡 Output might be:

💡 Advice of the day:
Don't compare yourself to others.

Analogy: It’s like opening a fortune cookie 🥠 and reading a surprise message.

4. Fetching Cryptocurrency Prices 💰
Let’s check Bitcoin’s price using a crypto API.

async function getCryptoPrice() {
    try {
        let response = await fetch("https://api.coindesk.com/v1/bpi/currentprice.json");
         let data = await response.json();
         console.log("💰 Bitcoin Price in USD:");
         console.log($${data.bpi.USD.rate}); }
   catch (error) { console.error("Error fetching crypto price:", error); } }
getCryptoPrice();

💡 Output:

💰 Bitcoin Price in USD: $57,203.15

Analogy: It’s like checking the currency exchange board at a bank, but here you ask the internet bank teller.

5. Fetching Country Data 🌍
Want info about a country? There’s an API for that.

async function getCountry() {
    try {
       let response = await fetch("https://restcountries.com/v3.1/name/ethiopia");
       let data = await response.json();
       console.log("🌍 Country Info:");
       console.log(Name: ${data[0].name.common});
       console.log(Capital: ${data[0].capital[0]});
       console.log(Region: ${data[0].region});
       console.log(Population: ${data[0].population}); }
  catch (error) { console.error("Error fetching country info:", error); } }
getCountry();

💡 Output:

🌍 Country Info:
Name: Ethiopia
Capital: Addis Ababa
Region: Africa
Population: 120283026

Analogy: It’s like asking a library encyclopedia, “Tell me everything about Ethiopia.” 📖
🔹 Why So Many Examples?
➤Because students often learn patterns:
➤Every API is a restaurant menu 🍽️.
➥Sometimes they give text (quotes, jokes).
➥Sometimes they give numbers (crypto, weather).
➥Sometimes they give images (dogs, NASA).
➥Sometimes they give lists (users, countries).
➤The more examples, the easier it is for them to recognize the pattern instead of memorizing code.

Assignment :
➤APIs
https://youtu.be/37vxWr0WgQk?si=0qDz34nKKj17L5w3
➤json
https://youtu.be/r4MLHHLctKw?si=CyqLQoUasEsRKpnR

🚀 Week 5 Day 5 Challenges – Fresh API Practice

1️⃣ Joke Teller 🤣

What to do:
Fetch a random joke from an API.
Show the joke on the page when the user clicks a button.
Hints:
API endpoint: https://official-joke-api.appspot.com/random_joke
Data lives in setup and punchline.
Example flow: “Why did the chicken…? → To cross the road!”

2️⃣ Cat Fact Dispenser 🐱

What to do:
Fetch a random cat fact and show it on the page.
Bonus: add a button that loads a new fact each time.
Hints:
API endpoint: https://catfact.ninja/fact
Data lives in fact.
Think of it as a “Did you know?” section for cat lovers.

3️⃣ Space Picture Explorer 🚀

What to do:
Show NASA’s Astronomy Picture of the Day (APOD).
Display the image, title, and description.
Hints:
API endpoint: https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY
Data lives in title, url, explanation.
Remember: sometimes the URL can be a video, not an image!

4️⃣ Random Quote Machine ✍️

What to do:
Fetch a random inspirational quote.
Show both the quote and the author’s name.
Hints:
API endpoint: https://api.quotable.io/random
Data lives in content and author.
Bonus: Add a "New Quote" button.

👉 Try all 4 challenges — they’re designed to push your skills without overwhelming you. You’ll practice fetching, handling JSON, and updating the DOM with real-world data.


💥   share your solutions in the group,
💥invite a friend,
      and as always —

💥stay well, stay curious, and stay coding ✌️

🌞 Week 5 Day 6: Debugging, Storage, Modules, Promises, and More APIs

Hey hey Campers! 👋🌻

We’ve come such a long way together. From writing our first console.log("Hello World") to handling APIs and promises .💪
Today is our last big frontend JavaScript lesson. After this, you’ll be fully ready to step into backend land. But before that, let’s tie up the remaining pieces:

🐞 1. Debugging in JavaScript

Debugging means finding and fixing errors (bugs) in your code.
👉 Think of it like when your bicycle makes a strange sound 🚲😅 — you stop, check where it’s coming from, and fix the loose screw. Debugging in code is the same!
Common Debugging Tools:
➤console.log()
Your best friend 🐶. Use it to print values and see what’s happening.

let num = 10;
console.log("The number is:", num);

➤Breakpoints (in Browser DevTools)
Open F12 → Sources → Add breakpoints in code. The program stops and lets you inspect step by step.
➤Errors & Stack Traces
When you see red error messages ❌ in the console, don’t panic. They usually tell you where the problem is.
Example:

function divide(a, b) {
   if (b === 0) { throw new Error("You can't divide by zero!"); }
return a / b; }
try { console.log(divide(10, 0)); }
catch (err) { console.error("Something went wrong:", err.message); }

🔑 Lesson: Errors are not enemies. They are guides telling you what went wrong.

💾 2. Local Storage & Session Storage

Your browser can remember things using storage, even if you refresh or close the tab.
➤Local Storage → Data stays until you delete it (like saving something in your notebook 📒).
➤Session Storage → Data disappears when you close the tab (like notes on a whiteboard 🧽).
Example: Local Storage

// Save
localStorage.setItem("username", "Megersa");
// Get
let user = localStorage.getItem("username");
console.log("Welcome back,", user);
// Remove localStorage.removeItem("username");

Example: Session Storage

sessionStorage.setItem("theme", "dark"); console.log(sessionStorage.getItem("theme")); // "dark"

💡 Hint: Use Local Storage for things like to-do lists, Session Storage for things like temporary form data.

📦 3. Modules in JavaScript

Imagine your code is a library 📚. Instead of putting all books in one giant pile, you divide them into sections (math, history, science).
Modules let us split code into files and reuse it.
Example:
📂 project
┣ 📄 math.js
┗ 📄 app.js
math.js

export function add(a, b) { return a + b; }
export const PI = 3.14;

app.js

import { add, PI } from './math.js';
console.log(add(5, 10)); // 15
console.log(PI); // 3.14

💡 Modules keep your code organized and easy to maintain.

⏳ 4. Multiple Promises (Promise.all, Promise.race)

So far, we’ve seen one promise at a time. But what if we want to wait for many tasks?
👉 Think of it like ordering injera and shiro at the same time. You want to start eating only when both are ready. 🍽️
Promise.all
Waits for all promises to finish.

let p1 = Promise.resolve("Injera ready");
let p2 = Promise.resolve("Shiro ready");
Promise.all([p1, p2]).then(values => { console.log(values); // ["Injera ready", "Shiro ready"] });

Promise.race
Whoever finishes first, wins.

let fast = new Promise(res => setTimeout(() => res("Fast delivery"), 1000));
let slow = new Promise(res => setTimeout(() => res("Slow delivery"), 3000));
Promise.race([fast, slow]).then(value => { console.log(value); // "Fast delivery" });

🌍 5. More on APIs (GET vs POST)

So far, we mostly fetched data (GET). But sometimes we want to send data (POST).
👉 Think of GET like reading a book from the library, and POST like writing your own book and giving it to the library 📖.
Example: GET (fetch data)

fetch("https://jsonplaceholder.typicode.com/posts/1") .then(res => res.json()) .then(data =>
console.log(data));

Example: POST (send data)

fetch("https://jsonplaceholder.typicode.com/posts",
   { method: "POST",
     headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title: "My New Post", body: "Hello campers!", userId: 1 }) })
.then(res => res.json())
.then(data => console.log("Saved:", data));

💡 Lesson: GET = ask data 🧐, POST = give data ✍️.

🎯 Wrap-Up
Today we learned:
🐞 Debugging with console, errors, try/catch
💾 Local & Session Storage
📦 ES6 Modules (import/export)
⏳ Handling Multiple Promises (all, race)
🌍 More API calls (GET vs POST)

Assignment
➤Modules
https://youtu.be/fl-_6d18DN0?si=4aiR7z53Y2Qk_hbg

"Nothing humbles a developer more than debugging the wrong environment or file for an hour straight."

It happens to everyone. Hours can be spent testing and refreshing, changing code, and still getting nowhere… until the solution suddenly appears in a completely unexpected place.

Debugging is part of the job, but some habits make it faster, less stressful, and even a little fun.

1. Step away when stuck

The mind often works in the background. Solutions sometimes appear while stretching, going for a short walk, or just taking a few minutes to clear your head. A fresh perspective can reveal what a tired mind misses.

2. Talk it out or write it down

Explaining the problem out loud to a teammate, your self or writing the steps on paper can highlight mistakes and gaps in logic that are easy to miss when thinking silently.

3. Don’t guess, ask the right questions

Instead of randomly changing code, slow down and ask: What caused this? Where did it first go wrong? Which assumption failed? Guided questioning often uncovers the problem faster than trial and error.

4. Check the basics

Many bugs aren’t in the code itself. They come from simple things: a wrong file path, an unset environment variable, or a missing dependency. Always verify the setup before digging deeper.

5. Learn from past bugs

Every bug teaches something. After fixing one, pause and reflect: Why did this take so long? What misled the process? How could it have been caught earlier? Sharing these insights builds a team culture that improves over time.

6. Use logging and debugging tools effectively

Structured logs, breakpoints, and debug tools can save hours of trial and error. Log meaningful information like variable states, timestamps, or request details, so it’s easy to see where things go wrong. This makes debugging more predictable and less frustrating.

Debugging will always humble developers. But with the right habits, it becomes less frustrating, more educational, and sometimes even a chance to laugh at how simple the fix really was.

And yes… sometimes the villain is still just the cache. 😅

@edemy251

📝 JavaScript Review Quiz