Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
1. Replace `<your_account>` with your Github username in the link
- [DEMO LINK](https://<your_account>.github.io/js_task_generate_table_DOM/)
- [DEMO LINK](https://timurradkevic.github.io/js_task_generate_table_DOM/)
2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/)
- Run `npm run test` command to test your code;
- Run `npm run test:only -- -n` to run fast test ignoring linter;
Expand All @@ -14,12 +14,12 @@ Okay, now we know what is a table, and can do some magic.
In `main.js`, you already have imported file `people.json`. Variable `people` contains an array of people, you can check it by using `console.log`.
Your task today is to convert this array to table rows.

Your layout for start:
Your layout for start:

![Preview](./src/images/preview.png)

From the preview, you can see that table has 6 headers, but our data does not contain age and century. Yes, you need to calculate them by yourself.

##### Steps to do this challenge:
1) For each person from `people` array create table row with 6 table cells (name, gender, born, died, age, century)
2) Find a table with class `dashboard` in the document.
Expand Down
29 changes: 28 additions & 1 deletion src/scripts/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -357,4 +357,31 @@ const people = [
// eslint-disable-next-line no-console
console.log(people); // you can remove it

// write your code here
const table = document.querySelector('.dashboard');

for (const person of people) {
const tr = document.createElement('tr');
const tdName = document.createElement('td');
const tdGender = document.createElement('td');
const tdBorn = document.createElement('td');
const tdDied = document.createElement('td');
const tdAge = document.createElement('td');
const tdCentury = document.createElement('td');

tdName.textContent = person.name;
tdGender.textContent = person.sex;

// if (person.sex === 'm') {
// tdGender.textContent = 'Male';
// } else {
// tdGender.textContent = 'Female';
// }

tdBorn.textContent = person.born;
tdDied.textContent = person.died;
tdAge.textContent = person.died - person.born;
tdCentury.textContent = Math.ceil(person.died / 100);

tr.append(tdName, tdGender, tdBorn, tdDied, tdAge, tdCentury);
table.append(tr);
}
Loading