05 + HTML tasks

05/script.js

@@ -19,7 +19,7 @@
 
 let a = {
     name: "Victor",
-    surname: "Basharov",
+    surname: "Petrov",
     age: 35
 }
 
@@ -57,18 +57,146 @@ let c = {
 
 // ------------------------------array of persons----------------------------------------------
 
-let persons = [ a, b, c];
+let persons = [a, b, c];
 
-let car = {
-    factory: "Ford", 
-    model: "GT", 
-    model: "40"
+let newPerson = {
+    name: "Alex",
+    surname: "Man",
+    isSportsman: true
 };
 
-persons[3] = car;
+persons[3] = newPerson;
 
 // ------------------------------loop of persons----------------------------------------------
 
-for(let i of persons) {
-    console.log(persons[i])
-}
+// for(let i in persons) {
+//     console.log(persons[i])
+// }
+
+// ------------------------------loop of name and surname----------------------------------------------
+
+// for(let i=0; i<persons.length; i++) {
+//     for(let key in persons[i]) {
+//         if(key === "name" || key === "surname") {
+//             console.log(persons[i][key]);
+//         }
+//     }
+// }
+
+// ------------------------------loop of loop of values----------------------------------------------
+
+// for(let i=0; i<persons.length; i++) {
+//         for(let key in persons[i]) {
+//                 console.log(persons[i][key]);
+//         }
+//     }
+
+// ------------------------------fullName----------------------------------------------
+
+// for (let i = 0; i < persons.length; i++) {
+//     persons[i].fullName = `${persons[i].name} ${persons[i].surname}` + (persons[i].fathername && (' ' + persons[i].fathername) || '');
+// }
+
+// for (let i in persons) {
+//     console.log(persons[i].fullName)
+// }
+
+// ------------------------------serialize----------------------------------------------
+
+// let jsonPersons = JSON.stringify(persons);
+
+// console.log(jsonPersons);
+
+// ------------------------------deserialize----------------------------------------------
+
+// let jsonString = JSON.parse(persons)
+
+
+let jsonObject = JSON.parse(`{"name":"John","surname":"Doe","fathername":"Nathan"}`);
+
+persons[4] = jsonObject;
+
+console.log(persons);
+
+// ------------------------------HTML----------------------------------------------
+
+let str = "<table border='1'>";
+for (let i = 0; i < persons.length; i++) {
+    str += `<tr> <td>${i+1}</td>`;
+    for (let key in persons[i]) {
+        str += `<td>${persons[i][key]}</td>`;
+    }
+}
+str += "</table>"
+
+console.log(str);
+document.write(str);
+
+// ------------------------------HTML optional fields----------------------------------------------
+
+let str2 = "<table border='1'>";
+
+str2 += "<tr> <th>#</th> <th>Name</th> <th>Surname</th> <th>Aditional field</th> </tr>";
+// str += `<th>#</th>`;
+// str += `<th>Name</th>`;
+// str += `<th>Surname</th>`;
+// str += `<th>Aditional field</th>`;
+// str += `</tr>`;
+
+for (let i = 0; i < persons.length; i++) {
+    str2 += `<tr> <td>${i+1}</td>`;                   // как оно работает без </tr>  ???
+    for (let key in persons[i]) {
+        str2 += `<td>${persons[i][key]}</td>`;
+    }
+}
+str2 += "</table>"
+
+console.log(str2);
+document.write(str2);
+
+// ------------------------------HTML tr color----------------------------------------------
+
+let str3 = "<table border='1'>";
+
+str3 += "<tr> <th>#</th> <th>Name</th> <th>Surname</th> <th>Aditional field</th> </tr>";
+
+for (let i = 0; i < persons.length; i++) { 
+    if(i % 2) {
+        str3 += `<tr style = "background: yellow"><td>${i+1}</td>`;
+    } else {
+        str3 += `<tr> <td>${i+1}</td>`;  
+    }                
+    for (let key in persons[i]) {
+        str3 += `<td>${persons[i][key]}</td>`;
+    }
+}
+str3 += "</table>"
+
+console.log(str3);
+document.write(str3);
+
+// ------------------------------HTML th optional----------------------------------------------
+
+let str4 = "<table border='1'>";
+
+str4 += "<tr>";
+
+for (let i = 0; i < persons.length; i++) {
+    str4 += `<th>${i+1}</th>`;
+}
+str4 += "</tr>";
+
+for (let i = 0; i < persons.length; i++) { 
+    if(i % 2) {
+        str4 += `<tr style = "background: yellow"><td>${i+1}</td>`;
+    } else {
+        str4 += `<tr> <td>${i+1}</td>`;  
+    }                
+    for (let key in persons[i]) {
+        str4 += `<td>${persons[i][key]}</td>`;
+    }
+}
+str4 += "</table>"
+
+console.log(str4);
+document.write(str4);