🚀 Project Showcase: Dark Mode Toggle (HTML, CSS & JavaScript) I recently built a Dark Mode Toggle feature using HTML, CSS, and JavaScript to enhance user experience by allowing users to switch between light and dark themes effortlessly. 💡 Key Highlights: 🌗 Smooth Light/Dark mode switching 🎨 Clean and responsive UI design using CSS ⚡ JavaScript functionality for real-time theme toggling 💾 User preference can be easily extended to local storage for persistent settings This small project helped me better understand DOM manipulation, event handling, and UI state management in JavaScript while improving front-end design practices. 🔧 Tech Stack: HTML | CSS | JavaScript Projects like this show how small features can significantly improve usability and accessibility in modern web applications. I’m continuously exploring and building more front-end projects to strengthen my development skills. here checks my GitHub repo: 🔗 https://lnkd.in/gCz98WpX 🚀 Day 6 of #100DaysOfCode #WebDevelopment #FrontendDevelopment #JavaScript #HTML #CSS #DarkMode #Coding #LearningInPublic

Hey Everyone!! Day 24 of #30DaysCodingChallenge Today I built a Dark & Light Theme Toggle Web Application using HTML, CSS, and JavaScript. What I Built A responsive theme toggle application that allows users to switch between Light Mode and Dark Mode. The selected theme is saved in the browser, so it remains even after refreshing the page. Purpose of the Project The goal was to strengthen my understanding of DOM manipulation, CSS variables, and browser storage while building a practical real-world feature used in modern websites. Key Features ✔ Toggle between Dark and Light mode with a single button. ✔ Dynamic button text update (Dark ↔ Light). ✔ Smooth transition effect using CSS. ✔ Persistent theme using Local Storage (remains after refresh). ✔ Clean and centered UI using Flexbox. What I Learned 🔹 How `classList.toggle()` makes theme switching simple and efficient. 🔹 How to store user preferences using `localStorage`. 🔹 How to apply conditional rendering based on saved data. 🔹 Improved understanding of combining CSS and JavaScript for better UX. Building small UI features like theme toggles helps me understand how modern applications enhance user experience while keeping code clean and maintainable. #JavaScript #WebDevelopment #FrontendDeveloper #HTML #CSS #CodingChallenge #BuildInPublic

