Full Stack Camp

前往频道在 Telegram

Fullstack Camp | Learn. Build. Launch. Join us for a hands-on journey through HTML, CSS, JavaScript, React, Node.js, Express & MongoDB — all in one place. Use this bot to search for lessons. @FullstackCamp_assistant_bot DM: @Tarikey6

显示更多

未指定国家未指定类别

235

订阅者

-124 小时

无数据7 天

+330 天

127

帖子浏览量

~ 3224 小时

~ 4148 小时

54.04%

参与率

无数据

每日帖子数

Ads index

beta

帖子存档

\n\nB) Simple countdown (with setInterval)\n\nlet seconds = 5;\nconst id = setInterval(() => {\n console.log(seconds); \n if (seconds === 0) { console.log(\"Go! 🚀\");\nclearInterval(id); } \n seconds--; }, 1000); \n\nC) Stopwatch (start/stop/reset) — self-contained logic\n\n

00:00.0

\n\n\n \n

\n","datePublished":"2025-08-31T02:37:27Z","dateModified":"2025-08-31T02:37:27Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":100}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/181","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/181","mainEntityOfPage":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/181","headline":"📖 Week 5 Day 1 — Asynchronous JS Reading Challenge Goal: Make sure you really understand what async is, why i…","articleBody":"📖 Week 5 Day 1 — Asynchronous JS Reading Challenge\n\nGoal: Make sure you really understand what async is, why it exists, and how JS handles tasks in the background.\n\n🔹 Part 1: Quick Questions\nAnswer these without looking back at the lesson first — test your memory and understanding.Explain in your own words:\n\n 1.What’s the difference between synchronous and asynchronous code?\n\n 2.Imagine you’re in a café:\n➥Which part of the coffee process is like the Call Stack?\n➥Which part is like the Web API / background task?\n➥Which part is like the Callback Queue?\n➥Who is the Event Loop in this analogy?\n\n 3.Why would a JavaScript web page freeze if we didn’t use asynchronous code?\n\n 4.List 2 examples of asynchronous functions in JS and explain what they do.\n\n🔹 Part 2: True or False\n\n1,setTimeout blocks the rest of your code until it finishes.\n2,JavaScript can do multiple things at the exact same time on its main thread.\n3,Asynchronous code helps make apps faster and smoother.\n4,The Event Loop checks if the Call Stack is empty before moving tasks from the Callback Queue.\n\n🔹 Part 3: Scenario Thinking\nRead the scenarios and explain what will happen first:\n\n1.You order coffee ☕ (takes 3 minutes), start talking to a friend, and the waiter brings your coffee when ready.\nWhich happens first: talking to a friend or getting coffee?\n\n2.You request data from a server using fetch(). While waiting, you click a button that opens a popup.\nWill the popup wait for the data to finish downloading, or appear immediately?\n\n3.You use setTimeout for 5 seconds to show a message, but in the meantime, you print “Hello” to the console.\nWhat gets logged first: “Hello” or the 5-second message?\n\n🔹 Part 4: Reflection\nWrite 2–3 sentences about why you think asynchronous programming is important for real websites and apps. Use examples from Google, Instagram, or YouTube.\n\nDon’t forget to\n💥💥 share your solutions, \n💥💥invite your friends, \nand as always… \n\n💥💥✌️✌️stay well, stay curious, and stay coding ✌️","datePublished":"2025-08-29T10:47:03Z","dateModified":"2025-08-29T10:47:03Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":135}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/180","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/180","mainEntityOfPage":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/180","headline":"Assignment: ➤Asynchronous vs synchronous https://youtu.be/Coyy79wRz_s?si=TyZO6F6VNkywWH2q","articleBody":"Assignment:\n➤Asynchronous vs synchronous \nhttps://youtu.be/Coyy79wRz_s?si=TyZO6F6VNkywWH2q","datePublished":"2025-08-29T10:46:46Z","dateModified":"2025-08-29T10:46:46Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":129}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/179","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/179","mainEntityOfPage":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/179","headline":"🌞 Week 5 Day 1 — Introduction to Asynchronous JavaScript 👋 Hello Campers! Welcome to Week 5 of our Fullstack…","articleBody":"🌞 Week 5 Day 1 — Introduction to Asynchronous JavaScript\n\n👋 Hello Campers!\n\nWelcome to Week 5 of our Fullstack Summer Camp! We’ve been doing an amazing job so far — from variables and functions, all the way to DOM and OOP. Today, we are stepping into one of the most important (and a bit tricky) parts of JavaScript: Asynchronous Programming.\nDon’t worry — we’ll take it step by step, with simple words, good analogies, and examples.\n\n🕐 1. First, What Does \"Asynchronous\" Mean?\n\nSynchronous = things happen one after the other.\nExample: You stand in line to buy injera 🥙. Each person must finish buying before the next can order.\n\nAsynchronous = things can happen while waiting.\nExample: You order coffee ☕ at a café. The waiter tells you to sit, and while the coffee is being prepared, you can check your phone, talk to a friend, or do homework. You don’t need to stand stuck until it’s ready.\n\n👉 That’s what JavaScript does: it allows some tasks to happen in the background (like waiting for data, downloading files, or timers) while the rest of the code keeps running.\n\n🧵 2. Why Do We Need Async in JavaScript?\n\nJavaScript is single-threaded — it can only do one thing at a time. If we write blocking code (like waiting 5 seconds), the whole page will freeze 😳.\n\nImagine:\nYou open a website.\nThe website tries to download a 5MB image.\nIf JavaScript was synchronous only, the entire page would stop until the image finished downloading. No scrolling, no clicking, nothing.\n\nAsynchronous programming fixes this → it lets JS say:\n👉 “Okay, I’ll start downloading this, but meanwhile, let me keep running the rest of the code. I’ll come back when the download is ready.”\n\n🌀 3. The Event Loop — JavaScript’s Coffee Shop ☕\n\nHere’s the magic of how async works:\n➤Call Stack → where JavaScript runs your main code (line by line).\n➤Web APIs / Background tasks → where timers, fetch requests, etc., wait.\n➤Callback Queue → when those tasks are finished, they move here.\n➤Event Loop → a helper that checks: “Is the stack empty? If yes, I’ll take a task from the queue and run it.”\n\n👉 Analogy:\nThink of a coffee shop:\n➤The cashier = Call Stack (takes orders).\n➤The barista = Web API (prepares coffee in the back).\n➤The pick-up counter = Callback Queue (finished coffees waiting).\n➤The waiter = Event Loop (delivers coffee when the cashier is free).\nSo, JS can keep “taking orders” while some work happens in the background.\n\n💻 4. Examples of Synchronous vs Asynchronous\n\nExample 1: Synchronous\n\nconsole.log(\"1. Order injera\");\nconsole.log(\"2. Wait until injera is ready\");\nconsole.log(\"3. Eat injera\"); \n\nOutput (always in order):\n1. Order injera\n2. Wait until injera is ready\n3. Eat injera \nEverything waits for the previous step.\n\nExample 2: Asynchronous with setTimeout\n\nconsole.log(\"1. Order coffee\");\nsetTimeout(() => { console.log(\"2. Coffee is ready!\"); }, 2000);\nconsole.log(\"3. Talk with friend\"); \n\nOutput:\n1. Order coffee \n3. Talk with friend\n2. Coffee is ready! \n👉 Notice: “Talk with friend” runs before coffee is ready. That’s async!\n\n🔧 5. Common Asynchronous Functions in JS\n➤setTimeout() → run code after some delay.\n➤setInterval() → run code repeatedly after a time gap.\n➤fetch() → get data from a server (we’ll learn in detail later).\n➤Event listeners → e.g., when user clicks, the function is called later.\nAll these don’t block the code — they run in the background and “come back” when ready.\n\n🌍 6. Real-World Examples\n\n➤When you type in Google search → results load without reloading the whole page (async API calls).\n➤When you scroll Instagram → new posts load in the background.\n➤When you press play on YouTube → video streams while comments load separately.\n\n📝 Key Takeaways\n\n➤JavaScript is single-threaded (one main line of execution).\n➤To avoid blocking, it uses asynchronous programming.\n➤Async tasks (timers, requests, events) go to the Web APIs → then return later via the Event Loop.\n➤Async = smoother, faster, more user-friendly apps.","datePublished":"2025-08-29T10:46:27Z","dateModified":"2025-08-29T10:46:27Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":134}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/178","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/178","mainEntityOfPage":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/178","headline":"Full Stack Camp","datePublished":"2025-08-29T10:46:02Z","dateModified":"2025-08-29T10:46:02Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":108}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/177","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/177","mainEntityOfPage":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/177","headline":"Full Stack Camp","datePublished":"2025-08-28T07:08:09Z","dateModified":"2025-08-28T07:08:09Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":117},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/176","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/176","mainEntityOfPage":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/176","headline":"🌟 Project 1: Calculator & Digital Clock Hello Campers 👋 I know we still haven't finished JavaScript , but it'…","articleBody":"🌟 Project 1: Calculator & Digital Clock\n\nHello Campers 👋\nI know we still haven't finished JavaScript , but it's time to use what we have learned so far for two real mini-apps. Using google is allowed, but make sure you understand every line of code. \n\n1) 🧮 Calculator (Basic → Plus)\n✅ What to build\nA clean on-page calculator with:\n➤Display screen\n➤Buttons: 0–9, + - × ÷, . (decimal), =, C (clear), ← (backspace)\n\n🧩 Core features\n➤Click buttons to show numbers/operators on the display\n➤= evaluates the expression and shows the result\n➤C clears everything, ← removes last character\n➤Prevent invalid inputs (e.g., two operators in a row)\n\n🛠️ Suggested structure\n✅HTML\n▶️

with a \n▶️A grid of \n\nCSS (ideas)\n➤Big monospace font for time\n➤Subtle gradient background\n➤Center with Flexbox, add soft glow text-shadow\n\nJS (flow)\n➤Keep a state: let is24 = false;\n➤function updateClock() { \nconst now = new Date()\nGet hours/minutes/seconds\n➤If 12-hour: hour = hour % 12 || 12 and add AM/PM\n➤Format with a helper: pad(n) => n.toString().padStart(2,'0')\n➤Build date string (e.g., Sunday, 17 September 2025)\nPut into #time and #date\n}\n➤setInterval(updateClock, 1000); updateClock();\nOn toggle button click, flip is24 and re-render\n💡 Hints\nArrays help format names: \n➥const days = [\"Sun\",\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\"];\n➥const months = [\"Jan\",\"Feb\",...,\"Dec\"];\n➥Use textContent to update DOM efficiently\n➥Use a single interval; don’t create multiple intervals on each click\n\n📣 Final Notes\n\n✅Keep your code clean: separate HTML structure, CSS styling, and JS behavior\n✅Test edge cases (empty display on =, multiple operators, midnight formats, etc.)\n\nShare your finished projects in the group, invite your friends, and as always—\n\n stay well, stay curious, and stay coding ✌️","datePublished":"2025-08-26T15:20:20Z","dateModified":"2025-08-26T15:20:20Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":760},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/175","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/175","mainEntityOfPage":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/175","headline":"Assignment : ➤Dom traverse https://youtu.be/RKXIMnSwUcg?si=FUKj1D4b7pC7XpFq ➤currency https://youtu.be/HOMu48…","articleBody":"Assignment :\n➤Dom traverse \nhttps://youtu.be/RKXIMnSwUcg?si=FUKj1D4b7pC7XpFq\n➤currency\nhttps://youtu.be/HOMu48bTzz8?si=rERc7uTzUX89twhi\n➤console.time\nhttps://youtu.be/9amAW_qXv84?si=SA02eHAMPjKnn0Xf\n➤date objects \nhttps://youtu.be/LwYwz67l1lA?si=BRjHz1NMzeaxuyvH\n➤shuffle\nhttps://youtu.be/FGAUekwri1Q?si=HOUJ2olxK-PiBQNO\n➤sorting \nhttps://youtu.be/CTHhlx25X-U?si=nW90hcx3kTpSKiuo\n➤destructuring \nhttps://youtu.be/UHZcJyVXtLo?si=zpy9s31wdychlRm7","datePublished":"2025-08-26T15:19:24Z","dateModified":"2025-08-26T15:19:24Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":132}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/174","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/174","mainEntityOfPage":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/174","headline":"👉 Intl.NumberFormat automatically localizes numbers & symbols. 7️⃣ Measuring Code Speed with console.time We…","articleBody":"👉 Intl.NumberFormat automatically localizes numbers & symbols.\n\n7️⃣ Measuring Code Speed with console.time\n\nWe can measure how long a block of code takes to run.\n\nconsole.time(\"loop test\");\nlet sum = 0;\nfor (let i = 0; i < 1_000_000; i++) {\n sum += i; } \nconsole.timeEnd(\"loop test\"); \n// e.g. loop test: 12ms \n👉 Useful when comparing different ways of solving a problem.\n🎯 Wrap Up\nToday we learned:\n✔ How to move around HTML elements (DOM traversal)\n✔ Sorting & shuffling arrays (with destructuring explained first!)\n✔ Dates and how to format them\n✔ Currency formatting for real apps\n✔ Measuring performance with console.time\n✔ Cleaner code with destructuring\nEach of these may look small, but together they give you real-world tools you’ll use in projects like calculators, dashboards, games, and even ecommerce apps.","datePublished":"2025-08-26T15:19:02Z","dateModified":"2025-08-26T15:19:02Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":102}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/173","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/173","mainEntityOfPage":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/173","headline":"🌟 Week 4 Day 9 — DOM Traverse, Sort & Shuffle, Date, Currency, Console Time, Destructuring Hello Campers 👋, F…","articleBody":"🌟 Week 4 Day 9 — DOM Traverse, Sort & Shuffle, Date, Currency, Console Time, Destructuring\n\nHello Campers 👋,\nFirst, big apology for the 3-day silence 🙏. Sometimes life gets busy. Teaching is about consistency, and I’ll keep showing up with you. Today we’ll break these topics into tiny bites with real-world meaning.\n\n1️⃣ DOM Traversal (Walking around your HTML family tree)\n\nThink of your HTML as a family tree:\n➤Parent = the container\n➤Children = elements inside it\n➤Siblings = brothers/sisters (elements at the same level)\nExample HTML:\n\n

Child 1

Child 2

Child 3

\n\nJS Traversal:\n\nconst parent = document.getElementById(\"family\"); // Children (all kids) console.log(parent.children); // HTMLCollection \n\n// ➤First & Last Child\nconsole.log(parent.firstElementChild.textContent); // \"Child 1\" console.log(parent.lastElementChild.textContent); // \"Child 3\" \n\n// ➤Parent of Child 2\nlet child2 = parent.children[1]; console.log(child2.parentElement.id); // \"family\"\n\n//➤ Siblings\nconsole.log(child2.previousElementSibling.textContent); // \"Child 1\"\nconsole.log(child2.nextElementSibling.textContent); // \"Child 3\" \n\n👉 This is how we move around the DOM when we need not just one element but relationships.\n\n2️⃣ Sorting Arrays\nSorting means arranging data in order (alphabetical, numeric, etc.).\nExample: sorting numbers\n\nlet scores = [40, 100, 1, 5, 25, 10]; \n\n// Wrong (default = alphabetical!) console.log(scores.sort()); // [1, 10, 100, 25, 40, 5]\n\n// Correct numeric sort \nscores.sort((a, b) => a - b);\nconsole.log(scores); // [1, 5, 10, 25, 40, 100] \n\n// Descending\nscores.sort((a, b) => b - a);\nconsole.log(scores); // [100, 40, 25, 10, 5, 1] \n👉 Always pass a compare function when sorting numbers.\n\n3️⃣ Destructuring (Unpacking values quickly)\n\nThis is like saying:\n“Instead of carrying a whole bag, let me just pull out the items I need.”\nArrays:\n\nlet colors = [\"red\", \"green\", \"blue\"]; \n\n// Without destructuring: \nlet first = colors[0];\nlet second = colors[1];\n\n// With destructuring:\nlet [c1, c2, c3] = colors;\nconsole.log(c1); // red\nconsole.log(c2); // green\nconsole.log(c3); // blue \n\nObjects:\n\nlet student = { name: \"Amina\", age: 20, city: \"Addis\" }; \n\n// Without destructuring:\nlet n = student.name;\nlet c = student.city; \n\n// With destructuring: \nlet { name, city } = student;\nconsole.log(name); // Amina\nconsole.log(city); // Addis\n\n\n👉 We’ll now use this in shuffling to make swaps shorter.\n\n4️⃣ Shuffle Arrays (Randomize order)\n\nImagine shuffling cards in a game. We can randomize an array using the Fisher-Yates method.\n\nlet students = [\"Aman\", \"Lily\", \"Sara\", \"Kebede\", \"Muna\"]; \nfor (let i = students.length - 1; i > 0; i--) {\n let j = Math.floor(Math.random() * (i + 1));\n// Swap students[i] with students[j]\n [students[i], students[j]] = [students[j], students[i]]; // destructuring swap }\nconsole.log(students); \n\n👉 Thanks to destructuring, swapping values looks neat: [a, b] = [b, a];\n\n5️⃣ Dates (Working with real-world time)\n\nThe Date object lets us work with today’s time.\n\nlet now = new Date();\nconsole.log(now); // full date & time\nconsole.log(now.getFullYear()); // year\nconsole.log(now.getMonth()); // 0-11 (0 = January)\nconsole.log(now.getDate()); // day of month\nconsole.log(now.getDay()); // 0-6 (0 = Sunday)\nconsole.log(now.getHours()); // hour\nconsole.log(now.toDateString()); // \"Tue Aug 26 2025\"\nconsole.log(now.toLocaleString()); // local format \n\n👉 Note: months start at 0.\n\n6️⃣ Currency Formatting\n\nWhen showing money, we need proper formatting.\n\nlet price = 12345.678; \n// USD\nconsole.log( new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" }).format(price) ); // $12,345.68\n\n// Ethiopian Birr\nconsole.log( new Intl.NumberFormat(\"am-ET\", { style: \"currency\", currency: \"ETB\" }).format(price) ); // Br 12,345.68","datePublished":"2025-08-26T15:18:46Z","dateModified":"2025-08-26T15:18:46Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":100}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/172","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/172","mainEntityOfPage":"https://telemetr.io/ch/channels/2504967936-fullstackcampp/posts/172","headline":"Want to study C++ or Python? My friend’s channel on YouTube uses great examples to make things easy to unders…","articleBody":"Want to study C++ or Python? My friend’s channel on YouTube uses great examples to make things easy to understand—take a look and subscribe.\n\nhttps://youtube.com/@twohmschool?si=FuOAaJnKzW_WXtvZ","datePublished":"2025-08-24T17:12:07Z","dateModified":"2025-08-24T17:12:07Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/ch/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":120},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}}]}

235

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

235

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

235

🔥 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)

235

🤯 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.

235

🌞 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.”

235

🔥 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. ⚡

235

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

235

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

235

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).

235

🌞 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>

235

📖 Week 5 Day 1 — Asynchronous JS Reading Challenge Goal: Make sure you really understand what async is, why it exists, and how JS handles tasks in the background. 🔹 Part 1: Quick Questions Answer these without looking back at the lesson first — test your memory and understanding.Explain in your own words: 1.What’s the difference between synchronous and asynchronous code? 2.Imagine you’re in a café: ➥Which part of the coffee process is like the Call Stack? ➥Which part is like the Web API / background task? ➥Which part is like the Callback Queue? ➥Who is the Event Loop in this analogy? 3.Why would a JavaScript web page freeze if we didn’t use asynchronous code? 4.List 2 examples of asynchronous functions in JS and explain what they do. 🔹 Part 2: True or False 1,setTimeout blocks the rest of your code until it finishes. 2,JavaScript can do multiple things at the exact same time on its main thread. 3,Asynchronous code helps make apps faster and smoother. 4,The Event Loop checks if the Call Stack is empty before moving tasks from the Callback Queue. 🔹 Part 3: Scenario Thinking Read the scenarios and explain what will happen first: 1.You order coffee ☕ (takes 3 minutes), start talking to a friend, and the waiter brings your coffee when ready. Which happens first: talking to a friend or getting coffee? 2.You request data from a server using fetch(). While waiting, you click a button that opens a popup. Will the popup wait for the data to finish downloading, or appear immediately? 3.You use setTimeout for 5 seconds to show a message, but in the meantime, you print “Hello” to the console. What gets logged first: “Hello” or the 5-second message? 🔹 Part 4: Reflection Write 2–3 sentences about why you think asynchronous programming is important for real websites and apps. Use examples from Google, Instagram, or YouTube. Don’t forget to 💥💥 share your solutions, 💥💥invite your friends, and as always… 💥💥✌️✌️stay well, stay curious, and stay coding ✌️

235

Assignment: ➤Asynchronous vs synchronous https://youtu.be/Coyy79wRz_s?si=TyZO6F6VNkywWH2q

235

🌞 Week 5 Day 1 — Introduction to Asynchronous JavaScript 👋 Hello Campers! Welcome to Week 5 of our Fullstack Summer Camp! We’ve been doing an amazing job so far — from variables and functions, all the way to DOM and OOP. Today, we are stepping into one of the most important (and a bit tricky) parts of JavaScript: Asynchronous Programming. Don’t worry — we’ll take it step by step, with simple words, good analogies, and examples. 🕐 1. First, What Does "Asynchronous" Mean? Synchronous = things happen one after the other. Example: You stand in line to buy injera 🥙. Each person must finish buying before the next can order. Asynchronous = things can happen while waiting. Example: You order coffee ☕ at a café. The waiter tells you to sit, and while the coffee is being prepared, you can check your phone, talk to a friend, or do homework. You don’t need to stand stuck until it’s ready. 👉 That’s what JavaScript does: it allows some tasks to happen in the background (like waiting for data, downloading files, or timers) while the rest of the code keeps running. 🧵 2. Why Do We Need Async in JavaScript? JavaScript is single-threaded — it can only do one thing at a time. If we write blocking code (like waiting 5 seconds), the whole page will freeze 😳. Imagine: You open a website. The website tries to download a 5MB image. If JavaScript was synchronous only, the entire page would stop until the image finished downloading. No scrolling, no clicking, nothing. Asynchronous programming fixes this → it lets JS say: 👉 “Okay, I’ll start downloading this, but meanwhile, let me keep running the rest of the code. I’ll come back when the download is ready.” 🌀 3. The Event Loop — JavaScript’s Coffee Shop ☕ Here’s the magic of how async works: ➤Call Stack → where JavaScript runs your main code (line by line). ➤Web APIs / Background tasks → where timers, fetch requests, etc., wait. ➤Callback Queue → when those tasks are finished, they move here. ➤Event Loop → a helper that checks: “Is the stack empty? If yes, I’ll take a task from the queue and run it.” 👉 Analogy: Think of a coffee shop: ➤The cashier = Call Stack (takes orders). ➤The barista = Web API (prepares coffee in the back). ➤The pick-up counter = Callback Queue (finished coffees waiting). ➤The waiter = Event Loop (delivers coffee when the cashier is free). So, JS can keep “taking orders” while some work happens in the background. 💻 4. Examples of Synchronous vs Asynchronous Example 1: Synchronous

console.log("1. Order injera"); console.log("2. Wait until injera is ready"); console.log("3. Eat injera");

Output (always in order):

1. Order injera
2. Wait until injera is ready
3. Eat injera

Everything waits for the previous step. Example 2: Asynchronous with setTimeout

console.log("1. Order coffee"); setTimeout(() => { console.log("2. Coffee is ready!"); }, 2000); console.log("3. Talk with friend");

Output:

1. Order coffee 
3. Talk with friend
2. Coffee is ready!

👉 Notice: “Talk with friend” runs before coffee is ready. That’s async! 🔧 5. Common Asynchronous Functions in JS ➤setTimeout() → run code after some delay. ➤setInterval() → run code repeatedly after a time gap. ➤fetch() → get data from a server (we’ll learn in detail later). ➤Event listeners → e.g., when user clicks, the function is called later. All these don’t block the code — they run in the background and “come back” when ready. 🌍 6. Real-World Examples ➤When you type in Google search → results load without reloading the whole page (async API calls). ➤When you scroll Instagram → new posts load in the background. ➤When you press play on YouTube → video streams while comments load separately. 📝 Key Takeaways ➤JavaScript is single-threaded (one main line of execution). ➤To avoid blocking, it uses asynchronous programming. ➤Async tasks (timers, requests, events) go to the Web APIs → then return later via the Event Loop. ➤Async = smoother, faster, more user-friendly apps.

235

challenges of week 4.zip1.17 MB

235

Where do you currently stand on this?

Anonymous voting

235

🌟 Project 1: Calculator & Digital Clock Hello Campers 👋 I know we still haven't finished JavaScript , but it's time to use what we have learned so far for two real mini-apps. Using google is allowed, but make sure you understand every line of code. 1) 🧮 Calculator (Basic → Plus) ✅ What to build A clean on-page calculator with: ➤Display screen ➤Buttons: 0–9, + - × ÷, . (decimal), =, C (clear), ← (backspace) 🧩 Core features ➤Click buttons to show numbers/operators on the display ➤= evaluates the expression and shows the result ➤C clears everything, ← removes last character ➤Prevent invalid inputs (e.g., two operators in a row) 🛠️ Suggested structure ✅HTML ▶️<div class="calc"> with a <input id="display" readonly> ▶️A grid of <button>s for digits/operators ✅CSS (ideas) ▶️Use CSS Grid for the buttons ▶️:hover and :active styles for click feedback ▶️Bigger font for display, subtle shadow for the calculator body ✅JS (flow) ▶️Grab all buttons and the display (document.getElementById, querySelectorAll) ▶️On button click, update display.value ▶️On =, safely evaluate (don’t use raw eval in real apps; for now you can map ×→*, ÷→/ and evaluate using Function or a simple parser) ▶️On C, set display.value = '' ▶️On ←, remove last char: ▶️display.value = display.value.slice(0, -1) ↪️Edge cases: avoid .. twice, avoid ++, --, **, //, and starting with an operator (except minus if you want negative numbers) 💡 Hints ➥Keep allowed chars list: digits 0–9, ., + - * / ➥Replace visual operators before evaluation: ➥input.replaceAll('×','*').replaceAll('÷','/') ➥Disable multiple operators in a row by checking the last character before appending ➥Optional: add keyboard support with keydown events 2) ⏰ Digital Clock (Live Time + Options) ✅ What to build A live clock that updates every second: Hours:Minutes:Seconds AM/PM (12-hour) and 24-hour toggle Day and date display 🧩 Core features ➤Show current time (HH:MM:SS) ➤Update every 1000 ms with setInterval Format leading zeros (e.g., 09:05:03) ➤Show day name and full date 🛠️ Suggested structure HTML <div class="clock"> <div id="time"></div> <div id="date"></div> <button id="toggleFormat">Switch 12/24h</button> CSS (ideas) ➤Big monospace font for time ➤Subtle gradient background ➤Center with Flexbox, add soft glow text-shadow JS (flow) ➤Keep a state: let is24 = false; ➤function updateClock() { const now = new Date() Get hours/minutes/seconds ➤If 12-hour: hour = hour % 12 || 12 and add AM/PM ➤Format with a helper: pad(n) => n.toString().padStart(2,'0') ➤Build date string (e.g., Sunday, 17 September 2025) Put into #time and #date } ➤setInterval(updateClock, 1000); updateClock(); On toggle button click, flip is24 and re-render 💡 Hints Arrays help format names: ➥const days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; ➥const months = ["Jan","Feb",...,"Dec"]; ➥Use textContent to update DOM efficiently ➥Use a single interval; don’t create multiple intervals on each click 📣 Final Notes ✅Keep your code clean: separate HTML structure, CSS styling, and JS behavior ✅Test edge cases (empty display on =, multiple operators, midnight formats, etc.) Share your finished projects in the group, invite your friends, and as always— stay well, stay curious, and stay coding ✌️

