Spiceworks Celebrity New Hires Modify the included project to match the mockups. Feel free to use the included 3rd party libraries if they are useful to you but please don't add any others.
Task: Create this page
Details: Only needs to work in the latest version of Chrome. Things should line up and look symmetrical but please don't bother measuring. Just estimate heights, widths, padding etc. After adding a new celebrity, page should look like this: Don't worry about persistence or AJAX or anything like that. Cards should occur in the order of addition with newest being at the top-left. Don't worry about form validation, the photo is optional. The hover state for a card should look like this (top-left card): After clicking the X as shown on hover, the card should be removed from the page, and the other cards should fall into place. Photo URL can be to any image on the internet. Don't worry about proportionate scaling, just force it to a square. If no photo is provided, the default image (included) should be shown
Additionally, please answer following:
Q: What would need to be done to make this an actually useful app? A: It depends on what this is used for. If it is used as a kind of directory, the cards should be in alphabetical order. We could also include a search feature if there are a lot of cards and different options to organize the cards (first name vs last name). If this is used as a ranking system, the user should be able to move the cards to reflect the ranking. It would also be handy to have an edit functionality, so if there is an entry mistake, the user won't have to delete the card and repeat the entry.
Q: What did you think of this test? A: This was fun. It was exciting to use Reactjs, which I am learning more and more about everyday. I wish I didn't have to spend so much time on the stylings. CSS grids would have been fun to implement to help cut back on padding/margin adjustments.
Answered by Johee Chung
Steps to run
npm installnpm start- Go to `localhost:8080