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

🚀 Day 2 – Dark Mode Toggle Website Today I built a simple and clean Dark Mode Toggle feature using HTML, CSS, and JavaScript. ✨ Features: Smooth theme transition. Toggle button interaction. Light & Dark UI design. DOM manipulation using JS. Consistency > Motivation 🔥 🔗 GitHub: https://lnkd.in/gigPv7Cd #30DaysChallenge #WebDevelopment #FrontendDeveloper #JavaScript #BuildInPublic

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

Today I learned how to create a fully functional Light/Dark Theme Switcher without using JavaScript. ✅ Used CSS Variables for dynamic color control ✅ Applied :checked selector to switch themes ✅ Built a clean toggle UI ✅ Added smooth transitions for better user experience What I love most? No JavaScript at all — just pure HTML & CSS power 💪 Understanding how CSS variables work really changes the way you build scalable UI systems. Small step forward… but a big improvement in writing smarter CSS. #FrontendDevelopment #CSS #WebDevelopment #DarkMode #ContinuousLearning #ReactDeveloper#Digilians

✨Just finished building a modern, glassmorphic calculator using the classic trio: HTML, CSS, and JavaScript! 🧮✨ I wanted to push my front-end skills by combining clean logic with a polished UI. This project helped me dive deeper into: CSS Glassmorphism: Using backdrop-filter and transparency for that "frosted glass" look. JavaScript Logic: Handling calculations, state management for inputs, and DOM manipulation. Responsive Design: Ensuring the UI stays crisp across different screen sizes. There’s something so satisfying about turning lines of code into a functional, tactile tool. Check out the video below to see it in action! Hashtags: #WebDevelopment #Javascript #Frontend #CSS #CodingProject #Portfolio #Glassmorphism #WebDesign

🚀 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

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

Just a small time pass Built a small front-end experiment using HTML, CSS, and JavaScript to strengthen my DOM manipulation skills Created 5 flexbox-aligned boxes and used JavaScript to generate random RGB colors dynamically. Each box gets a unique background color every time the page loads. 💻 Core Logic let boxes = document.querySelector(".container").children; function getRandomColor() { let r = Math.floor(Math.random() * 256); let g = Math.floor(Math.random() * 256); let b = Math.floor(Math.random() * 256); return `rgb(${r}, ${g}, ${b})`; } Array.from(boxes).forEach(box => { box.style.backgroundColor = getRandomColor(); }); 🧠 What I Practiced DOM selection using querySelector Working with HTMLCollection and Array.from() Generating dynamic values using Math.random() Styling elements dynamically with JavaScript Small projects like this sharpen fundamentals. Control the DOM. Control the UI. More improvements coming — transitions, hover effects, and interactive color changes next. #JavaScript #WebDevelopment #Frontend #LearningInPublic

📸 Image Resizer Mini Project (HTML, CSS, JavaScript) Built a dynamic Image Resizer Application where users can increase or decrease image size interactively. 🔹 Increment & Decrement buttons adjust width by 5px 🔹 Real-time width display update 🔹 Smart boundary validation (Min: 100px | Max: 300px) 🔹 Warning messages for extreme size limits 🔹 Clean DOM manipulation & event handling This project helped me understand: ✔ DOM selection & styling ✔ Conditional logic in JavaScript ✔ Dynamic UI updates ✔ Handling edge cases like a real product Small project. Strong fundamentals. Learning to build with logic, not just code 💡 🔗: https://lnkd.in/gMY45-FQ #JavaScript #FrontendDevelopment #MiniProject #WebDevelopment #LearningByBuilding

⏰ Digital Clock Project – Real-Time with JavaScript I built a responsive Digital Clock using HTML, CSS, and Vanilla JavaScript that shows live time, day, and date with a modern glowing UI. 💡 This project helped me apply several core JavaScript concepts in a real-world example: 🧠 Concepts Used: • Date() object for real-time time & date • setInterval() for updating the UI every second • DOM Manipulation using getElementById() • Template literals for clean string formatting • Conditional (ternary) operator for leading zeros • 12-hour time conversion with AM/PM logic • Array usage to map numeric day → day name • Modulo operator (%) for hour formatting • padStart() for consistent time display 🚀 Features: • Live time update every second • 12-hour format with AM/PM • Current day & full date display • Responsive and centered layout • Orbitron font with neon glow effect This project strengthened my understanding of real-time UI updates, date handling, and clean formatting logic. To view my code visit my github:https://lnkd.in/dr_qam5F #JavaScript #FrontendDevelopment #WebProjects #100DaysOfCode #LearningByBuilding