235

Assignment : ➤Dom traverse https://youtu.be/RKXIMnSwUcg?si=FUKj1D4b7pC7XpFq ➤currency https://youtu.be/HOMu48bTzz8?si=rERc7uTzUX89twhi ➤console.time https://youtu.be/9amAW_qXv84?si=SA02eHAMPjKnn0Xf ➤date objects https://youtu.be/LwYwz67l1lA?si=BRjHz1NMzeaxuyvH ➤shuffle https://youtu.be/FGAUekwri1Q?si=HOUJ2olxK-PiBQNO ➤sorting https://youtu.be/CTHhlx25X-U?si=nW90hcx3kTpSKiuo ➤destructuring https://youtu.be/UHZcJyVXtLo?si=zpy9s31wdychlRm7

235

👉 Intl.NumberFormat automatically localizes numbers & symbols. 7️⃣ Measuring Code Speed with console.time We can measure how long a block of code takes to run.

console.time("loop test"); let sum = 0; for (let i = 0; i < 1_000_000; i++) { sum += i; } console.timeEnd("loop test"); // e.g. loop test: 12ms

👉 Useful when comparing different ways of solving a problem. 🎯 Wrap Up Today we learned: ✔ How to move around HTML elements (DOM traversal) ✔ Sorting & shuffling arrays (with destructuring explained first!) ✔ Dates and how to format them ✔ Currency formatting for real apps ✔ Measuring performance with console.time ✔ Cleaner code with destructuring Each of these may look small, but together they give you real-world tools you’ll use in projects like calculators, dashboards, games, and even ecommerce apps.

