Building a Pure JavaScript Chat App

😃 Day 10 of my JavaScript Api Handling+ CSS Practice Today I built a Todo App using API ✅ 💡 What I implemented: Fetched todos from JSONPlaceholder API Displayed tasks dynamically Added checkbox to mark tasks as completed Updated task status using PUT request 🎯 Key Learnings: • Working with API (GET & PUT requests) • Handling user interactions with events • Updating UI dynamically • Managing state using JavaScript ✨ This project helped me understand how real applications manage tasks and user actions. 🔗 GitHub Repo: https://lnkd.in/g4Q-_Dev 🌐 Hosted Link: https://lnkd.in/gYYm6duS #Day10 #WebDevelopment #JavaScript #API #FrontendDevelopment #Learning #JS #CSS

Ever wondered how some functions “remember” values even after they finish executing? 🤯 That’s the power of JavaScript Closures. 👉 A closure is created when a function retains access to variables from its outer (parent) scope—even after the outer function has finished execution. Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 counter(); // 3 🔍 Even though "outer()" has finished running, the "inner()" function still remembers "count". 💡 Why does this matter? Closures are used in: ✔ Data privacy (encapsulation) ✔ Function factories ✔ Maintaining state in async code ✔ React hooks & event handlers 🚀 Mastering closures = leveling up your JavaScript thinking. 👉 What’s one JavaScript concept that took you time to truly understand? #JavaScript #WebDevelopment #Frontend #Coding #LearnToCode #Developers

What if the hardest bug in the room is the person sitting beside you? This dev built a retro browser game around JavaScript ticket-fixing, social pressure, and the gap between visible tests and what production actually does to your assumptions. { author: John Munn } https://lnkd.in/eCcj44Cm

“Objects & Arrays are basic…” — until you actually build something real. 👀 So instead of just watching tutorials, I challenged myself to turn concepts into a **fully functional Notifications Page** 💻⚡ ✨ What started as simple JavaScript: 👉 Objects → storing notification data 👉 Arrays → managing multiple items 🔥 Turned into: ✔ Real-time UI updates ✔ “Mark all as read” feature ✔ Dynamic unread counter ✔ Clean, responsive design (desktop + mobile) ✔ Interactive hover & focus states This project made one thing clear: 💡 *The difference between knowing JavaScript and using JavaScript is BUILDING.* No frameworks. No shortcuts. Just pure logic + DOM. And honestly… this is where things start getting exciting 🚀 🔗 Live Demo: https://lnkd.in/dTVdciyF 💻 GitHub Repo: https://lnkd.in/dWPdZ-zD #JavaScript #FrontendDevelopment #WebDev #BuildInPublic #CodingJourney #LearnByBuilding #FrontendMentor #100DaysOfCode #Developers #Tech

#JourneyToTechJob – Day 13 🚀 #50DaysOfRevision Built a simple Counter App using JavaScript. Features: ✔️ Increment and decrement functionality ✔️ Reset option ✔️ Dynamic UI updates using DOM manipulation What I revised: → Event handling in JavaScript → DOM manipulation → Writing cleaner and reusable functions 🔗 Live Demo: https://lnkd.in/dtSMAAaS Here’s a quick demo 👇 #SoftwareDevelopment #JavaScript #FrontendDevelopment #WebDevelopment #Projects #BuildInPublic #Consistency #50DaysOfCodeChallenge

Day 25 of my JavaScript journey 🚀 Built a Recipe Finder App using HTML, CSS, and JavaScript, powered by an external API. Features: 🍽️ Search recipes dynamically 🌐 Fetch data from TheMealDB API 📄 Display recipe details in real-time ✨ Interactive and user-friendly UI This project helped me understand how to work with APIs, handle asynchronous JavaScript, and build real-world applications. 🔗 Live Demo: https://lnkd.in/gSAAATzM 💻 GitHub Repo: https://lnkd.in/gBQmmBYJ Moving beyond basic projects and building applications that interact with real data. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney #API

If you're learning JavaScript, the event loop probably felt like magic (or a nightmare) the first time you heard about it. You read the docs. You watched the videos. But something still didn't click. That's exactly why I built JSLens 🔍 JSLens is a free web app that visually breaks down how JavaScript actually works under the hood: → The Event Loop → Call Stack → Web APIs → Callback Queue → Microtasks & Macrotasks Instead of imagining the flow in your head, you can see it - step by step, in real time. No setup. No installations. Just open it and start learning. If you're a JS beginner (or someone who just wants a refresher), this one's for you. 🔗 Try JSLens here: https://jslens.web.app Would love to hear what you think - drop a comment or DM me! 🙌 #JavaScript #WebDevelopment #JSLens #LearnToCode #EventLoop #Frontend #OpenSource #BuildInPublic

🚀 Understanding the JavaScript Event Loop (Simple Explanation) Ever wondered how JavaScript handles multiple tasks even though it’s single-threaded? 🤔 That’s where the Event Loop comes in! 👉 In simple terms: The Event Loop manages execution of code, handles async operations, and keeps your app running smoothly. 🔹 Key Components: Call Stack → Executes functions (one at a time) Web APIs → Handles async tasks (setTimeout, fetch, etc.) Callback Queue → Stores callbacks from async tasks Microtask Queue → Stores Promises (higher priority) Event Loop → Moves tasks to the Call Stack when it's free 🔹 Example: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); 👉 Output: Start End Promise Timeout 🔹 Why this output? "Start" → runs first (Call Stack) "End" → runs next Promise → goes to Microtask Queue (runs before callbacks) setTimeout → goes to Callback Queue (runs last) 💡 Key Insight: 👉 Microtasks (Promises) always execute before Macrotasks (setTimeout) 🔥 Mastering the Event Loop helps you write better async code and avoid unexpected bugs! #JavaScript #Frontend #WebDevelopment #Coding #InterviewPrep

Stop over-complicating form states in React! 🚀 React 19 is officially changing the game with 'Actions'. Gone are the days of manually managing isLoading, isError, and data states using multiple useState hooks for every single form submission. The new useActionState hook (formerly useFormState) handles the heavy lifting for you: ✅ Automatic pending state transitions. ✅ Built-in error handling. ✅ Seamless integration with native HTML forms. ✅ Zero boilerplate for 'isPending' logic. If you're still using useEffect to sync form status or manually toggling booleans in try/catch blocks, it's time to upgrade your workflow. This is a massive win for Developer Experience (DX) and UI consistency. Are you moving to React 19 Actions or sticking with React Hook Form? Let's discuss in the comments! 👇 #ReactJS #WebDevelopment #Frontend #JavaScript #TypeScript #React19 #SoftwareEngineering #Programming #WebDev #CodingLife #FullStack #ReactHooks #TechTrends #SoftwareDevelopment #WebDesign #UIUX #CleanCode

most React developers have too many useEffects. i did too. until i read this rule and couldn't unsee it: if you're using useEffect to sync state with another state you don't need useEffect. here's what i mean. (the pattern 1 .. i see everywhere) but pattern 2 give same result . no effect. no extra render cycle. useEffect is for syncing React with something outside React. - fetching data from an API - setting up a subscription - manually touching the DOM not for calculating values you could just... calculate. every unnecessary useEffect is a hidden render cycle your users pay for. before you write useEffect ask one question: am i syncing with something outside React, or am i just doing math? if it's math delete the effect. #reactjs #typescript #webdevelopment #buildinpublic #javascript