🏆 ScoreMate App

A simple two-team scoreboard application built with HTML, CSS, and vanilla JavaScript. This project was created as project requirement for the Scrimba Learn JavaScript path learning platform, using a provided Figma design. I used it to strengthen my understanding of DOM manipulation, event listeners, and go the extra mile to apply clean code practices.

🎥Initial app completion preview

Screen.Recording.2025-09-01.at.3.28.23.PM.1.mov

⸻

🏀 About This App

A simple JavaScript-powered scoreboard that lets users keep track of scores for two teams. It was created with HTML, CSS, and vanilla JS, this project helped me strengthen my understanding of DOM manipulation, event listeners, and clean code practices. I completed the project as a code challenge and requirements for the Learn JavaScript path on Scrimba and learned how to work with a provided figma design file of how the app's components should look.

⸻

✨ Current Features

• Two separate team score displays (Home & Away).
• Buttons to add +1, +3, +5 points per team.
• Data attributes (data-team, data-points) to keep the code clean and scalable.
• Fully functional conditional logic to update scores correctly.
• Cursed Timer ULiL font typography — a retro digital clock or LED-style font that’s often used for scoreboards and timers.

⸻

🧩 Challenges I Faced

• Understanding the difference between id vs. class attributes and when to use.
• Learning how dataset attributes work to store custom values (data-team, data-points).
• Mistakenly using querySelector instead of querySelectorAll.
• Realizing I needed to sync JS variables with the DOM using .textContent, otherwise my updates wouldn’t display.
• How to get started and realizing the importance of completing milestones instead of complete perfection.

These challenges helped me visualize the logic better and taught me how important clean, reusable patterns are in JavaScript.

⸻

📚 What I Learned and encountered

• How to use data-* attributes as a bridge between HTML and JS.
• Why querySelectorAll is essential for selecting multiple elements.
• How to keep logic DRY (Don’t Repeat Yourself) by using one generalized update function.
• The importance of debugging with console.log to track logic flow when testing locally

🚀 Future Improvements and next steps

I’d like to expand this project to make it more practical and fun:

• Mobile Responsiveness
  • Larger buttons and adaptive font sizes for smaller screens.
  • Use more CSS flex/grid and clamp() for responsive typography.
• Functionality
  • Reset Button to clear all scores with one click to start a new game.
  • A way to use keyboard shortcuts to quickly score the teams or select scoring options
  • Sound effects when points are added.
  • Dark mode / light mode toggle.
  • Local storage to remember scores if the page reloads
• Nice to have
  • A way to indicate in different color which team is in the lead
• Different Sport Modes
  • A toggle or dropdown to select the sport mode.
  • Switch the button sets dynamically depending on the sport:
    • 🥊 Boxing, 🥋 Wrestling, 🥊 UFC → Round counters, points by judges.
    • ⚽ Soccer → Goals, penalties.
    • 🏒 Hockey → Goals, periods.
    • 🏊 Swimming → Heat counters, lap tracking.

---

✅ Roadmap / To-Do List

• Add buttons to increment scores (+1, +3, +5)
• Track scores for both teams
• Use data-* attributes to simplify event handling
• Deploy at least one iteration of this project on GitHub Pages or Netlify is up and works for public use
• Add reset button to clear scores
• Improve mobile responsiveness (bigger buttons, flexible fonts)
• Improve application appearence on bigger screens.
• Create sport mode toggle (boxing, wrestling, soccer, hockey, UFC, swimming)
• Add dark mode / light mode toggle
• Save scores in localStorage so they persist after reload
• Add sound effects when points are scored
  ⸻

🔮 Next Steps

This scoreboard started simple, but I hope to transform it into a multi-sport, responsive scoreboard app with more practice and experience in another iteration.