💻 Day 48/100 – Speed Typing Test with Timer ⏱️ Today, I built a Speed Typing Test App using HTML, CSS (Bootstrap), and JavaScript. This app displays a random quote fetched from an API and tracks how long it takes to type it correctly. ✨ Key Features & Concepts Learned: ✅ Integrated fetch() API to load random quotes dynamically ✅ Implemented a real-time timer using setInterval() ✅ Used event listeners for submit and reset actions ✅ Added a loading spinner while fetching data ✅ Displayed success/error messages based on user accuracy This project strengthened my skills in working with APIs, timers, and DOM manipulation — all crucial for building responsive, interactive web applications. #100DaysOfCode #JavaScript #WebDevelopment #Frontend #AsyncJS #FetchAPI #Bootstrap #Day48 #CodingJourney #SpeedTypingTest #HTML #CSS

I recently built an interactive Timed Quiz Application using HTML, CSS, and JavaScript. This app presents a series of multiple-choice questions with a countdown timer for each question, creating a dynamic and engaging user experience. Users can select answers, track their score in real-time, and restart the quiz at any time. The project emphasizes DOM manipulation, event handling, and timer-based logic, demonstrating how core web technologies can be used to build responsive and interactive applications without relying on external libraries. Tech Used: HTML5, CSS3, JavaScript 🔗 GitHub Repository:https://lnkd.in/gCqkibFd #WebDevelopment #FrontendDevelopment #JavaScriptProjects #HTML #CSS #InteractiveUI #CodingPractice #LearnByBuilding #WebApps

Web Development — JavaScript Practice 🧠 Today’s practice session was all about diving deeper into JavaScript fundamentals and browser interactions! We focused on: 1- Fetch API – to make network requests and handle data from external sources. 2- Promises & Async/Await – for writing cleaner, more efficient asynchronous code. 3- Advanced DOM Manipulation – understanding how to access and traverse the DOM using: parentElement, children, nextElementSibling, previousElementSibling, and more. Why are these important? Because real-world web apps rely heavily on handling data dynamically and updating the UI efficiently. Mastering these helps you create smoother user experiences and gives you deeper control over how your web pages behave. Always great to see how powerful JavaScript becomes when you understand the DOM inside out! GitHub: https://lnkd.in/e5Q86pGX #JavaScript #WebDevelopment #LearningJourney #FrontendDevelopment

🎨 Project 24 / 100 – 90s Style Paint App For my 24th JavaScript project, I recreated a mini MS Paint app using HTML, CSS, and JavaScript. It’s powered by this simple line: const ctx = canvas.getContext("2d"); That one command turns your browser into a paintbrush 🖌️ The app lets you: 🎨 Draw on a canvas 🧽 Erase or clear everything 🖱️ Change brush color and size Building it helped me understand the Canvas API, event listeners, and how creative pure JavaScript can be. #JavaScript #100DaysOfCode #WebDevelopment #Frontend #CodingJourney #HTML #CSS #WomenInTech #BuildInPublic #LearningByDoing

Just built a Bookmark Manager using JavaScript! 🚀 This Allows users to save their favorite website links dynamically. By entering a site name and URL, the app instantly adds them to an unordered list, with the name and clickable link displayed neatly. ✨ Key Features: ✅ Input validation using change and submit events 🧩 Dynamic list creation using DOM methods ⚠️ Error handling for empty fields 🧹 Automatically clears inputs after each entry 💡 This small project helped me understand: ⚡ The power of addEventListener() and event.preventDefault() 🧠 How to manipulate the DOM effectively 🛡️ The importance of form validation in user interfaces #JavaScript #WebDevelopment #LearningByDoing #CodingJourney #HTML #CSS #Projects #DOMManipulation #NxtWave

🚀 Day 30 — Understanding DOM Events in JavaScript Today, I explored one of the most interactive parts of JavaScript — DOM Events. They’re what make websites alive — from button clicks to key presses and scroll actions. 🧠 Key Concepts Covered: What are DOM Events? The “doorbell” analogy that connects users to code. addEventListener(): The modern, clean way to handle interactions. Event Bubbling & Capturing: Understanding how events travel through the DOM tree. stopPropagation(): Controlling the flow of events for precise behavior. Event Delegation: Handling multiple child elements efficiently with one listener. This lecture was all about mastering how JavaScript listens, reacts, and manages dynamic user actions — the foundation of every responsive web app. #WebDevelopment #JavaScript #Frontend #LearningJourney #Developers Rohit Negi

