MIST 7571 Battle Royale

In this assignment you are tasked with comple6ng an already exis6ng webpage. This webpage is provided to you as a HTML file and on loading the page looks like the following see image.

You see that there are 2 drop down boxes allowing you to pick superhero's. The goal of this site is to have 2 superheros that have differing stats, skills and powers to baFle against each other and then come up with a winner. On picking a superhero from the leH hand dropdown you see the following see image.

The selec6on of a superhero from the drop down results in an API request that send's informa6on about the super hero stats and an image URL. The URL is used to render the image of the super hero and the stats are displayed below the super hero.

On picking a super hero from the right dropdown, the following is seen see image.

The second superhero informa6on is populated and a FIGHT buFon shows up in the center of the screen between them.

Your assignment is to do the following

• Once a user presses the FIGHT buFon the fight func6on should trigger that does the following
  • Setup 2 random numbers, 1 for each superhero.
  • Mul6ply each of the stats of each superhero with the random number that was setup for them and add the resul6ng values up.
  • Compare the score of superhero's and based on whose overall score is higher highlight their image with a red border as shown below.
  • Change the FIGHT buFon to RESET
  • Associate the clicking of the RESET buFon with the resetEnv func6on
• Once the user presses the RESET buFon, the resetEnv func6on should do the following
  • Go back to the star6ng state of the applica6on
  • This means that you will have to know what the star6ng state of all the different elements were and that requires looking at the HTML and CSS.
  • Hint: You can set the dropdown list to a specific value using the selectedIndex property
  • Hint: You can remove a created div using the .remove() method/func6on
  • Hint: You can hide elements by seXng the style.visibility to hidden.