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

🌞 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