You're sick of people not knowing about your AMA-ZING high scores, but you also don't want to post your scores to the general public, because let's be real - they're really not that good.
So you decide to create a website where only your friends/frenemies/family can come to boast their latest high scores.
Your task is to create a website where a user can post their latest high score by filling out a form and clicking a submit button. The information they enter into the form should be added to a table of high scores. The form and table should include the following information:
- Name (string)
- Game (string)
- Date the high score was set (date)
- High score (integer)
- Checkbox asking whether the submitter would like to include a randomly-selected trash talking message
You should consider addressing the following possible bugs in your code before submitting your project as complete:
- What happens if the user doesn't fill something out? Which fields are required and which are optional?
- What happens if someone tries to submit a score of 0?
- How will you accept high scores of time-based games instead of points-based games? (High score could equal the longest or shortest time in some games.)
The site should be well-styled, well laid-out, and should be responsive without using Bootstrap's grid system to achieve this. You'll have to use traditional media queries to alter the site's size and layout for smaller screens.
Also remember that we haven't gotten to databases or web storage yet, so none of the data submitted will actually persist between refreshes of the web page.
Passing criteria: Demo to the class
An instructor will pass off your understanding of the following areas based on the presentation you give to the class of your website.
- CSS layout, positioning
- Responsive design, media queries
- JS DOM manipulation
- HTML events
Passing off this project completes Static Websites Level 3 in the Super Transcript.
Extra credit ideas
- Have a way to sort the table by the columns (high score ascending/descending, name, game, date, etc.).
- Use web storage to persist a user's data between refreshes of the page.