🐶 Coding Challenge – Day 55: JavaScript Toggle Like/Unlike Button Today’s JavaScript project was about building a Toggle Like/Unlike feature. When clicking the Like button, a sad puppy image changes into a smiling puppy, and the like button with its icon turns blue. When clicking Unlike, everything returns to its original state. This practice helped me strengthen my skills in: ✅ JavaScript DOM manipulation ✅ Toggle functionality with event handling ✅ Dynamic image and style changes ✅ Creating interactive UI behavior These mini projects are helping me better understand how JavaScript brings webpages to life. Excited to keep improving step by step! #JavaScript #Nxtwave #100DaysOfCodingChallenge #WebDevelopment #FrontendPractice #LearningJourney

🚀 Built an Advanced DOM Simulator using Vanilla JavaScript While strengthening my understanding of core JavaScript concepts, I built a Visual DOM Simulator that helps visualize how browsers interpret and structure HTML internally. The tool allows users to write HTML and instantly see how it gets converted into a DOM tree structure. This project helped me explore how DOM traversal works and how recursive algorithms can be used to represent hierarchical structures. 🔗 Live Demo: https://lnkd.in/gRNDs_xz ✨ Features • Live HTML Editor • Real-time Preview Rendering • Dynamic DOM Tree Visualization • Click-to-Highlight Elements in Preview • Node Inspector (Tag, Classes, Children Count) • Recursive DOM Traversal 📚 Key Learnings Through this project I gained deeper insights into: • DOM manipulation and traversal • Recursive algorithms for tree-like structures • Event handling and propagation • Dynamic UI updates with JavaScript Building developer-tool style projects like this helps understand how browsers work under the hood, and it significantly improves JavaScript problem-solving skills. I’m planning to extend this further with features like expand/collapse nodes, DOM search, and DOM mutation tracking. I’d love to hear your feedback! Devendra Dhote Ritik Rajput Sheryians Coding School #javascript #frontenddevelopment #webdevelopment #dom #learninginpublic #buildinpublic #sheryianscodingschool

⏰ Mini Project #3 – Digital Clock (JavaScript DOM Project) Continuing my journey of learning JavaScript DOM Manipulation, I built a simple Digital Clock that displays the real local time. 💻 What I implemented in this project: 🔹 Used JavaScript Date() object to get the current local time 🔹 Converted it using toLocaleTimeString() 🔹 Updated the UI dynamically using DOM manipulation 🔹 Used setInterval() to update the clock every second 🔹 Learned how JavaScript can continuously update webpage content without refreshing Even though it’s a small project, it helped me understand how JavaScript interacts with the DOM in real time. ⚡ Next step: Building more mini projects to strengthen my JavaScript fundamentals and DOM skills. 💡 “Small projects today build strong developers tomorrow.” #JavaScript #WebDevelopment #DOMManipulation #FrontendDevelopment #CodingJourney #LearnInPublic #BuildInPublic #TechStudent #DeveloperJourney #100DaysOfCode #Programming

⚡ Event Bubbling vs Event Capturing in JavaScript When working with DOM events in JavaScript, an event doesn’t occur only on the target element — it travels through the DOM. This behavior is known as event propagation. Event propagation consists of two main phases: 🔹 Event Capturing (Capture Phase) The event begins at the top of the DOM tree (the document) and travels down through its ancestors until it reaches the target element. 🔹 Event Bubbling (Bubble Phase) After the event reaches the target element, it propagates back up through its parent elements toward the root of the DOM. For example, if a button inside a div is clicked, the event flow may look like this: Document → HTML → Body → Div → Button → Div → Body → HTML → Document By default, most event listeners in JavaScript operate during the bubbling phase. However, developers can choose to handle events during the capturing phase when needed. Understanding event propagation is important when managing nested UI elements, controlling event flow, or preventing unintended behavior using methods such as stopPropagation(). Reference from 👉Sheryians Coding School #JavaScript #FrontendDevelopment #WebDevelopment #DOM

🌸 Coding Challenge – Day 54: JavaScript Season Image Changer ❄️ Today’s JavaScript practice focused on creating a Season Image Changer project. When clicking on the Spring, Summer, Autumn, or Winter buttons, the entire webpage background updates to an image that represents the selected season. This challenge helped me improve my understanding of: ✅ DOM manipulation with JavaScript ✅ Handling button click events ✅ Dynamically changing background images ✅ Creating interactive and responsive UI features Building small interactive projects like this makes learning JavaScript more practical and enjoyable. Looking forward to exploring more creative challenges! #Nxtwave #100DaysOfCodingChallenge #JavaScript #CodingChallenge #WebDevelopment #FrontendPractice #LearningJourney

