🚀 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