Add Friend / Remove Friend – JavaScript DOM Project: I’m happy to share another JavaScript DOM manipulation project where I focused on building interactive UI behavior using pure JavaScript. In this project, when the “Add Friend” button is clicked: The button text dynamically changes to “Remove Friend” The status updates from “Stranger” to “Friend” On clicking again, everything switches back demonstrating toggle functionality using DOM concepts. What I learned from this project: 1.) Deepened my understanding of the Document Object Model (DOM). 2.) Handling click events efficiently. 3.) Dynamically updating text content and styles. 4.) Implementing conditional logic in real-time UI changes. 5.) How JavaScript controls and updates the webpage without reload. 6.) Building clean and interactive user experiences. Through this project, my confidence in DOM manipulation and event handling has significantly increased, and I now better understand how real-world UI interactions work in web applications. Learning by building one project at a time. Feedback and suggestions are always welcome! Checkout the project code on github : https://lnkd.in/egzkYnJK #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #JavaScriptProjects #LearningJourney #CodingPractice #UIInteraction #WebDesign #BeginnerDeveloper

Day 12 – Built a Rock Paper Scissors Game with HTML, CSS & JavaScript Today I built a simple but fun Rock Paper Scissors game using pure HTML, CSS, and JavaScript. The game allows a user to choose Rock, Paper, or Scissors, and the bot randomly selects its move. The result is instantly displayed showing whether the player wins, the bot wins, or it’s a draw. What I practiced in this project: • DOM manipulation using JavaScript • Generating random choices for the bot • Game logic implementation • Interactive UI design with CSS • Handling user events (click interactions) Tech Stack HTML | CSS | JavaScript If you’re learning JavaScript, this is a great beginner project to understand how frontend logic works in real-time. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #CodingJourney #BuildInPublic

I’m excited to share my latest project – a fully responsive To-Do List Application built using HTML, CSS, and JavaScript. Live demo : https://lnkd.in/gSU5UcGX 🔹 Key Features: • Add, edit, and delete tasks • Mark tasks as completed • Interactive and user-friendly UI • Responsive design for mobile & desktop • Dynamic DOM manipulation using JavaScript 🔹 What I Learned: • Working with the DOM (Document Object Model) • Event handling in JavaScript • Local storage for saving tasks • Writing clean and structured code • Improving UI with CSS styling Note:- It uses local storage for To-Do lists. #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #LearningByDoing

 A fully interactive Rock Paper Scissors Game built using HTML, CSS, and JavaScript. This project focuses on strengthening core JavaScript concepts and improving logical thinking by implementing real-time game functionality. 🔹 Technologies Used: - HTML5 - CSS3 (Responsive UI & Styling) - JavaScript (Game Logic & DOM Manipulation) 🔹 Key Features: - Interactive user interface - Random computer choice generation - Real-time result display (Win / Lose / Draw) - Score tracking system - Clean and responsive design 🔹 What I Learned: - Handling click events in JavaScript - Implementing conditional logic - Using Math.random() for dynamic behavior - Updating UI dynamically using DOM - Improving problem-solving skills - Building this project helped me strengthen my JavaScript fundamentals and understand how game logic works in real-world applications. 🔗 Live Demo: https://lnkd.in/gSeDQmQw 📂 GitHub Repository: https://lnkd.in/gY-dV_bY I’m continuously learning and building more projects. Feedback and suggestions are always welcome! #WebDevelopment #JavaScript #FrontendDeveloper #HTML #CSS #LearningJourney

🚀 Project Update: Textarea Character Counter I recently built a Textarea Character Counter using HTML, CSS, and JavaScript as part of my front-end development practice. This project helped me understand how to work with JavaScript events and DOM manipulation to create interactive web features. Live demo:https://lnkd.in/g9V42Hhj 🔹 Key Features ✅ Live character counter inside the textarea ✅ Maximum character limit ✅ Red border indication when the limit is reached ✅ Copy button to copy the entered text ✅ Message displayed after copying text 💡 What I learned • Handling user input using JavaScript • Using event listeners for real-time updates • Implementing character limits in forms • Improving UI feedback for better user experience Small projects like this help me improve my front-end development skills and gain practical experience. More projects coming soon as I continue my learning journey in Web Development 💻 💻 Technologies Used: HTML | CSS | JavaScript #WebDevelopment #FrontendDevelopment #JavaScript #HTML #CSS #LearningJourney #CodingPractice

🚀 Just Built My Date Calculator using WebDevelopment! 📅✨ I’m excited to share a small project I recently built while learning JavaScript. This project helped me understand how JavaScript works with dates, DOM manipulation, and user input. 🔹 Project: Date Calculator 🔹 Built With: HTML, CSS, JavaScript ✨ What this project does: 📆 Lets users select a Start Date and End Date 🧮 Calculates the difference in Years, Months, and Days ⚡ Shows the result instantly on the screen ⌨️ Includes keyboard functionality for smoother input 📱 Responsive and works across different screen sizes This project helped me practice: 💡 JavaScript Date objects 💡 DOM manipulation 💡 Event handling 💡 Responsive UI design 🔗 Project Link: https://lnkd.in/g9yAtFT3 I’m continuously learning and improving my JavaScript skills by building small projects like this. If you have any feedback or suggestions, I’d love to hear them! 😊 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #LearningByBuilding #100DaysOfCode #HTML #CSS

