Day 28 of my JavaScript journey 🚀 Built a Coming Soon Page with a live countdown timer using HTML, CSS, and JavaScript. Features: ⏳ Real-time countdown timer 🎯 Dynamic date calculation using JavaScript 📱 Responsive and clean UI This project helped me understand how to work with time-based logic and create engaging landing page components. 🔗 Live Demo: https://lnkd.in/gxAnkF3v 💻 GitHub Repo: https://lnkd.in/gPimcWEY Exploring how small features like countdowns can improve user engagement. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

🚀 Day 5 of My Frontend Development Journey Today, I explored something powerful behind modern websites… 👉 DOM Manipulation (Document Object Model) 💡 What I learned: How JavaScript connects with HTML elements Selecting elements using getElementById, querySelector Changing content dynamically (innerText, innerHTML) Handling user actions using events (click, input) 🛠️ Mini Project: Built a simple interactive feature where: Button click changes text User input updates content instantly #FrontendDevelopment #JavaScript #DOM #WebDevelopment #Day5 #LearningInPublic #CodingJourney

🚀 Just Built My First Dynamic Quote Generator! Excited to share a small project I’ve been working on using JavaScript DOM manipulation 🎯 💡 Features: ✔️ Generates random quotes ✔️ Changes background colors dynamically 🎨 ✔️ Uses concepts like textContent, setInterval, and DOM methods This project helped me understand: 👉 How to manipulate the DOM 👉 How to use arrays and random functions 👉 Difference between innerHTML and textContent 👉 Real-time UI updates 🔧 Tech Used: HTML | CSS | JavaScript Small steps, but moving forward consistently 💪 Next step: Adding animations and user input features 🚀 Would love your feedback and suggestions 🙌 #WebDevelopment #JavaScript #Frontend #Learning #CodingJourney #100DaysOfCode

Day 15 of My Web Development Journey (Skill Shikshya) Today was all about mastering the DOM (Document Object Model) — the bridge between JavaScript and the web page. Here’s what I learned: ✓ Understanding the DOM as a tree structure that JavaScript can read and manipulate ✓ Using modern selectors like querySelector & querySelectorAll ✓ Working with content and attributes: textContent, innerHTML, getAttribute, dataset ✓ Dynamically styling elements using style and classList ✓ Creating and modifying elements with createElement, appendChild, insertAdjacentHTML, remove ✓ Navigating the DOM with parentElement, children, nextElementSibling, closest() ✓ Handling user interactions with addEventListener and the event object (e.target, e.preventDefault) Every day, the pieces are starting to connect more clearly. Building, breaking, and learning — that’s the process. 💻 #WebDevelopment #JavaScript #LearningJourney #100DaysOfCode #FrontendDevelopment

20 projects complete. 80 to go. Started this challenge a month ago - 100 JavaScript projects in 100 days to build a strong foundation before diving deeper into frameworks. First 10 projects: Counter, color flipper, tip calculator, quote generator, modal popup, accordion menu, todo list, digital clock, stopwatch, countdown timer. Projects 11-20 (took me more than 15 days, but consistency matters more than speed): ⚖️ BMI Calculator - Input validation and health category logic 🌡️ Temperature Converter - Multi-unit conversion (Celsius, Fahrenheit, Kelvin) 🔐 Random Password Generator - Customizable length and character types 🔤 Character Counter - Real-time tracking with remaining character display ❓ FAQ Collapse/Expand - Smooth animations and toggle functionality 🖼️ Image Slider - Navigation controls and auto-slideshow 📑 Tabs Component - Active state management and content switching 🍔 Navbar Toggle - Responsive mobile menu 🌓 Dark/Light Mode Toggle - Theme switching with localStorage persistence 📝 Form Validation - Real-time error messages for empty fields What's clicking now: First 10 projects were about basic DOM manipulation. Projects 11-20 took it up a notch - localStorage for data persistence, CSS variables for theming, smooth transitions. The dark/light mode project really helped me understand how CSS variables and transitions work together properly. Key learnings: ✅ localStorage for saving user preferences ✅ CSS variables for dynamic theming ✅ Transition effects for smooth UI changes ✅ Form validation without libraries My JavaScript foundation is getting stronger. When I go back to React, Vue, or Angular, I'll know exactly what's happening behind the abstractions. 🌐 CHECK OUT ALL LIVE PROJECTS HERE: 👉 https://lnkd.in/gHAUwuM3 💻 Source Code: https://lnkd.in/gexDJ7BY Progress: 20/100 (20% complete) Next 10 projects include scroll animations, progress bars, star ratings, toast notifications, and drag & drop functionality. Let's keep building. 🚀 #JavaScript #100DaysOfCode #WebDevelopment #FrontendDeveloper #LearningInPublic #VanillaJS

