06 - 03 - Score one for the home team

[aksnell]

For this assignment, you are creating a simple interactive scoreboard for your favorite sport.

Requirements

• Refer to this mockup to design your page:

• A user should be able to update a score and the teams playing.
• Use these HTML and CSS files as starting content:
  • HTML
  • CSS

Explorer Mode

Part 1:

• [x] Create a new project using the beta stack and implement the design using the given HTML & CSS.
• [x] Update the CSS to improve the styling based on your own design and tastes.
• [x] Avoid updating the HTML too much, try to use existing elements and classes. However, do add new classes or elements for your design or your JavaScript if needed.
• [x] Assign an event to the input fields to automatically change the team's name as the user types.
• [x] Assign click events to the buttons to update the corresponding values on the page. The score buttons should adjust the current score by a "hard-coded" value.
• [x] Deploy your site.

Part 2:

• [x] Add an if statement to stop each team's score from going below 0.
• [x] Add an if statement to stop each team's score from going above 21
• [x] When a team gets 21 points, display a message to the user of who won
• [x] Add a reset button that resets the scoreboard back to each team having 0 points

Adventure Mode

• [ ] Add more CSS to the winning teams score to indicate who won.
• [ ] Implement a Quarter/Period Tracker that would be appropriate for the sport.
• [ ] Add some styling to make it more presentable. Have fun with it.
• [ ] Make the layout responsive.

Epic Mode

• [ ] Add a Timer that counts down automatically and updates the period/quarter appropriately.
• [ ] Save/load the information to local storage.
• [ ] Add anything else that your sport would have on its scoreboard (e.g., fouls, sacks, shots on goal).
• [ ] Improve the ease of use for score keeping in your sport.

[aksnell]

https://github.com/aksnell/score-board.git https://epic-morse-6a98ec.netlify.app/

[aksnell]

Your homework 06 - 03 - Score one for the home team was marked: Meets Expectations

“Well done!”

[gstark]

Nicely done, except when a team wins the user interface shifts for some reason. See if you can figure out why and resolve it.