Learning JavaScript Control Flow and Loops

🚀 Web Development Journey - JavaScript Day 8 Today’s focus: 🔹 Static Methods Understanding methods that belong to the class itself, not instances. 🔹 Private Methods Learning how to restrict access to certain parts of a class. 🔹 Private Static Methods Combining privacy with class-level functionality. Short session, but still progress. Staying consistent is the goal. Next up: The Document Object Model (DOM) 🔥 #WebDevelopment #JavaScript #100DaysOfCode #LearningInPublic #FrontendDevelopment

🚀 Web Development Journey - JavaScript Day 7 Today I explored more modern JavaScript (ES6) and how it improves the way we write and structure code. Here’s what I covered: 🔹 Object Literal Syntax Extensions (ES6) Cleaner and more concise ways to define objects. 🔹 JavaScript Classes A more structured way to create objects and handle logic. 🔹 Class Methods Defining behaviors inside classes. 🔹 Getters & Setters Controlling how object properties are accessed and updated. 🔹 Class Inheritance & super Extending classes and reusing code efficiently. 🔹 Method Overriding Customizing behavior in child classes. This felt like leveling up from basic JavaScript to writing more organized, scalable code. Next up: Static Methods 🔥 #WebDevelopment #JavaScript #100DaysOfCode #LearningInPublic #FrontendDevelopment

🚀 Web Development Journey - JavaScript Day 9 Today I stepped into one of the most important parts of JavaScript: the Document Object Model (DOM), where JavaScript truly starts interacting with web pages. Here’s what I covered: 🔹 Understanding the DOM Learned how the browser represents HTML as a structured tree (DOM Tree), making it possible to interact with elements programmatically. 🔹 Node Relationships Explored how elements are connected, parent, child, and sibling relationships, which is key for navigating the DOM effectively. 🔹 Selecting Elements Practiced different ways to target elements: getElementById getElementsByClassName getElementsByTagName querySelector() querySelectorAll() 🔹 Traversing Elements Learned how to move through the DOM using properties like: parentNode childNodes nextElementSibling previousElementSibling 🔹 Manipulating Elements Started creating and modifying elements dynamically using JavaScript (e.g., createElement). This is where things start to feel real, moving from writing logic to actually controlling what users see and interact with. Next up: Appending elements to the DOM (appendChild) 🔥 #WebDevelopment #JavaScript #100DaysOfCode #LearningInPublic #FrontendDevelopment #DOM

💡 Day 2 of My Web Development Journey — JavaScript Practice 📌 Today’s Practice: Counting Vowels in a String const str = "javascript"; const vowels = "aeiouAEIOU"; let count = 0; for (let letter of str) { if (vowels.includes(letter)) { count++; } } console.log(count); 🔍 What I learned: How to loop through a string efficiently How .includes() simplifies conditions Writing cleaner, more readable code 🚀 Not perfect—but better than yesterday. If you're learning too, don’t wait to feel ready. Just start. #JavaScript #WebDevelopment #100DaysOfCode #LearningInPublic #FrontendDeveloper

Securely Debugging Production Issues in JavaScript at 10X Speed: Without Leaking Source Code . . I have been working with JavaScript for 7+ years and there is one issue almost every JavaScript developer has faced is debugging the production issues faster. But, it's not that straightforward if your production error just showed something like this: at a (main.abc123.min.js:1:5678) at r (main.abc123.min.js:1:9821) This isn’t a bug in your code it’s a missing step in your deploy pipeline. Most teams enable source maps in the bundler and think they’re done. But it's not that simple. Next.js disables production source maps by default for security. Vite and webpack need the right configuration to make debugging faster while keeping source code from leaking. I have put together the exact configurations that actually work with: • Next.js • Vite • Webpack Plus a 2-minute CI verification checklist so you know it worked before you deploy. Complete breakdown is in my Medium article. [Link in first comment] #javascript #typescript #reactjs #nextjs #software #web

