Homework

Battle of the bands

Part 1

Create a web page that shows a list of band names. Add a 'like' button next to each of them. The button doesn't need to do anything yet.

Here's a list to get you started:

let bands = ["The Beatles","Elvis Presley","Michael Jackson","Elton John","Madonna","Led Zeppelin","Rihanna","Pink Floyd","Eminem","Mariah Carey","Taylor Swift","Queen","Whitney Houston","Eagles","Celine Dion","AC/DC","The Rolling Stones","Drake","Garth Brooks","Kanye West","Justin Bieber","Ed Sheeran","Billy Joel","U2","Aerosmith","Barbra Streisand","Phil Collins","ABBA","Katy Perry","Chris Brown","Bruce Springsteen","Bruno Mars","Jay-Z","Metallica","Lady Gaga","Lil Wayne","Maroon 5","Adele","Beyoncé","Fleetwood Mac","Rod Stewart","Bee Gees","Nicki Minaj","Coldplay","Red Hot Chili Peppers","Linkin Park","Britney Spears","Bon Jovi","Pink","B'z","George Strait","Shania Twain","Guns N' Roses","Backstreet Boys","Eric Clapton","Neil Diamond","Prince","Paul McCartney","Kenny Rogers","Santana","Simon & Garfunkel","Janet Jackson","Julio Iglesias","Dire Straits","The Doors","Chicago","Bob Dylan","Cher","Def Leppard","Genesis","David Bowie","Stevie Wonder","James Taylor","Tina Turner","Olivia Newton-John","Linda Ronstadt","The Beach Boys","Donna Summer","Alicia Keys","The Carpenters","Earth, Wind & Fire","Lionel Richie","Johnny Cash","Justin Timberlake","Ariana Grande","R.E.M.","Post Malone","Flo Rida","Tim McGraw","Van Halen","Journey","Ayumi Hamasaki","George Michael","Foreigner","Meat Loaf","Tom Petty","Johnny Hallyday","The Weeknd","Imagine Dragons","Luke Bryan","Christina Aguilera","Shakira","Tupac Shakur","R. Kelly","Bob Seger","Nirvana","Kenny G","Enya","Bryan Adams","Bob Marley","The Police","Barry Manilow","Kiss","Aretha Franklin"];

Part 2

Create a liked bands list which has true or false for each band based on whether you like the band or not.

If a band is liked (has a true entry in the liked bands list) make the 'like' button appear as an 'unlike' button.

Make the 'like'/'unlike' buttons change the appropriate item in the liked bands list to false/true on click.

Part 3

At the top of the page:

• add a button which shows only liked bands

• add a button which shows all of the bands

Extensions

• Add a while loop that prompts the user to enter a band and stops when there are no bands

  • You might want to start with an empty list of bands

• Make a button which filters by genre

  • You'll need to create a list which has the genre for each band in the same order as the bands list(just assume each only has 1 genre for now)

  • You can use indexOf to figure out where the genre is for a particular band

• Allow users to add their own choice of band

• Show the list of liked bands and allow users to change the position of each band.

  • Add an 'up' and 'down' button for each band in the user's favourite list.

• Be creative!