235

🌟 Week 4 Day 9 — DOM Traverse, Sort & Shuffle, Date, Currency, Console Time, Destructuring Hello Campers 👋, First, big apology for the 3-day silence 🙏. Sometimes life gets busy. Teaching is about consistency, and I’ll keep showing up with you. Today we’ll break these topics into tiny bites with real-world meaning. 1️⃣ DOM Traversal (Walking around your HTML family tree) Think of your HTML as a family tree: ➤Parent = the container ➤Children = elements inside it ➤Siblings = brothers/sisters (elements at the same level) Example HTML:

<div id="family"> <p>Child 1</p> <p>Child 2</p> <p>Child 3</p> </div>

JS Traversal:

const parent = document.getElementById("family"); // Children (all kids) console.log(parent.children); // HTMLCollection // ➤First & Last Child console.log(parent.firstElementChild.textContent); // "Child 1" console.log(parent.lastElementChild.textContent); // "Child 3" // ➤Parent of Child 2 let child2 = parent.children[1]; console.log(child2.parentElement.id); // "family" //➤ Siblings console.log(child2.previousElementSibling.textContent); // "Child 1" console.log(child2.nextElementSibling.textContent); // "Child 3"

👉 This is how we move around the DOM when we need not just one element but relationships. 2️⃣ Sorting Arrays Sorting means arranging data in order (alphabetical, numeric, etc.). Example: sorting numbers

