Add link here: [DEMO LINK](https://<your_account>.github.io/<repo_name>/)
-
Load
people
from API whenApp
component was initially rendered and show a header displaying number of people -
Implement
PeopleTable
component accepting an array of people as a param. It should show these columns:id
(position in the original array starting from 1)name
sex
born
died
mother
father
<PeopleTable people={people} />
<table className="PeopleTable"> <thead>...</thead> <tbody>...</tbody> </table>
- add
border-collapse: collapse
style to the table
-
Implement
Person
component accepting aperson
and displaying all the data described above<tr class="person"> <td></td> ... <td></td> </tr>
- add class
person--male
/person--female
based onsex
- add
lightpink
background to all women - use
text-decoration: line-through
for the names of people born before1650
- use
bold
text for the names of the people died after1800
- add class
-
Add
age
column (person.died - person.born
)- add
green
border to all the rows of people lived for> 65
years
- add
-
add
century
column (Math.ceil(person.died / 100)
)- add class
person--lived-in-${century}
to each<tr>
- add class
-
Add
children
column with a comma separated list of names- add class
person--mother
/person--father
based onchildren
- add
cornflowerblue
background to all fathers
- add class
-
Add an
<input>
to filter the table byname
,mother
andfather
-
add sorting by
name
-
add sorting by
id
,age
,born
,died
-
Mark a person row as selected when user click on it (
border: 3px solid blue
)- there can be only one selected person at a time
-
Create a
NewPerson
component with a form to add new people to the table- all the fields are required
sex
should be chosen among 2 options (radio buttons)- all the above rules should be applied to added people
-
(* OPTIONAL) Add data validations:
died - born
should be >= 0 and < 150name
should allow to enter only letters and spaces- implement
<select>
formother
andfather
it should display only people of appropriate sex born before the person (so the select should be empty before the born year was entered)
- Fork the repository with task
- Clone forked repository
git clone git@github.com:<user_name>/<task_repository>.git
- Run
npm install
to install dependencies. - Then develop
- Run
npm start
to start development server onhttp://localhost:3000
When you run server the command line window will no longer be available for writing commands until you stop server (ctrl + c
). All other commands you need to run in new command line window. - Follow HTML, CSS styleguide
- Follow the simplified JS styleguide
- run
npm run lint
to check code style - When you finished add correct
homepage
topackage.json
and runnpm run deploy
- Add links to your demo in readme.md.
[DEMO LINK](https://<your_account>.github.io/<repo_name>/)
- this will be a link to your index.html
- Commit and push all recent changes.
- Create
Pull Request
from forked repo(<branch_name>)
to original repo (master
). - Add a link at
PR
to Google Spreadsheets.
src/
- directory for css, js, image, fonts filesbuild/
- directory for built pages
You should be writing code in src/
directory.