🚀 JavaScript Practical Project Series – Project 4: Search Filter Excited to share my fourth project in this series! 💻 I built a Search Filter, where users can instantly filter results based on their input. This is a common feature used in many real-world applications. 🔹 Features: • Real-time search filtering 🔍 • Instant results as user types • Clean and responsive UI • Improved user experience 🔹 Tech Stack: HTML | CSS | JavaScript Through this project, I learned how to implement dynamic filtering, handle user input, and update the DOM efficiently. These hands-on projects are helping me understand how modern web applications work 🚀 More exciting projects coming soon! 🙌 🔗Live Project: https://lnkd.in/gVSttpfM 📁GitHub Repository: https://lnkd.in/gdmUqEj9 #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #Projects #SearchFilter #BuildInPublic #DeveloperLife #100DaysOfCode #TechGrowth

innerHTML vs createElement — what actually matters in real applications. This debate looks simple. 👉 “innerHTML is easier” 👉 “createElement is safer” But in real-world systems, the difference is deeper than syntax. 🔹 innerHTML Fast for simple rendering. Easy to write and read. Good for static content. ⚠️ But: Rebuilds the entire DOM section Can break event listeners Risk of security issues (XSS) 🔹 createElement More control over DOM. Safer for dynamic data. Preserves existing elements and events. Better for complex UI updates. Here’s the reality most developers miss: 💡 The question is not which is faster — it’s what kind of update you are doing. Replacing full content → innerHTML is fine Updating parts of UI → createElement wins Because every time you use innerHTML, 👉 the browser re-parses and rebuilds the DOM 🚨 The biggest mistake: Developers use innerHTML everywhere because it’s easier and then wonder why the UI becomes slow and unstable. 💡 Strong frontend performance is not about syntax — it’s about minimizing unnecessary DOM operations. #JavaScript #Frontend #WebDevelopment #Performance #SoftwareEngineering #DOM

After getting comfortable with JavaScript fundamentals, I moved to working with the browser. Part that makes websites actually feel alive , the DOM and browser APIs. This is where things became more practical. I explored: ▸ DOM Manipulation — traversing the page as a tree and dynamically updating elements, attributes, and styles with JS ▸ Events & Event Handling — capturing clicks, keyboard inputs, and user interactions to build truly responsive UIs ▸ Forms & Validation — handling input fields, text areas, and select boxes, with validation logic to keep data clean ▸ Timers & Intervals — managing delayed executions and repetitive actions using setTimeout and setInterval ▸ Data Storage — persisting user data across sessions with localStorage, sessionStorage, and cookies Along the way, I built a few mini projects to apply these concepts. There's a massive difference between understanding a concept and building with it. The projects made everything click. This phase felt different from just learning syntax. It was more about connecting logic to actual user interaction. #JavaScript #WebDevelopment #DOM #LearningInPublic #Frontend

😃 Day 8 of my CSS + JavaScript API Handling Practice Today was a mix of CSS styling concepts and real-world API integration 💡 What I worked on: Styled lists using pseudo-elements (::before) with custom icons ⭐ Added hover effects using pseudo-classes for better UI interaction Built a Currency Converter using ExchangeRate API Converted values between currencies using live exchange rates Key Learnings: • Using pseudo-elements to customize UI design • Enhancing user experience with hover effects • Fetching and working with real-time API data ✨ This helped me understand both design improvements and functional features in web development. 🔗 GitHub Repo: https://lnkd.in/g4Q-_Dev 🔗 Hosted Link: https://lnkd.in/g3UD7veD #Day8 #WebDevelopment #CSS #JavaScript #API #FrontendDevelopment #Learning #Practice

Small but powerful knowledge A few days ago, I learned the `getBoundingClientRect()` method in JavaScript, which really intrigued me. At the time, I didn’t fully comprehend what this function does; however, after some testing, I understood its importance when developing web applications that require UI positioning. Here is an example I have tested: ```js const tab = document.querySelector('.tab'); const rect = tab.getBoundingClientRect(); console.log(rect); ``` It will return: * `width` * `height` * `top` * `left` It is basically giving the information about **the position on the screen and dimensions of the HTML element**. Position and layout manipulation are equally important as styling. Have you used this function yourself? tell me ! #JavaScript #FrontendDevelopment #WebDevelopment

🧠 Day 22 — JavaScript Array Methods (map, filter, reduce) If you work with arrays, these 3 methods are a must-know 🚀 --- ⚡ 1. map() 👉 Transforms each element 👉 Returns a new array const nums = [1, 2, 3]; const doubled = nums .map(n => n * 2); console.log(doubled); // [2, 4, 6] --- ⚡ 2. filter() 👉 Filters elements based on condition const nums = [1, 2, 3, 4]; const even = nums.filter(n => n % 2 === 0); console.log(even); // [2, 4] --- ⚡ 3. reduce() 👉 Reduces array to a single value const nums = [1, 2, 3]; const sum = nums.reduce((acc, curr) => acc + curr, 0); console.log(sum); // 6 --- 🧠 Quick Difference map → transform filter → select reduce → combine --- 🚀 Why it matters ✔ Cleaner & functional code ✔ Less loops, more readability ✔ Widely used in React & real apps --- 💡 One-line takeaway: 👉 “map transforms, filter selects, reduce combines.” --- Master these, and your JavaScript will feel much more powerful. #JavaScript #ArrayMethods #WebDevelopment #Frontend #100DaysOfCode 🚀

