🚀 Built a Simple Theme Toggle (Light / Dark Mode) using HTML, CSS & JavaScript Today I created a small feature that many modern websites use — a Theme Preference System. ✨ Features: • Light and Dark mode support • Automatically detects user's system preference (prefers-color-scheme) • Saves user preference using localStorage • Smooth transition between themes 💡 What I learned while building this: Using CSS variables for theme management Detecting system theme with matchMedia Persisting user settings with localStorage Handling theme change events dynamically This is a small step but an important UI/UX feature that improves user experience on modern web apps. Tech Stack: HTML • CSS • JavaScript #WebDevelopment #JavaScript #FrontendDevelopment #CSS #DarkMode #LearningInPublic
More Relevant Posts
-
🚀 Built a **Product Filter & Search App** using **HTML, CSS, and JavaScript**. This web application allows users to dynamically search products, filter by category, and sort items by price. The project focuses on improving **JavaScript logic, DOM manipulation, and interactive UI development**. 🔹 Features: • Product search functionality • Category-based filtering • Price sorting (Low → High / High → Low) • Responsive product card layout This project helped me strengthen my understanding of **JavaScript array methods, event handling, and dynamic UI rendering**. 🔗 Live Demo: (https://lnkd.in/gfcuhEwt) 💻 GitHub Repo: (https://lnkd.in/g9YZBp3u) #FrontendDevelopment #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic
To view or add a comment, sign in
-
🧮 Built a Calculator using HTML, CSS & JavaScript 🚀 Excited to share another mini project from my frontend development journey — a Calculator Web App! This project demonstrates how basic arithmetic operations can be implemented using JavaScript along with a clean and responsive user interface. 🔹 Tech Stack Used: ✅ HTML5 – Structure of the calculator ✅ CSS3 – Styling and responsive layout ✅ JavaScript – Logic for calculations and user interactions 🔹 Key Features: ✔️ Perform basic arithmetic operations (+, −, ×, ÷) ✔️ Clean and user-friendly interface ✔️ Responsive design for mobile and desktop ✔️ Instant calculation results ✔️ Smooth button interactions Through this project, I strengthened my understanding of: 👉 JavaScript Functions 👉 DOM Manipulation 👉 Event Handling 👉 UI Component Development Building small projects like this helps improve problem-solving skills and strengthens frontend fundamentals step by step. 💡 🔗 Live Demo: https://lnkd.in/ggupsSsJ #WebDevelopment #FrontendDeveloper #JavaScript #HTML #CSS #UIDeveloper #ReactDeveloper #BuildInPublic #LearningByBuilding
To view or add a comment, sign in
-
-
Day 3/30 – Event Countdown Timer Continuing my 30 Days – 30 Frontend Projects Challenge, today I built a countdown timer web app using HTML, CSS, and JavaScript. Features: • Real-time countdown (Days, Hours, Minutes, Seconds) • Clean and responsive UI layout • JavaScript logic updating every second • Simple and practical event tracking tool This project helped me practice time calculations, DOM updates, and interactive UI components. 🌐 Live Demo: https://lnkd.in/g2cVCzTF Consistency is key on to Day 4 tomorrow #snsinstitutions #snsdesignthinkers #designthinking #30DaysOfCode #FrontendDeveloper #WebDevelopment #JavaScript #StudentDeveloper
To view or add a comment, sign in
-
-
🚀 New Project Alert: Calculator Web App I recently built a Calculator Web Application using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of: • DOM Manipulation • JavaScript Event Handling • Responsive UI Design 🔧 Tech Stack: HTML | CSS | JavaScript You can check out the project here: 🔗 GitHub Repository: https://lnkd.in/gFYUSwTx #WebDevelopment #JavaScript #FrontendDevelopment
To view or add a comment, sign in
-
-
💡 Day 7 of My Web Development Journey — JavaScript Practice Today, I built something small… but powerful. 🔹 Hook What if your app could guide users while they type instead of correcting them later? 🔹 Problem / Struggle I wanted to create a real-time character counter with a limit. At first, it seemed simple… but controlling input length while typing and updating UI instantly was tricky. 🔹 What I Learned Today I practiced: ✔️ Handling real-time user input using input event ✔️ Limiting characters dynamically using slice() ✔️ Updating UI instantly with textContent ✔️ Improving UX by changing color when limit is reached 🔹 Result / Takeaway I built a Character Counter (0–50 limit) that: ✨ Updates live as user types ✨ Prevents extra input beyond limit ✨ Gives visual feedback (color change) This small project taught me something important: 👉 Great UI is not just design — it's behavior. 🔹 Question (Let’s Connect 💬) Where have you seen character limits used effectively in real apps? #JavaScript #WebDevelopment #ProblemSolving #LearningJourney #Consistency #FrontendDevelopment #LearnInPublic #CodingJourney
To view or add a comment, sign in
-
-
✨ 𝗗𝗮𝘆 𝟭𝟰 𝗼𝗳 𝗠𝘆 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 🚀 Today I went deeper into 𝗖𝗥𝗨𝗗 𝗢𝗽𝗲𝗿𝗮𝘁𝗶𝗼𝗻𝘀 𝗶𝗻 𝘁𝗵𝗲 𝗗𝗢𝗠, which is a core concept for building interactive web applications. In real web apps, the UI constantly changes based on user actions. Learning CRUD in the DOM helped me understand how JavaScript handles these dynamic updates. Here’s what I practiced: 🔹 𝗖𝗿𝗲𝗮𝘁𝗲 – Dynamically creating elements using methods like 𝗰𝗿𝗲𝗮𝘁𝗲𝗘𝗹𝗲𝗺𝗲𝗻𝘁() and adding them to the page with 𝗮𝗽𝗽𝗲𝗻𝗱𝗖𝗵𝗶𝗹𝗱() 𝗼𝗿 𝗮𝗽𝗽𝗲𝗻𝗱(). 🔹 𝗥𝗲𝗮𝗱 – Accessing elements using selectors such as 𝗴𝗲𝘁𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝗕𝘆𝗜𝗱(), 𝗾𝘂𝗲𝗿𝘆𝗦𝗲𝗹𝗲𝗰𝘁𝗼𝗿(), 𝗮𝗻𝗱 𝗾𝘂𝗲𝗿𝘆𝗦𝗲𝗹𝗲𝗰𝘁𝗼𝗿𝗔𝗹𝗹() to retrieve data or content. 🔹 𝗨𝗽𝗱𝗮𝘁𝗲 – Modifying elements by changing 𝘁𝗲𝘅𝘁𝗖𝗼𝗻𝘁𝗲𝗻𝘁, 𝗶𝗻𝗻𝗲𝗿𝗛𝗧𝗠𝗟, attributes, or styles. 🔹 𝗗𝗲𝗹𝗲𝘁𝗲 – Removing elements using methods like 𝗿𝗲𝗺𝗼𝘃𝗲() 𝗼𝗿 𝗿𝗲𝗺𝗼𝘃𝗲𝗖𝗵𝗶𝗹𝗱(). Understanding these operations made me realize how modern web apps update content without reloading the page, creating a smoother and more interactive user experience. Step by step, I’m moving from just writing JavaScript to actually building dynamic interfaces. 💪 #JavaScript #100DaysOfCode #WebDevelopment #LearningJourney #FrontendDevelopment #DOM
To view or add a comment, sign in
-
-
🚀 New Project: Interactive Quiz App I’m excited to share a project I recently built a simple by using HTML, CSS, and JavaScript. This Quiz App presents multiple-choice questions one at a time and calculates the final score based on user selections. 🔹 Key Features • Clean and responsive UI • One question displayed at a time • Next & Submit functionality • Real-time score tracking • Restart quiz option 🛠 Technologies Used HTML | CSS | JavaScript 🌐 Live Demo: https://lnkd.in/gqRWeByY This project helped me strengthen my JavaScript logic, DOM manipulation, and UI design skills. I’m continuously working on improving my frontend development skills, and feedback is always welcome! #WebDevelopment #JavaScript #FrontendDevelopment #HTML #CSS #LearningJourney
To view or add a comment, sign in
-
🎲 Dice Roller Web App I built a simple Dice Roller application using HTML, CSS, and JavaScript. 🔹 Features: • Roll a virtual dice with a single click • Generates a random number between 1 and 6 • Dynamic dice image update using JavaScript • Simple and interactive UI This project helped me practice JavaScript logic, DOM manipulation, and basic frontend development. In dice-roller apps, JavaScript usually generates a random number and updates the interface when the user clicks the roll button. 🔗 Live Project: https://lnkd.in/dxGvnd7b #JavaScript #HTML #CSS #WebDevelopment #FrontendDeveloper #Projects
To view or add a comment, sign in
-
-
Hey everyone! I’ve challenged myself to build 5 web projects to strengthen my frontend skills, and I'm excited to share : Project 1/5: A Password Generator! 🚀🔐 I built this entirely from scratch using just HTML, CSS, and Vanilla JavaScript. My main goal was to focus on UI/UX and making it feel like a modern application. Here are the main features I implemented: ✅ A modern glassmorphism design ✅ Real-time password strength tracking ✅ Customizable length and character options (uppercase, lowercase, numbers, symbols) ✅ Instant copy-to-clipboard functionality Building this was great practice and really helped me improve in a few key areas: 💡 DOM Manipulation: Managing state and dynamic UI updates without any frameworks. 💡 CSS Styling: Working with gradients, hover effects, and responsive design. 💡 APIs: Using the browser's Clipboard API to securely copy text. You can see exactly how it works in the short video attached below! 🎥 Next up is Project 2... Code & Documentation on GitHub: 🔗 https://lnkd.in/demvBdfZ #WebDev #Frontend #JavaScript #HTML #CSS #CodingChallenge #DeveloperCommunity
To view or add a comment, sign in
-
🚀 New Project Deployed – To-Do List Web App I recently built and deployed a To-Do List application using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of DOM manipulation and interactive UI behavior in JavaScript. You can check it out here: 🔗 [https://lnkd.in/geExcau9] github: [https://lnkd.in/gVRsq3xk] Key Features: • ➕ Add a new task instantly by pressing Enter • ✏️ Edit any task by simply double-clicking on it • ✅ Mark tasks as completed using the checkbox (with strikethrough effect) • 🗑️ Delete tasks easily using the delete button • ⚡ Smooth and simple user experience with real-time updates Building small projects like this helps me improve my JavaScript logic and front-end development skills. I’d love to hear your feedback! 🙌 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development