🚀 Project Showcase: Calculator using HTML, CSS & JavaScript You can check out the project here: 🔗 GitHub Repository: [https://lnkd.in/g8wPEsiU] 🌐 Live Demo: [https://lnkd.in/gdFkAHFp] I recently built a fully functional Calculator using HTML, CSS, and JavaScript as part of my web development practice. This project helped me strengthen my understanding of DOM manipulation, event handling, and JavaScript logic while creating a clean and responsive UI. 🔹 Key Features: • Perform basic arithmetic operations (+, −, ×, ÷) • Clean user interface • Real-time calculation display ❤️ I’m continuously building projects to improve my JavaScript and frontend development skills. Feedback and suggestions are always welcome! #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #Projects

Ever used prefetch or preload in HTML/JS to guess what your user might click next? Now imagine prefetching before the hover even happens — that’s where 𝗙𝗼𝗿𝗲𝘀𝗶𝗴𝗵𝘁𝗝𝗦 steps in. I recently stumbled upon an interesting library called 𝗙𝗼𝗿𝗲𝘀𝗶𝗴𝗵𝘁𝗝𝗦 and had to share it! It’s a 𝗹𝗶𝗴𝗵𝘁𝘄𝗲𝗶𝗴𝗵𝘁 JavaScript/TypeScript library that tries to 𝗽𝗿𝗲𝗱𝗶𝗰𝘁 𝘂𝘀𝗲𝗿 𝗶𝗻𝘁𝗲𝗻𝘁 𝘂𝘀𝗶𝗻𝗴 𝘀𝗶𝗴𝗻𝗮𝗹𝘀 𝗹𝗶𝗸𝗲 𝗺𝗼𝘂𝘀𝗲 𝗺𝗼𝘃𝗲𝗺𝗲𝗻𝘁, 𝘀𝗰𝗿𝗼𝗹𝗹𝗶𝗻𝗴, 𝗮𝗻𝗱 𝗸𝗲𝘆𝗯𝗼𝗮𝗿𝗱 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻🔥 The idea is simple but clever: 𝘀𝘁𝗮𝗿𝘁 𝗳𝗲𝘁𝗰𝗵𝗶𝗻𝗴 𝗰𝗼𝗻𝘁𝗲𝗻𝘁 𝗯𝗲𝗳𝗼𝗿𝗲 𝘁𝗵𝗲 𝘂𝘀𝗲𝗿 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗰𝗹𝗶𝗰𝗸𝘀 𝗼𝗿 𝗵𝗼𝘃𝗲𝗿𝘀. Basically, it gives your UI a head start. Honestly, their landing page might be 𝗼𝗻𝗲 𝗼𝗳 𝘁𝗵𝗲 𝗯𝗲𝘀𝘁 𝗹𝗶𝘃𝗲 𝗱𝗲𝗺𝗼𝘀 I’ve seen for a library/package — it showcases the concept in action beautifully. Check it out: https://foresightjs.com What’s even better? It’s literally three (one) step(s) to get started:   • 𝗜𝗺𝗽𝗼𝗿𝘁 the library - THE obvious step (so don't count this)  • 𝗜𝗻𝗶𝘁𝗶𝗮𝗹𝗶𝘇𝗲 (if you want custom settings - so this is optional too)  • 𝗥𝗲𝗴𝗶𝘀𝘁𝗲𝗿 an element with a callback for when user intent is detected. So, to be honest it's just 𝗼𝗻𝗲 𝘀𝘁𝗲𝗽 if you do not want to customize 😎 In code-language (Ctrl+C-ed then Ctrl+V-ed from their Landing page): import { ForesightManager } from 'js.foresight' // Initialize the manager if you want custom settings // Otherwise you can skip this step of initialization ForesightManager.initialize({  touchDeviceStrategy: "viewport",  tabOffset: 5 }) // Register an element for prediction const myLink = document.querySelector('#my-link') // Register a callback to be called when the user shows intent ForesightManager.instance.register({  element: myLink,  callback: () => {   console.log('User intent detected!')  }  // Optional: extra settings }) A very cool concept — definitely worth playing around with if you’re into 𝘄𝗲𝗯 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 or just curious about 𝘀𝗺𝗮𝗿𝘁𝗲𝗿 𝗽𝗿𝗲𝗳𝗲𝘁𝗰𝗵𝗶𝗻𝗴. #javascript #webdev #opensource #optimization #frontend

I’m excited to share my latest project – a fully responsive To-Do List Application built using HTML, CSS, and JavaScript. Live demo : https://lnkd.in/gSU5UcGX 🔹 Key Features: • Add, edit, and delete tasks • Mark tasks as completed • Interactive and user-friendly UI • Responsive design for mobile & desktop • Dynamic DOM manipulation using JavaScript 🔹 What I Learned: • Working with the DOM (Document Object Model) • Event handling in JavaScript • Local storage for saving tasks • Writing clean and structured code • Improving UI with CSS styling Note:- It uses local storage for To-Do lists. #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #LearningByDoing

🚀 Todo Application – JavaScript Project I recently developed a persistent Todo Application that helps users manage and track their daily tasks efficiently. 🔷 Key Features: ◾ Implemented CRUD operations (Create, Read, Update, Delete) for managing tasks. ◾Displayed todos using HTML list elements and styled the interface using CSS and Bootstrap. ◾Handled user interactions with JavaScript event listeners. ◾Dynamically updated the UI using JavaScript DOM manipulation. ◾Used Arrays and Objects along with their methods to perform todo list CRUD operations. ◾Implemented browser Local Storage so that the todo data is saved in the browser and remains available even after refreshing or reloading the page. 💻 Technologies Used: HTML | CSS | Bootstrap | JavaScript This project helped me strengthen my understanding of DOM manipulation, event handling, data structures, and local storage in JavaScript, while building an interactive and persistent Web application. #JavaScript #FrontendDevelopment #WebDevelopment #HTML #CSS #Bootstrap #TodoApp #LearningByBuilding

🚀 Age Calculator Web Project 🎂 Just built a simple & responsive Age Calculator using HTML, CSS, and JavaScript 💻✨ This project calculates a user’s exact age based on their date of birth and displays the result dynamically. 🔹 Features: 📅 Date input for birthday 🧮 Accurate age calculation using JavaScript ⚡ Instant result display 🎨 Clean and responsive UI with CSS 🛠 Tech Stack: 🔸 HTML 🔸 CSS 🔸 JavaScript 📚 This project helped me practice DOM manipulation, JavaScript Date objects, and frontend fundamentals. More projects coming soon — learning one step at a time! 🚀🔥 #WebDevelopment 💻 #JavaScript 🚀 #HTML 🔖 #CSS 🎨 #Frontend #CodingJourney #Projects #Learning

🎨 Day 4 of My JavaScript DOM Challenge Today I built a small Color Scheme Changer using HTML, CSS, and JavaScript. The idea is simple but powerful: When a user clicks on a color box, the background color of the entire page changes dynamically. This helped me practice DOM selection, event handling, and dynamic styling — which are core concepts of interactive web development. 🔹 What I Practiced in This Mini Project 1️⃣ Selecting Multiple Elements with querySelectorAll() I used querySelectorAll('.button') to select all color boxes at once. This returns a NodeList, which allows me to work with multiple elements efficiently. 2️⃣ Looping Through Elements using forEach() Since multiple buttons were selected, I used forEach() to loop through each element and apply the same logic. This is extremely useful when we want the same functionality across multiple UI elements. 3️⃣ Handling User Interaction with addEventListener() Each button listens for a click event. When a user clicks a box, JavaScript captures that interaction and triggers a function. This is the foundation of interactive web applications. 4️⃣ Understanding event and event.target Using the event object helped me identify which element was clicked. event.target.id allowed me to dynamically grab the ID of the clicked color box. 5️⃣ Dynamic DOM Manipulation Finally, I updated the page background dynamically: body.style.backgroundColor = e.target.id; Since the button IDs match CSS color names, the page color updates instantly. This small trick makes the code clean and efficient. 💡 Key Learning Small projects like this help build a strong foundation in DOM manipulation, which is essential for building dynamic user interfaces. Every interactive website — from dashboards to apps — relies heavily on these concepts. Next mini project coming soon: BMI Calculator 📊 Consistency > Motivation. 🔖 #JavaScript #WebDevelopment #FrontendDevelopment #DOMManipulation #CodingJourney #LearnInPublic #100DaysOfCode #JavaScriptProjects #BeginnerDeveloper #BuildInPublic #ProgrammingLife #TechJourney

A fully functional Calculator Web Application built using HTML, CSS, and JavaScript. This project focuses on implementing real-time calculations with a clean, responsive user interface and smooth user experience. 🔹 Technologies Used: HTML5 CSS3 (Flexbox, Responsive Design) JavaScript (DOM Manipulation & Event Handling) 🔹 Key Features: Basic arithmetic operations (Addition, Subtraction, Multiplication, Division) Interactive button-based input system Clear (AC) and Delete (DE) functionality Real-time display updates Mobile-friendly responsive design 🔹 What I Learned: Handling user input dynamically Implementing calculation logic using JavaScript Managing state and display updates Improving UI alignment and responsiveness Writing clean and structured frontend code Building this project strengthened my core JavaScript fundamentals and improved my problem-solving approach in real-world scenarios. 🔗 Live Demo: https://lnkd.in/g9kjCCi2 📂 GitHub Repository: https://lnkd.in/g4W2KA_z I’m continuously learning and building more projects to enhance my development skills. Feedback is always welcome! #WebDevelopment #FrontendDeveloper

Built a simple Counter Application using HTML, CSS, and JavaScript 🚀 This small project helped me understand DOM manipulation, event handling, and basic UI design.👩🏻💻 Features include increment, decrement, and reset functionality with a clean interface. The application increases the value when the increment button is clicked, decreases the value when the decrement button is clicked, and resets the value back to 0 when the reset button is pressed.💻 To make the interface more intuitive, the counter displays 0 in black, positive values in green, and negative values in red. #WebDevelopment #JavaScript #HTML #CSS #LearningByDoing #StudentDeveloper