Day 14/21 – Built an Image Slider using JavaScript Today I built a simple image slider using JavaScript. The idea was to allow users to navigate through images using Previous and Next buttons. When the user clicks Next, the slider moves to the next image. When the user clicks Previous, it goes back to the previous one. Concepts I practiced today: • JavaScript DOM manipulation • Handling button click events • Updating images dynamically • Basic slider logic using JavaScript • Combining HTML, CSS, and JavaScript together. This project helped me understand how JavaScript can control content changes and user interactions on a webpage. Learning and building consistently with #sheryianscodingschool 🚀 #Day14 #21DaysChallenge #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #LearningInPublic

Understanding how JavaScript actually works is harder than it should be. You read the docs. Watch tutorials. Still confused about the event loop, closures, or how hoisting really works. I built VisualizeJS to fix this. JavaScript concepts, fully animated. Line-by-line visualizations of what happens under the hood. The fundamentals every developer needs. Each topic has: - Live animations showing code execution step-by-step - Theory explaining how it works and common mistakes - Interview questions with answers - Sandbox to test your understanding It's free. I'm adding new topics daily. React visualizations coming soon. I'm open to feedback. If you check it out, DM me what you think or what concept you'd want visualized next. Check it out: 👇 visualizejs.com What JavaScript concept still confuses you? #JavaScript #devlife #LearnToCode #Programming

Day 13/21 – Creating a Spotlight Effect with JavaScript Today I built an interesting spotlight effect using JavaScript and the mousemove event. The idea was simple: When the user moves the mouse across the screen, a radial gradient follows the cursor, revealing the image while the rest of the screen stays dark. This creates a spotlight-like interactive effect. Concepts I practiced today: • Mousemove event in JavaScript • Getting cursor position (X & Y) • Dynamically updating CSS radial-gradient • Creating interactive UI effects • Combining JavaScript with CSS visuals This project helped me understand how JavaScript can control visual effects in real time and make websites feel more dynamic and interactive. Learning and building consistently with #sheryianscodingschool 🚀 #Day13 #21DaysChallenge #JavaScript #FrontendDevelopment #WebDevelopment #CreativeCoding #LearningInPublic

🚀 JavaScript Objects & Destructuring — A Practical Guide Objects are the foundation of JavaScript. Almost everything in modern JavaScript — APIs, state management, configurations — revolves around objects. To make learning easier, I created a page that clearly explains Objects and Destructuring with simple examples. Topics included: • Creating objects • Dot vs bracket notation • Computed property names • Object destructuring • Default values & renaming • Nested destructuring • Rest & Spread operators • Object.keys / values / entries • Object.assign • Object.freeze & Object.seal • Property descriptors This is especially useful for JavaScript and React developers, since features like destructuring, spread, and computed keys are used every day. 📖 Explore the page here: https://lnkd.in/g95tprbi If you’re learning modern JavaScript, this will help you understand objects much more clearly. #JavaScript #FrontendDevelopment #ReactJS #WebDevelopment #Programming #LearnJavaScript

💻 Day 108 — Practicing JavaScript: Switch Statement with User Input 📅⚡ Today’s practice focused on building a small interactive program to find the day of the week based on user input. This session helped me strengthen my understanding of the switch statement and how JavaScript handles string input from prompt(). Through today’s practice, I understood: ✔ How prompt() takes input as a string ✔ Why case values are written as "1", "2" instead of numbers ✔ How the switch statement matches exact values ✔ The importance of using break to stop execution ✔ How to handle invalid input using the default case 🧠 Today I practiced: 1️⃣ Taking input between 1–7 from the user 2️⃣ Using a switch statement to map numbers to weekdays 3️⃣ Printing output using console.log() 4️⃣ Handling incorrect values with default 5️⃣ Understanding strict matching behavior in switch 6️⃣ Structuring clean and readable case blocks ✨ What I improved today: 🔹 Clear understanding of switch statement behavior 🔹 Better knowledge of string vs number input handling 🔹 Improved logical mapping skills 🔹 Enhanced debugging using console output 🔹 Increased confidence in writing interactive programs Small programs like this build a strong foundation for creating dynamic and user-driven applications 💡💻 👨🏼🏫 Guided by: Grateful to 10000 Coders team for their continuous guidance and motivation. 🌱 Day 108 complete — consistently improving JavaScript fundamentals step by step 🚀 #Day108 #JavaScript #SwitchStatement #WebDevelopment #FrontendDevelopment #10000Coders #CodingPractice #LearningJourney