Learning to code has been an exciting adventure for me. As part of my Scrimba course, I tackled a fun and challenging project: building a basketball score counter. It was an opportunity to combine HTML, CSS, and JavaScript while overcoming real-world challenges. Here’s my journey, with lessons learned along the way.

The Idea

The idea was simple—a tool to track scores for a basketball game, with buttons to add 1, 2, or 3 points to each team's score. The app would update the scores dynamically as you clicked the buttons. While the concept seemed straightforward, the process taught me a lot about problem-solving and persistence.

Laying the Foundation with HTML

I started by structuring the app using HTML. It was the skeleton of my project, organizing the sections for "Home" and "Away" teams, score displays, and buttons. Here's the basic layout of the html code:

htmlCopy code<div class="container">
    <div class="left-section">
        <h3>HOME</h3>
        <p id="sc-board"> 0 </p>
        <div class="scores">
            <div class="plus-one" onclick="OnePointerA()">+1</div>
            <div class="plus-two" onclick="TwoPointerA()">+2</div>
            <div class="plus-three" onclick="ThreePointerA()">+3</div>
        </div>
    </div>
    <div class="right-section">
        <h3>AWAY</h3>
        <p id="sc-board-away"> 0 </p>
        <div class="scores">
            <div class="plus-one-away" onclick="OnePointerB()">+1</div>
            <div class="plus-two-away" onclick="TwoPointerB()">+2</div>
            <div class="plus-three-away" onclick="ThreePointerB()">+3</div>
        </div>
    </div>
</div>

This setup created two sections, each with its own score display and interactive buttons.

Styling the App: Overcoming Visual Challenges

Once the structure was in place, I moved to CSS to bring it to life. My goal was to make the app visually appealing and intuitive. I wanted a sporty vibe, so I used a custom font for the score display.

Challenge 1: Using a Downloaded Font

Instead of using a Google Font, I decided to experiment with a downloaded font, CursedTimer.ttf. This was new territory for me. After some trial and error with youtube (my holy grail of curing curiosity and answering my dumb questions), I got it working using @font-face in CSS:

cssCopy code@font-face { 
    font-family: myFont;
    src: url(CursedTimer.ttf);
} 
p {
    font-family: myFont;
    font-size: 72px;
    background-color: #080001;
    color: #e11d48;
    text-align: center;
    padding: 16px;
    border-radius: 6px;
}

Challenge 2: Aligning the Score Display and Buttons

I faced another issue aligning the score display with the buttons below. The scores looked great when they were single digits, but the layout broke when they grew to three digits. The fix involved adjusting width and margin properties to ensure everything stayed centered regardless of the score length. I always joke about how I understand CSS but i don’t understand CSS. Thank God for google, gemini and stack overflow all the same. I’d keep asking it questions and keep trying things out. Amen. **insert giggle**. Below is the code for how I fixed the alignment issue:

cssCopy code#sc-board, #sc-board-away {
    width: 132px;
    display: inline-block;
    margin: auto;
}

Adding Interactivity with JavaScript

With the visuals ready, it was time to make the app interactive using JavaScript. This part brought the app to life, allowing the scores to update dynamically when you click the buttons.

Here’s how it works step by step:

Getting the Score Elements:
In JavaScript, we start by “grabbing” the parts of the app we want to change—in this case, the score displays for both "Home" and "Away" teams.
```
 let scBoard = document.getElementById("sc-board");
 let scBoardAway = document.getElementById("sc-board-away");
```
The getElementById() function finds the HTML elements with the IDs sc-board and sc-board-away. These elements are where the scores are displayed.
Tracking the Scores:
I created two variables, homeCount and awayCount, to store the scores for each team. Both start at 0 because that’s the default score when the game begins:
```
 let homeCount = 0;
 let awayCount = 0;
```
Adding Points:
I wrote separate functions for each button. For example, the OnePointerA() function runs when you click the "+1" button for the "Home" team.
Here’s what happens:
- It increases homeCount by 1.
- Then, it updates the text in the sc-board element to reflect the new score.

    function OnePointerA() {
        homeCount += 1; // Add 1 to the current score
        scBoard.textContent = homeCount; // Display the updated score
    }

Similarly, TwoPointerA() adds 2 points, and ThreePointerA() adds 3 points for the "Home" team.

Repeating for the "Away" Team:
I created similar functions for the "Away" team’s buttons, like OnePointerB() for +1, TwoPointerB() for +2, and ThreePointerB() for +3. The only difference is that these functions update awayCount and change the text in the sc-board-away element:

Challenge 3: Separating Buttons for Home and Away

While the buttons for both teams looked identical, they performed different actions. I had to carefully name each button and function (e.g., OnePointerA for Home, OnePointerB for Away) to keep them working independently.

Lessons Learned

This project wasn’t just about building a basketball counter; it was a crash course in problem-solving. I learned:

How to use custom fonts in CSS.
The importance of aligning elements dynamically in CSS.
The value of naming conventions in JavaScript to keep functions organized. This one was very key.

What’s Next?

While I’m proud of what I’ve built, I know there’s always room for improvement. Here are a few ideas I’d love to explore as my skills grow:

Reset Button: A button to reset both scores to zero.
Score History: Keep track of each team’s scores throughout the game.
Timer: Add a countdown timer for the game.
Local Storage: Save scores so they persist even after refreshing the page.

I hope to come back to this code sometime in the future when I am better at coding and update the code. Godwilling

Conclusion

Building this basketball counter was a rewarding experience. Seeing my code come to life and solving challenges along the way felt incredible

Let me know if you build your version or have ideas for improving mine—I’d love to hear about it!

Building a Basketball Score Counter