Full Stack Camp

📅 Week 4 — Day 5 JavaScript OOP Basics: Constructors, new, Prototypes, Inheritance & ES6 Classes Hey hey, brilliant campers! 👋🌞 Grab your ☕ and settle in—today we level up from “using objects” to designing them. By the end, you’ll know how to build your own blueprints for data and behavior, share methods efficiently, and create families of related objects. This is the foundation of building real apps. 1) Why OOP? (Quick intuition) Think of building many similar things: ➤A Student with name,grade,age, and methods like introduce() ,takeExam(), playFootball(),or getAverage(). ➤A Product with price, discount logic, etc. You don’t want to copy-paste the same object structure again and again. You want a blueprint you can reuse to make many instances. That’s OOP. Key words you’ll see: ✅Class / Constructor → the blueprint ✅Instance → an object created from the blueprint ✅Method → a function that lives on the object ✅Prototype → where shared methods live (saves memory!) ✅Inheritance → one blueprint building on another 2) Constructor Functions (Pre‑class style) Before ES6 classes, JavaScript used constructor functions to act like blueprints. Now it's changed. But let's look what it was like since they are very related. 2.1 Defining a constructor By convention, constructor names are Capitalized.

function Person(name, age) {       this.name = name; // instance property       this.age = age; // instance property // ❌ Avoid defining methods here (explained below) }

2.2 Creating instances with new

const p1 = new Person("Abebe", 20); const p2 = new Person("Saba", 22); console.log(p1.name); // "Abebe" console.log(p2.age); // 22

3) What does new actually do? When you write new Person("Abebe", 20) JavaScript does: ➤Create a new empty object: {} ➤Link that object to Person.prototype ➤Bind this inside Person to the new object ➤Return the object automatically If you forget new, this won’t point to a new object—bugs ensue. 4) Prototypes: where shared methods live If you put methods inside the constructor, each instance gets its own copy (wasteful). Instead, attach methods to the prototype so all instances share one function.

function Person(name, age) {     this.name = name;     this.age = age; } // Shared by all Person instances Person.prototype.greet = function () {     console.log(Hi, I'm ${this.name} and I'm ${this.age}.); };   const a = new Person("Almaz", 25);   const b = new Person("Kebede", 30); a.greet(); // "Hi, I'm Almaz and I'm 25." b.greet(); // "Hi, I'm Kebede and I'm 30." console.log(a.greet === b.greet); // true ✅ (one shared function)

 4.1 Property lookup (prototype chain) When you call a.greet(): ➥JS looks for greet on a ➥If not found, it looks on Person.prototype ➥If still not found, it looks on Object.prototype ➥…until it either finds it or gives undefined 5) Inheritance with Constructor Functions Let’s say a Student is a specialized Person. 5.1 Borrow the Person constructor for shared properties

