Characters left: 150

.\n➥Don’t forget to grab the input value with .value.\n\n4. Image Switcher 🖼️\n\nWhat to do:\n➤Display an image and a button. When the button is clicked, the image changes.\n💡Hint:\n➥Use an array of image URLs.\n➥Swap the src attribute of the when the button is clicked.\n\n5. Emoji Rain 🌸🍕😂\n\nWhat to do:\n➤Have a button that, when clicked, drops a new emoji onto the page.\n💡Hint:\n➥Use document.createElement(\"span\").\n➥Set its textContent to an emoji.\n➥Append it to the body each time the button is clicked.\n\n✨ Choose any 3 challenges, try them out, and have fun!\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-19T18:50:09Z","dateModified":"2025-08-19T18:50:09Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":167},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/162","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/162","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/162","headline":"Assignment : ➤Add/Change html https://youtu.be/WCRi7y6aNrQ?si=JkZyU_xqa5BzUksy ➤mouse events https://youtu.be…","articleBody":"Assignment :\n➤Add/Change html \nhttps://youtu.be/WCRi7y6aNrQ?si=JkZyU_xqa5BzUksy\n➤mouse events\nhttps://youtu.be/g_vXSKbfUiQ?si=JiJzcKuj6O7pWNRP \n➤key events \nhttps://youtu.be/q32skvBgxo4?si=lc80uMObuZ-HUpTl\n➤Hide/show\nhttps://youtu.be/MkvHPOT4RS8?si=Zxre1aDV9tMPyzwr","datePublished":"2025-08-19T18:49:44Z","dateModified":"2025-08-19T18:49:44Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/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":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/161","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/161","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/161","headline":"B) Properties (often nicer) const img = document.querySelector('img'); img.src = 'cat.jpg'; img.alt = 'A cute…","articleBody":"B) Properties (often nicer)\n\nconst img = document.querySelector('img');\nimg.src = 'cat.jpg';\nimg.alt = 'A cute cat'; \nC) Custom data: data-* + dataset\n\nBuy\n \n\n8) Forms + validation basics (DOM side)\n\n
\n \n\nSign Up \n
\n
\n \n\n✅ Uses built-in HTML validation + DOM for feedback.\n\n9) When should your JS run? (DOMContentLoaded, defer)\n\nOption A: Put \ndefer waits until HTML is parsed, then runs script.\n\nOption C: Listen for the DOM to be ready\n\ndocument.addEventListener('DOMContentLoaded', () => {\n   // safe to query and manipulate the DOM here }); \n\n10) Mini build (step-by-step): Add items to a list + remove items\n(Just a teaching demo; not a “challenge”)\n\n
\n\nAdd \n
\n
\n \n\nWhat you practiced here:\n➤submit + preventDefault()\n➤createElement / appendChild / append\n➤event.target and delegation on the
\n\n11) Good habits & small gotchas\n✅Prefer addEventListener over inline events.\n✅Use textContent for text; innerHTML only when you must render HTML (never with untrusted input).\n✅Prefer classes (classList) over inline styles.\n✅Use defer or run code after DOMContentLoaded.\n✅When attaching many handlers to many children, prefer event delegation on their parent.\n✅Keep HTML semantic & accessible (use for clickables, connect with for to inputs, etc.).\n\n🧠 Today you learned\n✅The right way to handle events with addEventListener (and how to remove them).\n✅The event object and how to use event.target.\n✅The difference between input / change / submit / keyboard & mouse events.\n✅Creating, inserting, cloning, and removing elements.\n✅classList, attributes vs properties, and custom data- attributes.\n✅How to organize scripts so the DOM exists when your code runs.\n\n\n🔥🔥You just unlocked the power to build real interactive pages. 🚀","datePublished":"2025-08-19T18:49:14Z","dateModified":"2025-08-19T18:49:14Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":98},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/160","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/160","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/160","headline":"F) Focus events: focus / blur
\n\n4) Event Bubbling, Capturing & Delegation (beginner-friendly)\nBubbling & Capturing (just enough to use)\n\nWhen you click a child element, the event travels:\n➤Capturing: from document → down to the target.\n➤Bubbling: from the target → back up to document (this is the default most people use).\n➤addEventListener(type, handler, options):\n➤{ capture: true } makes the handler run on the capturing phase.\n➤{ once: true } runs the handler only once.\n➤{ passive: true } tells the browser the handler won’t call preventDefault() (useful for scroll).\n\nEvent Delegation (powerful & simple)\nAttach one listener to a parent and handle many children based on e.target.\n\n
\n
• Home
\n
• About
\n
• Contact
\n
\n
\n \n\n✅ Works even if you later add more
• s—one listener handles all.\n\n5) Creating & inserting elements (the dynamic DOM)\nA) createElement, set content/attrs, then insert\n\n
  \n \n\nB) append, prepend, before, after, insertBefore\n\n
  \n

  First

  \n
  \n \n\nC) Removing elements: element.remove() or parent.removeChild(child)\n\nconst item = document.querySelector('#todos li');\nitem.remove(); // easy way\n// or old-school: \nconst parent = document.getElementById('todos');\nconst first = parent.firstElementChild;\nparent.removeChild(first); \n\nD) Cloning nodes: cloneNode\n\nconst original = document.querySelector('#todos li');\nconst copy = original.cloneNode(true); // true = deep clone (children too)\noriginal.after(copy); \n\nE) innerHTML vs textContent (safety & speed)\n➤textContent → sets text only (safe; shows as text).\n➤innerHTML → parses as HTML (powerful, but never put untrusted user input here—XSS risk).\n\nconst box = document.getElementById('box');\nbox.textContent = 'hello'; // shows literally hello\nbox.innerHTML = 'hello'; // renders bold hello \n\n6) Managing classes & styles cleanly\nA) classList\n\nconst card = document.getElementById('card');\ncard.classList.add('active');\ncard.classList.remove('hidden');\ncard.classList.toggle('highlight'); // add if missing, remove if present \nconst hasIt = card.classList.contains('active'); \nB) Inline styles vs CSS classes\nPrefer toggling classes (cleaner). Inline styles are fine for quick demos:\n\ncard.style.backgroundColor = 'lightyellow'; \ncard.style.border = '1px solid #ccc'; \n\n7) Attributes, properties, and dataset\nA) getAttribute / setAttribute\n\nconst link = document.querySelector('a');\nlink.setAttribute('href', 'https://example.com');\nconsole.log(link.getAttribute('href'));","datePublished":"2025-08-19T18:48:55Z","dateModified":"2025-08-19T18:48:55Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":93}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/159","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/159","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/159","headline":"🌞 Week 4 — Day 7: DOM Events & Dynamic Elements (Deep deep Dive!) Hey amazing campers 👋😄 You’ve met the DOM a…","articleBody":"🌞 Week 4 — Day 7: DOM Events & Dynamic Elements (Deep deep Dive!)\n\nHey amazing campers 👋😄\n\nYou’ve met the DOM and learned how to select elements and change them. Today we’ll make pages come alive with events (clicks, typing, submitting, mouse moves…) and learn how to create, insert, and remove elements with JavaScript. This is the moment JS starts to feel magical. ✨\n\n0) Quick mental model: what’s an “event”?\nAn event is something that happens in (or to) the page: a button is clicked, a user types in a field, a form is submitted, an image finishes loading, etc.\n\nWe can listen for that event and then run code in response. That’s interactivity.\n1) Two ways to listen for events\n\nA) The old way (inline or property)\nInline in HTML (not recommended):\n\n
