Monsters

Frontend exercise project

Requirements

Adding new monsters
Listing of added monsters
Deleting of added monsters one by one
Search by monsters' name in list

Attributes of a monster

One of the four elements: Fire, Earth, Air, Water (string/integer/enum)
Name (string)
Attack power (integer)
Defense power (integer)

Interface requirements

The following have to be displayed on the interface:

project logo (logo.svg)
project title (Monsters)
form to add new monsters
- here we need to be able to choose the element of the monster with a left and right arrow (icons/arrow-left.svg, icons/arrow-right.svg). Between the arrows, display the current element (icons/air.svg, icons/water.svg, icons/earth.svg, icons/fire.svg)
- a text field where one can name the monster
- a number field for giving the monster an attack power, next to it display the attack icon (icons/attack.svg)
- a number field for giving the monster a defense power, next to it display the defense icon (icons/defense.svg)
- a button to add the monster, after pressing the button the monster appears on the list and the form resets to the default empty state.
a list to show all the monsters
a search field to filter by name in said list
inside the list we must see
- the icon of the monster's element (icons/air.svg, icons/water.svg, icons/earth.svg, icons/fire.svg)
- name of the monster
- attack power of the monster and its icon (icons/attack.svg)
- defense power of the monster and its icon (icons/defense.svg)
- a delete icon (icons/trash-can.svg)

Wireframe

Solutions

Have you completed this already and would like to post it here? Open an issue!

[redmaster90](https://github.com/redmaster90: React + Redux

Thanks to Game-icons.net for the awesome icons!