🌞 Week 5 Day 2 — Callbacks in Async (setTimeout, setInterval)

👋 Hello Campers!

Ready for day 2 of async JavaScript? Yesterday we built the mindset (single-threaded JS, event loop). Today we’ll use two core async tools—setTimeout and setInterval—and learn what a callback really is, why “callback hell” happens, and how to avoid it. We’ll end with small, real-world demos (delayed messages + simple timers). Let’s go. 🚀

1) What is a callback?

A callback is just a function you pass to another function so it can be called later (when something is ready).

✅Sync callback (runs immediately):

[1, 2, 3].forEach(function (n) { console.log(n); // runs now, during forEach });

✅Async callback (runs later):

setTimeout(function () { console.log("Runs after 1000ms"); }, 1000);

Analogy: you give a café your phone number (callback). When the coffee is ready (async), they call you back.

2) setTimeout — run once after a delay

Syntax

const timerId = setTimeout(callback, delayMs, arg1, arg2, ...);

➤callback: function to run later
➤delayMs: delay in milliseconds
➤returns a timer ID (so you can cancel)
Basic examples

setTimeout(() => { console.log("Hello after 2 seconds"); }, 2000); // Passing data to the callback function
greet(name) { console.log(Hi, ${name}!); }
setTimeout(greet, 1500, "Muna"); // "Hi, Muna!" after 1.5s

Cancel a scheduled timeout

const id = setTimeout(() => console.log("This will never run"), 3000);
clearTimeout(id);

Important notes
The delay is minimum time. The callback runs as soon as the call stack is free (event loop).
Always save the timer ID if you might cancel it.

3) setInterval — run repeatedly every N ms
Syntax

const intervalId = setInterval(callback, intervalMs, arg1, arg2, ...);

Basic example

const id = setInterval(() => { console.log(new Date().toLocaleTimeString()); }, 1000); // Stop after 5 seconds
setTimeout(() => clearInterval(id), 5000);

Cancel a repeating interval

clearInterval(intervalId);

Caution
Intervals can “drift” a little (not perfectly on time). For critical timing, prefer a self-scheduling timeout.

4) Real-world mini demos
A) Delayed welcome message (one-time setTimeout)

<div id="msg" style="display:none; padding:8px; background:#eef;"> Welcome back! 🎉 </div>
<script>
const msg = document.getElementById("msg"); // Show after 1.5 seconds
const showId = setTimeout(() => { msg.style.display = "block"; // Hide again after 3 seconds
setTimeout(() => (msg.style.display = "none"), 3000); }, 1500);
</script>

B) Simple countdown (with setInterval)

let seconds = 5;
const id = setInterval(() => {
   console.log(seconds);
  if (seconds === 0) { console.log("Go! 🚀");
clearInterval(id); }
   seconds--; }, 1000);

C) Stopwatch (start/stop/reset) — self-contained logic

<div>
<div id="time" style="font: 24px monospace;">00:00.0</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
<script>
const timeEl = document.getElementById("time");
const startBtn = document.getElementById("start");
const stopBtn = document.getElementById("stop");
const resetBtn = document.getElementById("reset");
let startAt = null; // timestamp when started
let tickId = null; // interval ID
function format(ms) { const total = Math.floor(ms / 100);
const mm = String(Math.floor(total / 600)).padStart(2, "0"); // minutes
const ss = String(Math.floor((total % 600) / 10)).padStart(2, "0"); // seconds
const t = total % 10; // tenths
return ${mm}:${ss}.${t}; }
function update() {
   const elapsed = Date.now() - startAt;
   timeEl.textContent = format(elapsed); }
startBtn.onclick = () => { if (tickId) return; // already running
startAt = Date.now() - (parseFloat(timeEl.textContent.replace(/[:.]/g,'')) || 0);
tickId = setInterval(update, 100); // update every 100ms };
stopBtn.onclick = () => { clearInterval(tickId); tickId = null; };
resetBtn.onclick = () => { clearInterval(tickId); tickId = null; timeEl.textContent = "00:00.0"; };
</script>

5) Callback Hell (the “Pyramid of Doom”)

When async steps depend on each other and you keep nesting callbacks inside callbacks, your code can become hard to read, test, and maintain.

Example: three steps in order (bad nesting)