let scores = [40, 100, 1, 5, 25, 10]; // Wrong (default = alphabetical!) console.log(scores.sort()); // [1, 10, 100, 25, 40, 5] // Correct numeric sort scores.sort((a, b) => a - b); console.log(scores); // [1, 5, 10, 25, 40, 100] // Descending scores.sort((a, b) => b - a); console.log(scores); // [100, 40, 25, 10, 5, 1]

👉 Always pass a compare function when sorting numbers. 3️⃣ Destructuring (Unpacking values quickly) This is like saying: “Instead of carrying a whole bag, let me just pull out the items I need.” Arrays:

let colors = ["red", "green", "blue"]; // Without destructuring: let first = colors[0]; let second = colors[1]; // With destructuring: let [c1, c2, c3] = colors; console.log(c1); // red console.log(c2); // green console.log(c3); // blue

Objects:

let student = { name: "Amina", age: 20, city: "Addis" }; 

// Without destructuring:
let n = student.name;
let c = student.city; 

// With destructuring: 
let { name, city } = student;
console.log(name); // Amina
console.log(city); // Addis

👉 We’ll now use this in shuffling to make swaps shorter. 4️⃣ Shuffle Arrays (Randomize order) Imagine shuffling cards in a game. We can randomize an array using the Fisher-Yates method.

