add task solution

src/scripts/main.js

@@ -354,7 +354,66 @@ const people = [
   },
 ];
 
-// eslint-disable-next-line no-console
-console.log(people); // you can remove it
+for (const el of people) {
+  el.age = el.died - el.born;
+  el.century = Math.ceil(el.died / 100);
+  el.gender = el.sex;
+  delete el.sex;
 
-// write your code here
+  if (el.gender === 'm') {
+    el.gender = 'Male';
+  } else {
+    el.gender = 'Female';
+  }
+}
+
+const table = document.querySelector('.dashboard');
+
+for (const person of people) {
+  const row = document.createElement('tr');
+  const nameCell = document.createElement('td');
+  const genderCell = document.createElement('td');
+  const bornCell = document.createElement('td');
+  const diedCell = document.createElement('td');
+  const ageCell = document.createElement('td');
+  const centuryCell = document.createElement('td');
+
+  nameCell.textContent = person.name;
+  genderCell.textContent = person.gender;
+  bornCell.textContent = person.born;
+  diedCell.textContent = person.died;
+  ageCell.textContent = person.age;
+  centuryCell.textContent = person.century;
+
+  row.append(nameCell);
+  row.append(genderCell);
+  row.append(bornCell);
+  row.append(diedCell);
+  row.append(ageCell);
+  row.append(centuryCell);
+  table.append(row);
+}
+
+// const table = document.querySelector('.dashboard');
+
+// for (const person of people) {
+//   const row = document.createElement('tr');
+
+//   const values = [
+//     person.name,
+//     person.sex === 'm' ? 'Male' : 'Female',
+//     person.born,
+//     person.died,
+//     person.died - person.born,
+//     Math.ceil(person.died / 100),
+//   ];
+
+//   for (const value of values) {
+//     const cell = document.createElement('td');
+
+//     cell.textContent = value;
+//     row.append(cell);
+//   }
+
+//   table.append(row);
+// }

src/styles/main.scss

@@ -1,14 +1,17 @@
 body {
-  background-image: linear-gradient(45deg, #e25644, #7e7cf9);
-  background-attachment: fixed;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
   min-height: 100vh;
+  margin: 0;
   padding: 100px;
+
   font-family: Roboto, sans-serif;
-  margin: 0;
-  box-sizing: border-box;
+
+  background-image: linear-gradient(45deg, #e25644, #7e7cf9);
+  background-attachment: fixed;
 }
 
 table {
@@ -18,23 +21,23 @@ table {
 }
 
 tr {
-  background: #fff;
   color: #808080;
+  background: #fff;
 }
 
 tr:nth-child(2n + 1) {
   background: #f5f5f5;
 }
 
 table tr:first-child {
-  background: #e25644;
   color: #fff;
+  background: #e25644;
 }
 
 td,
 th {
-  text-align: left;
   padding: 18px;
+  text-align: left;
 }
 
 table tr:last-child td:first-child {
@@ -54,7 +57,7 @@ table tr:first-child th:last-child {
 }
 
 tr:not(:first-child):hover {
-  background: #f5f5f5;
-  color: #585858;
   cursor: pointer;
+  color: #585858;
+  background: #f5f5f5;
 }