Simple Scoreboard - Javascript/Html/Css
Here is a video showcasing the css, html, javascript and scoreboard itself: https://youtu.be/wfMcgihwcBU
Code will be at the bottom of this blog.
This scoreboard is an assignment associated with the scrimba course, “Learn JavaScript for free” on scrimba.com. So far, I’ve learned about basic functions, variables, scripts, and integers in Javascript code. The html and css seemed to come intuitively after toying around with it.
This assignment was this: recreate the following scoreboard, from scratch, and make the buttons work. I was given no javascript and only the following html and css data: https://youtu.be/6V6OMv8gI2Y
Since I didn’t understand css, or html very well, I stole some resources from previous lessons in the same course. I stole the css for a button:
```
button {
background: white;
color: black;
margin-top: 10px;
border: 1px solid black;
padding: 10px 16px;
font-weight: bold;
cursor: pointer;
border-radius: 20px;
```
and for the scoreboard text:
```
position: absolute
width: 117px;
height: 120px;
left: 100px;
top: 125px;
font-family: 'Cursed Timer ULiL';
font-style: normal;
font-weight: 400;
font-size: 90px;
line-height: 127px;
/* or 141% */
text-align: center;
color: #F94F6D;
```
This is the exact scoreboard text data they used. Although the font didn’t transfer over. I’m not aware of how to do that at this time.
The way js and html work together is very interesting. At first, I was getting confused on why the id I assigned to the buttons wouldn’t work as a function. I’d take something like id=”add1PointHome” and turn it into function add1PointHome( ). It didn’t trigger any change in the score. I had to go back in the course to realize I needed to add ‘onclick=’ into the button code and create a seperate function to trigger it.
Creating the functions was actually very easy. I just created a seperate variable to keep track of the homeCount and guestCount. Then incremented it with the ‘+=’ with either 1, 2, or 3. It worked beautifully. I actually had to double check the math to make ABSOLUTELY sure it was working correctly. I laugh at myself sometimes.
Then I created a button that reset the score. It wasn’t required for the course, but its so easy I just did it anyways. I just told it to trigger the resetScore( ) function on the onclick. Which just sets the homeCount and guestCount varaibles to zero and sets the innertext of the homeScore and guestScore id’s to show the value in homeCount/guestCount.
Pretty easy project but really showed me the power of js, html, and css working in tandem. I had to tinker around with the css a bit to get the buttons looking how I wanted them, and to get them to be somewhat uniform. I feel like I’ve learned enough about css and html to make simple edits on my own site. I’m eager to see what the rest of this course has to offer.
Code:
index.js
```
let scoreH = document.getElementById("homeScore")
let scoreG = document.getElementById("guestScore")
let homeCount = 0
let guestCount = 0
function onePointHome(){
homeCount += 1
scoreH.innerText = homeCount
}
function twoPointHome(){
homeCount += 2
scoreH.innerText = homeCount
}
function threePointHome(){
homeCount += 3
scoreH.innerText = homeCount
}
function onePointGuest(){
guestCount += 1
scoreG.innerText = guestCount
}
function twoPointGuest(){
guestCount += 2
scoreG.innerText = guestCount
}
function threePointGuest(){
guestCount += 3
scoreG.innerText = guestCount
}
function resetScore(){
homeCount = 0
scoreH.innerText = homeCount
guestCount = 0
scoreG.innerText = guestCount
}
```
index.html
```
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div>
<h3>HOME</h3>
</div>
<div>
<h3>GUEST</h3>
</div>
</div>
<p id="homeScore">0</p>
<p id="guestScore">0</p>
<button id="add1PointHome" onclick="onePointHome()">+1</button>
<button id="add2PointHome" onclick="twoPointHome()">+2</button>
<button id="add3PointHome" onclick="threePointHome()">+3</button>
</body>
<body>
<button id="add1PointGuest" onclick="onePointGuest()">+1</button>
<button id="add2PointGuest" onclick="twoPointGuest()">+2</button>
<button id="add3PointGuest" onclick="threePointGuest()">+3</button>
<button id="reset-btn" onclick="resetScore()">RESET</button>
<script src="index.js"></script>
</body>
</html>
```
index.css
```
body {
background: drkblue; //idk how to change the backdrop
margin: 0;
}
#homeScore {
position: absolute;
width: 1px;
height: 1px;
left: 41px;
top: 0px;
font-family: 'Cursed Timer ULiL';
font-style: normal;
font-weight: 400;
font-size: 70px;
line-height: 20px;
/* or 141% */
text-align: center;
color: #F94F6D;
}
#guestScore {
position: absolute;
width: 1px;
height: 1px;
left: 181px;
top: 0px;
font-family: 'Cursed Timer ULiL';
font-style: normal;
font-weight: 400;
font-size: 70px;
line-height: 20px;
/* or 141% */
text-align: center;
color: #F94F6D;
}
#add1PointHome {
background: navy;
color: gray;
margin-left: 16px;
margin-top: 50px;
border: 2px solid gray;
padding: 5px 5px;
font-weight: bold;
border-radius: 5px;
}
#add2PointHome {
background: navy;
color: gray;
margin-top: 50px;
border: 2px solid gray;
padding: 5px 5px;
font-weight: bold;
border-radius: 5px;
}
#add3PointHome {
background: navy;
color: gray;
margin-top: 50px;
border: 2px solid gray;
padding: 5px 5px;
font-weight: bold;
border-radius: 5px;
}
#add1PointGuest {
background: navy;
color: gray;
margin-top: 50px;
margin-left: 30px;
border: 2px solid gray;
padding: 5px 5px;
font-weight: bold;
border-radius: 5px;
}
#add2PointGuest {
background: navy;
color: gray;
margin-top: 50px;
border: 2px solid gray;
padding: 5px 5px;
font-weight: bold;
border-radius: 5px;
}
#add3PointGuest {
background: navy;
color: gray;
margin-top: 50px;
border: 2px solid gray;
padding: 5px 5px;
font-weight: bold;
border-radius: 5px;
}
#reset-btn {
background: red;
color: gray;
margin-top: 10px;
margin-left: 100px;
border: 2px solid gray;
padding: 5px 10px;
font-weight: bold;
border-radius: 5px;
}
.container {
display: flex;
justify-content: space-around;
}
```
