The basketball scoreboard is my second project of Scrimba Front-End course, in this course, I build web designs from scratch and learned how to use Flexbox and "div" properly.
The Basketball Scoreboard is my second static website where I learned how to use the flexbox in two-column web structure and the concept of code reusability. By writing the function, I know how to implement the function and reduce the repetitive code.
I start the Scrimba Module 3 course- Making websites interactive and learn how to use the basic Loop & Function knowledge. At the end of the course, I follow the Figma template to finish a basketball scoreboard that can be used in any game, take a look at the → Basketball_Scoreboard.
- Ensure all points are taken into consideration from Figma Template. → Figma Template from Scrimba
- Having a materials preparation document where I collect font style/color to match better visual communication and coherence in one page.
- It's important to brainstorm the HTML structure before starting coding, this step helps me save time.
- Use the "DRY" concept (Don't Repeat Yourself), so that I learn how to write a function that can be easily used on my project.
- To show the completed work between a Web and a template, I prefer refining the CSS code to make sure the project can align with the design.
Designing a basketball scoreboard website requires following some rules and taking into consideration that the project is not only a graphic project but a web project too. The next sections are crucial for any web project.
-
Button tag defines a clickable button. You can put text and tags inside the button element. It becomes clickable by using onclick in the button element.
ℹ️ [Button] GET to know more about the definition. → W3School
-
Master the Flexbox and container.
-
Before working on each website project, I prefer drawing templates with my own structure concept. Building the structure before everything else, will facilitate my work afterward.
body{
display: flex;
flex-direction: column;
align-items: center;
} Fonts are an essential part of every design.
It is recommended to organize the font size and style in the design process. In this project, I use the font style called "Cursed Timer ULiL". Download the font then unzip it to extract the tiff. file then put the file to the same path of your code.(Fonts2u).
- Using the technique @font-face in CSS, the link is embedded in the CSS.
@font-face {
src: url("CursedTimerULiL.ttf");
font-family: CursedTimerULiL; //you can name the font-family on your own then you can use the font-family to implement in other element.
}It is recommended to master the flex-box concept, it usually combines with different Property like flex-direction: column; align-items: center;.
Define what condition to use the flex-box, it influences how the content displayed.
Write the basic function that makes the number increment "1" when the function acts each time. This function becomes a trigger to control the score number.
home_scoreEl=document.getElementById("home_scoreel")
guest_scoreEl=document.getElementById("guest_scoreel")
let sum=0
console.log(guest_scoreEl)
function plus_1_home(){
sum = sum + 1
home_scoreEl.textContent=sum
}