JavaScript Color Palette Generator with HTML & CSS

Just built a simple modal popup using HTML, CSS, and JavaScript. Features: • Open and close buttons • Close on Escape key • Click outside to close • Clean UI with background image This helped me understand DOM manipulation, event handling, and class toggling in JavaScript. Still learning and improving step by step. #HTML #CSS #JavaScript #WebDevelopment #LearningByDoing

Day 3 of 30 Days of JavaScript........#Javascript30 Today I built an Interactive CSS Variables Controller 🎛️ This helped me understand how JavaScript can directly interact with CSS in real-time. By using input sliders, I was able to dynamically update: • Image spacing 📏 • Blur effect 🌫️ • Base color 🎨 💡 What I learned today: - Working with dataset for dynamic values. - How small mistakes in template literals can completely break functionality. - Understanding the :root selector and how it acts like a global storage for CSS variables. - Realizing how CSS variables (--variable) are similar to variables in programming and can be reused across the UI. This was a simple project, but it gave me a deeper understanding of how JavaScript + CSS work together to create interactive UI. Looking forward to building more and improving step by step 💻🔥 #JavaScript #WebDevelopment #FrontendDevelopment #Javascript30

Just built a simple yet functional Stopwatch using HTML, CSS, and JavaScript ( This project helped me strengthen my understanding of: • DOM manipulation • Event handling (Start, Stop, Reset) • Time logic and intervals in JavaScript • Structuring clean and responsive Ul with CSS Watching the timer run in real-time after writing the logic from scratch was a satisfying moment. Small projects like this continue to sharpen my problem-solving skills and build my confidence as a developer. Next step: improving the design and adding more advanced features #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #SoftwareEngineering

🚀 30 Days of JavaScript – Day 17 Today I moved from basic JavaScript programs to building a real frontend feature using HTML, CSS, and JavaScript. 💡 Project: Signup Form with Validation This form is not just UI — it includes real user interaction and validation logic. ✅ Features: • Validates name, email, and password • Shows error messages near input fields • Prevents page reload on submit • Displays success message after valid submission • Automatically clears the form 🧠 Concepts Used: • DOM manipulation • event handling (addEventListener) • form validation logic • conditional statements • basic UI styling with CSS 📌 This helped me understand how real websites handle user input and validation. 🎥 Demo below 👇 👉 Source code in first comment (only JS Code). #JavaScript #FrontendDevelopment #HTML #CSS #WebDevelopment #LearningJavaScript #CodingJourney

🎯 Random Meal Generator 🍽️ 💻 Built with JavaScript ,HTML,CSS & Bootstrap 🍽️ Displays a random meal from 6 predefined meals ⚡ Shows a new random meal on page load and when the button is clicked ✅ Ensures the same meal does not appear twice in a row 📚What I learned from this task: ⚡Working with DOM and understanding how elements update dynamically ⚡ Handling dynamic content and updating the UI smoothly 🎲 Generating a random meal each time the page loads or the user clicks the button 🔢 Building custom logic to ensure the random number is different from the previous one 🖥️ Displaying the meal data correctly in the UI and updating it dynamicall 🔗 Live Demo: https://lnkd.in/d_DDBvJv ⚡ Source Code: https://lnkd.in/def7m-w7 #JavaScript #HTML #CSS #Bootstrap #FrontendDevelopment #WebDevelopment #CodingJourney #Projects#Route

Advanced Password Generator I just built a dynamic password generator using HTML, CSS & JavaScript! 💻 Features include: Choose letters, numbers, and symbols Set your preferred password length Strength indicator shows Weak / Medium / Strong Copy to clipboard with one click It’s a simple tool but a great exercise in: DOM manipulation & event handling in JavaScript Styling interactive UI components with CSS Enhancing user experience with instant feedback A little project with big learning value. Always experimenting and leveling up! #JavaScript #WebDevelopment #Frontend #HTML #CSS #UIUX #CodingFun #InteractiveDesign #PasswordSecurity

🎯 CSS Box Model — Made Simple Every HTML element behaves like a box with four layers: 1️⃣ Content – The actual text or image inside 2️⃣ Padding – Space between content and border 3️⃣ Border – The outline wrapping the padding 4️⃣ Margin – Space outside the element 📦 Total Size = Content + Padding + Border + Margin Understand this well, and your layouts will become much easier to control and predict. #CSS #WebDevelopment #Frontend #Javascript #Angular

Day 14/21 : JavaScript DOM (Document Object Model) As part of my 21-Day Full Stack Revision Challenge, today I revised the DOM, which allows JavaScript to interact with and modify web pages. The DOM represents the webpage as a structured tree, making it possible to access and update elements dynamically. > Topics I Covered What is DOM – A representation of the HTML document Selecting Elements – Accessing elements using JavaScript Manipulating Content – Changing text, styles, and attributes Event Handling – Responding to user actions like clicks and inputs > Why It Matters DOM manipulation helps in creating interactive and dynamic web applications instead of static pages. Day 14 completed #FullStackDeveloper #JavaScript #DOM #WebDevelopment #LearningInPublic #21DaysChallenge #CodingJourney

🚀 Mini Project #2 :- Random Quote Generator Today I created a Mini Project – Random Quote Generator using HTML, CSS, and JavaScript 💻✨ In this project, a new quote automatically appears every 2–3 seconds without clicking any button. JavaScript randomly selects a quote from a list and updates it on the screen, making the page dynamic and engaging. 🔹 What I practiced: ✅ DOM Manipulation(DOM Manipulation means changing or controlling the content, structure, or style of a webpage using JavaScript. 💻) ✅ Using Math.random() for random selection ✅ Using setInterval() to update quotes automatically ✅ Creating a simple interactive UI with HTML & CSS Small projects like this help me understand how JavaScript makes websites dynamic and interactive. If you have any suggestions or ideas for improvement, feel free to share them. I’d love to learn and improve! 😊 #Day21 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingJourney #100DaysOfCode

🚀 DOM vs BOM — If you're learning JavaScript, understanding the difference between DOM and BOM is essential 👇 🔹 DOM (Document Object Model) Think of DOM as the structure of your webpage. It represents your HTML as a tree, allowing you to dynamically update content, styles, and elements using JavaScript. 👉 Example: Changing text, adding elements, updating styles 🔹 BOM (Browser Object Model) BOM represents the browser environment itself. It allows JavaScript to interact with the browser outside the webpage. 👉 Example: Accessing URL, browser history, alerts, screen size 💡 Quick Difference: - DOM = Inside the webpage (content & structure) - BOM = Outside the webpage (browser control) 📌 Pro Tip: The "document" object belongs to the DOM, while the "window" object is part of the BOM — and everything starts from "window"! Mastering both helps you build more dynamic and interactive web applications 💻✨ #JavaScript #WebDevelopment #Frontend #Coding #LearnToCode