⚡ How Hot Module Replacement (HMR) Speeds Up JavaScript Development If you’ve ever saved a file and instantly saw your app update without reloading — that’s Hot Module Replacement (HMR) working behind the scenes! 💡 What is HMR? Hot Module Replacement is a feature in JavaScript build tools like Webpack, Vite, and Next.js. It allows your web app to update only the changed code (called a module) without refreshing the whole page. 🧠 What is a Module? In JavaScript, a module is simply a separate file that holds part of your app — for example, a Navbar.js or Header.vue component. When you edit one file, only that module gets updated. ⚙️ How it Works (in simple words): 1. You change something in your code and save it. 2. Your tool (like Webpack or Vite) detects the change. 3. It rebuilds only that file — not the whole project. 4. The browser replaces just that part using a WebSocket connection. 5. You instantly see the result — without page reload! 🚀 Why Developers Love HMR: ✅ Saves time ✅ Keeps your app’s state (no reset) ✅ Makes UI development fast and smooth So next time your web page updates instantly after saving, remember — that’s HMR, the secret weapon of modern JavaScript development! --- #JavaScript #WebDevelopment #HMR #Vite #Webpack #NextJS #CodingTips

🚀 Excited to share my new project — a Quiz App built using HTML, CSS, and JavaScript! This project tests your knowledge with multiple-choice questions and gives instant feedback. It was a fun way to strengthen my JavaScript skills — especially DOM manipulation and event handling. 🎯 Key Features: ✅ Interactive quiz interface ✅ Dynamic score calculation ✅ Responsive design for all devices ✅ Clean and user-friendly UI 💡 Tech Stack: HTML | CSS | JavaScript I’d love to hear your thoughts and suggestions — how would you improve it? Check out the video below 👇 #WebDevelopment #JavaScript #Frontend #Coding #HTML #CSS #QuizApp #LearningByBuilding

Today I built a simple yet powerful project — a To-Do List App using HTML, CSS, and JavaScript! 📝 This project helped me understand so many new things like: ✨ How to select and update elements using the DOM ✨ How to use localStorage to keep data even after page refresh ✨ How to handle button clicks and user input events ✨ How to use array methods like .forEach() and .filter() ✨ How small things like data-id make big differences in logic 💡 It was an amazing hands-on experience seeing my code come to life — adding tasks, marking them complete, and deleting them, all with just a few lines of JavaScript. Here’s a short video demo 🎥 showing my app in action 👇 Building this gave me more confidence to explore deeper JavaScript concepts and DOM manipulation. #JavaScript #100DaysOfCode #CodingJourney #FrontendDevelopment #WomenInTech #WebDevelopment #LearningByDoing

The second part of my journey in building a dynamic web application: a fully functional Counter App! I used the classic frontend trio—HTML, CSS, and JavaScript—to bring this simple but essential project to life. Key Takeaways from this Phase: HTML Structure: Created the core elements (h1, p, buttons) and used Bootstrap for basic layout and styling. The counter value is linked via the id="counterValue". CSS Styling: Applied custom styles to make it look clean and professional, using Google Fonts and defining custom styles for the background, heading, value, and buttons. JavaScript Logic (The Fun Part!): Implemented the core functionality: Used document.getElementById() to grab the counter display element. Functions onIncrement() and onDecrement() update the counter value. Crucially, I added conditional styling: Value $>0$ is Green 🟢 Value $<0$ is Red 🔴 Value $=0$ is Black ⚫ Used parseInt() to correctly convert the text content to a number before performing the math. This project was a fantastic exercise in DOM manipulation, event handling (onClick), and applying conditional logic to enhance the user experience. Small projects like this truly reinforce the fundamentals! What are your favorite beginner projects for learning JavaScript? Share in the comments! 👇 #WebDevelopment #JavaScript #HTML #CSS #Frontend #Coding #Programming #Project