Built a fun little Score Keeper using JavaScript and Bulma! This project helped me dive deeper into DOM manipulation, event handling, and clean UI design. Here’s a short demo, always satisfying to see code come to life! ⚡ #Coding #JavaScript #WebDev #Bulma #ProjectShowcase
More Relevant Posts
-
With Javascript partial application as shown in the attached, we can lock a theme/preset for a UI eg 'dark' creating reusable theme helpers in a simple way. const darkTheme = solve(applyTheme, "dark"); darkTheme("button"); // "dark-button" darkTheme("card"); // "dark-card" It also gives us fewer args to remember... #Javascript #CleanCode #buildinpublic #SoftwareEngineering #SoftwareDevelopment #100DaysOfCode #FunctionalProgramming
To view or add a comment, sign in
-
-
GitHub: https://lnkd.in/gemJEbhB 🔥 Project 3/20 — Modal Popup Magic! Today we’re crafting a modern, responsive modal popup using pure HTML, CSS & JavaScript. Click a button — boom, modal appears. Click outside — boom, it disappears. Smooth animations, overlay interaction, and event bubbling mastery included. Front-end fundamentals done right. Clean DOM manipulation, class toggling, UX-first thinking. 💡 Concepts: ✅ Event bubbling ✅ DOM manipulation ✅ Overlay click-to-close ✅ Modal animations 🔗 GitHub repo in bio Keep coding. Keep building. One project closer to mastery. ⚡ #javascript #frontend #webdevelopment #htmlcssjavascript #vanillajs #modalpopup #eventbubbling #uxdesign #cssanimations #frontendprojects #codetutorial #codingreels #webdevcommunity #responsiveui #githubproject #100daysofcode #softwareengineering #learntocode #webdevjourney #codewithme #frontenddeveloper #programminglife #buildinpublic #webdesign #codeweaver #uiux
To view or add a comment, sign in
-
📘 My 13th JavaScript Project "Marksheet Calculator 🧮" For this project, I wanted to build something simple yet practical a Marksheet Calculator that instantly shows total marks, percentage, and grades with a clean, responsive UI! 🎓 💡 Highlights: ✅ Real-time total & percentage calculation ✅ Automatic grade generation ✅ Input validation for accurate results ✅ Smooth, minimal, and mobile-friendly design ⚡ Best part: Watching grades update live as marks change it really feels like a smart digital marksheet! 📊 🌱 Lesson learned: Handling multiple inputs and logical conditions in JavaScript helped me think more like a real developer small logic, big learning! 💻 #JavaScript #FrontendDevelopment #CodingJourney #WebProjects #LearningByDoing #MarksheetCalculator
To view or add a comment, sign in
-
Github: https://lnkd.in/gXq_-4mp 🔥 Project 2/20 — Sticky Header + Scroll Reveal ✨ Today we’re leveling up UI fundamentals. No React, no Tailwind — just pure HTML, CSS & JavaScript flexing its muscles. This sticky navbar transforms as you scroll, paired with silky smooth reveal animations using the Intersection Observer API. Modern devs love frameworks. Great devs master fundamentals first. And we’re building the foundation brick by brick — one clean UI at a time. Because good code isn’t just written — it’s crafted. 📌 Concepts: ✅ Scroll events ✅ Intersection Observer ✅ DOM manipulation ✅ UI animations 🔗 GitHub repo in bio Follow along — 18 more fire projects coming. We’re not coding… we're forging skills. ⚔️🔥 #javascript #webdevelopment #frontend #htmlcssjavascript #uiuxdesign #frontendprojects #stickyheader #scrollanimation #vanillajs #cssanimations #intersectionobserver #learningtocode #webdevjourney #codingreels #codetutorial #githubproject #frontenddeveloper #webdesign #softwareengineer #programminglife #buildinpublic #100daysofcode #devcommunity #codewithme #codeweaver
To view or add a comment, sign in
-
Here's what you're missing with the new architecture. ⚡ 2x faster startup 🎯 Smooth 60 FPS animations 🚀 Direct native calls (no more JSON overhead) I put together a simple comparison guide showing: - Old vs new side by side - Real performance differences - Migration steps Easy tables. No jargon. Check it out: https://lnkd.in/daEGy-Bu #ReactNative #MobileDev #JavaScript
To view or add a comment, sign in
-
🔄 Understanding Event Bubbling & Delegation in JavaScript Ever wondered how a single click can travel through multiple elements in the DOM? That’s Event Bubbling — where an event starts from the target element and moves upward through its ancestors. And here’s the smart part — Event Delegation uses that bubbling behavior to handle events more efficiently. Instead of adding event listeners to every single child element, you attach just one listener to a parent and detect which child triggered the event. 💡 Why it matters: ✅ Better performance (fewer event listeners) ✅ Cleaner, centralized code ✅ Handles dynamically added elements with ease Example: A single ul listener handling clicks for all its li children — no extra listeners needed! 📘 I’ve shared a detailed explanation with examples and visuals in my notes — “Event Bubbling & Delegation in JS” If you’re learning DOM events or preparing for frontend interviews, this is a must-know concept! #JavaScript #WebDevelopment #Frontend #EventDelegation #CodingConcepts #Learning
To view or add a comment, sign in
-
GitHub: https://lnkd.in/gUz87Czn 🔥 Project 6/20 – Form Validation ✨ Master JavaScript Form Validation Like a Pro! ✨ Form validation isn’t just about catching errors — it’s about building trust through clean UX. This project shows how to create a modern, responsive signup form with real-time validation using: ✅ Regex for smart pattern matching ✅ DOM manipulation for live feedback ✅ Dynamic success & error states ✅ Sleek UI powered by HTML, CSS & JS A must-have mini-project for your frontend portfolio, showcasing your understanding of logic, regex, and DOM feedback. Don’t just build forms — build confidence. 🚀 Save this post and tag a dev who loves clean UI ❤ #javascript #frontenddevelopment #webdevelopment #formvalidation #regex #htmlcssjs #frontendprojects #webdesign #programming #developers #codinglife #learnjavascript #dommanipulation #uicomponents #frontendinspiration #githubproject #modernui #codingtutorial #webdevlearning #codeweaver #softwareengineering #javascriptprojects #frontendskills #webdevcommunity #techcreators #frontenddesign #modernweb
To view or add a comment, sign in
-
🎯 Learning DOM (Document Object Model) – The Heart of Frontend JavaScript Diving into DOM manipulation to understand how JavaScript interacts with webpages. From selecting elements to handling events and creating dynamic UI—DOM is what makes websites come alive. Key things I'm practicing: ✔ Selecting & modifying elements ✔ Handling events (click, input, scroll) ✔ Creating & removing elements dynamically ✔ Building interactive components Leveling up my frontend skills one step at a time. 🚀 #Frontend #JavaScript #DOM #WebDevelopment #LearningJourney Sheryians Coding School
To view or add a comment, sign in
-
-
🎯 A Little Story About JavaScript Events While working on a UI feature recently, I was thinking about how neatly JavaScript handles user interactions — especially through event flow. Imagine this 👇 You click a button inside a card component. The click first triggers on the button... but somehow, the parent card also reacts. That’s not magic — that’s Event Bubbling in action. In bubbling, the event starts at the target element and travels up through all its ancestors until it reaches the top of the DOM. There’s also the opposite path — Event Capturing — where the event moves down from the root to the target. You can enable this phase using: element.addEventListener("click", handler, true); And sometimes, you just want that click to stay right where it happened — no parents involved. That’s when event.stopPropagation() steps in to save the day ✋ Understanding how events travel through the DOM makes handling complex interfaces so much smoother. It’s one of those core concepts that quietly powers every interactive web experience we build. #JavaScript #Frontend #WebDevelopment #Coding #TIL
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