let students = ["Aman", "Lily", "Sara", "Kebede", "Muna"]; for (let i = students.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); // Swap students[i] with students[j] [students[i], students[j]] = [students[j], students[i]]; // destructuring swap } console.log(students);

👉 Thanks to destructuring, swapping values looks neat: [a, b] = [b, a]; 5️⃣ Dates (Working with real-world time) The Date object lets us work with today’s time.

let now = new Date(); console.log(now); // full date & time console.log(now.getFullYear()); // year console.log(now.getMonth()); // 0-11 (0 = January) console.log(now.getDate()); // day of month console.log(now.getDay()); // 0-6 (0 = Sunday) console.log(now.getHours()); // hour console.log(now.toDateString()); // "Tue Aug 26 2025" console.log(now.toLocaleString()); // local format

👉 Note: months start at 0. 6️⃣ Currency Formatting When showing money, we need proper formatting.

let price = 12345.678; // USD console.log( new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(price) ); // $12,345.68 // Ethiopian Birr console.log( new Intl.NumberFormat("am-ET", { style: "currency", currency: "ETB" }).format(price) ); // Br 12,345.68

235

Want to study C++ or Python? My friend’s channel on YouTube uses great examples to make things easy to understand—take a look and subscribe. https://youtube.com/@twohmschool?si=FuOAaJnKzW_WXtvZ