tasks till 'HTML th optional' included are done

hw5/script.js

@@ -30,9 +30,9 @@ function fieldCheck(obj, string) {
         alert(obj[string])
     }
 }
-console.log(fieldCheck(a, 'age'))
-console.log(fieldCheck(b, 'awoken'))
-console.log(fieldCheck(c, 'movies'))
+// console.log(fieldCheck(a, 'age'))
+// console.log(fieldCheck(b, 'awoken'))
+// console.log(fieldCheck(c, 'movies'))
 
 //array of persons
 let persons = []
@@ -85,16 +85,30 @@ for (let i = 0; i < persons.length; i++) {
     str += `<tr><td>${persons[i].Name}</td><td>${persons[i].surname}</td></tr>`
 }
 str += "</table>"
-
-console.log(str)
 document.write(str)
 
 //Html optional fields
 let htmlOptional = '<h2>HTML optional fields</h2><table border="1">'
-for(let i = 0; i < persons.length; i++) {
-    htmlOptional += '<tr>'
+let tableHeaders = Object.keys(persons[0])
+
+htmlOptional += '<tr style="background-color: black; color: white;">'
+for(let i = 0; i < tableHeaders.length; i++) {
     for(let j in persons[i]) {
-        htmlOptional += `<td>${persons[i][j]}</td>`
+        if(!tableHeaders.includes(j)) {
+            tableHeaders.push(j)
+        }
+    }
+    htmlOptional += `<th>${tableHeaders[i]}</th>`
+}
+htmlOptional += '</tr>'
+
+for(let i = 0; i < persons.length; i++) {
+    //HTML tr color
+    htmlOptional += i % 2 === 0? '<tr style="background-color: firebrick; color: white">' : '<tr>'
+    //HTML th optional
+    for(let cols = 0; cols < tableHeaders.length; cols++) {
+            htmlOptional += persons[i][tableHeaders[cols]]? `<td style="text-align:center">${persons[i][tableHeaders[cols]]}</td>` :
+                                                            `<td style="text-align:center; color: black;">X</td>`
     }
     htmlOptional += '</tr>'
 }