NAME OF PROJECT
Basketball ScoreBoard
LANGUAGES USED
HTML, CSS & JavaScript
DESCRIPTION
First solo JavaScript project. Started from the design creation, all the way to the code implementation and development.
The Process
I stepped into solo JavaScript projects, and this one's my first without a guide. Earlier, I got a feel for JavaScript with a hit counter, but it was more like a joint effort. This time, no guiding hand. No access to full courses due to a free Scrimba plan, but armed with just a project title, I decided to create some magic.
The Design
The task? Build a working basketball scoreboard. With that goal, I sketched it out on Figma, ensuring it looked good on various devices. Once the design was set, I switched to coding, starting with HTML and making sure the structure made sense. Then, I added the design touch with CSS.
With design and responsiveness checked, it was JavaScript time. A well-structured HTML helped me visualize how JavaScript would blend in. The aim? Update scores dynamically based on baskets—3, 2, or 1 point—for both home and away teams.
The Challenge
I wanted the scoreboard to feel like a real game. Creating functions for each point button for both teams was the challenge. But here's the twist—I wanted to reset scores without a page refresh. So, I added a reset button for users to swiftly reset scores and start a new game with one click. Optimal gaming experience achieved!