function Student(name, age, major) {      Person.call(this, name, age); // call Person with this instance     this.major = major; }

5.2 Link prototypes so methods are inherited

Student.prototype = Object.create(Person.prototype); // inherit Student.prototype.constructor = Student; // fix constructor pointer Student.prototype.study = function () {       console.log(${this.name} is studying ${this.major}.); };

5.3 Use it

const s = new Student("Mahi", 19, "Computer Science"); s.greet(); // from Person.prototype s.study(); // from Student.prototype

 That’s classic JavaScript inheritance before classes.

💥💥 Week 4 Day 4 Challenges Hey campers! 👋 Hope you’re all doing great and ready to flex your JavaScript muscles. Today’s challenges are all about objects and this, putting our new skills into action. 1️⃣ Student Grade Tracker Create an object that stores student names and their scores. ➤Add a method to add a score. ➤Add a method to get the average score. ➤Add a method to find the highest scorer. 💡 Hint: Store students in an array as objects like { name: "Abel", score: 89 }. Use loops to process the data. 2️⃣ Contact Book Lite Make an object that stores people’s names and phone numbers. ➤Add a contact. ➤Delete a contact. ➤Show all contacts. 💡 Hint: Use an array to store multiple contact objects. Example: { name: "Marta", phone: "0912345678" }. 3️⃣ Simple Shopping Cart Build an object representing a shopping cart. ➤Add an item with name and price. ➤Remove an item by name. ➤Show the total price. 💡 Hint: Items can be stored in an array as objects: { name: "Bread", price: 15 }. Loop through to get the total. 4️⃣ Movie Watchlist An object that keeps a list of movies to watch. ➤Add a movie title. ➤Mark as watched. ➤Show all watched movies. 💡 Hint: Each movie can be stored as { title: "Avatar", watched: false }. When marking as watched, update the property to true. ✅ Your mission: ▶️Choose any 3 challenges from today’s list and bring them to life using objects and this. After you’re done,   ✅  share  your creations,   ✅ invite your friends to join our camp, and as always — stay awesome and code on! ✌️

Assignment ➤objects https://youtu.be/lo7o91qLzxc?si=JNrFWZgMs-qn0AMW ➤this https://youtu.be/Jdlo8ZDt5Jg?si=T3ahEgR7cbkW0pe9

Week 4 Day 4 JavaScript lesson 👋 Hey there, my awesome campers! Today, we’re diving into one of the most important building blocks in JavaScript: ✅Objects and ✅the mysterious keyword this. By the end of today, you’ll be able to make your code more organized, reusable, and real-world-ready. 1️⃣ What is an Object? In JavaScript, objects are like containers for storing related data and functionality together in key–value pairs. Keys → the names (like labels). Values → the actual data (can be strings, numbers, arrays, functions… even other objects!). 📦 Analogy: Think of an object like a basket with different compartments: ➤One holds injera (string value) ➤Another holds wot (number for quantity) ➤Another holds berbere (array for spice levels) ➤And another holds a cooking method (function). Instead of carrying separate baskets for each thing, you keep them together in one basket — that’s exactly how objects group related stuff. Example:

let student = {     name: "Abebe",     age: 18,     skills: ["JavaScript", "HTML", "CSS"],      greet: function() {             console.log("Hello! My name is " + this.name); } }; console.log(student.name); // Access property: "Abebe" console.log(student.skills[1]); // Access array inside object: "HTML" student.greet(); // Call method: "Hello! My name is Abebe"

2️⃣ Creating Objects We can create objects in two main ways: 1. Object literal (most common)

let car = {      brand: "Toyota",      year: 2020 };

2. Using the new Object() constructor (less common for beginners)

let car = new Object(); car.brand = "Toyota"; car.year = 2020;

3️⃣ Adding, Changing, and Removing Properties

let person = {      name: "Almaz",      age: 25 }; person.job = "Teacher"; // Add new property person.age = 26; // Change value delete person.name; // Remove property console.log(person);

4️⃣ Methods (Functions inside Objects) When a function lives inside an object, we call it a method.

let dog = {      name: "Bingo",      bark: function() {            console.log("Woof! Woof!"); } }; dog.bark(); // "Woof! Woof!"

 5️⃣ The Special Keyword: this What is this? this is a special keyword that refers to the object that is currently using the method. 📦 Analogy: Imagine each basket has its own “name tag.” When you say “this basket’s injera,” you mean the injera inside the current basket you’re holding — not any other basket. Example:

let user = {      name: "Sara",      greet: function() {          console.log("Hi, I'm " + this.name); } }; user.greet(); // "Hi, I'm Sara"

Here, this.name looks inside the object that called the method (in this case, user). ⚠️ Important Note about this If you use arrow functions inside objects, this behaves differently — it does not bind to the object, it takes this from the surrounding scope. Example:

let user = {       name: "Kebede",       greet: () => { console.log("Hi, I'm " + this.name); } }; user.greet(); // "Hi, I'm undefined" 😬

 Why? Because arrow functions don’t create their own this. For methods, always use the regular function() syntax. 6️⃣ Real-World Example:

let bankAccount = {       owner: "Mekdes",       balance: 5000,       deposit: function(amount) {             this.balance += amount;             console.log(${this.owner} deposited ${amount} birr. New balance: ${this.balance}); },        withdraw: function(amount) {              if (amount <= this.balance) {                     this.balance -= amount;                     console.log(${this.owner} withdrew ${amount} birr. Remaining balance: ${this.balance}); }               else { console.log("Insufficient funds!"); } } }; bankAccount.deposit(1000); bankAccount.withdraw(2000);

This is how objects + this help model real-world systems like banks, shops, games, etc. 🌟 Summary: ✅Objects store related data and functions together. ✅Keys and values make objects flexible. ✅Methods are functions inside objects. ✅this refers to the object that owns the method. ✅Use function() for object methods (not arrow functions) if you need this.

🔥Week 4 Day 3 Callback Challenges 1. Mood Tracker with Callback What to do: Ask the user for their mood for today, then use a callback function to display a custom message based on the mood they entered. Hint: Make one function to collect the mood, and another function (the callback) to decide what message to show. Example moods: "happy", "sad", "mehh". 2. Custom Greeting Machine What to do: Write a function that takes a name and a callback. The callback will decide how to greet the person — formal, funny, or casual. Hint: Test it with three different callbacks to see how the same function can behave differently. Example greetings: "Hello Mr. …", "Yo …", "Good day, …". 3. Simple Math Processor What to do: Make a function that takes two numbers and a callback. The callback can decide to add, subtract, multiply, or divide them. Hint: Write four different callbacks for the four operations and try passing each one. 4. Random Joke Teller What to do: Make a function that picks a random joke from an array and pass it to another function (callback) that displays it in a special way — for example, uppercase, decorated, or with emojis. Hint: Use Math.floor(Math.random() * array.length) to pick a joke. 🎯 Your Mission Campers: ➤Pick any three of these challenges, solve them using what we’ve learned, and push yourself to be creative with the callbacks. ➤When you’re done, share your work with the group, ➤ invite more friends to join the camp, and as always… Stay curious, Stay coding andddd Stay well ✌️

Assignment: ➤callbacks https://youtu.be/i2SPq-nb3NQ?si=g4h9B8uImLYqSnTN

Week 4 Day 3 JavaScript Lesson: 👋 Warm Greeting "Hey my awesome campers! 🌞 Welcome back to our JavaScript jungle! 🏕️ Today, we’re exploring a magical tool in our coder’s toolbox — something that lets our code talk to other code, hand over tasks, and say: 'Here, you handle this for me when you’re ready.' It’s called a callback function — and by the end of this lesson, you’ll see why callbacks are one of the most important concepts in JavaScript. let’s go! 🚶‍♂️🌳 1. What is a Callback Function? A callback function is simply:

A function that is passed as an argument to another function, and that other function can call it (or “invoke” it) later.

In plain English: Think of callbacks like giving your friend a phone number before you go into a meeting. You’re telling them:

“When you finish cooking, call me on this number so I know it’s ready.” 📞

They don’t call you immediately — they call you when the cooking is done. That’s exactly how callbacks work. Basic Syntax

function greet(name) {      console.log(Hello, ${name}!); } function processUserInput(callback) {      let name = prompt("Please enter your name:"); callback(name); // Call the function passed in } processUserInput(greet);

Here: greet is the callback. processUserInput is the function that receives the callback and calls it later. 2. Why Use Callbacks? We use callbacks when: ➤We want to wait for something to finish (e.g., user input, data loading, timer, file download). ➤We want code to be flexible (you can pass in different behavior without changing the original function). 💡 Think of callbacks as "fill in the blank" in a plan — the main function has the structure, and the callback decides the specific action. 3. Analogy — Ethiopian Coffee Ceremony ☕ Imagine you are attending an Ethiopian coffee ceremony. You sit down and the host says: “Tell me what snack you want, and I’ll bring it when the coffee is ready.” You give your snack choice — that’s your callback. The host prepares coffee (main function), and when it’s ready, they call your function (bring your snack). 4. Synchronous vs Asynchronous Callbacks Synchronous callback Happens immediately during the function execution.

function sayHello() {      console.log("Hello!"); } function runImmediately(callback) {     callback(); // Runs now } runImmediately(sayHello);          console.log("This runs after sayHello");

Output: Hello! This runs after sayHello Asynchronous callback Happens later (after some time/event).

function showDone() {      console.log("Timer finished!"); } console.log("Timer started..."); setTimeout(showDone, 2000); // Wait 2 seconds

Output: Timer started... (2 seconds later) Timer finished! Here, setTimeout is like saying:

“When the timer finishes, call this function.”

5. Callbacks with Parameters We can pass data into callbacks just like normal functions.

function printSquare(num) {      console.log(num * num); } function doMath(num, callback) {      callback(num); }      doMath(5, printSquare); // Output: 25

6. Anonymous Callbacks Instead of naming the callback, you can pass it directly as an anonymous function.

setTimeout(function () {      console.log("Anonymous callback says hi!"); }, 1000);

Or with arrow functions:

setTimeout(() => { console.log("Arrow function callback here!"); }, 1000);

✅ Summary ➤A callback is a function passed into another function. ➤It can be synchronous or asynchronous. ➤Great for flexibility and waiting for tasks to finish. ➤Can be named, anonymous, or arrow functions.

💥💥Week 4 Day 2 challenge 👋 Hey We’ve got some brain workouts lined up for you, but remember — these aren’t just any exercises… they’re real-world inspired coding adventures 💻✨ Here are 5 mini-quests — pick ANY 3 you like: 🏆 1. Student Score Analyzer Take an array of student scores and: Increase every score by 5 (using map). Keep only students who scored 50+ (using filter). Find the average score (using reduce). 💡 Hint: Each step can be chained or done separately — your call! ✏️ 2. Word Counter Ask the user for a sentence. Count how many times each word appears — but store your counter in a closure so no one else can mess with it! 💡 Hint: .split(" ") is your friend, and your closure will keep the count safe. 🔢 3. Custom Multiplier Create makeMultiplier(factor) that returns a function which multiplies any number by your factor. Example: let double = makeMultiplier(2); console.log(double(5)); // 10 💡 Hint: That factor lives inside your closure — safe and sound. 📒 4. Activity Logger Make a closure that keeps a private list of all activities you log (like “Read”, “Code”, “Run”). Every time you call it, it adds the activity and shows how many you’ve logged so far. 💡 Hint: The activity list should live inside your function and never be exposed directly. ⚖️ 5. Even-Odd Divider Given an array of numbers, separate them into even and odd arrays using filter(). Print both arrays at the end. 💡 Hint: One filter call for evens, another for odds — short and clean! 🔥 Your Mission: Pick ANY 3 challenges. Tackle them with creativity. Once done, ▶️share your solutions so we can all learn from each other, ▶️invite a friend to join the fun, ▶️and as always — stay curious, stay coding, and stay well ✌️

Assignment ➤map https://youtu.be/xNQH1NbZQ0E?si=bfCFeYqcmcFNo1hL ➤reduce https://youtu.be/iDWtuWkuj8g?si=Jcry-t1EtJkIDTye ➤filter https://youtu.be/VvSEKHKFvpQ?si=5W9FGrriVPTwWpX4 ➤closure https://youtu.be/beZfCfiuIkA?si=5weCkXWQ5df3ckCa

Classic counter example:

function createCounter() {     let count = 0; // variable in outer scope     return function() { // inner function closes over count        count += 1;        return count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3

Even though createCounter() has finished running, the returned function still remembers count. That remembered state is the closure. Why closures are useful ↪️Private state: emulate private variables (data hidden from the outside). ↪️Factories: create configured functions (like makeMultiplier). ↪️Event handlers that remember context. ↪️Callbacks that retain data over time. Private data example (bank account)

function createAccount(initial) {      let balance = initial; // private      return { deposit(amount) { if (amount > 0)          balance += amount;          return balance; }, withdraw(amount) { if (amount <= balance)            balance -= amount;           return  balance; }, getBalance() {     return balance; } }; } const account = createAccount(1000); account.deposit(200); // 1200 account.withdraw(100); // 1100 console.log(account.getBalance()); // 1100 // No direct access to balance from outside — closure keeps it private.

Memory & closures — a word of caution Closures keep references to their outer variables, so those variables stay in memory until no function referencing them exists. That’s usually fine, but be careful: ➤Don’t accidentally keep very large data in a closure if not needed. ➤Remove references when you no longer need them (set to null) if long-lived. More closure examples 1) Make specialized greeter (function factory)

function makeGreeter(greeting) {      return function(name) {         console.log(${greeting}, ${name}!); }; } const saySelam = makeGreeter("Selam"); saySelam("Liya"); // Selam, Liya!

 2) Build a once-only function (run once memo) function once(fn) {     let done = false;     return function(...args) {         if (!done) {             done = true;             return fn(...args); } // otherwise do nothing }; } const init = once(() => console.log("Initialized")); init(); // prints init(); // nothing 3) Using closure with asynchronous callback

function delayedGreeter(name) {      const message = Hello ${name};      setTimeout(() => {          console.log(message); // closure keeps message alive until callback runs }, 1000); } delayedGreeter("Sami");

✅ Practical advice & patterns ➤Use HOFs to move repeating logic out of loops. Example: abstract “logging” or “validation” into functions you pass around. ➤Use closures when you need private state or a factory that produces configured functions. ➤Prefer let/const over var to avoid subtle closure/loop bugs. ➤Don’t overuse closures for huge data — be mindful of memory. ➤Name functions clearly: makeAdder, filterAdults, sumAll — descriptive names help future-you.

Week 4 Day 2 JavaScript Lesson: 👋 Selam campers! Lovely to see you back — hope your brains are rested and your fingers ready. Today we’re diving into two of the most important, beautiful, and practically useful ideas in JavaScript: ✅Higher‑order functions (functions that work with other functions) ✅Closures & lexical scope (how functions remember things) These two topics are what make JavaScript so flexible and expressive. 🔹 PART 1 — Higher‑Order Functions (HOFs) What is a higher‑order function? A higher‑order function is simply a function that takes one or more functions as arguments, and/or returns a function. In other words — functions that treat other functions like data. Think of it like cooking: a HOF is the recipe that accepts other little recipes (sauces) as ingredients, or spits out a new recipe you can use later. Why HOFs matter ➤They let you reuse behavior (not just data). ➤They let you abstract patterns (e.g., “do this to every item”). ➤They make code composable, readable, and concise. Everyday HOFs you already use ↪️map, ↪️filter, ↪️reduce, ↪️ forEach — these are HOFs built into arrays. Example (map/filter/reduce quick look):

const nums = [1, 2, 3, 4, 5]; const doubled = nums.map(n => n * 2); // [2,4,6,8,10] const evens = nums.filter(n => n % 2 === 0); // [2,4] const sum = nums.reduce((acc, n) => acc + n, 0); // 15

Build-your-own HOF — a simple one Suppose we want a function that applies any operation to every number:

function applyToEach(arr, fn) {      const result = [];      for (let i = 0; i < arr.length; i++) {         result.push(fn(arr[i])); // call the function passed in }       return result; }      const nums = [1, 4, 9];      const roots = applyToEach(nums, Math.sqrt); // [1,2,3]

applyToEach is a HOF because it takes a function (fn) and calls it. HOF returning a function (function factories) A HOF can return a function. This is useful for configurable behavior. Example: a multiplier factory:

function makeMultiplier(factor) {      return function(n) { return n * factor; }; } const double = makeMultiplier(2); const triple = makeMultiplier(3); console.log(double(5)); // 10 console.log(triple(5)); // 15

Here makeMultiplier returns different functions depending on the factor. Very handy! Composition example (combine small functions) We can make new functions by composing smaller functions.

const addOne = n => n + 1; const square = n => n * n; function compose(f, g) {      return function(x) {          return f(g(x)); }; } const squareThenAddOne = compose(addOne, square); console.log(squareThenAddOne(3)); //addOne(square(3)) = 10

Callbacks (synchronous and asynchronous) A callback is simply a function passed to another function to be called later. Synchronous callback:

function greetUser(name, printer) {      const message = Selam ${name}!;      printer(message); // call the function passed in } greetUser("Liya", console.log);

Asynchronous callback example (you’ll meet async later — this just demonstrates HOF usage over time):

setTimeout(() => console.log("Wake up!"), 1000); // callback fired later

🔹 PART 2 — Lexical Scope & Closures ✅What is lexical scope? Lexical scope means a function’s available variables are determined by where it was written in the source code, not where it is called. Example:

function outer() {    let food = "injera"; // outer scope variable function inner() {    console.log(food); // inner can see 'food' because of lexical scope }    inner(); } outer(); // prints "injera"

The inner function sees food because food existed in the environment where inner was defined. ✅What is a closure? A closure is when a function remembers the variables from its defining scope, even after that outer function has finished executing.

💥💥Week4 day 1 Challenges: 🚀 Challenge 1: Super Combiner Write a function that can take any number of arrays (not just two!) Combine them into one single array The result should have all the items together 💡 Hints Use rest parameters to grab all the arrays your function receives. Then, use spread syntax to unpack them into one big array. Test with fruit names, numbers, or even names of your classmates. 📝 Challenge 2: Sentence Maker You have a box of words — maybe they’re proverbs from your grandmother or lyrics from your favorite Ethiopian song. Your job: turn them into a beautiful sentence. That’s your challenge: Write a function that takes an array of words Return a string where the words are joined together with spaces Bonus: allow extra words to be added separately (use rest parameters) 💡 Hints First, focus on joining the array words together. Then, think: “What if I also had extra words I wanted to add?” 🎯 Your mission today: ➥Build both functions with your own creativity. ➥Test them with at least three different examples each. ➥Share your funniest or most creative results in the group. ➥Invite a friend to join our camp and most importantly 🔥 Keep the code flowing, keep the smiles glowing! ✌️

Assignment: ➤spread operator https://youtu.be/RuDdltsfaVc?si=C52S5F7eQuKYGnRZ ➤rest parameter https://youtu.be/ahwR1D_GAfc?si=HQGuXPDC0H3KJldP

Week 4 Day 1 Js Lesson: Hey, campers👋 I hope your fingers are feeling strong from all that typing and your brains are warmed up because today we’re officially stepping into Advanced JavaScript territory. You’ve already met functions before, like old friends — but today, we’re going to dig deeper, learn their secrets, and make them work harder for us. We’ll cover: ✅Function Declarations vs. Function ✅Expressions ✅Arrow Functions in Depth ✅Default Parameters ✅Rest & Spread Parameters 1️⃣ Function Declarations vs. Function Expressions In JavaScript, there’s more than one way to create a function. Function Declaration This is the classic way — you just declare it, and JavaScript “hoists” it to the top of its scope, meaning you can call it even before it’s written in your code. // Function Declaration function sayHello() {      console.log("Hello, campers!"); } sayHello(); // ✅ Works even if we call it before the function is defined Key points: ➥Hoisted (can be used before they appear in code) ➥Good for situations where order in code doesn’t matter Function Expression Here, we store the function inside a variable. These are NOT hoisted, so you can only use them after they are defined. // Function Expression const sayHi = function() {     console.log("Hi, campers!"); }; sayHi(); // ✅ Works here If we tried calling sayHi() before its definition — ❌ error. Why use them? ➥More flexible (can pass them around like normal variables) ➥Useful in callbacks and dynamic code 2️⃣ Arrow Functions — in Depth We’ve met them before, but let’s explore their deeper behavior.

// Normal function const add = function(a, b) {      return a + b; }; // Arrow function const addArrow = (a, b) => a + b;

 Differences: ➥Shorter Syntax — Good for quick, one-line functions. ➥this Behavior — Arrow functions don’t have their own this. Instead, they use the this from the surrounding scope. Example:

const person = { name: "Meresa", normalFunc: function() {      console.log("Normal:", this.name); }, arrowFunc: () => {      console.log("Arrow:", this.name); } }; person.normalFunc(); // Normal: Meresa person.arrowFunc(); // Arrow: undefined (because arrow uses global this)

Best use for arrow functions: ➥Small callbacks ➥When you want to keep this from the surrounding scope 3️⃣ Default Parameters Sometimes, you want your function to have a “backup value” if no argument is given.

function greet(name = "Camper") {       console.log(Hello, ${name}!); } greet("Abebe"); // Hello, Abebe! greet(); // Hello, Camper!

Why useful? ➥Avoids undefined when arguments are missing ➥Makes functions safer and easier to use 4️⃣ Rest & Spread Parameters Rest Parameters (...) When you don’t know how many arguments will be passed, rest parameters collect them into an array.

function sumAll(...numbers) {     let sum = 0;     for (let num of numbers) {         sum += num; }     console.log(sum); } sumAll(1, 2, 3); // 6 sumAll(5, 10, 15, 20); // 50

 Spread Operator (...) Instead of collecting arguments, spread takes an array and spreads its values into separate arguments.

const nums = [1, 2, 3]; console.log(Math.max(...nums)); // 3

Uses of spread: ➥Copy arrays: const arr1 = [1, 2, 3]; const arr2 = [...arr1]; ➥Merge arrays: const arr3 = [4, 5]; const merged = [...arr1, ...arr3]; // [1,2,3,4,5] 💡 Summary of Today’s Power-Ups: ✅Declarations vs. Expressions — know when to use each ✅Arrow functions — short & keep this ✅Default parameters — safer function calls ✅Rest & spread — handle many values with elegance

Extra Challenges: Real-World Flavor 👋 Selam Coder Family! Week 3 is coming to a close, and wow — you’ve already learned variables, loops, conditions, arrays, functions, and more! That’s not beginner stuff anymore — it’s foundational JavaScript! 💪 But guess what? Coding is like a muscle 💪 — you build it by using it. That’s why challenges matter. They connect theory to practice, and give you a taste of real-life problem solving. So today, let’s dive into 5 practical and slightly spicy challenges. We’re slowly introducing you to the harsh but exciting world of coding. 🔥 ✅ Choose 4 challenges to work on today (but feel free to try the remaining one if you can!) 1️⃣ 🕵️ Word Blocker 🧠 What to do: Ask the user to enter a sentence. Check if it contains any bad words (e.g. "bad", "ugly", etc). If yes, replace them with "***". 💡 Hints: Use .includes() to check if a word is in the sentence. Use .replace() to block the bad word. You can use .toLowerCase() to make checking easier. 2️⃣ 🎁 Lucky Draw Picker 🧠 What to do: Let the user enter names of participants (as an array). Then randomly pick a winner and print it. 💡 Hints: Use .push() to collect names using prompt inside a loop. Use Math.random() and Math.floor() to pick a random index. 3️⃣ 🔄 Name Shuffler 🧠 What to do: Ask the user to enter their full name. Reverse the letters of first and last name separately. Then print it out like a fun secret identity. 💡 Hints: Use .split(" ") to separate first and last names. Use .split(""), .reverse(), .join("") for reversing. 4️⃣ 🧠 Memory Word Game 🧠 What to do: Ask the user to enter 8 words (stored in an array). Then ask: "What was the 3rd word?" Check if they remember correctly. 💡 Hints: Use a loop to collect words into an array. Use array index to compare the original 3rd word with the answer. 5️⃣ ⏰ Simple Alarm Clock (Simulation) 🧠 What to do: Ask the user for a wake-up hour (e.g. 7). Use a loop to count from 1 to that number. At the final hour, print “⏰ Wake up!” 💡 Extra twist: Add a for loop and an if to simulate "snoozing" if the user says “not now”. 😉 💡 Hints: Use for to count hours. You can add prompt() inside the loop to ask "wake up now?" 🤸 Bonus Tip: ➤➤Try combining the techniques you've learned: ➤➤Use functions to organize your code. ➤➤Use arrays for storing user input. Use loops, if, prompt, return, etc. 💬 Share your solutions in the group, help your friends, and invite others to join the adventure. We’re building something amazing together — even if we’re just 53 for now 😄 Stay curious, share the love, invite others, and stay well ✌️ #fullstacksummercamp #Week3 #Challenges #JSBootcamp #PracticeToGrow

Don’t Let Questions Make You Feel Small If you're new to coding and constantly feel like: “Why can’t I solve this small bug?” “Is it normal to forget things I just learned?” “Do real developers know all this by heart?” “Am I even growing at all?” Here’s my advice: 👉 Don't mistake confusion for failure. Even experienced developers: - Forget syntax - Google daily - Ask teammates for help Get stuck on “simple” problems The difference? They’ve learned to be calm in the unknown—not because they know everything, but because they’ve been there enough times. So if you’re asking a lot of questions, feeling lost at times, or doubting yourself... ✅ That’s not a sign you’re failing. 🔥 That’s a sign you’re learning. 📈 That’s how growth feels before it shows results. -Stick with it. -Code messy. -Break things. -Google hard. Ask again. Finish one more day. That’s how you build a future-proof career. keep showing up

Week 3 Day 8 JS Challenges 👋 Hey awesome learners! Now it’s your turn to apply what you’ve learned with today’s exciting challenges! 🎯 Pick any 3 challenges below and start solving! 💸 1. Budget Checker 📌 Ask the user for their monthly budget and then let them enter their weekly expenses (4 times). At the end, tell them if they stayed within their budget or not. 💡 Hints: Use prompt() in a for loop Store values in array (optional) Add them up, compare with budget 📶 2. Mobile Data Tracker 📌 Let the user input how many days they’ve used mobile data and how much they used each day. Calculate total usage and warn them if they’ve passed 1000 MB. 💡 Hints: Use loop + prompt Store in array or add directly Return “⚠️ Limit Exceeded!” if too much 😊 3. Daily Mood Tracker 📌 Ask user for their mood each day of the week (7 times). At the end, summarize how many “happy”, “sad” or “meh” days they had. 💡 Hints: Loop 7 times Use if conditions Count each type 🔐 4. Password Strength Checker 📌 Ask the user to enter a password and give feedback like: Weak (too short) Medium (okay length) Strong (has symbols + capital letters) 💡 Hints: Use .length, includes(), maybe toUpperCase() Example symbol check: password.includes("!") Check if password has capital using .toUpperCase() !== password ❓ 5. Simple Quiz App 📌 Create a 3-question quiz using prompt(). Give score at the end. 💡 Hints: Store questions in an array (optional) Track correct answers Return: “You got X out of 3!” 🫱🏽‍🫲🏽 Pick 3 you like the most, build them in small steps, and don’t forget: 📢 Share what you built, 📨 Invite your friends to join, and as always… Stay creative, stay curious, and stay well! ✌️💻

Assignment : ➤variable scope https://youtu.be/KyqmbIkZGIo?si=DpOiz2ueQfrFBbJg ➤math.random https://youtu.be/K2upGO5Bb48?si=1IGyBHU9BUYvsAxv ➤math objects https://youtu.be/uy-1WNqecnI?si=5s3QFwe5WbHFhyNC