Basketball ScoreBoard
NAME OF PROJECT
NAME OF PROJECT
NAME OF PROJECT
Basketball ScoreBoard
LANGUAGES USED
LANGUAGES USED
LANGUAGES USED
HTML, CSS & JavaScript
DESCRIPTION
DESCRIPTION
First solo JavaScript project. Started from the design creation, all the way to the code implementation and development.
VIEW PROJECT ↗
VIEW PROJECT ↗
VIEW FIGMA DESIGN ↗
VIEW FIGMA DESIGN ↗
DESCRIPTION
First solo JavaScript project. Started from the design creation, all the way to the code implementation and development.
The Process
This is my very first solo project using JavaScript without any guidance. While the hit counter project was indeed my first project using while actually understanding the JavaScript functions being used, that project was more of a follow along project, where I was adding the JavaScript code while the educator was explaining the project.
In this specific project, things are different. Since I haven't subscribed to the Scrimba paid plan, I obviously don't get the full package of the course, therefore, the actual solo projects were off-limits for me, however, I didn't let that stop me. All I needed was the title, and I then made the magic work.
This is my very first solo project using JavaScript without any guidance. While the hit counter project was indeed my first project using while actually understanding the JavaScript functions being used, that project was more of a follow along project, where I was adding the JavaScript code while the educator was explaining the project.
In this specific project, things are different. Since I haven't subscribed to the Scrimba paid plan, I obviously don't get the full package of the course, therefore, the actual solo projects were off-limits for me, however, I didn't let that stop me. All I needed was the title, and I then made the magic work.
The Design
They mentioned that the solo project was about making a functional basketball scoreboard, and that's all I needed. I hopped onto Figma to get on with designing the project first. Once I was happy with the design on mobile, tablet and desktop, I got onto the coding part. I first made sure that the HTML structure makes sense to how I wanted the whole project to function (duh 🙄). Once I was happy with the structure, I got onto the designing part and finished coding my CSS.
Once I saw that the design and responsiveness of the site were working fine, I got onto the actual functionality of the project, meaning JavaScript. I think that having a good structured HTML helps to get a better idea of how the JavaScript code will work in conjunction of the project idea, since we're linking two languages into one functionality or more. In this case the idea was that whenever a basket is made 3,2, or 1 point can be added separately for both home and away while having the count separated and the final score of the home and away teams incremented accordingly.
They mentioned that the solo project was about making a functional basketball scoreboard, and that's all I needed. I hopped onto Figma to get on with designing the project first. Once I was happy with the design on mobile, tablet and desktop, I got onto the coding part. I first made sure that the HTML structure makes sense to how I wanted the whole project to function (duh 🙄). Once I was happy with the structure, I got onto the designing part and finished coding my CSS.
Once I saw that the design and responsiveness of the site were working fine, I got onto the actual functionality of the project, meaning JavaScript. I think that having a good structured HTML helps to get a better idea of how the JavaScript code will work in conjunction of the project idea, since we're linking two languages into one functionality or more. In this case the idea was that whenever a basket is made 3,2, or 1 point can be added separately for both home and away while having the count separated and the final score of the home and away teams incremented accordingly.
The Challenge
I wanted to make the scoreboard as close to an actual game as possible, therefore, I had to create a function for each point button for both the HOME and AWAY team, while keeping the total score incrementing. I found that in order to reset the scores, the user had to refresh the page every time, which isn't the ideal, therefore, I created a reset button so that when the game is finished, the user can easily and swiftly reset the scores and start another game with 1 click of a button.
I wanted to make the scoreboard as close to an actual game as possible, therefore, I had to create a function for each point button for both the HOME and AWAY team, while keeping the total score incrementing. I found that in order to reset the scores, the user had to refresh the page every time, which isn't the ideal, therefore, I created a reset button so that when the game is finished, the user can easily and swiftly reset the scores and start another game with 1 click of a button.
CONTACT
Ready for Awesomeness?
If you have any feedback, opportunities or wish to connect further, feel free to drop
me an email at here, or by connecting with me through LinkedIn below.
© Kyle Magri's Modern Marvels, 2023
Ready for Awesomeness?
CONTACT
If you have any feedback, opportunities or wish to connect further, feel free to drop
me an email at here, or by connecting with me through LinkedIn below.
© Kyle Magri's Modern Marvels, 2023
VIEW FIGMA DESIGN ↗
VIEW PROJECT ↗
CONTACT
Ready for Awesomeness?
© Kyle Magri's Modern Marvels, 2023
If you have any feedback, opportunities or wish to connect further, feel free to drop me an email at here, or by connecting with me through LinkedIn below.