add solution

README.md

@@ -1,32 +1,35 @@
 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://ikseloi.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;
-    - Run `npm run test:only -- -l` to run fast test with additional info in console ignoring linter.
+   - Run `npm run test` command to test your code;
+   - Run `npm run test:only -- -n` to run fast test ignoring linter;
+   - Run `npm run test:only -- -l` to run fast test with additional info in console ignoring linter.
 
 ### Task: Generate dashboard from JSON
 
 This task requires knowledge of how HTML table works. You can learn it here:
- - [MDN HTML table basics](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics)
+
+- [MDN HTML table basics](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics)
 
 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.
-3) Append created row to table.
-4) Done.
+
+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.
+3. Append created row to table.
+4. Done.
 
 Hints:
+
 - Age is `person.died - person.born`
 - Century:divide year of person's death by 100 `Math.ceil(person.died / 100)`
 

src/scripts/main.js

@@ -355,6 +355,92 @@ const people = [
 ];
 
 // eslint-disable-next-line no-console
-console.log(people); // you can remove it
+console.log(people);
 
-// write your code here
+const dashboardTableEl = document.querySelector('table.dashboard');
+const container = dashboardTableEl.querySelector('tbody') || dashboardTableEl;
+
+const schema = ['name', 'gender', 'born', 'died', 'age', 'century'];
+
+const map = { m: 'Male', f: 'Female' };
+const normalizeGender = (value) => {
+  const key = String(value || '')
+    .trim()
+    .toLowerCase();
+
+  return map[key] || 'Unknown';
+};
+
+const TableRowBuilder = function () {
+  this.tableRow = document.createElement('tr');
+};
+
+TableRowBuilder.SCHEMA = schema;
+
+TableRowBuilder.build = function (person) {
+  return new TableRowBuilder().addRowData(person).tr;
+};
+
+TableRowBuilder.prototype = {
+  constructor: TableRowBuilder,
+
+  addRowData: function (data) {
+    const rowData = this.getRowData(data);
+
+    const frag = document.createDocumentFragment();
+
+    TableRowBuilder.SCHEMA.forEach((column) => {
+      frag.appendChild(this.createCell(rowData[column]));
+    });
+
+    this.tableRow.appendChild(frag);
+
+    return this;
+  },
+
+  getRowData: function (data) {
+    const { name: personName, sex, died, born } = data;
+
+    return {
+      name: personName,
+      gender: normalizeGender(sex),
+      born,
+      died,
+      age: died - born,
+      century: Math.ceil(died / 100),
+    };
+  },
+
+  createCell: function (item) {
+    const td = document.createElement('td');
+
+    td.textContent = item ?? '';
+
+    return td;
+  },
+};
+
+Object.defineProperty(TableRowBuilder.prototype, 'tr', {
+  get: function () {
+    return this.tableRow;
+  },
+
+  enumerable: false,
+  configurable: true,
+});
+
+(() => {
+  if (!dashboardTableEl) {
+    // eslint-disable-next-line no-console
+    console.error('Table not found');
+
+    return;
+  }
+
+  const frag = document.createDocumentFragment();
+
+  people.forEach((person) => {
+    frag.appendChild(TableRowBuilder.build(person));
+  });
+  container.appendChild(frag);
+})();