What's the single worse feeling in the world? Answer: When disaster strikes, and you need to call a superhero, but you've forgot their phone number.
That's why you're going to build a Superhero Phone Book!
Your app will display a list of superheroes and their phone numbers in the browser. The user should be able to search that list and color-code the list by the hero's comics affiliation (e.g., DC, Marvel). You'll also want to add a button next to each superhero that, when clicked, causes the hero's image to be displayed on the page.
Fork and clone this repository. You will be working in the provided three files: index.html
, app.js
and style.css
.
To complete this assignment, you'll need to complete the following steps...
- Bootstrap your angular application (i.e., create a module, use
ng-app
) - Create a controller
- Attach a controller to your view
- Define a collection of superheroes in your controller. Each superhero should have a name, phone number, comics affiliation and image URL.
- Use
ng-repeat
to render the list of superheroes - Create a search form. Use
ng-model
to bind that form's input to a value in the view model. - Use
filter
to limit the number of superheroes shown in the browser based on user input - Use
ng-class
to add a class to each superhero in the list indicating their comics affiliation (e.g.,ng-class="marvel"
). Use that class to color code the list depending on their affiliation (e.g., all Marvel heroes should appear as blue). - Add a button next to each superhero. When clicked, their image will appear at the top of the page.
- Create a form that allows the user to add a superhero to the list.
- Create another form that allows you to edit a superhero in the list. This form should only appear when the user clicks an "Edit Hero" button.