JavaScript's Event Loop: Handling Asynchronous Tasks with the Call Stack, Web APIs & Callback Queue

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

🚀 Day 4 – Mini Project Journey Today I built a Digital Clock with an Alarm feature using HTML, CSS & JavaScript ⏰ What it does: Displays real-time time (HH:MM:SS) Lets users set an alarm Responsive & interactive UI #30DaysOfCode #JavaScript #FrontendDevelopment #MiniProject #BuildInPublic #WebDev

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

What Runs First in React? (Rendering vs useEffect vs useCallback vs useMemo) One day I wrote this small React code just to test my understanding: import { useEffect, useCallback, useMemo } from "react"; export default function App() { useEffect(() => { console.log("useEffect"); }, []); const increment = useCallback(() => { console.log("useCallback"); }, []); const squaredCount = useMemo(() => { console.log("useMemo"); }, []); return ( <div> {console.log("Rendering JSX")} </div> ); } And I asked myself: 👉 What runs first? At first, I guessed randomly. But then I stopped thinking like a coder… and started thinking like React. 🧠 Step 1: React always renders first React’s first job is simple: Build the UI. So this runs first: Rendering JSX Because React must render before doing anything else. 🧠 Step 2: During rendering While React is rendering: • useMemo runs immediately (it calculates something) • useCallback does NOT execute — it only stores the function So you’ll see: useMemo✅ But not: useCallback❌ That function only runs if we call increment() manually. That was my “aha” moment 💡 🧠 Step 3: After rendering → useEffect runs Once the UI is painted, React runs: useEffect Because useEffect always runs after render. ✅ Final Order (on first mount) 1️⃣ Rendering JSX 2️⃣ useMemo 3️⃣ useEffect (useCallback only runs if called) 💡 The lesson I learned Don’t just learn hooks. Learn when they run. Understanding execution order made debugging 10x easier for me. Now whenever something feels “weird” in React, I ask one question: 👉 Is this running during render or after render? Still learning React in human language. 🚀 #JavaScript #FrontendDevelopment #LearningInPublic #CleanCode #ReactJS #useEffect #useMemo #useCallback #FrontendDevelopment #LearningInPublic #JavaScript #WebDevelopment #DeveloperJourney #ReactHook

🚀 Mini Project of the Day: Password Strength Checker First, I show how it works: • Checks password strength • Animated strength bar • Show / Hide password button Then, you can see the code being written in **30x speed** (HTML + CSS + JS). Goal: to improve my frontend skills and create clean, interactive UI components. #frontend #javascript #webdevelopment #vuejs #coding #juniordeveloper #uiux #learntocode #portfolio

💡 Small project. Big lessons. I just finished building a Calculator from scratch using vanilla HTML, CSS & JavaScript — no frameworks, no shortcuts. Here's what I practiced: ✅ DOM Manipulation ✅ Event Listeners & Logic Handling ✅ Responsive UI Design Every line of code is a step forward. .🔗 Check out the code: https://lnkd.in/gVDHMwUp #JavaScript #Frontend #WebDev #CodingJourney #BuildInPublic

🚀 Building Interactive UI with JavaScript Here’s a simple project where I implemented dynamic button creation using JavaScript. Each click generates a new button, and every button has its own event listener to remove itself when clicked. 💡 Key Concepts Used: DOM Manipulation Event Listeners Dynamic Element Creation Clean and Minimal Logic Small projects like this help strengthen core JavaScript fundamentals and improve problem-solving skills. #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #100DaysOfCode

🚀 Just Discovered: Oat — A Breath of Fresh Air for Frontend Development Really impressed by the simplicity and clarity of Oat. Great work by Kailash Nadh and team 👏👏👏 If you’ve ever felt weighed down by complex build systems, heavy frameworks, or endless dependencies — this might excite you. I came across Oat, an ultra-lightweight HTML/CSS UI component library that actually lives up to its name. At ~8KB (minified + gzipped), it gives you: 🔹 Semantic, zero-dependency UI components 🔹 No frameworks, no build tooling, no class pollution 🔹 Minimal JS (WebComponents) where needed 🔹 Styles native HTML elements contextually out of the box 💡 Perfect for: ✔ Developers who value semantic HTML ✔ Projects where performance really matters ✔ Anyone tired of bloated UI frameworks Check it out here 👉 https://oat.ink/� #FrontendDevelopment #WebDevelopment #UIEngineering #WebComponents #SemanticHTML #CSS #JavaScript #PerformanceMatters #MinimalismInTech

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