🏆 Project Documentation: Crafting a Scoreboard Webpage 🎉

Hello there,

I'm thrilled to present the scoreboard webpage that I've built from scratch. JavaScript has turned this journey into an incredibly engaging experience. The joy of developing an interactive webpage has been truly satisfying. I invite you to explore my creation and share your thoughts!

🛠️ Technology Used

This project is a beautiful blend of HTML, CSS, and JavaScript. HTML is our canvas, structuring the content of the webpage, while CSS is our palette, styling the webpage to perfection. JavaScript is our magic wand, adding interactivity to the webpage and making it come alive.

🎓 Lessons Learned

This project was a deep dive into the world of HTML, CSS, and JavaScript. We learned how to:

• Create a simple scoreboard application using HTML and style it using CSS 📝
• Use various CSS properties to style the scoreboard, including display: flex, justify-content, align-items, background-color, padding, border-radius, margin, and CSS animations 🎨
• Use JavaScript to update the DOM based on user interactions, making the scoreboard dynamic and responsive 🖱️

🎨 What Was Created

We crafted a simple scoreboard application that displays the scores for a home team and a guest team. Users can add points to each team's score using the "+1", "+2", and "+3" buttons. Users can also start a new game, which resets both teams' scores to 0.

💡 Ideas to Make It Better

Add a timer:

Our scoreboard is currently static. Adding a countdown timer that users can start, pause, and reset with JavaScript could make it come alive. ⏱️

Add team names:

Let's personalize our scoreboard. Allowing users to input the names of the home and guest teams would make the scoreboard more engaging. 🏅

Add score history:

Let's keep track of the scores from previous games and display them in a history section. This would add depth to our scoreboard and make it more informative. 📜

📸 Visuals

Feast your eyes on our sleek scoreboard webpage:

🔗 Link

Check out my Scoreboard Webpage: https://scoreboard-webpage-tommy.netlify.app

🔄 Update

A big shout-out to @Elijah, my fellow learner from Scrimba, for providing valuable suggestions for my Scoreboard project. The project now boasts improved webpage visuals and streamlined script code.

Changes

• HTML: The onclick attributes inside the buttons now include identifiers within the parentheses, in anticipation of the JavaScript code.
• CSS: I made adjustments to several attributes to enhance the visual appeal of the webpage.
• JavaScript: I streamlined the code by condensing six functions into just two, with the variables placed inside the identifier's parentheses.