Traffic Light Simulation with HTML CSS JavaScript

📸 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

🕒 Built an Interactive Analog Clock using HTML, CSS & JavaScript In this project, I implemented: • Real-time clock using Date() object • DOM manipulation • CSS transforms & rotation logic • Circular indexing using modulo operator • Dynamic background switching with button click • Smooth transitions using cubic-bezier One of the key concepts I practiced: currentIndex = (currentIndex + 1) % images.length; This helped me understand circular array logic in a practical way. Small project — but big learning. Consistency > Complexity 💯 #JavaScript #WebDevelopment #Frontend #100DaysOfCode #LearningInPublic

⏰ 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

🚀 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

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

Day 12 – Built a Rock Paper Scissors Game with HTML, CSS & JavaScript Today I built a simple but fun Rock Paper Scissors game using pure HTML, CSS, and JavaScript. The game allows a user to choose Rock, Paper, or Scissors, and the bot randomly selects its move. The result is instantly displayed showing whether the player wins, the bot wins, or it’s a draw. What I practiced in this project: • DOM manipulation using JavaScript • Generating random choices for the bot • Game logic implementation • Interactive UI design with CSS • Handling user events (click interactions) Tech Stack HTML | CSS | JavaScript If you’re learning JavaScript, this is a great beginner project to understand how frontend logic works in real-time. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #CodingJourney #BuildInPublic

🔴 Connect Four: From Logic to Layout🟡 I just finished building a fully functional Connect Four game using HTML, CSS, and JavaScript. 🕹️ The most exciting part of this project wasn't just the UI—it was tackling the "Gravity Logic" and designing an efficient algorithm to check for wins across horizontal, vertical, and diagonal axes. 🧮 Key Features: ✅ Responsive Grid System ✅ Dynamic Turn Management ✅ 4-way Win Detection Algorithm #WebDevelopment #JavaScript #CodingProject #Frontend #ConnectFour #Systemstron #ProgrammingLife

Day 12 / 30 🔥  -- Dynamic Color Changer using JavaScript 🎨 🔺 Built a small interactive webpage using HTML, CSS, and JavaScript. The layout was designed with CSS positioning and styling to create a clean UI. 🔺 Added buttons that dynamically change background colors using DOM manipulation. 🔺 Implemented JavaScript functions to update RGB values and modify elements in real time. 🔺 This project helped me understand how JavaScript interacts with HTML elements and controls styling dynamically. #JavaScript #DOMManipulation #FrontendDevelopment #HTML #CSS #WebDevelopment #LearningByDoing #MiniProject

Building a functional Tip Calculator! 🧮 I’ve been focusing on combining clean UI design with interactive JavaScript logic. This project features: ✅ Real-time calculations ✅ Custom tip percentages ✅ Responsive dark-mode UI Small projects, big learnings. On to the next one! 🚀 #WebDev #JavaScript #HTML #CSS #Coding #BuildInPublic

✨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