setTimeout(() => {
    console.log("Step 1");
    setTimeout(() => {
        console.log("Step 2");
        setTimeout(() => {
               console.log("Step 3"); // keep going... 😵 }, 1000);
}, 1000);
}, 1000);

Problems:
➤Hard to read (moves to the right like a pyramid)
➤Hard to handle errors
➤Hard to reuse parts

How to reduce the pain (without Promises yet)

A) Use named functions (flatten the shape):

function step1() {
   console.log("Step 1");
   setTimeout(step2, 1000); }
function step2() {
    console.log("Step 2");
    setTimeout(step3, 1000); }
function step3() {
   console.log("Step 3"); }
setTimeout(step1, 1000);

B) Self-scheduling pattern (recursion style):

function runStep(n, max) {
   if (n > max) return; console.log("Step", n);
setTimeout(() => runStep(n + 1, max), 1000); }
runStep(1, 3);

Next lessons will fix this elegantly with Promises and async/await (much cleaner than deep nesting).

6) setInterval vs “recursive” setTimeout

setInterval(fn, 1000) tries to run every 1000ms. If fn takes long, calls can bunch up or drift.
A safer approach for consistent spacing is self-scheduling:

function tick() {
   console.log(new Date().toLocaleTimeString());
  setTimeout(tick, 1000); // schedule the next tick after this finishes }
tick();

This avoids overlapping calls and adapts to work time.

7) Common mistakes & best practices
✅ Store timer IDs (const id = setTimeout(...);) if you might cancel them.
✅ Clean up intervals with clearInterval(id) when you’re done (avoid “zombie” timers).
✅ Keep callbacks small and named where possible (easier to debug).
⚠️ Don’t assume the exact delay; the event loop controls when callbacks actually run.
⚠️ Avoid deep nesting → prefer named functions or (soon) Promises / async-await.

8) Tiny utility helpers
➤Leading zeros (e.g., 09:05:03):

const pad2 = (n) => String(n).padStart(2, "0");

➤Debounce concept (preview) — wait until the user stops typing:

function debounce(fn, delay) {
   let id;
   return (...args) => {
     clearTimeout(id);
     id = setTimeout(() => fn(...args), delay); }; } // Usage later with input events

(You’ll use this a lot when we reach real search boxes and forms.)

Recap
✅Callback = a function to run later.
✅setTimeout → run once after a delay; ✅clearTimeout to cancel.
✅setInterval → run repeatedly; ✅clearInterval to stop.
✅Callback hell happens with deep nesting—fight it with named functions or the self-scheduling pattern (and soon with Promises/async-await).
✅Real-world uses: delayed messages, countdowns, clocks, stopwatches, reminders.

That’s today’s deep dive 💪. Next up: Promises—a cleaner, more powerful way to write async code (goodbye pyramid of doom).

Assignment:
➤setTimeOut
https://youtu.be/shWr5DNVeCI?si=pjfo7hBT3QaHJJNg
➤callback hell
https://youtu.be/NOlOw03qBfw?si=-K-hbG2-TtQxQez_

💥 Week 5 Day 2 — Async Callback Challenges

Hey Campers 👋, you did great today learning about callbacks in async tasks (like setTimeout & setInterval) and also about the infamous Callback Hell 🌀.
Now it’s time to practice! Here are 4 challenge ideas.

1. Delayed Welcome Message

👉 Write a function that shows "Welcome Camper!" after 3 seconds using setTimeout.
💡 Hint: Wrap your console.log inside a setTimeout.

2. Simple Digital Timer

👉 Build a timer that counts up from 0 seconds and displays it in the console every second. Stop it after 10 seconds.
💡 Hint: Use setInterval to keep counting, and clearInterval to stop it.

3. Countdown Launcher 🚀

👉 Create a countdown starting from 5 down to 1, then finally log "Blast off!".
💡 Hint: setInterval works well here, but make sure to stop it at the right time.

4. Sequential Messages

👉 Show these messages in order with delays:
After 1s → "Preparing..."
After 3s → "Loading..."
After 5s → "Ready!"
💡 Hint: Use multiple setTimeout calls — this will give you a taste of callback hell! 😅

👉 Don’t forget to
💥   share your solutions in the group,
💥invite a friend,
      and as always —

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

🔥 Reality Check for Beginner Coders 🔥
Listen—watching 100 YouTube tutorials won’t make you a coder.
Writing one small messy project will teach you more than all those videos combined.

Stop fooling yourself with “I’ll start after I finish this tutorial” or “I need to know everything first.”
You’ll never know everything. And you don’t need to.

💡 Build something small. A calculator. A to-do list. A digital clock.
It won’t be perfect—good. It doesn’t have to be. Coding isn’t about perfection, it’s about consistency.
Don’t make 10 big plans a day and execute none. Make 1 simple plan and show up for it every day.

