Built a real-time analog & digital clock using JavaScript, HTML & CSS. . Smooth animations for clock hands ⏱️ . Real-time updates every second 💻 Code on GitHub: https://lnkd.in/daWFt6Rm 🌐 Live Demo: https://lnkd.in/ddBSjzHJ Team : Ahsen Adil Muhammad Shayan Sir : Muhammad Fareed Ali Aftab Sheikh Ghous Ahmed Zeeshan Aijaz Wajid Ullah #JavaScript #WebDevelopment #Frontend #CodingChallenge #JS30 #ClockProject

Today I explored some core concepts of JavaScript events, and here’s my simple understanding: 🔹 Event Bubbling Event bubbling means when an event starts from the element you interact with and then travels upward through its parent elements. For example, if I click a button inside a div, the event first happens on the button, then the div, then the body, and so on. A simple way to imagine it: If I’m dancing in my room, you can also say I’m dancing in my house, in my city, or even in my country. It’s like: room → house → city → country 🔹 Stopping Event Bubbling Sometimes we don’t want the event to go upward. We only want it to stay on that specific element. For that, we use: element.addEventListener("click", (event) => {  event.stopPropagation(); }); 🔹 setInterval() Used when we want something to run repeatedly after a fixed time interval. Example: setInterval(() => { /* code */ }, 3000); 🔹 setTimeout() Used when we want something to happen once after a delay. Example: setTimeout(() => { /* code */ }, 4000); Learning these small concepts is helping me understand how interactive web applications really work. #JavaScript #WebDevelopment #Learning #Frontend #Programming

🎮 Built a Simon Says Game using HTML, CSS & JavaScript I recently built a memory-based game where users have to repeat an increasing sequence of colors. I created this project while learning from #ApnaCollege, and it helped me strengthen my JavaScript fundamentals. 🔧 Key Features: • Interactive UI with color-based buttons • Keyboard event to start the game • Level progression system • Game-over and restart functionality 💡 What I learned: • DOM manipulation and event handling • Writing game logic step-by-step • Improving UI using HTML & CSS 🔗 Live Demo: https://lnkd.in/gJKbbDHq I would love to hear your feedback and suggestions to improve this further. #WebDevelopment #JavaScript #Frontend #Projects #LearningJourney #100DaysOfCode

🎮 Just built a simple Tic-Tac-Toe game using HTML, CSS, and JavaScript. Nothing too complex — just wanted to strengthen my fundamentals and understand how things work behind the scenes without using any frameworks. What I worked on: • Handling game logic (win conditions, turns) • Updating UI with DOM manipulation • Reset functionality Honestly, small projects like this help a lot in getting comfortable with core concepts. Thinking of improving it next by adding an AI opponent or better UI. Open to suggestions 👀 #JavaScript #HTML #CSS #WebDevelopment #Learning

𝐏𝐫𝐨𝐣𝐞𝐜𝐭 𝐔𝐩𝐝𝐚𝐭𝐞: 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒 & 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐈𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐯𝐞 𝐁𝐮𝐭𝐭𝐨𝐧 After working on my JavaScript skills, I built a simple yet engaging project -an animated download button using HTML, CSS, and JavaScript. This project focuses on creating a smooth user experience. When the button is clicked, it triggers an animation that visually represents a download process. The button expands, a progress-like effect runs using CSS animations, and after a few seconds, it changes into a “Completed” state with an updated icon. Through this project, I practiced: • DOM manipulation in JavaScript • Event handling • Using setTimeout for timed actions • CSS animations and transitions • Creating interactive UI elements It’s a small project, but it helped me understand how frontend technologies work together to create dynamic and user-friendly interfaces. Below is the link of the project: https://lnkd.in/dGkNSnqW #WebDevelopment #JavaScript #CSS #HTML #CodingJourney #LearnToCode #Programming #DeveloperLife

Dynamic Image Generation using JavaScript (createElement & setAttribute): I’m excited to share another JavaScript DOM project where I implemented dynamic image generation on button click. In this project, when the button is clicked, multiple images are created dynamically and displayed at different random positions on the screen. This creates a fun and interactive visual effect. Key concepts I practiced in this project: 1. createElement() – Dynamically creating image elements 2. setAttribute() – Setting attributes like src and positioning 3. DOM Manipulation – Adding elements to the webpage in real time 4. Event Handling – Triggering actions using button clicks 5. Dynamic UI Behavior – Generating multiple elements with different positions Through this project, I clearly understood how to create and insert elements dynamically into the DOM, and also strengthened my knowledge of setAttribute() and interactive UI design. Building projects like this is helping me improve my creativity and confidence in JavaScript. Checkout my full project code on github: https://lnkd.in/gqPQptPS Feedback and Suggestions are always welcome! 😊 #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #JavaScriptProjects #CodingJourney #LearningByDoing #BeginnerDeveloper #UIInteraction

🔥 Is CSS replacing JavaScript? 👀 Modern CSS is becoming more powerful than ever… We can now do things that once required JavaScript 👇 • Conditional logic with if() • Scroll-based animations (no JS needed) • Scoped styling with @scope • Cleaner layouts with anchor positioning This means: Less JavaScript Cleaner code Better performance 🚀 Frontend development is evolving fast. Are we moving towards a “CSS-first” approach? 🤔 What do you think? #CSS #JavaScript #FrontendDeveloper #WebDevelopment #Programming

Built a Rock Paper Scissors Game to sharpen my JavaScript skills. As part of improving my frontend development skills, I created this simple but interactive project using HTML, CSS, and JavaScript. It was a great hands-on way to practice: 💠 DOM manipulation 💠 Event handling 💠 Game logic implementation 💠 Dynamic UI updates Working on small projects like this helps strengthen core concepts and builds confidence in writing better JavaScript. I’ve attached a short demo video of the project below. You can also check out the live project here: https://lnkd.in/dBgzzbm4 #JavaScript #WebDevelopment #FrontendDevelopment #100DaysOfCode #CodingProjects #HTML #CSS #LearningByBuilding

**"This is our today’s JavaScript class presentation 🎮🍬 We developed a Candy Crush game using HTML, CSS, and JavaScript 💻 JavaScript handles the core functionality including grid creation, candy matching logic, swapping, scoring system, level progression, and interactive effects 🔥 CSS is used for responsive design and styling, while HTML builds the structure of the game. Created by Team Code Crusher ✨ #CodeCrusher #JavaScript #WebDevelopment #GameDevelopment #CodingProject Manaheel Jamil # githb link:https://lnkd.in/dAu5tQqM

📅 DAY 1 — What is JavaScript? I thought JavaScript is just for buttons… I was wrong 😅 --- JavaScript is what makes websites **interactive** 👉 Click 👉 Scroll 👉 Form submit 👉 Animations --- 💡 Simple definition: JavaScript = language that runs in browser --- Example: HTML → structure CSS → design JS → logic --- 🎯 Without JS → website is static --- Starting my JS journey 🚀 --- Do you know JavaScript basics? YES / NO --- 📌 Save this 🔁 Follow for Day 2 #JavaScript #WebDevelopment #Coding