Day 69 of #100DaysCodeChallenge Today, I practiced an exciting JavaScript functionality — a Click Counter App that remembers your progress using Local Storage! What I did: ✅ Added HTML elements inside the container with the id clickCounterContainer. ✅ Created a span element with the id counterValue to display the count. ✅ Added a button with the id incrementBtn to increase the count. ✅ Used Local Storage to save the click count value with the key clickCount. ✅ On page reload, if clickCount exists, it displays the saved value; otherwise, it starts from 0. ✅ Each button click increments the count and updates both the screen and local storage. This practice helped me understand how to persist data across sessions using localStorage — a crucial concept in modern web development! #100DaysOfCode #Day69 #JavaScript #WebDevelopment #FrontendDevelopment #LearnByDoing #CCBP #NxtWave #CodingJourney #ProgrammerLife #HTML #CSS #JS #CodeNewbie #PracticeMakesPerfect #DeveloperCommunity

Today I built a simple yet powerful project — a To-Do List App using HTML, CSS, and JavaScript! 📝 This project helped me understand so many new things like: ✨ How to select and update elements using the DOM ✨ How to use localStorage to keep data even after page refresh ✨ How to handle button clicks and user input events ✨ How to use array methods like .forEach() and .filter() ✨ How small things like data-id make big differences in logic 💡 It was an amazing hands-on experience seeing my code come to life — adding tasks, marking them complete, and deleting them, all with just a few lines of JavaScript. Here’s a short video demo 🎥 showing my app in action 👇 Building this gave me more confidence to explore deeper JavaScript concepts and DOM manipulation. #JavaScript #100DaysOfCode #CodingJourney #FrontendDevelopment #WomenInTech #WebDevelopment #LearningByDoing

🚀 Mastering Arrays in JavaScript — The Backbone of Data Handling Arrays are one of the most powerful and frequently used data structures in JavaScript. Whether you’re filtering user data, sorting results, or managing API responses — arrays are everywhere! Here’s a quick refresher 👇 🧠 What is an Array? An array is a collection of items (values) stored in a single variable. const fruits = ["Apple", "Banana", "Mango"]; 🎯 Common Array Methods You Should Know: 1. push() – Adds an element at the end 2. pop() – Removes the last element 3. shift() – Removes the first element 4. unshift() – Adds an element at the beginning 5. map() – Transforms each element and returns a new array 6. filter() – Returns only elements that meet a condition 7. reduce() – Reduces the array to a single value (like a total or sum) 💡 Example: const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8, 10] 👉 Arrays aren’t just lists — they’re the foundation for handling data in every modern web app. If you truly understand arrays, you’re already halfway to mastering JavaScript logic! --- 💬 What’s your favorite array method and why? Let’s see how many unique ones we can list in the comments 👇 #JavaScript #WebDevelopment #Coding #Frontend #Learning