🚀 Understanding useRef in React — Simplified! Not all data in React should trigger a re-render. 👉 That’s where useRef becomes powerful. 💡 What is useRef? useRef is a hook that lets you store a mutable value that persists across renders—without causing re-renders. ⚙️ Basic Syntax const ref = useRef(initialValue); 👉 Access value using: ref.current 🧠 How it works Value persists across renders Updating it does NOT trigger re-render Works like a mutable container 🔹 Example const countRef = useRef(0); const handleClick = () => { countRef.current += 1; console.log(countRef.current); }; 👉 UI won’t update—but value persists 🧩 Real-world use cases ✔ Accessing DOM elements (focus, scroll) ✔ Storing previous values ✔ Managing timers / intervals ✔ Avoiding unnecessary re-renders 🔥 Best Practices (Most developers miss this!) ✅ Use useRef for non-UI data ✅ Use it for DOM access ✅ Combine with useEffect when needed ❌ Don’t use useRef for UI state ❌ Don’t expect UI updates from it ⚠️ Common Mistake // ❌ Expecting UI update countRef.current += 1; 👉 React won’t re-render 💬 Pro Insight 👉 useRef = Persist value without re-render 👉 useState = Persist value with re-render 📌 Save this post & follow for more deep frontend insights! 📅 Day 14/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #useRef #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

🚀 Next.js Rendering : Finally Explained So You’ll Never Forget Most posts explain CSR, SSR, SSG like definitions. That’s why people read… but don’t understand. Let’s fix it 👇 🧠 Think of a Restaurant 🍽️ ⚡ CSR (Client-Side Rendering) You go to a restaurant… and cook your own food. 👉 Slow start 👉 Full control after that Use when: heavy interactions (dashboards, apps) ⚡ SSR (Server-Side Rendering) Chef cooks your food every time you order 👉 Fresh every time 👉 Slight wait Use when: real-time / user-specific data ⚡ SSG (Static Site Generation) Food is already cooked & ready 👉 Instant ⚡ 👉 But same for everyone Use when: blogs, landing pages ⚡ ISR (Incremental Static Regeneration) Food is pre-made… but chef updates it sometimes 👉 Fast + updated Use when: content changes occasionally ⚡ RSC (React Server Components) Chef does most of the work You only get what’s needed 👉 Less JS 👉 Faster experience Default in modern Next.js 🔥 Simple Memory Trick: • Want speed → SSG • Want freshness → SSR • Want both → ISR • Want interaction → CSR • Want performance → RSC 🧩 Technical Summary (When to Use What) ✔ Use CSR → When UI is highly interactive → Example: dashboards, admin panels ✔ Use SSR → When data must be fresh on every request → Example: user profile, live feeds ✔ Use SSG → When content rarely changes → Example: blogs, marketing pages ✔ Use ISR → When you want static speed + periodic updates → Example: product listings, news ✔ Use RSC (default) → When building modern apps with better performance → Keep logic on server, send less JS 💡 Don’t memorize terms Learn why they exist That’s how you actually master Next.js. 💬 Which rendering type do you use the most? #NextJS #ReactJS #WebDevelopment #FullStack #JavaScript #SoftwareEngineering

 Just built a QR Code Generator using HTML, CSS, and JavaScript 💻✨ This small project helped me strengthen my understanding of core frontend concepts. 🔥 What I learned from this project: ✔ DOM manipulation in JavaScript ✔ Handling user input dynamically ✔ Working with APIs (QR Code generation API) ✔ CSS Flexbox for layout design ✔ Responsive design using media queries ✔ Button interactions and UI effects Github: https://lnkd.in/dUNqSDrs 💡 Key takeaway: Small projects teach the biggest lessons. Every bug I faced made me understand JavaScript and better than before. 🎯 Features of this project: Generate QR Code from text or URL Instant preview of QR code Simple and clean UI Responsive design for all devices I’m still learning and improving step by step, and this is one of many projects in my journey. 💬 I’d love feedback or suggestions from developers! #HTML #CSS #JavaScript #WebDevelopment #Frontend #GitHub #LearningInPublic #100DaysOfCode

DAY 16 — Making Your Website Interactive with Events (JavaScript) We’ve come a long way 🔥 From structure (HTML) ➡️ styling (CSS) ➡️ now bringing your website to life with JavaScript events. Today, we learn how websites respond to user actions like clicks, typing, and more. 💡 What Are Events? An event is something a user does on your webpage. Examples: * Clicking a Button 🖱️ * Typing in an input field ⌨️ * Hovering over an element 👆 JavaScript allows us to listen for these actions and respond. 🧠 Real-Life Example Imagine a light switch 💡 * You press it → Light turns ON * You press again → Light turns OFF That press is an event, and the action is the response 🧪 Example Code ```html <!DOCTYPE html> <html> <head> <title>Day 16</title> </head> <body> <h1 id="text">Hello 👋</h1> <button onclick="changeText()">Click Me</button> <script> function changeText() { document.getElementById("text").innerHTML = "You clicked the button! 🎉"; } </script> </body> </html> ``` 🔍 What’s Happening Here? * `onclick` → waits for a click event * When clicked → runs the `changeText()` function * JavaScript updates the text instantly ⚡ Why This Matters With events, you can build: * Buttons that respond * Forms that validate input * Interactive dashboards * Real-world web apps This is where your website stops being static and becomes alive 🔥 🎯 Mini Challenge Try this: * Change the text color when a button is clicked * Or display a message when the user clicks anywhere on the page 🏁 Progress Check You’re now deep into: * HTML ✅ * CSS ✅ * JavaScript basics ✅ You’re no longer just learning… You’re building real web experiences 💻✨ #30DaysOfCode #WebDevelopment #JavaScript #Frontend #BuildInPublic #LearningJourney