Building a Dice Game with JavaScript and DOM

🚀 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

🚀 New Project Alert: JavaScript Todo List App I’ve built a Todo List application using Vanilla JavaScript to strengthen my fundamentals in front-end development and DOM manipulation. This project focuses on writing clean logic, user-friendly UI, and real-world functionality without relying on external libraries. 🔹 Key Features: Add tasks instantly Delete tasks with a single click Simple, clean, and responsive UI Focused on DOM manipulation & event handling Beginner-friendly yet scalable structure 🔹 Tech Stack: HTML CSS JavaScript (Vanilla JS) 🔹 What I Learned: Efficient DOM traversal and updates Event listeners and dynamic UI rendering Writing maintainable JavaScript code Improving UX through clean design 📂 GitHub Repository: 👉 https://lnkd.in/dNRs6VjH I’m consistently building small projects like this to improve my problem-solving and front-end skills. Feedback and suggestions are always welcome. #JavaScript #WebDevelopment #Frontend #LearningByBuilding #GitHubProjects #100DaysOfCode #SelfImprovement

🚀 Built a Classic Snake Game using JavaScript 🐍 I recently created a Snake Game as part of my frontend practice to strengthen my understanding of DOM manipulation, game logic, and JavaScript fundamentals. 🔹 Key Features: Dynamic game board using CSS Grid Smooth snake movement with keyboard controls Real-time score tracking High score persistence using localStorage Food generation & collision detection Game start & restart using modal UI Timer implementation using setInterval Checkout: Repo-link:https://lnkd.in/gv_J3J2C Task link:https://lnkd.in/gSZVk_Gc Try this on Desktop 🔹 What I learned: Managing game state with arrays and objects Handling keyboard events efficiently Working with intervals and timers Implementing collision logic Structuring clean and reusable code This project helped me understand how small logic blocks come together to create an interactive experience. More improvements coming soon (self-collision, speed levels, mobile controls 📱). 💻 Tech Stack: HTML | CSS | JavaScript #SheryiansCodingSchool If you have suggestions or feedback, I’d love to hear them! 😊 #JavaScript #FrontendDevelopment #WebDevelopment #Projects #LearningByDoing #DOM

🚀 Note Card Stack App Built using HTML, CSS, and Vanilla JavaScript ✨ Key Features Dynamic form validation LocalStorage-based data persistence Interactive card stack UI (Up / Down navigation) Clean and minimal user interface Efficient DOM manipulation This project helped me strengthen my understanding of JavaScript logic, DOM handling, and UI behavior, while focusing on building practical and user-friendly functionality. Always learning. Always building. 💻 Live link page :- https://lnkd.in/g6eYzdjP 🔖 Hashtags #JavaScript #FrontendDevelopment #WebDevelopment #HTML #CSS #VanillaJS #FrontendDeveloper #LearningByDoing #DeveloperJourney

⌨️ Built a Speed Typing Game from Scratch! Excited to share my Speed Typing Game project along with a screen recording of the output. This project helped me strengthen my JavaScript logic, DOM manipulation skills, and focus on user interaction and performance tracking. 🔧 Key Features Implemented: • 60-second timer–based typing challenge • Real-time character validation (correct vs incorrect input) • Mistake counter with live updates • Words-per-minute (WPM) and accuracy calculation • Random quote generation for each game session • Start/Stop controls with result display 🛠️ Tech Stack: HTML5, CSS3, Vanilla JavaScript 🌟 What I Learned: • DOM manipulation and event handling in JavaScript • Implementing timers and intervals effectively • Real-time input validation and performance metrics • Writing cleaner, more structured JS logic • Improving UI feedback for better user experience Building something new every day 🚀 Feedback and suggestions are always welcome! #WebDevelopment #JavaScript #HTML #CSS #Frontend #Projects #TypingGame #LearningByBuilding #Coding #Developer #TechJourney

While learning JavaScript, I started exploring the DOM API (Document Object Model) and realized how important it is for building interactive web applications. The DOM is a tree like representation of an HTML document that the browser creates. JavaScript uses the DOM API to read, modify, add, or remove elements on a webpage without reloading the page. 𝗪𝗵𝘆 𝘁𝗵𝗲 𝗗𝗢𝗠 𝗔𝗣𝗜 𝗺𝗮𝘁𝘁𝗲𝗿𝘀  • It allows JavaScript to interact with HTML and CSS  • Enables dynamic content updates  • Foundation of modern frameworks like React, Vue, and Angular 𝗖𝗼𝗺𝗺𝗼𝗻 𝗗𝗢𝗠 𝗔𝗣𝗜 𝗲𝘅𝗮𝗺𝗽𝗹𝗲𝘀 document.getElementById('id'); document.querySelector('.btn'); element.addEventListener("click", handler); Understanding the DOM API helped me better understand how JavaScript actually controls the browser behind the scenes. #JavaScript #DOM #WebDevelopment #FrontendDevelopment #ProgrammingBasics #LearningJavaScript #DeveloperJourney #TechLearning

From Console to Chrome: Bringing Logic to Life! 🚀💻 I was recently practicing to master JavaScript fundamentals. What started as a simple script to practice logic building and function structures evolved into something much bigger. Instead of just looking at conversion results in my terminal, I decided to build a full web application to see my code in action! What went into this build: Logic Building: I architected a multi-unit system using if/else statements to handle bi-directional conversions between Miles, KM, and Feet. DOM Manipulation: I bridged the gap between code and user by using document.getElementById and innerText to turn raw data into a dynamic UI. Error Resilience: I implemented isNaN checks to ensure the app handles empty inputs gracefully. Design Thinking: I stepped out of the script and into the browser, using CSS gradients and flexbox to create a modern, user-friendly interface. Tools used: Vanilla JavaScript, HTML5, and CSS3. This project reminded me that programming isn't just about solving problems in the console—it's about creating tools that provide a great user experience. Let me know your thoughts on this, and any suggestion for this webapp. #JavaScript #WebDevelopment #CodingJourney #VanillaJS #FrontEnd #LogicBuilding #LearningToCode

Day 12 | JavaScript Fundamentals 🔹 Topic: Events 🔹 Post: Handling User Actions Today I explored JavaScript Events—the core concept that makes websites interactive. Events allow JavaScript to respond to user actions like clicks, typing, scrolling, and form submissions. Understanding event handling is essential for building dynamic, user-friendly web applications with better control and improved user experience.Learning how browsers detect events and how JavaScript reacts to them is a major step toward mastering frontend development. #JavaScript #JavaScriptEvents #WebDevelopmentJourney #FrontendDevelopment #LearnJavaScript #CodingLife #WebDeveloper #ProgrammingBasics #DOMEvents #UserInteraction #SoftwareDevelopment #30DaysOfCode #DailyLearning #TechSkills

🎮 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

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