Day 5 of my 21-day challenge. Today I built a mouse hover spotlight effect using JavaScript and DOM manipulation. LINK: https://lnkd.in/gsWAn74n What it does: • The screen stays dark by default • When you move the mouse, a circular spotlight follows the cursor • Only the area around the cursor becomes visible • The rest of the page remains dimmed, creating a flashlight-like effect Concepts I practiced: • Mouse move events • Dynamic styling with JavaScript • DOM interaction to create real-time visual effects Small interaction, but it shows how powerful simple mouse events can be when combined with DOM manipulation. Learning step by step and building in public. #javascript #webdevelopment #frontenddevelopment #dom #learninginpublic #SheriyansCodingSchool
More Relevant Posts
-
Today I Learned: setTimeout() in JavaScript Today I explored how setTimeout() works in JavaScript ⏳ It allows you to execute a function after a specified delay Very useful for creating delays, animations, alerts, or API calls Example: setTimeout(() => { console.log("Hello after 2 seconds!"); }, 2000); Key Learning: Time is in milliseconds (1000ms = 1 second) Runs only once after the delay Helps in asynchronous programming Small concept, but very powerful in real-world projects! #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #LearningEveryday
To view or add a comment, sign in
-
Day 4 of my 21-day challenge. Today I experimented with the DOM and mouse events to create a small interactive effect. LINK: https://lnkd.in/g3UN5h-D What I built: • A mouse follower that smoothly tracks the cursor on the screen • When the screen is clicked, the follower rapidly expands and the whole screen inverts colors • The interaction creates a quick visual burst effect • Pressing Ctrl + R resets everything back to the original state Concepts I practiced today: • DOM manipulation • Mouse move and click events • Basic visual effects using JavaScript Small project, but a fun way to understand how user interactions can control elements on the page. Learning something new every day and building in public. #javascript #webdevelopment #frontenddevelopment #dom #learninginpublic #sheriyanscodingschool
To view or add a comment, sign in
-
🚀 Just built a Hangman Game using HTML, CSS & JavaScript! 🎯 Features: • Letter-by-letter guessing system • Hint provided for each word • Maximum 6 wrong attempts • 😢 Sad emoji on loss • 🎉 Victory emoji on success This project helped me strengthen my understanding of: ✔ DOM Manipulation ✔ Event Handling ✔ Game Logic Implementation 💡 It was fun designing the logic behind tracking wrong guesses and updating the UI dynamically. 🔗 Check out the code here: https://lnkd.in/gMnvFf-i #WebDevelopment #JavaScript #FrontendDevelopment #CodingProjects #100DaysOfCode
To view or add a comment, sign in
-
Learn in Public – Day 20 🚀 Built a small Image Resizer project today. The idea is simple.......use + and - buttons to increase or decrease the width of an image by 5px. I also added limits so the image can’t become too big or too small, and a warning message appears if it reaches the limit...! While building this, I practiced: DOM manipulation Updating styles dynamically Handling button click events Using simple conditions for limits Small project, but it helped me get more comfortable controlling UI with JavaScript...! Live Project 👇 https://lnkd.in/dh5iq6gR GitHub Repo 👇 https://lnkd.in/dtBNRGZ7 #LearnInPublic #JavaScript #WebDevelopment #Day20
To view or add a comment, sign in
-
-
🚀 Built a Simon Game using JavaScript! I created a memory-based Simon Game where players must repeat an increasing sequence of colors as levels progress. ✨ Features: • Dynamic level progression • Button flashing • Game over detection • Highest score tracking 🛠️ Tech Stack: HTML, CSS, JavaScript This project helped me practice DOM manipulation, event handling, and game logic in JavaScript. Demo video below 👇 #JavaScript #WebDevelopment #Frontend #Coding
To view or add a comment, sign in
-
Sometimes the best way to learn is by building small things just for fun. ❤️ I created Cursor Hearts, a small interactive project using HTML, CSS, and JavaScript where animated hearts appear and float upward as the cursor moves across the screen. This project started as a simple experiment with DOM manipulation, event listeners, and CSS animations, but it turned into a fun visual effect. Projects like this may be small, but they are great for understanding how JavaScript can dynamically create and control elements on a webpage. Small projects like this keep the learning process enjoyable while helping build stronger fundamentals. 🔗 Live Demo: https://lnkd.in/dAPmyFhv 💻 GitHub Repository: https://lnkd.in/dZ9FUn2W #javascript #webdevelopment #frontend #coding #learning #buildinpublic
To view or add a comment, sign in
-
Day 62/100 🚀 Built a Rock–Paper–Scissors game using HTML, CSS, and JavaScript. Play against the computer and the score updates dynamically. Next step: adding animations and sound effects to improve the experience. 🔗Live Demo : https://lnkd.in/dEYfa7zd 💻GitHub Code:https://lnkd.in/ddjK3m7P #100DaysOfCode #JavaScript #WebDev #BuildInPublic
To view or add a comment, sign in
-
-
🚀 30 Days of JavaScript – Day 9 Continuing my journey to improve my JavaScript logical thinking by building small interactive programs every day. 💡 Today’s Mini Project: Word Scramble Game 🧩 In this game, the program selects a random word, scrambles its letters, and the user must guess the correct word. If the guess is wrong, the program asks the user to try again. After the correct answer, the user can choose to play again with a new word. 🧠 Concepts Used: Arrays Math.random() split(), sort(), join() while loop Conditional logic 📌 Example Scrambled Word → gcodni Correct Answer → coding 🎥 Demo below 👇 Full source code in the First comment. #JavaScript #WebDevelopment #CodingJourney #ProblemSolving #LearningJavaScript #30DaysOfCode
To view or add a comment, sign in
-
🚀 Just built a Random Color Generator using JavaScript 🎨 Today, I worked on DOM manipulation and event handling, and created a simple yet powerful project where: ✔️ On button click → a random RGB color is generated ✔️ The text color updates dynamically ✔️ The background color changes in real time 💡 Learned concepts: DOM Selection (querySelector) Event Listeners (addEventListener) Functions & Return Values Random number generation (Math.random, Math.floor) Dynamic styling using JavaScript This project helped me understand how JavaScript interacts with HTML and CSS in real time. 📌 Still learning, still improving — consistency is key 💪 #JavaScript #WebDevelopment #DOM #FrontendDevelopment #CodingJourney #100DaysOfCode #apnaCollege
To view or add a comment, sign in
-
Built a little browser game over the weekend using just vanilla JavaScript. No frameworks, no libraries — one HTML file. Move your cursor to destroy enemies, survive boss waves, grab power-ups. Runs at 60fps with particle effects and procedural audio. Sometimes the best way to sharpen your skills is to build something fun. Try it: https://lnkd.in/gQGEcv-v #JavaScript #WebDev #CreativeCoding
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development