Mastering setTimeout() and setInterval() in JavaScript

Hi everyone.... 💻 Day 18 of #30DaysCodeChallenge Today I built a Random Quote Generator using HTML, CSS, and JavaScript as part of my daily frontend practice. This project helped me strengthen my understanding of DOM manipulation and event handling in JavaScript while also focusing on clean and responsive UI design. ✨ Key Features of the Project: 🔹 Displays a random motivational quote each time the user clicks the "New Quote" button 🔹 Shows the author name along with the quote 🔹 Added a Copy Quote button to copy the quote directly to the clipboard 🔹 Designed a simple and clean UI using CSS with a gradient background 🧠 What I Practiced: ✔️ Working with arrays and objects in JavaScript ✔️ DOM manipulation using getElementById ✔️ Event listeners for button interactions ✔️ Generating random quotes using JavaScript logic ✔️ Using the Clipboard API Consistent practice like this helps improve problem-solving skills and builds confidence in frontend development. Looking forward to continuing this journey and learning something new every day! 🚀 #30DaysCodeChallenge #Day18 #WebDevelopment #HTML #CSS #JavaScript #FrontendDevelopment #CodingJourney

🚀 Recently implemented a Gallery Section with Tab Filtering using JavaScript! I created a gallery where users can easily filter images by clicking different tabs. The filtering happens instantly using JavaScript, which makes the gallery more interactive and user-friendly without reloading the page. ✨ Key Highlights: • Tab-based image filtering using JavaScript • Clean and simple user interaction • Dynamic content display without page refresh • Improved user experience for browsing images Small features like this help build more interactive and engaging websites while improving frontend development skills. #JavaScript #WebDevelopment #FrontendDevelopment #LearningInPublic #Coding #UIUX

Built a simple Bubble Game using JavaScript. Small projects like this help strengthen problem-solving and frontend development skills. Looking forward to building more interactive projects! #JavaScript #WebDevelopment #Frontend

Day 45 – JavaScript & Dynamic Layout Development Today’s focus was on understanding common JavaScript mistakes and improving DOM manipulation skills. Key Learnings: • JavaScript properties and methods follow camelCase (e.g., createElement(), textContent, getElementById()) • The id used in HTML must exactly match the one used in JavaScript (case-sensitive and no extra spaces) • Function names must be identical in both declaration and function call Practical Concept: Understood the workflow of dynamic UI development: JavaScript Logic → DOM Manipulation → User Interface Worked on building a layout dynamically using: Arrays Objects Loops createElement() and other DOM methods Consistency and attention to detail play a major role in frontend development. #Day45 #JavaScript #DOM #FrontendDevelopment #WebDevelopment #LearningJourney

Today I focused on improving my understanding of: ⚡ React component structure ⚡ Reusable UI patterns ⚡ Proper folder organization in large projects ⚡ Clean Tailwind styling without messy class overload One small improvement I made: Instead of writing repetitive UI code, I created reusable components and passed props dynamically. It made my code cleaner and easier to scale. Learning this made me realize: Good frontend development is not about making it work — it's about making it maintainable. Building consistently. Improving daily. 💻🔥 #ReactJS #FrontendDeveloper #JavaScript #TailwindCSS #WebDevelopment #LearningInPublic #SheryiansCodingSchool #FullstackDevelopment

🚀 Built an Image Carousel using JavaScript! Today I worked on a small but important frontend project — an Image Carousel (Image Slider) using HTML, CSS, and JavaScript. 🔹 Key features implemented: • Display images dynamically from an array • Navigate images using Next and Previous buttons • Circular navigation (last image goes back to first) • DOM manipulation using JavaScript • Event handling with addEventListener() 💡 Concepts I practiced: • JavaScript arrays and indexing • DOM selection and manipulation • Event listeners • Writing clean and modular functions This project helped me better understand how interactive UI components work in real web applications. Every small project is a step closer to becoming a better Frontend / Full Stack Developer. 💻 #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #100DaysOfCode #LearningInPublic