💡 var, let, and const — The Three Musketeers of JavaScript ⚔️ If you’ve ever felt confused about when to use var, let, or const… you’re not alone. Even JavaScript sometimes forgets 😅 Let’s break it down like friends who share the same coffee machine ☕👇 ⸻ 🧓 var — The Old Guy from 1995 “I’ve seen things… global scope, function scope… chaos.” var name = "John"; if (true) { var name = "Doe"; console.log(name); // Doe } console.log(name); // Doe 😬 🧠 var doesn’t care about blocks. It’s function-scoped, gets hoisted, and often causes unexpected overwrites. 👉 Use only if you’re writing code for Internet Explorer 6 (please don’t 😂). ⸻ 🧑💻 let — The Responsible Adult “I respect boundaries.” let fruit = "Apple"; if (true) { let fruit = "Mango"; console.log(fruit); // Mango } console.log(fruit); // Apple ✅ 🧠 let is block-scoped and doesn’t get initialized until it’s declared. Perfect for values that will change later. ⸻ 🧘♀️ const — The Calm Monk “Once decided, I never change.” const pi = 3.14; // pi = 3.14159 ❌ Error 🧠 const is also block-scoped, but you can’t reassign it. (However, you can still mutate objects 👇) const person = { name: "John" }; person.name = "Doe"; // ✅ Allowed ⸻ 💬 My rule of thumb: 🧠 Use const by default → switch to let when you have to change it → forget var exists. ⸻ ✨ What’s your most funny or painful var moment? Drop it below 👇 #JavaScript #WebDevelopment #Frontend #CodingHumor #ReactJS

I’m building an app with HTMX, but I still want to use JSX, write some JS, custom HTML elements, and use TypeScript. I didn’t want to add a build step for the browser or split code into separate files. I like keeping CSS and scripts together. So I inline the CSS and small client scripts from the server. Should you do it? Not for everything. But it has some nice wins, worth a look if you’re curious. Then I found out I can write a normal client function and use Function.prototype.toString() to get its source code. That means I can just pass the function directly into a <script> tag. Same idea for CSS. It feels like writing client-side code in the browser, but you do it on the server, taking advantage of the built-in compiler and then serializing it. TSX for free. Of course, this pattern won’t scale for every app or every part of the codebase, but it’s another tool we can use when it feels right. As for minification, we can do it when the server starts or let our CDN (like Cloudflare) handle it. In my case, I don’t need minification at all, HTMX and Web APIs handle most of the work, so the custom JS I write stays minimal. When it comes to third-party libraries, I’d probably use import maps in the browser. I still need to explore the best way to handle that. This pattern works best for custom HTML elements or small, self-contained functions, situations where you don’t need many external dependencies.

⏱️ Ever wondered how real-time tools like clocks or timers actually work on the web? JavaScript loops make the magic happen! ✨ By running code repeatedly, we can create dynamic, real-time experiences. This project breaks it down in a simple, practical way. 🔥 🤔 Why are loops so important in real-world applications? ⏰ Digital Clock: Updates every second to show the current time — perfect example of continuous data refresh. 🏃 Stopwatch: Measures elapsed time by incrementing values in real-time. ⏳ Countdown Timer: Counts down and triggers an event when time runs out — great for alerts and reminders. Which of these tools do you think is the most useful in daily life? 👇 #html #css #JS #Loop #web

JavaScript Feature: Fetch API The Fetch API is a modern way to make HTTP requests in JavaScript. It’s promise-based, making it cleaner and easier than the old XMLHttpRequest. Basic Usage: fetch('https://lnkd.in/gWKpgMrT') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); fetch() returns a Promise. response.json() parses the response into JSON. .catch() handles errors gracefully. Using Async/Await for Cleaner Syntax: async function getData() { try { const response = await fetch('https://lnkd.in/gWKpgMrT'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error:', error); } } getData(); Pro Tips: Always handle network errors. Use headers for authentication or content-type. Can be used for GET, POST, PUT, DELETE requests. The Fetch API is powerful, modern, and essential for building dynamic web apps! #JavaScript #FetchAPI #AsyncProgramming #WebDevelopment #Frontend #Promises #AsyncAwait #CodingTips #CleanCode

🧠 Understanding Closures in JavaScript — The Hidden Superpower 💪 Ever wondered how a function remembers the variables from where it was created — even after that outer function has finished running? That’s the magic of Closures ✨ ⸻ 🧩 What is a Closure? A closure is formed when an inner function remembers and accesses variables from its outer function’s scope, even after the outer function has returned. Example 👇 function counter() { let count = 0; return function () { count++; console.log(count); }; } const increment = counter(); increment(); // 1 increment(); // 2 increment(); // 3 🧠 Even though counter() has finished executing, the inner function still remembers count. That’s a closure in action! ⸻ 💡 Why Do We Need Closures? Closures are not just theory — they’re practically everywhere in modern JavaScript 👇 ✅ Data privacy: They help you create private variables that can’t be accessed directly. ✅ State management: Perfect for functions that need to “remember” something between calls (like counters, timers, etc.). ✅ Callbacks & event handlers: Closures keep access to variables even after asynchronous operations complete. ✅ Encapsulation: They let you structure code neatly without polluting the global scope. ⸻ 🧭 Real-life analogy Think of a closure like a backpack 🎒 — When a function leaves its home (outer scope), it carries a backpack full of the variables it might need later. No matter where it goes, it can still use what’s inside that backpack. ⸻ ⚡ TL;DR A closure is when a function “remembers” the variables from the place it was created — even after that place is gone. They make JavaScript powerful, modular, and secure. ⸻ 💬 What’s your favorite real-world use of closures — data privacy, memoization, or event handling? Let’s share ideas below 👇 #JavaScript #WebDevelopment #Frontend #ReactJS #CodingTips

How to fix "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties." error in next.js code If your code is showing above error, means the HTML the server sent doesn’t match what React computed on the client during hydration. A simple solution, add suppressHydrationWarning in html node where theme class is applied. Something similar like this: // layout.tsx export default function RootLayout({ children }) {  return (   <html lang="en" suppressHydrationWarning>    <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>     {children}    </body>   </html>  ) } #JavaScript #next.js

🌦️ Project Highlight: Weather App Using HTML, CSS, and JavaScript 🌦️ I recently built a real-time Weather App using HTML, CSS, and JavaScript, which fetches live weather data through an external API (OpenWeatherMap). 💡 Key Features: 🌍 Real-time weather updates for any city 🌡️ Displays temperature, humidity, wind speed, and weather conditions 🎨 Responsive and clean UI built with CSS ⚙️ Integrated API using JavaScript’s fetch() for dynamic data Skills: HTML | CSS | JavaScript | API Integration | Responsive Design #WebDevelopment #JavaScript #Frontend #Projects #Coding .