IPL Winner Predictor – JavaScript DOM Project: I’m excited to share another small project I built while practicing JavaScript DOM manipulation and event handling. In this project, when the “Click Me” button is pressed, the application dynamically displays a random IPL team name as the predicted winner of IPL 2026. This project helped me understand how JavaScript can make web pages interactive by updating content dynamically based on user actions. Key Concepts I Practiced: 1.) DOM Manipulation – Updating elements on the webpage dynamically. 2.) Event Handling – Triggering actions using button click events. 3.) JavaScript Logic – Selecting a random team using JavaScript logic. 4.) Dynamic Content Update – Changing the UI without reloading the page. Through building projects like this, my understanding of JavaScript and DOM interactions is gradually improving, and I’m gaining more confidence in creating interactive web applications. Learning step by step and building small projects every day. Checkout my projectcode on github: https://lnkd.in/gv3cm597 Feedback and suggestions are always welcome! #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #JavaScriptProjects #CodingJourney #LearningByDoing #BeginnerDeveloper #IPL #WebInteraction

Day 18🚀 #𝟯𝟬𝗗𝗮𝘆𝘀𝗼𝗳𝗰𝗼𝗱𝗶𝗻𝗴 HTML, CSS, BOOTSTRAP, JAVASCRIPT👨🏼💻 🚀 Built a Custom Range Counter using JavaScript...... I recently worked on a small project where I created a Custom Range Counter that dynamically counts numbers between a user-defined range. 💡 What the project does: The user enters a From value and To value, and when the Start button is clicked, the counter automatically counts up or down every second until it reaches the target number. 🔧 Key Concepts Used: ✨ DOM Manipulation using document.getElementById() ✨ Handling button click events with onclick ✨ Validating user input before processing ✨ Converting string inputs to numbers using parseInt() ✨ Using setInterval() to update the counter every second ✨ Implementing conditional logic to count increment or decrement ✨ Stopping the timer with clearInterval() when the target is reached ✨ Dynamically updating the webpage using textContent 📚 This project helped me strengthen my understanding of JavaScript timers, DOM manipulation, and user interaction in web development. Excited to keep building more interactive web projects! 💻 #NxtWave #CCBP #Day18 #HTML #CSS #bootstrap #FrontendDevelopment #MiniProject #30DaysOfCode #MERN #JS #JavaScript #WebDevelopment #CodingJourney #LearnToCode #DeveloperLife

🚀 Mini Project #2 :- Random Quote Generator Today I created a Mini Project – Random Quote Generator using HTML, CSS, and JavaScript 💻✨ In this project, a new quote automatically appears every 2–3 seconds without clicking any button. JavaScript randomly selects a quote from a list and updates it on the screen, making the page dynamic and engaging. 🔹 What I practiced: ✅ DOM Manipulation(DOM Manipulation means changing or controlling the content, structure, or style of a webpage using JavaScript. 💻) ✅ Using Math.random() for random selection ✅ Using setInterval() to update quotes automatically ✅ Creating a simple interactive UI with HTML & CSS Small projects like this help me understand how JavaScript makes websites dynamic and interactive. If you have any suggestions or ideas for improvement, feel free to share them. I’d love to learn and improve! 😊 #Day21 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingJourney #100DaysOfCode

🎨 Day 4 of My JavaScript DOM Challenge Today I built a small Color Scheme Changer using HTML, CSS, and JavaScript. The idea is simple but powerful: When a user clicks on a color box, the background color of the entire page changes dynamically. This helped me practice DOM selection, event handling, and dynamic styling — which are core concepts of interactive web development. 🔹 What I Practiced in This Mini Project 1️⃣ Selecting Multiple Elements with querySelectorAll() I used querySelectorAll('.button') to select all color boxes at once. This returns a NodeList, which allows me to work with multiple elements efficiently. 2️⃣ Looping Through Elements using forEach() Since multiple buttons were selected, I used forEach() to loop through each element and apply the same logic. This is extremely useful when we want the same functionality across multiple UI elements. 3️⃣ Handling User Interaction with addEventListener() Each button listens for a click event. When a user clicks a box, JavaScript captures that interaction and triggers a function. This is the foundation of interactive web applications. 4️⃣ Understanding event and event.target Using the event object helped me identify which element was clicked. event.target.id allowed me to dynamically grab the ID of the clicked color box. 5️⃣ Dynamic DOM Manipulation Finally, I updated the page background dynamically: body.style.backgroundColor = e.target.id; Since the button IDs match CSS color names, the page color updates instantly. This small trick makes the code clean and efficient. 💡 Key Learning Small projects like this help build a strong foundation in DOM manipulation, which is essential for building dynamic user interfaces. Every interactive website — from dashboards to apps — relies heavily on these concepts. Next mini project coming soon: BMI Calculator 📊 Consistency > Motivation. 🔖 #JavaScript #WebDevelopment #FrontendDevelopment #DOMManipulation #CodingJourney #LearnInPublic #100DaysOfCode #JavaScriptProjects #BeginnerDeveloper #BuildInPublic #ProgrammingLife #TechJourney