💻 Day 16— Coder Army | JavaScript Project Today I created a Background Color Changer App using pure HTML, CSS, and JavaScript 🎨 In this project, I used Event Delegation — a JavaScript technique that allows handling all button clicks with just one event listener 👇 Whenever you click a color button, the entire page background changes to that color instantly 💡 🧠 Key Learnings: DOM Selection using getElementById() and querySelector() Event Handling using addEventListener() Event Object & event.target to detect which button was clicked Dynamic Style Change using style.backgroundColor ⚙️ Core JS Code: const parent = document.getElementById('parent'); parent.addEventListener('click', (event) => { const child = event.target; const body = document.querySelector('body'); body.style.backgroundColor = child.id; }); This small project helped me understand how one event listener can manage multiple elements efficiently 🧠✨ 💬 Simple logic, great learning — that’s the power of JavaScript + Coder Army practice 💪 #CoderArmy #JavaScript #Day17 #MiniProject #WebDevelopment #CodingJourney #LearnByDoing #RohitNygi
More Relevant Posts
-
💻 Exploring DOM in JavaScript! 🎯 Today, I continued my journey of learning and experimenting with the Document Object Model (DOM) — one of the most exciting parts of JavaScript that helps bring web pages to life! 🌐 Here are some of the amazing tasks I worked on today 👇 🔹 Simple Math Calculator ➕➖✖️➗ – created a basic calculator using DOM manipulation where I handled user input and displayed real-time results. 🔹 Show/Hide Password Feature 🔒👁️ – implemented a toggle feature to hide or reveal the password using simple JS logic. 🔹 Swapping Content Between Two Paragraphs 🔁 – learned how to dynamically exchange content between elements on a click event. 🔹 Generating Random Background Colors 🎨 – added functionality to change the background color randomly, giving a fun interactive touch to the webpage. Each of these tasks helped me understand DOM events, element selection, and manipulation more deeply and improved my problem-solving and logic-building skills in JavaScript. 🚀 You can check out all my DOM tasks here on my GitHub 👇 🔗https://lnkd.in/dAhB6gjM #JavaScript #DOM #WebDevelopment #LearningJourney #FrontendDevelopment #Coding #100DaysOfCode #DeveloperJourney
To view or add a comment, sign in
-
👉✅ “Setting a one-week goal to revise JavaScript again.” 💻Topic-1. JavaScript Constructor Function Hey everyone, 👋 Today, let’s talk about an interesting JavaScript topic — the Constructor Function. This is a special type of function that helps us create multiple similar objects without writing the same code again and again! 🔁 🧠 Key points to understand: The name of a constructor function always starts with a capital letter. We use the new keyword when creating an object. It automatically returns a new object. Through this concept, we can explore the basics of Object-Oriented Programming (OOP) in JavaScript — including concepts like inheritance and encapsulation. 🚀 If you’re learning JavaScript, understanding constructor functions is a must-have skill — it makes your code cleaner, reusable, and more efficient! #JavaScript #WebDevelopment #CodingTips #ConstructorFunction #FrontendDevelopment #LearningEveryday
To view or add a comment, sign in
-
-
🚀 JavaScript Gotchas: var vs let in Loops & setTimeout Same code, different output 👇 Ever wondered why this code prints 5 5 5 5 5 instead of 0 1 2 3 4? for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } 💡 Reason: var is function-scoped — only one i exists for the entire loop. setTimeout callbacks run after the loop finishes, so each callback sees the final value of i → 5. ✅ Fix it with let: for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } let is block-scoped — each iteration gets a new copy of i. Now, callbacks “remember” the correct value of i. ✅ Output: 0 1 2 3 4 💡 Key takeaway: var → shared variable in loop → tricky in async callbacks let → separate variable per iteration → safer & predictable ✨ Tip: Even setTimeout(..., 0) behaves the same! The event loop always runs callbacks after the current synchronous code. #JavaScript #CodingTips #FrontendDevelopment #WebDevelopment #Programming #LearnJS #DeveloperTips #AsyncJavaScript #Closures
To view or add a comment, sign in
-
-
🚀 If you still use var in JavaScript... you’re living in 2010! Let’s talk about one of the most underrated but powerful differences every JS developer must understand 👇 When I was learning JavaScript, I thought var and let were just different ways to declare a variable... But the day I understood why let replaced var, everything changed. 💡 Here’s the truth: 🔹 var is function-scoped, gets hoisted, and even worse — it attaches itself to the window object in browsers! Meaning: Anyone can access or even overwrite your variables globally 😱 var token = "mySecret"; console.log(window.token); // 🫣 Accessible to everyone Now imagine storing API keys, tokens, or user info like that... Yes — that’s not just bad practice; it’s a security risk. 🔒 Why let (and const) are the heroes: ✅ Block-scoped (safe inside { }) 🚫 Not attached to window ⚡ No accidental redeclaration 🔥 Prevents bugs caused by hoisting They bring safety, clarity, and modern standards to your code. When you finally understand this while learning JS, you realize why every developer, framework, and company today avoids var completely. It’s not just about syntax — it’s about secure, predictable, and professional JavaScript. 💪 #JavaScript #WebDevelopment #CodingTips #FrontendDevelopment #MERNStack #LearnCoding #WebDeveloper #CodeNewbie #TechCommunity #DeveloperLife #CodingJourney #LetsCode #100DaysOfCode
To view or add a comment, sign in
-
-
Understanding Conditional Statements in JavaScript" Today I learned about Conditional Statements in JavaScript — they help our code make decisions based on conditions. It’s like teaching our program to think before acting! 💭 Here are the main types 👇 1️⃣ if statement – runs code if a condition is true let age = 18; if (age >= 18) { console.log("You are eligible to vote!"); } 2️⃣ if...else statement – runs one block if true, another if false let temp = 25; if (temp > 30) { console.log("It's hot outside!"); } else { console.log("The weather is pleasant."); } 3️⃣ else if ladder – checks multiple conditions let marks = 85; if (marks >= 90) console.log("Grade A"); else if (marks >= 75) console.log("Grade B"); else console.log("Keep trying!"); 4️⃣ switch statement – a cleaner way for multiple conditions let day = "Monday"; switch (day) { case "Monday": console.log("Start of the week!"); break; case "Friday": console.log("Weekend is near!"); break; default: console.log("Just another day."); } Conditional statements help control the flow of logic — making code smart and dynamic! ⚡ #JavaScript #WebDevelopment #ConditionalStatements #LearnToCode #FrontendDevelopment #CodingJourney #100DaysOfCode #ProgrammingBasics #TechLearning #DeveloperCommunity
To view or add a comment, sign in
-
Understanding Variables in JavaScript Today, I explored one of the core fundamentals of JavaScript — Variables. Variables act as containers for storing data, and they play a major role in how programs handle, update, and manage information. JavaScript provides three ways to declare variables: var, let, and const. Each behaves differently in terms of scope, reassignment, and hoisting — making it important to choose the right one based on the requirement. 🔍 Key Points I Learned ✔️ Variables store dynamic values like numbers, strings, arrays, objects, etc. ✔️ var → function-scoped, older way, can lead to unexpected behavior ✔️ let → block-scoped, ideal for values that change ✔️ const → block-scoped, used for fixed values (cannot be reassigned) ✔️ ES6 improved code reliability by introducing let and const Building strong fundamentals like variables helps in writing cleaner, predictable, and modern JavaScript code. 🚀 Grateful to my mentor Sudheer Velpula for guiding and encouraging consistent learning. 🙌 #JavaScript #Variables #WebDevelopment #Frontend #CodingJourney #ES6 #ProgrammingBasics #LearnJavaScript #TechLearning #DeveloperCommunity
To view or add a comment, sign in
-
-
Today’s JavaScript Learning: DOM & Window Object I explored how JavaScript interacts with the browser environment using the Window object and the Document Object Model (DOM). Learnt how to: Access and manipulate HTML elements dynamically using methods like getElementById() getElementsByClassName() getElementsByTagName() querySelector() & querySelectorAll() Modify content and style directly from JavaScript using properties like innerText, innerHTML, and textContent Create and update elements in real time — like appending unique text to multiple divs! This session really helped me understand how JavaScript controls and updates web pages behind the scenes. #javascriptlearning #webdevelopment #frontend #dommanipulation #codingjourney
To view or add a comment, sign in
-
Day 3: Deepening JavaScript Skills with Counter Function Challenge! 🚀 Today, I tackled a classic problem — creating a flexible counter object that can increment, decrement, and reset — and it really sharpened my understanding of closures and object-oriented design in JavaScript. I implemented the createCounter function to accept an initial value and return an object with three methods: increment(): increases the value by 1 and returns it decrement(): decreases the value by 1 and returns it reset(): resets the value to the initial value and returns it This exercise reinforced how closures help maintain persistent state for each counter instance, making the code both clean and efficient. Here's a quick snippet: javascript const createCounter = (init) => { let n = init; return { increment() { return ++n; }, decrement() { return --n; }, reset() { n = init; return n; } }; }; Excited to keep pushing forward on this JavaScript journey! 💪 Let’s continue learning and sharing—feel free to share your progress or ask questions below. #JavaScript #30DaysOfJS #CodingJourney #Closure #WebDevelopment #LeetCode #ProblemSolving
To view or add a comment, sign in
-
-
🔒 Understanding Closures in JavaScript Have you ever wondered how a function can “remember” variables from its parent scope, even after the parent function has finished executing? 🤔 That’s where Closures come in! 💡 Definition: A closure is formed when a function is bundled together with its lexical scope. In simple words — “A function along with its lexical scope bundled together forms a closure.” This means the inner function has access to the outer function’s variables, even after the outer function has returned. 🧠 Explanation: The outer function creates a variable count. The inner function uses that variable. Even after outer() has finished running, the variable count is still remembered by inner() because of closure. So every time we call counter(), it still has access to the same count variable. ⚙️ Why Closures Are Useful: ✅ Data privacy (like private variables) ✅ Maintaining state between function calls ✅ Creating function factories ✅ Useful in event handlers, callbacks, and functional programming 💬 Closures are one of the most powerful and fundamental concepts in JavaScript — once you truly understand them, your JS skills level up drastically! 🚀 #JavaScript #Closures #WebDevelopment #LearningInPublic #MERN #FrontendDevelopment
To view or add a comment, sign in
-
-
✨ Today I learned something simple but powerful in JavaScript — Removing duplicates & flattening arrays! These two tricks help keep your data clean and easy to work with. 🚀 🔹 Remove Duplicates from an Array Using Set (fast & clean): const numbers = [1, 2, 2, 3, 4, 4, 5]; const uniqueNumbers = [...new Set(numbers)]; console.log(uniqueNumbers); // [1, 2, 3, 4, 5] --- 🔹 Flatten a Nested Array Using flat(): const nested = [1, [2, [3, 4]], 5]; const flatArray = nested.flat(2); console.log(flatArray); // [1, 2, 3, 4, 5] --- 🔥 These small improvements help write cleaner, more readable code. If you're learning JavaScript, definitely try these out! #JavaScript #Learning #WebDevelopment #CodingJourney #100DaysOfCode
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development