JavaScript Practice: Button-Based Mini App

Over the last two days, I’ve been strengthening my JavaScript fundamentals and exploring how things actually work behind the scenes. Here’s what I learned: ✅ Array Methods ✅ reduce() method ✅ Finding maximum in an array ✅ Spread operator (...) ✅ Rest operator ✅ Destructuring (Arrays & Objects) ✅ Introduction to DOM ✅ Query Selectors ✅ Manipulating Attributes ✅ classList property ✅ Page Navigation using JavaScript Understanding how JavaScript interacts with the DOM really changed the way I look at web pages. It’s amazing how dynamic websites are built just by manipulating elements in the browser. Step by step, getting closer to becoming a better developer 💻 #JavaScript #WebDevelopment #FrontendDeveloper #LearningJourney #100DaysOfCode #DOM

🔥 JavaScript Concept: Hoisting — Code Moves Before Execution Hoisting is JavaScript’s behavior of moving declarations to the top of their scope before execution. 🔹 Key Points ✔ "var" is hoisted and initialized as "undefined" ✔ "let" & "const" are hoisted but NOT initialized (Temporal Dead Zone) ✔ Function declarations are fully hoisted 🔹 Example console.log(a); // undefined var a = 10; console.log(b); // Error let b = 20; 💡 Understanding hoisting helps prevent unexpected bugs. Write predictable code → Prefer "let" and "const" ✔ #JavaScript #Hoisting #CleanCode #Developers

🚀 Day 5/21 – JavaScript DOM Project Built a Random Quote Generator using JavaScript. Live Link: 🛠 Features implemented: ✅ Displays a random motivational quote ✅ Generates new quote on button click ✅ Uses JavaScript arrays and Math.random() ✅ Dynamic DOM updates 💡 Key Learning: Learned how to generate random values and update UI dynamically using DOM manipulation. #Day5 #JavaScript #DOM #FrontendDevelopment #LearnInPublic

🚀 30 Days of JavaScript – Day 4 Continuing my journey to improve JavaScript logical thinking by building small programs every day. 💡 Today’s Program: Vowel Identifier & Replacement This program: i) Takes a name as input ii) Identifies vowels (a, e, i, o, u) iii) Replaces vowels with * iv) Counts the total number of vowels in the name 🧠 Concepts Used: prompt() for user input for loop for iteration toLowerCase() for case handling includes() method Conditional logic (if / else) Example: Input → john Output → j*hn Total Vowels → 1 🎥 Demo below 👇 Full source code in the first comment. #JavaScript #WebDevelopment #CodingJourney #ProblemSolving #LearningJavaScript #30DaysOfCode

📊 Day 6 - poll answer and explanation console.log(0 || "Hello"); console.log("Hello" || 0); Rule of || in JavaScript (Important ⭐) 👉 It evaluates left to right 👉 It returns the first truthy value 👉 If all values are falsy, it returns the last value These are falsy values in JavaScript false, 0, "", null, undefined, NaN 🎯 Final output "Hello" "Hello" Hope this explanation is helpful😊 #JavaScript #JavaScriptTricks #LogicalOperators #JavaScriptInterview #FrontendDevelopment #WebDevelopment #CodingConcepts #LearnJavaScript #DeveloperCommunity #30DaysOfJavaScript #100DaysOfCode #TechCommunity #DailyLearning

𝗪𝗲𝗹𝗰𝗼𝗺𝗲 𝘁𝗼 𝗗𝗮𝘆 𝟭𝟲 JavaScript is single-threaded. So how can it handle: • Synchronous code • Promises • Timers All at the same time? The answer is task priority and the Event Loop. In this video, I demonstrate exactly how tasks are added and executed based on priority. 𝙒𝙝𝙚𝙣 𝙘𝙤𝙙𝙚 𝙧𝙪𝙣𝙨: -> Code executes first (Call Stack). -> Promise callbacks go to the Microtask Queue. -> setTimeout callbacks go to the Macrotask Queue. 𝙃𝙤𝙬 𝙩𝙝𝙚 𝙀𝙫𝙚𝙣𝙩 𝙇𝙤𝙤𝙥 𝙋𝙞𝙘𝙠𝙨 𝙏𝙖𝙨𝙠𝙨 When the Call Stack becomes empty: -> Run ALL microtasks (Promises first). -> Then run ONE macrotask (setTimeout). -> Repeat the cycle. Microtasks always have higher priority. 𝙏𝙝𝙞𝙨 𝙥𝙧𝙞𝙤𝙧𝙞𝙩𝙮 𝙨𝙮𝙨𝙩𝙚𝙢 𝙞𝙨 𝙬𝙝𝙖𝙩 𝙖𝙡𝙡𝙤𝙬𝙨 𝙅𝙖𝙫𝙖𝙎𝙘𝙧𝙞𝙥𝙩 𝙩𝙤: • Stay responsive • Execute async logic predictably • Simulate concurrency while staying single-threaded #JavaScript #WebDevelopment #FrontendDevelopment #EventLoop #AsyncJavaScript #SoftwareEngineering #DeveloppementWeb #JavaScriptFR

Every JavaScript project ever: Install one “tiny” dependency… Watch your node_modules folder turn into a whole new universe. 🌋 JavaScript developers don’t manage projects— we manage dependencies that have dependencies that have dependencies. 😅 #JavaScript #WebDevelopment #CodingHumor #DevelopersLife

Today I learned about one of the most important concepts in JavaScript: The Event Loop. JavaScript is single-threaded, which means it can run only one task at a time. But it can still handle asynchronous operations like timers, API calls, and user events. This is possible because of the Event Loop. 💡 How it works: 1️⃣ Call Stack – Executes JavaScript code 2️⃣ Web APIs – Handles async tasks like setTimeout, fetch, DOM events 3️⃣ Callback Queue – Stores completed async callbacks 4️⃣ Event Loop – Moves tasks from the queue to the stack when it’s empty Example: console.log("Start"); setTimeout(() => { console.log("Timer"); }, 2000); console.log("End"); Output: Start End Timer The timer runs later because it goes through the Event Loop system. Understanding the event loop helps in writing better async JavaScript and debugging complex behavior. Day 5 of my 21 Days JavaScript Concept Challenge 🚀 #JavaScript #WebDevelopment #FrontendDeveloper #AsyncJavaScript #LearningInPublic

Today I practiced a small JavaScript program to change the background color when a button is clicked. When the button is pressed, JavaScript triggers a function that changes the page’s background color using DOM manipulation. This helped me understand: ✔ Event handling ✔ onclick function ✔ DOM manipulation ✔ How JavaScript interacts with HTML & CSS Small practice, better understanding 🚀 #JavaScript #WebDevelopment #Frontend #CodingPractice #LearningJourney

Got a minute for some JavaScript? 😚 What does this code output? Answer 🔍 >>> undefined I don’t really like questions where you just have to be attentive, but I think this is something worth paying attention to. To get the number of entries in a *Map*, you use the *.size* property, not *.length* like in arrays. In short: .length --> Arrays, Strings, function parameters .size --> Map, Set #javascript #webdevelopment