Consistency beats motivation. Consistency beats talent.
And when you get stuck? Ask. Even if your question feels “dumb.” The dumb question you ask today is the breakthrough you needed yesterday.

Mistakes? You’ll make tons. That’s how you learn. Every bug you fight, every error you fix, becomes knowledge you’ll never forget.

Here’s the raw truth:
✨ No mentor, no tutorial, no friend can carry your dream. It’s you. Only you.
If you want it, you fight for it. You sit, you code, you fail, you repeat.
Because in the end—your future, your dream, your freedom—isn’t waiting on YouTube.
It’s waiting on your hands to type that first line of code.

⚡ Stop hiding. Start building. Even the smallest project is a step toward the life you want. ⚡

🌞 Week 5 Day 3 – Promises in JavaScript

Hello Campers! 👋✨

I hope you’re doing amazing and coding strong. Today, we step into one of the most powerful and practical features of JavaScript: Promises.
This lesson is so important because almost everything in modern JavaScript—like fetching data from an API, loading files, connecting to a database, or working with timers—depends on Promises.
So let’s slow down, break it piece by piece, and understand them deeply.

🌍 What is a Promise? (Big Picture)

👉 A Promise in JavaScript is like a commitment someone makes to you:
➤Your friend says: “I’ll bring you injera tomorrow.”
That’s a promise. Right now, you don’t have the injera, but you expect to get it.
While waiting, there are three possible outcomes:

🟡 Pending – Your friend hasn’t arrived yet (you’re still waiting).
🟢 Fulfilled – Your friend arrives with injera ✅ (promise kept).
🔴 Rejected – Your friend couldn’t bring it ❌ (promise broken).

This is exactly how JavaScript handles asynchronous tasks. A Promise is just an object that tells you:
“I might not be ready yet, but I’ll either succeed or fail in the future.”

🔑 Promise States

✅Pending – Task is still running, nothing decided yet.
✅Fulfilled (Resolved) – Task completed successfully, and we have a value.
✅Rejected – Task failed, and we have a reason (error).

🛠️ How to Create a Promise

let myPromise = new Promise((resolve, reject) => {
    let success = true;
    if (success) { resolve("🎉 Task completed successfully!"); }
else { reject("❌ Something went wrong!");
} });

👉 Explanation:
➤resolve() is called if the promise succeeds.
➤reject() is called if it fails.
➤But just creating a promise does nothing. We need to use it.

📦 Consuming a Promise
We use .then() and .catch() to handle the outcomes.