Ever clicked a button on a webpage and noticed everything else still works smoothly — animations continue, inputs respond, timers fire — even though some heavy operation is happening in the background? That seamless experience is powered by the 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 in JavaScript. JavaScript is single-threaded, which means it can execute only one piece of code at a time. Yet modern applications handle API calls, timers, user interactions, and animations concurrently. The secret behind this apparent multitasking is the Event Loop. At its core, the Event Loop coordinates three major components: • The 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 – where synchronous code executes • The 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀 / 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗔𝗣𝗜𝘀 – where asynchronous tasks like `setTimeout`, DOM events, and fetch requests are handled • The 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 𝗤𝘂𝗲𝘂𝗲 (𝗧𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 & 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲) – where completed async tasks wait to be executed Here’s how it works: When synchronous code runs, it goes directly into the call stack. If an asynchronous function like `setTimeout()` or `fetch()` is encountered, it’s handed off to the browser APIs. Once completed, its callback is pushed into a queue. The Event Loop constantly checks: Is the call stack empty? If yes, it moves queued callbacks into the stack for execution. Microtasks (like Promises) are prioritized over macrotasks (like setTimeout), which is why Promise callbacks run before timer callbacks — even if the timer delay is zero. This priority model ensures predictable execution order. Why is this needed? Without the Event Loop, JavaScript would block entirely during long-running tasks. No UI updates. No responsiveness. No scalability for interactive applications. The Event Loop enables non-blocking behavior while keeping JavaScript simple and single-threaded. Key use cases include: • Handling API requests without freezing the UI • Managing timers and intervals • Processing user events (clicks, input, scroll) • Coordinating Promise-based workflows • Powering frameworks like React and Node.js servers Understanding the Event Loop isn’t just about interviews — it’s about writing predictable, performant, and bug-free asynchronous code. Master the flow, and you master JavaScript’s true power. #JavaScript #WebDevelopment #FrontendDevelopment #SoftwareEngineering

While starting to learn React, I decided to keep things simple. I built the same Todo List twice with the same UI design: First using pure JavaScript, Then rebuilding it with React. This helped me clearly see the difference between: • JavaScript DOM manipulation • React’s component-based thinking Project features: • Add new tasks • Delete tasks • Toggle task completion • Search tasks • Filter tasks (All / Completed / Not Completed) Small project, but a big learning step for me. Live Demo: JS version: https://lnkd.in/ebWQRNar React version: https://lnkd.in/eJt2Svj7 #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #TodoApp

#Day59 of #100DaysOfCode Today I explored some important React and JavaScript concepts that help in building interactive web applications. 🔹 Handling Click Events – Learned how React responds to user clicks using event handlers like onClick. 🔹 Handling Non-Click Events – Explored events like keyboard input, form changes, and mouse movements. 🔹 Event Object – Understood how React provides event information (like target element, value, etc.) through the event object. 🔹 State in React – Learned how state helps store dynamic data and update the UI automatically. 🔹 Hooks – Got introduced to React Hooks which allow functional components to use features like state and lifecycle behavior. 🔹 useState() Hook – Practiced managing component state using useState. 🔹 Activity: Create Like Button – Built a simple Like Button to practice state updates and user interaction. 🔹 Closures in JavaScript – Understood how functions can access variables from their outer scope even after execution. 🔹 Re-render in React – Learned how React re-renders components when state or props change. 🔹 Callback in setState Function – Explored how callback functions help update state based on the previous state. 🔹 More About State – Deepened understanding of how state works internally in React. #React #JavaScript #MERN #WebDevelopment #100DaysOfCode #Day59complete✅👍🏻

DOM Study Material Master Document Object Model for Frontend Development This DOM Study Material is designed to help you understand how web pages actually work behind the scenes. #DOM #WebDevelopment What It Covers: •How the browser creates the DOM #BrowserEngine •Selecting & manipulating elements #JavaScript •Event handling & bubbling #WebDev •Dynamic UI updates #Frontend. •Performance-friendly DOM operations #WebPerf •Interview-important DOM concepts #CodingInterview Essential for JavaScript, React, and Frontend Developers who want to build fast and interactive web applications. #ReactJS #LearnToCode #DOM #JavaScript #FrontendDeveloper #WebDevelopment #Programming #LearnToCode