The basketball scoreboard
A Javascript project
Project Background
This was a solo project completed as part of the Scrimba Frontend Career Path. The client required for a basketball scoreboard to be built using HTML, CSS and JavaScript, following the provided Figma design:
The client allowed for additional features such as a count-down timer and a “New game” button.
Methodology
I first created all the elements and designed them following the styles (dimensions, colors, font etc.) provided in the Figma file. This was done using HTML and CSS. I leveraged on flexbox and media queries to make the website more responsive.
To make the scoreboard interactive, I used JavaScript. This enables for one to:
· Start a new game
· Countdown time allocated for the game ( For the purpose of demonstration, I set the timer to 6 seconds)
· Add scores for both the Home and the Guest teams
· Declare the winner once the countdown reaches 0
Output
The scoreboard on a large-screen device:
The scoreboard on a mobile device:
You can have a personal feel of the scoreboard by accessing it at: https://basketball-scorecard-04d76e.netlify.app/
GitHub repo: https://github.com/HarrietKerubo/scorecard
Follow me on X (formerly Twitter) and walk with me as I document my #100DaysofCode: @artfulGeek
