It's been a long time since I last used JavaScript for a project, so this summer I tried again, and this is the result: a simple puzzle game! 🧩🌸 What started as "let me refresh my JavaScript skills" turned into a full-featured interactive game with drag-and-drop mechanics,animations, and sakura theme. What I Built: - Drag & drop interface using HTML5 API - Custom animated victory modal (because winning deserves celebration!) - Random shuffle algorithm - Automatic win detection The Challenge: My biggest hurdle? Path resolution! The browser converts relative paths to absolute ones, so comparing image sources became tricky. After some debugging and console.log sessions, I learned to extract filenames for comparison instead of full paths. Tech Stack: Just the classics - HTML, CSS, and vanilla JavaScript. No frameworks, no libraries. Sometimes going back to basics is the best way to truly understand what's happening under the hood. What I Learned: - DOM manipulation is still super powerful - Event handling in pure JS is actually quite elegant - CSS animations can create amazing effects without JavaScript - Debugging skills never go out of style The best part? Rediscovering the joy of building something interactive from scratch! Want to try it? Code available on GitHub: [https://lnkd.in/dZnqXAX6] Question for you: What's a skill you've revisited after a long break? Did it feel like riding a bike or learning from scratch? #JavaScript #WebDevelopment #CodingJourney #FrontendDevelopment #VanillaJS #HTML5 #CSS3 #InteractiveDesign #WomenInTech #ProjectShowcase #BackToBasics

🔢 Built a Number Facts Generator using JavaScript I recently built a Number Facts Generator using vanilla JavaScript, focusing on logic building, clean code, and user-friendly interactions. 🔹 What this project does: Takes a number as input and generates a random mathematical fact Handles invalid inputs with proper error messages Displays loading feedback for a better user experience 🔹 Facts include: Even / Odd check Prime number validation Square and square root calculations Binary and hexadecimal conversions Sum of digits and digit frequency 🔹 What I learned: Strengthening JavaScript fundamentals Writing reusable, modular functions Handling edge cases and validations Improving UX through small but meaningful details 📌 Project Repository: https://lnkd.in/gDF4dV9q 📌 Tech Stack: JavaScript | HTML | CSS Learning by building, one small project at a time. Open to feedback and suggestions 😊 #JavaScript #WebDevelopment #Frontend #LearningByDoing #Projects #Programming #VanillaJS #StudentDeveloper

🚀 Just Built a Dynamic Quiz Game! 🎯 I’m excited to share my latest practice project — a fully dynamic Quiz Game that I built to improve my JavaScript logic-building and UI design skills. 🧠 How It Works 1️⃣ User selects an answer for each question 2️⃣ Clicks the Next button to move forward 3️⃣ At the end, the total score is displayed based on correct answers 🛠 Tech Stack HTML Tailwind CSS Vanilla JavaScript This project helped me understand how to: Dynamically render questions from JavaScript Update UI using DOM manipulation Apply Tailwind utility classes for fast styling Handle user input & scoring through JS logic I’m continuously building small real-world projects like this to level up as a Front-End Developer. Your feedback is always welcome! 🙌 #WebDevelopment #JavaScript #TailwindCSS #FrontEndDevelopment #LearningInPublic #PracticeProjects #100DaysOfCode

🎮 Snake Game Built Using HTML, CSS & JavaScript -I built a classic Snake Game using HTML, CSS, and JavaScript to strengthen my understanding of core web development concepts. Key highlights: Game logic implementation using JavaScript Keyboard-based snake movement Collision detection (walls & self) Dynamic score tracking Responsive and simple UI This project helped me improve my problem-solving skills and deepen my understanding of JavaScript event handling and DOM manipulation. 🔗 GitHub Repository: 👉https://lnkd.in/gVP3xAeJ 📌 More projects coming soon—open to feedback and suggestions! #JavaScript #WebDevelopment #Frontend #HTML #CSS #LearningByDoing #Projects

🚀 Interactive Image Resizer with JavaScript I built a small web feature that lets users resize an image dynamically using + and − buttons. Every click increases or decreases the image width by 5px, and the current width updates in real time. 🔍 Try it here: https://lnkd.in/g7MMRNHq This project helped me practice: ✨ JavaScript DOM manipulation ✨ Event handling ✨ Updating CSS styles with JS Small UI, big learning! 💡 #JavaScript #WebDevelopment #Frontend #CodingPractice #Tech

Day 128 of #130DaysOfCode 🎬💻 Built a Movie Reviews application using HTML, CSS, and JavaScript. What I implemented today: Created a form-based UI with input and textarea for user data Captured user input using DOM access (value) Added basic validation to prevent empty movie titles Dynamically rendered: Movie title Movie review Separator (<hr>) for clarity Reset input fields after successful submission Key concepts reinforced: DOM manipulation with createElement() and appendChild() Handling button click events with functions Structuring user-generated content dynamically Why validation matters before updating the UI Why this matters: This pattern is used in comment systems, review sections, feedback forms Strong fundamentals > fancy libraries Next improvements (no excuses): Add delete/edit review Store reviews in localStorage #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #130DaysOfCode #BuildInPublic #NxtWave

🚀 JavaScript Mini Project: Random Color Generator 🎨 I built a simple yet fun Random RGB Color Generator using JavaScript. On every button click, a new random color is generated and applied instantly to the background, while displaying the RGB value on the screen. ✨ What I practiced in this project: DOM manipulation (querySelector) Event handling (addEventListener) Working with Math.random() Dynamic styling using JavaScript 🔧 Tech Stack: HTML CSS JavaScript This small project helped me better understand how JavaScript interacts with the DOM and updates UI dynamically. 💡 More such mini-projects coming soon as I continue my journey in Web Development 🚀 #JavaScript #WebDevelopment #Frontend #LearningByDoing #DOMManipulation #CodingJourney #MiniProject #dharmikvaliya

I built a small Dice Game using HTML, CSS, and JavaScript to strengthen my understanding of how logic connects with the DOM 🎲 On every refresh, the app: • Generates random numbers using Math.random() • Dynamically updates dice images • Compares values and declares a winner using conditional logic What stood out to me while building this 👇 Simple JavaScript logic becomes powerful when it directly controls the UI. Instead of hardcoding outcomes, the DOM updates based on real-time logic, which helped me clearly understand how JavaScript interacts with HTML elements. This was a small project, but it reinforced something important for me: Strong fundamentals matter before moving to complex applications. Building, breaking, and fixing — that’s the process I’m following 🚀 #JavaScript #WebDevelopment #MCA #LearningByBuilding #StudentDeveloper

Built a Random Color Generator using HTML, CSS, and JavaScript 🎨 This wasn’t about fancy UI. It was about actually understanding how JS interacts with the DOM. 🔗 Live Demo (Netlify): https://lnkd.in/dN2S7vhM 📂 GitHub Repo: https://lnkd.in/dHaSxZKJ #JavaScript #WebDevelopment #FrontendDevelopment #DOMManipulation #CodingProjects #LearnByBuilding #100DaysOfCode #HTML #CSS #DeveloperJourney

🚀 Day 49 of My JavaScript Learning Journey DOM Manipulation: Smart Class & Attribute Management Today’s focus was on managing CSS classes and attributes efficiently—a must-have skill for real-world frontend projects. 🔑 Key Learnings 🧩 Working with Attributes • .setAttribute() → sets or replaces any attribute (class, id, style) • Powerful but risky if existing values matter (it overwrites them) 🧵 Class Handling Techniques •.className Gets/sets classes as a string Overwrites all existing classes .classList ✅ (Best Practice) .add() / .remove() .toggle() .contains() Allows granular control without breaking other styles 💡 Key Takeaway For dynamic UI behavior, .classList is the safest and most flexible approach. It keeps styles modular, readable, and bug-free. This is exactly how modern frameworks manage UI states behind the scenes 🔥 #JavaScript #DOMManipulation #Frontend #CSSClasses #WebDevelopment #LearningJourney #DeveloperLife