Expand on the original exercise for the laughter competition (https://repl.it/@MatiasForbord/CodeCombat-challenge) by displaying it as a simple website. It should display one student on the left, one student on the right, and a "compete" button in the middle.
- Using Vue (or another front end framework if you prefer), make a small website with some styling of your choice.
- Show 1 student on the left, and 1 student on the right. Display their name, HP and DPS as input elements.
- In the middle, display a "Compete" button to run the competition.
- In the middle, display the winner of the competition after pressing the "Compete" button.
- When the page loads, fetch the data from /users on https://jsonplaceholder.typicode.com
- Use a random name from the API for each student
- Use random HP and DPS for each student
Bonus points:
- Add some fun visuals to celebrate the winner
- Store the names from the API locally
- Add a "Randomize" button under each student. Clicking it replaces name, HP and DPS with random values
- Add a random picture for each student, for example from https://thecatapi.com
- Use git to track your progress with regular commits
- Host the site, for example on https://www.netlify.com
Please send the code here via email.
Best of luck, and have fun! :)