So, I wanted to create this online scoring system, you know, something simple for keeping track of scores in real-time. I’ve dabbled in web stuff before, but this was a bit different. Needed a way to input scores, display them, and maybe even have some basic ranking. Nothing too fancy, just functional.
Getting Started
First things first, I needed a place to, well, put the thing. I didn’t want to mess with servers or anything, so I just used my own computer for testing. No domain name, no hosting, just straight-up local files.
I figured I’d use HTML for the basic structure – a form for inputting scores, a table to display them, that sort of thing. I sketched it out on a piece of paper first, just to get a visual. Old school, I know, but it helps.
The HTML Structure
The HTML was pretty straightforward. I created a simple form with a couple of input fields: one for the player’s name and another for their score. Then, I added a button to submit the score. Below that, I put in a table with headers for “Player” and “Score”. That’s where the scores would go.
It looked something like this (don’t judge the basic design, okay?):
<form id="scoreForm">
<label for="playerName">Player Name:</label>
<input type="text" id="playerName" name="playerName"><br><br>
<label for="score">Score:</label>
<input type="number" id="score" name="score"><br><br>
<button type="submit">Add Score</button>
</form>
<table id="scoreTable">
<tr>
<th>Player</th>
<th>Score</th>
</tr>
</table>
Making it Do Stuff (JavaScript)
Of course, the HTML just sits there looking pretty. To actually do something, I needed JavaScript. This is where the magic happens, where the scores get added to the table and, hopefully, sorted.
I started by grabbing the form and the table elements using their IDs. Then, I added an event listener to the form, so when the “Add Score” button is clicked, it triggers a function.
Inside that function, I did the following:
- Grabbed the player’s name and score from the input fields.
- Created a new table row (
<tr>). - Created two table data cells (
<td>) – one for the player’s name and one for their score. - Put the name and score into those cells.
- Stuck the cells into the row.
- And finally, added the row to the table.
After a couple rounds of tests, adding some scores. Boom! The scores were showing up in the table, one after another.
Sorting the Scores
The sorting… oh, the sorting. I will get the array of table rows, and sort it based on score. That part took a bit of head-scratching and a few trips to Stack Overflow (don’t tell anyone). But I eventually got it working. The basic idea is to convert the table rows into an array, sort that array based on the score, and then rebuild the table with the sorted rows. It works fine.
So there you have it. My little online scoring experiment. It’s not perfect, not by a long shot. But it’s functional, and it was a fun little project to tinker with. I learned a few things along the way, and that’s what really matters, right?