🚀 Web Development Journey - JavaScript Day 10 Today was all about going deeper into DOM manipulation, actually controlling and modifying elements on a web page using JavaScript. Here’s what I worked on: 🔹 Adding & Positioning Elements appendChild() append() prepend() after() insertBefore() 🔹 Working with Content textContent innerHTML insertAdjacentHTML() 🔹 Replacing, Cloning & Removing Elements replaceChild() cloneNode() removeChild() 🔹 Working with Attributes getAttribute() setAttribute() hasAttribute() removeAttribute() This stage really shows how powerful JavaScript is, not just writing logic, but dynamically shaping what users see and interact with in real time. Next up: Manipulating element styles with JavaScript 🎯 #WebDevelopment #JavaScript #100DaysOfCode #FrontendDevelopment #LearningInPublic #DOM

🧠 Why does some JavaScript run instantly… and some runs later? Because JavaScript can be synchronous and asynchronous. 🔹 Synchronous JavaScript - JavaScript runs one line at a time. - Each task waits for the previous one to finish. Example: console.log("Start"); console.log("Middle"); console.log("End"); Output: Start → Middle → End ✅ Simple ❌ Can block execution 🔹 Asynchronous JavaScript - Some tasks don’t block execution. - They run in the background and return later. Example: console.log("Start"); setTimeout(() => { console.log("Async Task"); }, 2000); console.log("End"); Output: Start → End → Async Task 🔹 Why Async Exists Without async: - APIs would freeze the app - Timers would block everything - UI would become unresponsive 💡 Key Idea JavaScript is single-threaded, but it handles async using Web APIs + Call Stack + Event Loop (We’ll cover this next 👀) 🚀 Takeaway - Sync = step-by-step execution - Async = non-blocking execution Both are essential for real-world apps Next post: Event Loop Explained Simply 🔥 #JavaScript #AsyncJS #Frontend #WebDevelopment #LearnJS #Programming #LearningInPublic

🚀 Web Development Journey - JavaScript Day 6 Today was all about going deeper into how JavaScript creates and manages objects behind the scenes. Here’s what I learned: 🔹 Constructor Functions Creating multiple object instances efficiently. 🔹 Prototypes & Prototype Inheritance Understanding how JavaScript shares properties and methods across objects. 🔹 Changing Prototype Values Exploring how modifying prototypes affects all instances. 🔹 Object Destructuring Extracting values from objects in a cleaner, more readable way. This session really helped me understand how JavaScript works under the hood when dealing with objects. Next up: Object Literal Syntax Extensions (ES6) 🔥 #WebDevelopment #JavaScript #100DaysOfCode #LearningInPublic #FrontendDevelopment

AI-Powered Full Stack Development Journey. Today I stopped just writing HTML and started controlling it with JavaScript. That's what the DOM is — the bridge between your code and the live page. Here's what I covered today: 🔍 Selecting Elements ▸ getElementById() — grab one element by its id ▸ getElementsByClassName() — get all elements with a class ▸ getElementsByTagName() — get all elements by tag name ▸ querySelector() — find the first match using CSS selector ▸ querySelectorAll() — find all matches using CSS selector 💻 Projects I built today: ▸ Random background color changer on button click ▸ Show / Hide password toggle — a real feature used in every login form 💡 Key insight: Before DOM, JavaScript was just logic sitting in a file. After DOM, JavaScript can READ, CHANGE, and REACT to anything on the page. That shift in thinking is what makes frontend development exciting. One concept at a time. One project at a time. 💪 #JavaScript #DOM #DreamTusk #WebDevelopment #FrontendDevelopment #LearningInPublic #CodingJourney #DreamTuskTechnologies

Day 26: Of web development course Practicing JavaScript DOM Events & Form Handling ⚡ Today I built a small interactive form to practice key DOM manipulation and event handling concepts in JavaScript. What I implemented: Used getElementById to select form elements Prevented default form submission using e.preventDefault() Added inline styling dynamically with onfocus and onblur events (background color change on input fields) Used onchange event on a dropdown to detect and respond to user selection changes Displayed real-time feedback using alert() What I learned: How to respond to different types of user interactions (focus, blur, change, submit) That DOM practice is best done through small, working examples like this The importance of preventDefault() when handling form submissions manually Next step: Fixing the missing username field and expanding to dynamic content updates instead of just alerts. Small steps, solid progress. 🧱💻 #webdevelopment #javascript #DOM #formevents #codingjourney #day26