Click me \n\nProperty on element (okay for quick demos):\n\nconst btn = document.getElementById('myBtn'); btn.onclick = function () { console.log('Clicked!'); }; \n❗ Limitation: Only one onclick can exist at a time; assigning a new one overwrites the old.\n\nB) The modern way (recommended): addEventListener\n\nconst btn = document.getElementById('myBtn');\nfunction handleClick() {\n      console.log('Clicked!'); }\n\nbtn.addEventListener('click', handleClick); \n\n✅ You can attach multiple listeners, remove them later, and choose options (like capture/once/passive).\n\nTo remove a listener, you need the same function reference:\n\nbtn.removeEventListener('click', handleClick); \n\n2) The event object (event / e)\nWhen an event happens, the browser gives you an event object with details about it.\n\ndocument.addEventListener('click', function (e) {\n     console.log('Type:', e.type); // \"click\" \n     console.log('Target:', e.target); // the element that was clicked\n      console.log('Coordinates:', e.clientX, e.clientY); }); \n3) Common, super-useful events\nA) click\n\n👍 Like\n

0

\n \n\nB) input vs change (text fields, selects)\n\ninput fires on every keystroke (live updates).\nchange fires when the element loses focus or the selection finalizes.\n\n\n
\n \n\nC) submit (forms) + preventing reload\nForms submit by default (page reload). Stop that with event.preventDefault().\n\n
\n\n\nLog in \n
\n
\n \n\nD) Keyboard events: keydown, keyup\n\n\n
\n \n\nE) Mouse events: mouseover / mouseout / mousemove\n\n
\n
\n
\n","datePublished":"2025-08-19T18:48:16Z","dateModified":"2025-08-19T18:48:16Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":92},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/158","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/158","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/158","headline":"💥💥 Week 4 Day 6 — DOM Challenges Choose any 3 of the following: 1. 🏫 Student Roster Formatter You’re given a…","articleBody":"💥💥 Week 4 Day 6 — DOM Challenges \n\nChoose any 3 of the following:\n\n1. 🏫 Student Roster Formatter\n\nYou’re given a list of student names inside
.\nTask: Loop through all
• items and make them uppercase.\nHint: Use getElementsByTagName or querySelectorAll and a for loop.\n\n2. 📚 Quote of the Day\n\nHave an empty

  on your page.\nTask: Store 5 quotes in an array. Select one at random and display it in the

  .\nHint: Use Math.random() and .textContent.\n\n3. 🎨 Rainbow Paragraphs\n\nYou have several

  elements on the page.\nTask: Give each one a different color from an array of colors ([\"red\", \"orange\", \"green\", \"blue\", \"purple\"]).\nHint: Loop and use .style.color.\n\n4. 🎭 Identity Switcher\n\nSuppose your page has

  Welcome

  and

  This is a page

  .\nTask: Swap their contents (the

  text becomes the

  text and vice versa).\n\n5. 🌍 Language Translator Lite\n\nYou have

  Hello

  .\nTask: Create an array of greetings ([\"Hola\", \"Bonjour\", \"Ciao\", \"Hallo\"]) and make the

  cycle through them one by one when the script runs.\n\n✅ Wrap Up\n👉 Choose any 3 challenges.\n👉 Use everything you’ve learned so far: loops, arrays, objects, and DOM properties (.textContent, .style, etc.).\n\n👉 And as always: \n     share, \n    invite, \n    stay curious, and stay coding ✌️","datePublished":"2025-08-18T16:22:11Z","dateModified":"2025-08-18T16:22:11Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1423},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/157","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/157","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/157","headline":"Assignment ➤Dom https://youtu.be/NO5kUNxGIu0?si=G9ppKAZO6Fn-EJ3Z","articleBody":"Assignment \n➤Dom \nhttps://youtu.be/NO5kUNxGIu0?si=G9ppKAZO6Fn-EJ3Z","datePublished":"2025-08-18T16:21:48Z","dateModified":"2025-08-18T16:21:48Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/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":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/156","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/156","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/156","headline":"🎯 Real Life Example Imagine you have a scoreboard in a game:

  Score: 0

  Score: 0 \nIncrease \n\nJavaScript can make it dynamic:\n\nlet score = 0;\nlet scoreBoard = document.getElementById(\"score\");\nlet btn = document.getElementById(\"increase\");\n\nbtn.addEventListener(\"click\", function() {\n      score += 1;\n      scoreBoard.textContent = \"Score: \" + score; }); \n\nNow every time the button is clicked → score goes up. 🎉\n\n🤔 Why is DOM Important?\nWithout DOM:\n➤Your page would just sit there, lifeless 🪦.\nWith DOM:\n➤You can create games, interactive forms, todo lists, dynamic shopping carts, quizzes, and basically any modern website feature.\n\nDOM = JavaScript + HTML + CSS working together.\n\n🌟 Wrap Up\nToday we learned:\n✅ DOM = Document Object Model (a tree of your page).\n✅ document object lets JS access and control HTML.\n✅ Ways to select elements: ➥getElementById, ➥getElementsByClassName, ➥getElementsByTagName, ➥querySelector, querySelectorAll.\n✅ Ways to change DOM: textContent, innerHTML, style, classList.\n✅ Why DOM makes web pages interactive.\nWe’ll dive deeper into events and more DOM manipulation tricks in the coming days.","datePublished":"2025-08-18T16:21:30Z","dateModified":"2025-08-18T16:21:30Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":107}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/155","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/155","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/155","headline":"🌟 Week 4 Day 6 — Introduction to the DOM 👋 Hello my awesome campers! Welcome back to another exciting session…","articleBody":"🌟 Week 4 Day 6 — Introduction to the DOM\n\n👋 Hello my awesome campers!\n\nWelcome back to another exciting session. You’ve been doing amazing with JavaScript so far. Up until now, most of the things we did lived inside the console — we logged messages, built little games, tracked moods, handled functions, closures, and even dived into OOP.\n\nBut let’s be honest… if we only live in the console forever, it’s kinda boring, right? 😅\n\nThe real fun of JavaScript is making web pages alive — adding interactivity, changing text, moving things, and responding to what the user does.\n👉 That’s where DOM comes in.\n\n🏗️ What is the DOM?\n\nDOM stands for Document Object Model.\nSounds scary? Let’s break it down:\n➤Document → this means your HTML page.\n➤Object Model → your browser takes that HTML and turns it into an object-like structure that JavaScript can understand.\n➤Think of your web page like a family tree 🌳:\n➥At the very top, you have the document (the root).\n➥Inside, you have children: , , .\n➥Inside you have more children:

  ,

  ,

  , , etc.\n➥And inside them, maybe even more children!\n\nSo the DOM is basically a map of your page that JavaScript can walk through and change.\n\n🔍 Example: HTML and its DOM\n\n\n \n\n     \n \n\n    

  Hello Campers!

  \n   

  Welcome to the world of DOM.

  \n    Click Me!\n\n \n\n\nNow, the DOM is how JavaScript sees this page.\nThe browser turns it into a tree like this:\n\nDocument\n   └── html\n    ├── head │\n        └── title → \"My First DOM Page\" \n    └── body \n        ├── h1#title → \"Hello Campers!\" \n        ├── p.message → \"Welcome to the world of DOM.\" \n        └── button → \"Click Me!\" \n\n\n🛠️ Accessing the DOM with JavaScript\n\nTo work with the DOM, we use the global object document.\nThink of document as the \"doorway\" into the HTML page.\n\nExample 1: Select by ID\n\nlet heading = document.getElementById(\"title\");\nconsole.log(heading); \n\n\n👉 Output:

  Hello Campers!

  \n\nWe grabbed the

  element from the page.\n\nExample 2: Select by Class\n\nlet message = document.getElementsByClassName(\"message\");\nconsole.log(message); \n\n👉 Output: an HTMLCollection with

  Welcome to the world of DOM.

  \n\nExample 3: Select by Tag Name\n\nlet buttons = document.getElementsByTagName(\"button\");\nconsole.log(buttons); \n\n👉 Output: an HTMLCollection with all elements.\n\nExample 4: Modern Query Selector\n\nlet heading = document.querySelector(\"#title\"); // first match\nlet paragraph = document.querySelector(\".message\"); // first element with class \"message\"\n\nlet button = document.querySelector(\"button\"); // first \n\nAnd if you want all matches:\n\nlet allButtons = document.querySelectorAll(\"button\");\nconsole.log(allButtons);\n \n\n\n✍️ Changing the DOM\nCool, now we don’t just want to find elements — we want to change them!\n\n1. Change Text\n\nlet heading = document.getElementById(\"title\");\nheading.textContent = \"Hello JavaScript World!\"; \n\n👉 This replaces the

  text.\n\n2. Change HTML Inside\n\nparagraph.innerHTML = \"DOM is powerful!\"; \n\n👉 Puts bold text inside the paragraph.\n\n3. Change Styles\n\nheading.style.color = \"blue\";\nheading.style.fontSize = \"50px\"; \n\n👉 Makes the heading big and blue.\n\n4. Add or Remove Classes\n\nheading.classList.add(\"highlight\");\nheading.classList.remove(\"highlight\");","datePublished":"2025-08-18T16:20:46Z","dateModified":"2025-08-18T16:20:46Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":116}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/154","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/154","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/154","headline":"💥💥Week 4 Day 5 — OOP Challenges Hey Campers 👋, you’ve now entered the world of Object-Oriented Programming. T…","articleBody":"💥💥Week 4 Day 5 — OOP Challenges\n\nHey Campers 👋, you’ve now entered the world of Object-Oriented Programming. Today’s challenges are all about practicing classes, objects, and inheritance.\n👉 Here are 6 challenge ideas — choose any 3 that excite you most.\n\n1. 🎓 School System Lite\n\n➤Create a Student class with properties like name, age, and grade.\n➤Add methods like study() and introduce().\n➤Create a Teacher class that inherits from a Person class and has an extra method teach().\n💡 Hint: Use extends to inherit, and remember to call super() inside your constructor.\n\n2. 📒 Contact Book OOP\n\n➤Make a Contact class with name, phone, and email.\n➤Create a ContactBook class to manage many contacts.\n➤Add methods like addContact(), removeContact(), and listContacts().\n💡 Hint: Store contacts in an array inside ContactBook.\n\n3. 🛒 Shopping Cart Pro\n\n➤Create a Product class with name and price.\n➤Build a Cart class to addProduct(), removeProduct(), and calculateTotal().\n➤Add a price validation using getters and setters.\n\n\n4. 🎬 Movie Watchlist OOP\n\n➤Create a Movie class with title, genre, and watched.\n➤Add a method toggleWatched() to switch watched status.\n➤Create a Watchlist class to manage multiple movies.\n💡 Hint: Add a listUnwatched() method for extra fun.\n\n5. 🏦 ATM Simulation\n\n➤Create a BankAccount class with owner and balance.\n➤Add methods deposit(), withdraw(), and checkBalance().\n➤Prevent withdrawing more than available balance.\n💡 Hint: Use conditionals inside your withdraw() method.\n\n6. 🚗 Transport System\n\n➤Make a Vehicle class with brand and speed.\n➤Add methods like drive() and stop().\n➤Extend it into Car and Bus classes, each with its own style of drive().\n\n\n\n✨ Now it’s your turn! Choose any 3 challenges and start building.\n\nRemember:\n▶️Share your solutions 🖥️\n▶️Invite friends to join the fun 👭\n\n▶️Stay well, stay curious, and stay coding! ✌️🔥","datePublished":"2025-08-16T11:03:51Z","dateModified":"2025-08-16T11:03:51Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":112},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/153","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/153","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/153","headline":"Assignment ➤constructors https://youtu.be/WPmAu26LZKo?si=QoSME94Qnk6A6uVp ➤classes https://youtu.be/U2vxAEiaV…","articleBody":"Assignment \n➤constructors \nhttps://youtu.be/WPmAu26LZKo?si=QoSME94Qnk6A6uVp\n➤classes\nhttps://youtu.be/U2vxAEiaVRY?si=sjfL7XzYJ4_RGojL\n➤inheritance \nhttps://youtu.be/DqUPa0D2N78?si=lwm9omb9U7qSLwUj\n➤super \nhttps://youtu.be/Cto38GpvJgg?si=KH98Uf_FvcXpnIdY\n➤setters and getters\nhttps://youtu.be/KQVCAnh6Afk?si=9lgyffcxOFC9CwNI","datePublished":"2025-08-16T11:03:09Z","dateModified":"2025-08-16T11:03:09Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":103}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/152","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/152","mainEntityOfPage":"https://telemetr.io/uz/channels/2504967936-fullstackcampp/posts/152","headline":"6) ES6 Classes (Modern, cleaner syntax) Now we use ES6 classes which are syntax sugar over prototypes. The be…","articleBody":"6) ES6 Classes (Modern, cleaner syntax)\nNow we use ES6 classes which are syntax sugar over prototypes. The behavior is the same; the code is cleaner.\n\n6.1 Basic class with constructor and methods\n\nclass Person {\n     constructor(name, age) {\n         this.name = name; // instance property \n        this.age = age; } // methods go on the prototype (shared) \n\n     greet() { console.log(Hi, I'm ${this.name} and I'm ${this.age}.); } }\n\nconst p = new Person(\"Betelhem\", 21); p.greet();\n\nUnder the hood, greet is still placed on Person.prototype.\n\n6.2 Inheritance with extends and super\nWe can make a new class that inherits from another.\n\nclass Student extends Person {\n      constructor(name, age, major) {\n            super(name, age); // call Person constructor \n            this.major = major; }   \n\n      study() {\n           console.log(${this.name} is studying ${this.major}.); } } \nconst st = new Student(\"Samuel\", 20, \"Math\"); \nst.greet(); // inherited\nst.study(); // own method\n\n\n6.3 Getters, setters, and static methods (handy basics)\n➤setters and getters allow controlled access properties. For example , using set we can prevent the user from entering a number for names. \n\nclass BankAccount {\n       constructor(owner, balance = 0) {\n            this.owner = owner;\n            this._balance = balance; // convention: underscore = \"internal\" }\n\n// Getter (access like a property) \nget balance() {\n      return this._balance; } \n\n// Setter (validate on assignment) \nset balance(value) {\n     if (value < 0) {\n          console.log(\"Balance cannot be negative.\"); \n         return; }\n     this._balance = value; }\n\ndeposit(amount) {\n       this._balance += amount; }\n\nwithdraw(amount) {\n       if (amount > this._balance) {\n            console.log(\"Insufficient funds!\"); return; }\nthis._balance -= amount; } \n\n// Static method (belongs to the class, not instances)\n\nstatic compare(a, b) {\n      return a.balance - b.balance; } }\n\nconst a1 = new BankAccount(\"Hanna\", 1000);\nconst a2 = new BankAccount(\"Abel\", 500); \na1.deposit(200);\n\nconsole.log(a1.balance); // getter a1.balance = 50; // setter console.log(BankAccount.compare(a1, a2)); // static \n\n➥getter/setter make property-style reads/writes that run code under the hood.\n➥static methods are utilities on the class itself (not on instances).\n\n7) this inside classes and methods (quick reminder)\n➥In class methods and prototype methods, this refers to the instance that called the method.\n➥Avoid using arrow functions for prototype methods when you need dynamic this. Arrow functions capture this from the outer scope, which can surprise you.\n\nclass Demo {\n     constructor(name) {\n        this.name = name; }\n\n     sayName() { // good console.log(this.name); }\n\nsayNameArrow = () => {\n     // fine for fields, but this is lexically bound console.log(this.name); } } \n\n\n8) Real‑World Mini Example :Library with Books (composition + classes)\n\nclass Book {\n     constructor(title, author, pages) {\n        this.title = title;\n        this.author = author;\n        this.pages = pages;\n        this.read = false; } \n    markRead() {\n         this.read = true; } } \n\nclass Library {\n      constructor(name) {\n           this.name = name;\n           this.collection = []; // array of Book instances } \n     addBook(book) {\n          this.collection.push(book); }\n      listUnread() {\n           return this.collection.filter(b => !b.read); } \n} \nconst b1 = new Book(\"Javascript Essentials\", \"Sara\", 220); \nconst b2 = new Book(\"CSS Mastery\", \"Almaz\", 180); \nconst lib = new Library(\"Addis Tech Library\"); \nlib.addBook(b1); \nlib.addBook(b2); \nb1.markRead(); console.log(lib.listUnread().map(b => b.title)); \n\n9) Common Pitfalls (and fixes)\n➤Forgetting new with constructor functions:\n➤Defining methods inside the constructor (duplicates for each instance). Prefer prototypes or class methods.\n➤Arrow functions as class/prototype methods when you expect dynamic this. Use regular methods unless you need lexical binding.\n➤Forgetting to reset constructor after Object.create in old‑style inheritance:","datePublished":"2025-08-16T11:02:37Z","dateModified":"2025-08-16T11:02:37Z","author":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/channels/2504967936-fullstackcampp","image":"https://img.tlmtr.io/c/2JwAAE/5999218308148218133?ty=x"},"publisher":{"@type":"Organization","name":"Full Stack Camp","url":"https://telemetr.io/uz/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}]}}]}

  

  Full Stack Camp

  235