Mastering JavaScript DOM Manipulation with getElementById and getElementsByTagName

👇 🚀 JavaScript – City Finder (USA) Built a city/state finder using HTML & Vanilla JavaScript 🎯 🔹 What I Learned: Difference between keyup (runs on every key press) and change (runs when input loses focus). Used an API with fetch() and understood how Promises work. Improved array handling using filter() for dynamic search. Used transitionend for handling animations after CSS transitions. ⚙️ Challenge: Faced issues with array filtering and logic handling — will rebuild it again to make it cleaner and stronger 💪 🔗 GitHub Repo: https://lnkd.in/gT3kKbCE #JavaScript #LearningInPublic #WebDevelopment #StudentDeveloper

Day 2 of my JavaScript journey Today I explored CSS style manipulation using JavaScript and deepened my understanding of how the DOM works. I learned that to update content or properties in the DOM, we use the assignment operator (=). When modifying CSS styles through JavaScript, values must be written as strings and include appropriate units (e.g., "20px", "2rem"). I also learned that the dot (.) is used in querySelector() when selecting elements by their class name. Small concepts, big progress.. #JavaScriptJourney #LearningToCode

Today I understood the working of a simple calculator using HTML, CSS, and JavaScript. When a user clicks a button, JavaScript captures the value and displays it on the screen. When "=" is clicked, the expression is evaluated and the result is shown. The "Clear" button resets everything. This helped me understand basic event handling and DOM manipulation in JavaScript. Learning step by step 🚀 #JavaScript #WebDevelopment #HTML #CSS #CodingPractice

Today I practiced generating my checkout page dynamically using JavaScript. Instead of writing all the HTML manually, I used JavaScript to create the elements and display products on the page. It made me realize how powerful the DOM is when building real applications. I also fixed a small but confusing bug with radio buttons. When I selected an option for one product, it affected other products too. I learned that radio buttons are grouped by their "name" attribute — so each product needs its own unique name. What I learned today: JavaScript can build your entire UI dynamically. Small bugs usually teach big lessons. Understanding how things work is more important than just making them work. Slowly but surely improving every day. #Day4OfTakingJavaScriptSeriously The radio selector input is the circle with black dot inside

🚀 JavaScript – Updating CSS Variables with JS Built a dynamic CSS updater using HTML, CSS, and Vanilla JavaScript 🎯 🔹 Used :root CSS variables (blur, spacing, base color) 🔹 Improved understanding of change and mousemove events 🔹 Learned that querySelectorAll() returns a NodeList (not an array) and how to use forEach() 🔹 Implemented real-time style updates on drag ⚙️ Challenge: Handling dynamic px units for blur and spacing. 🔗 GitHub Repo: https://lnkd.in/gT3kKbCE #JavaScript #LearningInPublic #WebDevelopment #StudentDeveloper

🚀 JavaScript Learning Update – Day 22 Today, I learned how to modify text and content inside HTML elements using JavaScript. I explored: • textContent – to get or set all the text inside an element   • innerText – to access only the visible text on the page   • innerHTML – to read or update HTML content inside an element  Understanding the difference between these methods helped me see how JavaScript can dynamically update web page content. This is an important step toward building interactive web applications where the UI changes based on user actions. Learning step by step and strengthening my DOM fundamentals. #JavaScript #DOM #WebDevelopment #FrontendDeveloper #LearningInPublic #CodingJourney

🚀 Understanding the JavaScript Event Loop While learning JavaScript, one concept that really changed how I think about asynchronous code is the Event Loop. JavaScript is single-threaded, which means it can execute only one task at a time. But thanks to the Event Loop, it can still handle asynchronous operations like API calls, timers, and user interactions without blocking the main thread. Here’s the simple flow: 1️⃣ Code enters the Call Stack 2️⃣ Async tasks go to Web APIs 3️⃣ Their callbacks move to the Callback Queue 4️⃣ The Event Loop checks if the Call Stack is empty 5️⃣ Then it pushes the callback into the Call Stack for execution This mechanism is what allows JavaScript to remain non-blocking and highly efficient. Understanding the Event Loop helped me write better asynchronous code using Promises, async/await, and callbacks. If you're learning JavaScript, mastering the Event Loop is a must! 💡 #JavaScript #EventLoop #WebDevelopment #AsyncJavaScript #CodingJourney #FrontendDevelopment

🚀 Day 5/30 – Tip Calculator Continuing my 30 Days JavaScript Projects Challenge. Today I built a Tip Calculator using HTML, CSS, and JavaScript. This project calculates the tip amount, total bill, and how much each person needs to pay when splitting the bill. 💡 Features: • Calculate tip instantly • Split bill among multiple people • Simple and clean UI 🛠 Tech Stack HTML | CSS | JavaScript 🌐 Live Demo https://lnkd.in/gFUy8h3t 💻 GitHub Repository https://lnkd.in/gZRUXmyr Through this project I practiced DOM manipulation, user input handling, and JavaScript calculations. 25 more projects to go 🚀 #javascript #webdevelopment #codingjourney #30daysofcode #mernstack #github

💡 Understanding the JavaScript Event Loop (Made Simple) When I started learning JavaScript, I was confused about how setTimeout, button clicks, and API calls worked — especially since JavaScript is single-threaded. This visual really helped me understand what happens behind the scenes: 👉 1. Call Stack – Runs code line by line (synchronous code) 👉 2. Web APIs – Handles async tasks like timers and fetch requests 👉 3. Callback Queue – Stores completed async callbacks 👉 4. Event Loop – Moves callbacks to the stack when it’s empty 🔎 Simple Example: console.log("Start"); setTimeout(() => { console.log("Inside Timeout"); }, 0); console.log("End"); 👉 What do you think the output will be? The output is: Start End Inside Timeout Even though the timeout is set to 0 milliseconds, it doesn’t run immediately. Here’s why: 1️⃣ "Start" goes to the call stack → executes 2️⃣ setTimeout moves to Web APIs 3️⃣ "End" executes 4️⃣ The callback moves to the queue 5️⃣ The Event Loop waits until the stack is empty 6️⃣ Then it pushes "Inside Timeout" to the stack That’s the Event Loop in action 🚀 Understanding this concept made: ✅ Promises easier ✅ Async/Await clearer ✅ Debugging smoother If you're learning JavaScript, mastering the Event Loop is a big step forward. #JavaScript #WebDevelopment #BeginnerDeveloper #AsyncProgramming #FrontendDevelopment #mernstack #fullstack

🚀 Just published my new blog on JavaScript DOM! While learning JavaScript, I wanted to understand how the DOM actually works. So I built two small projects to practice it: ✅ Simple Todo App ✅ Todo App that fetches Quotes using an API Through these projects I learned: • How JavaScript interacts with HTML elements • DOM manipulation basics • Creating elements dynamically • Fetching data using Fetch API Writing about what you learn is one of the best ways to reinforce concepts and help others learn too. https://lnkd.in/dy6hjMmm Would love to hear your feedback! #javascript Hitesh Choudhary Piyush Garg Akash Kadlag Jay Kadlag Nikhil Rathore