myPromise .then(result => {
    console.log(result); // 🎉 Task completed successfully! })
   .catch(error => { console.log(error); // ❌ Something went wrong! });

👉 Think of .then() as: “What should I do if my friend keeps their promise?”
👉 .catch() is: “What should I do if my friend breaks the promise?”

🍲 Real-World Analogy: Restaurant Order

Imagine you order shiro at a restaurant.
➤You place the order → Promise created (pending).
➤If the chef prepares it → resolve() (fulfilled).
➤If the restaurant runs out of shiro → reject() (rejected).
➤You (the customer) wait. When it’s ready, the waiter calls you → that’s .then().
➤If they say “Sorry, no shiro” → that’s .catch().

🔗 Promise Chaining
You can link multiple .then() calls together, where the output of one becomes the input of the next.

let step1 = new Promise((resolve, reject) => {
     resolve(2); });
step1 .then(num => {
    console.log("First result:", num);
    return num * 2; // Passes 4 to next then })
.then(num => {
     console.log("Second result:", num);
     return num * 3; // Passes 12 to next then })
.then(num => {
    console.log("Final result:", num); // 12 });

👉 Promise chaining is like following steps in a recipe. Each step transforms the result and passes it to the next.

🛑 Handling Errors

let riskyTask = new Promise((resolve, reject) => {
    let value = Math.random();
    if (value > 0.5) { resolve("✅ Success! Value: " + value); }
   else { reject("❌ Failure! Value: " + value); } });
riskyTask
  .then(res => console.log(res))
   .catch(err => console.log(err));




👉 Even if you chain multiple .then() calls, a single .catch() at the end can handle all errors in the chain.

⏳ Using Promises with setTimeout (Demo)

function wait(ms) { return new Promise(resolve => {
    setTimeout(() => { resolve(Waited ${ms} milliseconds); }, ms);
}); }
wait(2000).then(message => console.log(message));

👉 This code waits 2 seconds, then prints:
Waited 2000 milliseconds
It’s like telling JavaScript: “Pause for 2 seconds, then let me know.”

🤯 Why Promises?

➤Before Promises, developers had to use nested callbacks (callback hell). ➤Promises clean that mess and make code more readable and maintainable.
Instead of:

task1(() => {
   task2(() => {
        task3(() => { console.log("Done!"); }); }); });

We can write:

task1()
  .then(task2)
  .then(task3)
  .then(() => console.log("Done!"))
.catch(err => console.log(err));

Much cleaner ✅

💡 Summary
✅A Promise represents a future result of an asynchronous task.
✅It can be pending, fulfilled, or rejected.
✅Use .then() for success and .catch() for errors.
✅Promises can be chained for sequential tasks.
✅They help us avoid messy callback hell.

🔥 Extra Promise Examples

1️⃣ Delayed Message Example
Imagine you want to show a greeting after 3 seconds.

function delayedMessage(msg, time) {
    return new Promise(resolve => {
       setTimeout(() => { resolve(msg); }, time); }); }
delayedMessage("👋 Hello campers!", 3000)
   .then(res => console.log(res));


👉 Explanation:

delayedMessage() returns a Promise.
After time (3000ms = 3s), the message is resolved.
.then() receives the final value and logs it.

2️⃣ Random Weather Reporter
Let’s pretend we’re building a weather service 🌦️

function getWeather() { return new Promise((resolve, reject) => {
    let weather = ["☀️ Sunny", "🌧️ Rainy", "⛅ Cloudy"];
    let random = Math.random();
    if (random > 0.2) { resolve(weather[Math.floor(Math.random() * weather.length)]); }
    else { reject("❌ Weather service unavailable"); } }); }
getWeather()
    .then(res => console.log("Today’s weather:", res))
   .catch(err => console.log(err));

👉 Explanation:
➤80% chance to get a random weather report.
➤20% chance to reject with an error.
➤Shows how Promises handle both success and failure cases.

3️⃣ Promise Chaining: Coffee Order ☕
You order coffee → they prepare → they deliver.

function orderCoffee() { return new Promise(resolve => {
    resolve("✅ Order placed"); }); }
orderCoffee()
    .then(msg => {
       console.log(msg);
       return "☕ Coffee is being prepared"; })
    .then(msg => {
     console.log(msg);
      return "🚚 Coffee is on the way"; })
   .then(msg => {
      console.log(msg);
     return "🎉 Coffee delivered!"; })
   .then(final => console.log(final));

👉 Explanation:
Each .then() returns a new value → passed to the next .then().
It’s like following steps in real-world tasks.

4️⃣ Simulating an Online Exam Result 📝

function checkResult(score) { return new Promise((resolve, reject) => {
    if (score >= 50) { resolve("🎉 You passed with " + score + "%"); }
    else { reject("❌ You failed with " + score + "%"); } }); }

checkResult(72)
     .then(res => console.log(res))
     .catch(err => console.log(err));



👉 Explanation:
➤If the score is 50 or above → Promise resolves.
➤Otherwise → Promise rejects.
A simple way to show yes/no outcomes.

5️⃣ Running Multiple Promises Together
Promise.all()
Wait for all tasks to finish.

let promise1 = new Promise(resolve => setTimeout(() => resolve("✅ Task 1 done"), 1000));
let promise2 = new Promise(resolve => setTimeout(() => resolve("✅ Task 2 done"), 2000));
Promise.all([promise1, promise2])
    .then(results => console.log("All tasks finished:", results));

👉 Explanation:
➤Promise.all() waits until all promises are resolved.
➤Returns an array of results.

Promise.race()
Who finishes first? 🏁

let fast = new Promise(resolve => setTimeout(() => resolve("⚡ Fast task finished"), 1000));
let slow = new Promise(resolve => setTimeout(() => resolve("🐢 Slow task finished"), 3000));
Promise.race([fast, slow])
     .then(result => console.log(result));


👉 Explanation:
➤Promise.race() returns the result of the first resolved promise.
Great analogy: runners in a race.

✅ With these extra examples, you can see how Promises:
➤Delay things (timers)
➤Represent real-world uncertain tasks (weather, exam results)
➤Can chain steps (coffee order)
➤Can run multiple tasks together (all, race)

Assignment:
➤promises
https://youtu.be/NOzi4wBHn0o?si=PtQzDdv0BLOYgFZn

🚀 Week 5 Day 3 Challenges — Promises

Time to put our Promises knowledge into action with some exciting real-world flavored challenges! 💻✨

1️⃣ Profile Picture Loader 👤

👉 Simulate a Promise that “downloads” a profile picture after 2 seconds. When it’s done, log "Profile picture loaded!".
💡 Hint: Wrap setTimeout inside a Promise and resolve it with the message.

2️⃣ Online Exam Timer ⏳

👉 Use Promises to simulate a countdown:
"Exam starting in 3..."
"2..."
"1..."
"Start now!"
💡 Hint: Chain Promises with different delays.

3️⃣ Banking Transaction 💳

👉 Build a Promise that:
Resolves with "Transaction successful" if account balance ≥ withdrawal amount
Rejects with "Insufficient funds" otherwise
💡 Hint: Pass balance and amount as parameters.

4️⃣ News Fetcher 📰

👉 Make three Promises that each resolve with "News 1", "News 2", "News 3" after different times. Use Promise.all() to display all news when ready.

🔥 These four challenges are like mini stepping-stones into the real world of async tasks. Take your time, break them down, and remember: coding is all about practice and patience.

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

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

🌞 Week 5 Day 4 – Async/Await

Hello campers 👋,

I hope you’re all doing well and still keeping your energy up! 💪 Today, we’re going to learn something that makes asynchronous JavaScript much easier to work with: async/await.
If you’ve been struggling with callbacks or even Promises, don’t worry. async/await is like a smooth shortcut that makes your code look cleaner, easier to read, and closer to how we write normal (synchronous) code.

1️⃣ Why async/await?

Imagine you are waiting in line for coffee ☕. Normally, you’d place your order, stand there, and wait until it’s ready — that’s synchronous (everything stops until coffee is ready).

But in programming, that would be terrible because other tasks would freeze! So we use asynchronous code — we order the coffee and then do something else while waiting.
We already learned two ways to handle that waiting:
Callbacks → but they can become messy (callback hell).
Promises → better, but .then().then().catch() can still get a little hard to follow.

Now enters async/await 🚪:
👉 It lets us write async code as if it were simple step-by-step instructions.

2️⃣ The async keyword

When you put the word async in front of a function, that function will always return a Promise.
Example:

async function greet() {
    return "Hello, campers!"; }
greet().then(message => console.log(message));

Output:
Hello, campers!

Even though we just returned a string, JavaScript automatically wrapped it in a Promise because the function is marked async.

3️⃣ The await keyword

This is where the magic happens 🪄.
await pauses your code until the Promise is resolved (like saying: “wait here until coffee is ready”).
You can only use await inside an async function.
Example with a Promise:

function getCoffee() {
     return new Promise(resolve => { setTimeout(() => resolve("☕ Coffee is ready!"), 2000); }); }
async function morningRoutine() {
     console.log("Order coffee...");
     let coffee = await getCoffee(); // wait until Promise is done
     console.log(coffee);
     console.log("Now I can start my day!"); }
morningRoutine();

Output:

Order coffee...
☕ Coffee is ready! (after 2 seconds)
Now I can start my day!

See? No messy .then() chains — it looks like normal step-by-step code.

4️⃣ Error Handling with try...catch

When you use async/await, you can handle errors with try...catch — just like handling exceptions in normal code.
Example:

function getData() {
    return new Promise((resolve, reject) => {
    let success = false;
    setTimeout(() => {
      if (success) resolve("✅ Data received");
      else reject("❌ Something went wrong!"); }, 1500); }); }
async function fetchData() {
    try {
      let data = await getData();
      console.log(data); }
    catch (error) { console.log(error); } }
fetchData();

If success is true, it prints:
✅ Data received
If success is false, it prints:
❌ Something went wrong!

5️⃣ Comparing .then() vs async/await

Same Promise, two styles:
Using .then()

getCoffee().then(coffee => { console.log(coffee);
console.log("Start working!"); });

Using async/await

async function startWork() {
    let coffee = await getCoffee();
    console.log(coffee);
    console.log("Start working!"); }
startWork();

Both give the same result. But notice how async/await looks cleaner and easier to read like instructions.

6️⃣ More Real-World Examples
⏱ Example 1: Delayed Messages

function delay(ms) {
     return new Promise(resolve => setTimeout(resolve, ms)); }
async function remind() {
    console.log("⏰ Start studying...");
    await delay(2000);
    console.log("📚 Still studying after 2 seconds...");
     await delay(2000);
     console.log("✅ Finished!"); }
remind();

📡 Example 2: Fake API Fetch

function fakeFetchData() {
    return new Promise(resolve => { setTimeout(() => resolve("🌐 User data loaded!"), 1500); }); }
async function loadUser() {
    console.log("Fetching user data...");
    let result = await fakeFetchData();
    console.log(result); }
loadUser();

Output:
Fetching user data... 🌐 User data loaded!

🍕 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 ✌️