Today, I decided to build a simple “scorekeeper” app, but with a political twist. Instead of tracking sports scores, I wanted to track approval ratings for different politicians. I figured it’d be a fun little project to mess around with, and maybe even learn something new along the way.
Getting Started
First, I needed a basic framework. I’m not a pro coder, so I kept it simple. I just used plain old HTML, CSS, and JavaScript. No fancy frameworks or anything like that. I started by creating a basic HTML structure with a heading, some input fields for politician names, and buttons to increase or decrease their “approval ratings.”
It looks something like this:
- HTML: Set up the basic page structure.
- CSS: Added some basic styling, mostly to make it presentable.
- Javascript: It will do the calculations.
Adding the Functionality
This is where the JavaScript came in. I needed to write functions that would:
- Grab the politician’s name from the input field.
- Create a new display area for that politician, showing their name and current approval rating (starting at, say, 50%).
- Add event listeners to the “+” and “-” buttons to increase or decrease the rating.
- Update the display whenever the buttons are clicked.
I started with a simple function to add a new politician. It’s gets the value from the input field, creates some new HTML elements(div and button and so on), and appends them to the main display area.
Then, I added the functions to handle the button clicks. These were pretty straightforward. Basically, get the current rating, add or subtract one, and update the display.I fumbled around with this part for a bit, trying to get the numbers to update * out, I had a tiny typo in my code that was messing everything up. Fixed it and it began to work!
Adding Some Style(Optional)
The basic functionality was there, but it looked ugly. So, I spent a little time playing with the CSS. I’m no design expert, but I added some basic colors, changed the font, and made the buttons look a little nicer.
The End Result
It’s not going to win any awards, but it works! I can add politicians, increase or decrease their approval ratings, and it all updates in real-time. It’s a silly little app, but it was a fun way to practice my very basic coding * took me like around 2-3 hours.