👉 Day 79 – Frontend Foundations Revisited ✨ Today was all about revision and reinforcement. I revisited the core building blocks of frontend development — HTML, CSS, Bootstrap, and JavaScript (up to DOM) — to strengthen my fundamentals and ensure clarity before moving deeper. 🔸 Revised semantic HTML and how structure impacts accessibility. 🔸 Practiced CSS styling, layouts, and responsive design principles. 🔸 Revisited Bootstrap utilities for faster UI building. 🔸 Reinforced JavaScript basics and DOM manipulation concepts. 🌱 Reflection – Revision is not repetition; it’s refinement. Each revisit uncovers new insights and strengthens confidence. Just like debugging code, revisiting fundamentals helps debug our understanding. ⚡ Day 79 reminded me that mastery comes not from rushing ahead, but from revisiting and reinforcing the basics that power everything we build. #Day79 #FrontendDevelopment #HTML #CSS #Bootstrap #JavaScript #DOM #CodingJourney #10000Coders #LearnInPublic #100DaysOfCode

 Just built a QR Code Generator using HTML, CSS, and JavaScript 💻✨ This small project helped me strengthen my understanding of core frontend concepts. 🔥 What I learned from this project: ✔ DOM manipulation in JavaScript ✔ Handling user input dynamically ✔ Working with APIs (QR Code generation API) ✔ CSS Flexbox for layout design ✔ Responsive design using media queries ✔ Button interactions and UI effects Github: https://lnkd.in/dUNqSDrs 💡 Key takeaway: Small projects teach the biggest lessons. Every bug I faced made me understand JavaScript and better than before. 🎯 Features of this project: Generate QR Code from text or URL Instant preview of QR code Simple and clean UI Responsive design for all devices I’m still learning and improving step by step, and this is one of many projects in my journey. 💬 I’d love feedback or suggestions from developers! #HTML #CSS #JavaScript #WebDevelopment #Frontend #GitHub #LearningInPublic #100DaysOfCode

🚀 Day 6 of My MERN Stack Journey — Hands-On DOM: How I Built a Task Manager in Plain JS Today I moved beyond basics and built a dynamic Task Manager using JavaScript and DOM. What I learned: ✅ Arrays and objects for managing data ✅ .push(), .pop(), .map(), .filter() in real use ✅ DOM manipulation to display tasks ✅ Event handling using addEventListener ✅ Building a functional UI from scratch 💡 Biggest takeaway: Connecting JavaScript logic with the DOM made everything feel real. This is where frontend development actually starts making sense. Next step: Improving the project with better UI and local storage. 🔗 GitHub: https://lnkd.in/dSw73q63 Read More: https://lnkd.in/ddfkuhWa #MERNStack #JavaScript #WebDevelopment #LearningInPublic #FrontendDevelopment

Day 6/30 — JavaScript Journey JavaScript DOM Manipulation ⚡ Turn static pages into interactive systems. 🧠 Core Idea DOM = your webpage as a live structure you can control 🔥 The 4 Powers Select → target elements Change → update text, style, classes Listen → react to user actions Create/Delete → add or remove UI dynamically ⚡ Real Flow User action → Event → JavaScript → DOM update → Instant UI change 🧩 Mental Model HTML = Structure CSS = Design JS (DOM) = Control Brain 🧠 🚀 Why it matters Makes apps interactive Foundation of all frontend frameworks Critical for interviews + real projects ⚠️ Common Mistakes Over-updating DOM (slow performance) Ignoring event handling Treating DOM like static HTML 💥 Power Insight Master DOM = You control what users see, feel, and click.

Random Quote Generator | No API 🚀 Build a complete Random Quote Generator using only HTML, CSS, and JavaScript, no API, no libraries, just pure Vanilla JavaScript. This is a perfect beginner JavaScript project to understand arrays, DOM manipulation, and Math.random(), great for your portfolio too! ✔ Features You'll Build: → Random quote display on button click → Curated quotes stored in JavaScript array → Smooth UI design with CSS → Copy quote to clipboard button → Clean modern dark/light UI 📚 JavaScript Concepts Covered: → JavaScript Arrays → Math.random() and Math.floor() → DOM manipulation → querySelector and textContent → Event listeners 🎯 Who Is This For? Perfect for beginners learning JavaScript who want real hands-on projects to strengthen DOM manipulation skills and build an impressive frontend portfolio. 👉 Watch the full implemention here:https://lnkd.in/dXQyH6Hn #javascript #quotegenerator #youtube #javascriptproject #beginnerjavascript #htmlcssjavascript #webdevelopment