Download Button Simulation using JavaScript (SetInterval & DOM): I recently built a small project to practice JavaScript DOM manipulation and timing functions. In this project, I created a Download button that simulates a download process using setInterval(). When the button is clicked, the download process starts and the interface updates step-by-step until the download is completed. This project helped me understand how JavaScript can execute actions repeatedly after a fixed time interval, which is useful for things like progress indicators, timers, and real-time UI updates. Concepts I practiced in this project: 1.) DOM Manipulation – Dynamically updating elements on the webpage. 2.) Event Handling – Triggering actions through button clicks. 3.) SetInterval() – Running a function repeatedly after a specified interval. 4.) Dynamic UI Updates – Simulating a download progress experience. Through this project, I gained a clear understanding of how setInterval() works and further strengthened my DOM manipulation skills while building interactive UI behavior. Continuing to learn JavaScript by building small projects every day. Checkout my project code on GITHUB: https://lnkd.in/gZDcHde5 Feedback and Suggestions are always Welcome! #JavaScript #DOMManipulation #setInterval #FrontendDevelopment #WebDevelopment #JavaScriptProjects #CodingJourney #LearningByDoing #BeginnerDeveloper #WebInteraction

Simulating Friend Request Delay using JavaScript (SetTimeout & DOM): I’m excited to share another small project I built while practicing JavaScript DOM manipulation and asynchronous behavior. In this project, when the “Add Friend” button is clicked, the request is not accepted instantly. Instead, it waits for 5 seconds (5000ms) before updating the status from “Stranger” to “Friend.” Similarly, when “Remove Friend” is clicked, it again takes 5 seconds before updating the status back from “Friend” to “Stranger.” This small interaction simulates how real-world applications process requests with delays, such as sending friend requests or processing server responses. Key concepts I practiced in this project: 1.) DOM Manipulation – Dynamically updating text, button labels, and styles 2.) Event Handling – Triggering UI changes using button click events 3.) SetTimeout() – Introducing a delay before executing an action 4.) UI State Management – Maintaining consistent UI changes during interactions Through this project, I clearly understood how SetTimeout() works in JavaScript and also strengthened my knowledge of DOM manipulation and interactive UI behavior. Building small projects like this helps me improve my problem-solving skills and JavaScript fundamentals step by step. Feedbacks and suggestions are always welocme! #JavaScript #DOMManipulation #SetTimeout #FrontendDevelopment #WebDevelopment #JavaScriptProjects #CodingJourney #LearningByDoing #BeginnerDeveloper #WebInteraction

Day 3 of 30 Days of JavaScript........#Javascript30 Today I built an Interactive CSS Variables Controller 🎛️ This helped me understand how JavaScript can directly interact with CSS in real-time. By using input sliders, I was able to dynamically update: • Image spacing 📏 • Blur effect 🌫️ • Base color 🎨 💡 What I learned today: - Working with dataset for dynamic values. - How small mistakes in template literals can completely break functionality. - Understanding the :root selector and how it acts like a global storage for CSS variables. - Realizing how CSS variables (--variable) are similar to variables in programming and can be reused across the UI. This was a simple project, but it gave me a deeper understanding of how JavaScript + CSS work together to create interactive UI. Looking forward to building more and improving step by step 💻🔥 #JavaScript #WebDevelopment #FrontendDevelopment #Javascript30

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

Day 20 of My JavaScript Journey Today I built a small interactive JavaScript project called “Spotlight”. In this project, a spotlight effect follows the mouse movement on the screen, creating a dynamic lighting effect as the cursor moves. What I practiced while building this project: • Handling mouse movement events (mousemove) • Updating UI dynamically using JavaScript and DOM manipulation • Understanding how user interaction affects the interface in real time • Improving logic and structure while building a small interactive project This project helped me understand how JavaScript can be used to create interactive UI effects, not just logic or calculations. Small projects like this make learning much more practical and fun. Project Built: Spotlight (Mouse Follow Effect) ✨ Day 20 #JavaScript #SheriyansCodingSchool #FrontendDevelopment #WebDevelopment #CodingJourney #BuildInPublic

Just built my first real JavaScript project 🚀 I created a Simon Says Game using HTML, CSS, and JavaScript. 🔹 Features: • Dynamic color sequence generation • Real-time user input validation • Progressive difficulty levels 🔹 What I focused on: • DOM manipulation • Event handling • Structuring game logic This project helped me understand how small UI interactions actually work behind the scenes. 👉 Try it here: https://lnkd.in/gVuXbaAq Would appreciate feedback 🙌 #javascript #webdevelopment #100DaysOfCode #learninginpublic

🪄 Stop writing JavaScript for your accordions. For years, animating height: auto meant one thing: JavaScript hacks. Measure scrollHeight. Run requestAnimationFrame. Add a helper library. All just to animate an accordion. Now there’s a single CSS property that changes this: interpolate-size: allow-keywords Add one line and the browser can finally animate between numbers and keywords like auto. That means smooth accordions with pure CSS. Even better: it’s progressive enhancement. If the browser doesn’t support it, the accordion still works — it just snaps open. Less JavaScript. Simpler UI code. What JavaScript workaround are you most excited to replace with CSS? 👇

Day 14/21 : JavaScript DOM (Document Object Model) As part of my 21-Day Full Stack Revision Challenge, today I revised the DOM, which allows JavaScript to interact with and modify web pages. The DOM represents the webpage as a structured tree, making it possible to access and update elements dynamically. > Topics I Covered What is DOM – A representation of the HTML document Selecting Elements – Accessing elements using JavaScript Manipulating Content – Changing text, styles, and attributes Event Handling – Responding to user actions like clicks and inputs > Why It Matters DOM manipulation helps in creating interactive and dynamic web applications instead of static pages. Day 14 completed #FullStackDeveloper #JavaScript #DOM #WebDevelopment #LearningInPublic #21DaysChallenge #CodingJourney

Day 16 of my JavaScript journey 🚀 Built a Drag and Drop Interface using HTML, CSS, and JavaScript. Users can drag items and drop them into different containers with smooth interaction. This project helped me practice: • Drag and Drop API • Event handling • DOM manipulation • Building interactive UI 🔗 Live Demo: https://lnkd.in/gvWBT7tJ 💻 GitHub Repo: https://lnkd.in/gJDK4_AP Learning how to create more interactive and user-friendly web experiences. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

🚀 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