Classe versie 1.0

src/index.html

@@ -29,7 +29,7 @@
                             <td>
                                 <article>
                                     <img src="images/Icon awesome-apple-alt.png" alt="">
-                                    <h2>Tomaat</h2>
+                                    <h2 class="plant-naam">Tomaat</h2>
                                 </article>
                             </td>
                         </tr>

src/js/planten.class.js

@@ -1,32 +1,49 @@
-dataHardObject = {
-    "id": 1,
-    "plantnaam": "Tomaat",
-    "plantensoort": "Groente",
-    "plantGeteelt": 1
-}
-
-// Nieuwe planten aanmaken in de table
-// function hardcodeData(dataHardObject) 
-// {
-//     dataHardObject => "id"    
-// }
+dataHardObject = [
+    {
+        "id": 1,
+        "plantNaam": "Tomt",
+        "plantensoort": "Groente",
+        "plantGeteelt": 1
+    },
+    {
+        "id": 2,
+        "plantNaam": "Komkommer",
+        "plantensoort": "Groente",
+        "plantGeteelt": 1
+    }
+]
 
 class Plant {
-    constructor(dataHardObject) {
-      this.id = dataHardObject.id;
-      this.plantNaam = dataHardObject.plantNaam;
-      this.plantensoort = dataHardObject.plantensoort;
-      this.plantGeteelt = dataHardObject.plantGeteelt;
+    constructor(dataObject) {
+      this.id = dataObject.id;
+      this.plantNaam = dataObject.plantNaam;
+      this.plantensoort = dataObject.plantensoort;
+      this.plantGeteelt = dataObject.plantGeteelt;
     }
 
-    htmlData(plantNaam) {
+    htmlData() {
         if (this.plantGeteelt) 
         {
-            const titel = document.querySelector(".plant-naam");
-            titel.textContent = this.plantNaam;
+            const titel = document.querySelectorAll(".plant-naam");
+                // titel.forEach(element => {
+                // element.textContent = this.plantNaam;
+                for (let i = 0; i < titel.length; i++) {
+                    const element = titel[i];
+                    element.textContent = this.plantNaam;
+                }
+            // });
         }
     }
 }
 
-const tomaatPlant = new Plant(dataHardObject);
-tomaatPlant.htmlData();
+// document.addEventListener('DOMContentLoaded', (event) => {
+//     const tomaatPlant = new Plant(dataHardObject[0]);
+//     tomaatPlant.htmlData();
+// });
+
+document.addEventListener("DOMContentLoaded", (event) => {
+    dataHardObject.forEach(plantObject => {
+        const plant = new Plant(plantObject);
+        plant.htmlData();
+    });
+})