From 35406307699441d58e798182af2e38b72ae64a60 Mon Sep 17 00:00:00 2001 From: Atilla Date: Wed, 6 Mar 2024 11:46:11 +0100 Subject: [PATCH] Classe versie 1.0 --- src/index.html | 2 +- src/js/planten.class.js | 61 ++++++++++++++++++++++++++--------------- 2 files changed, 40 insertions(+), 23 deletions(-) diff --git a/src/index.html b/src/index.html index 2f3aef1..f8e7ad1 100644 --- a/src/index.html +++ b/src/index.html @@ -29,7 +29,7 @@
-

Tomaat

+

Tomaat

diff --git a/src/js/planten.class.js b/src/js/planten.class.js index db55ccc..3b7fbe3 100644 --- a/src/js/planten.class.js +++ b/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(); \ No newline at end of file +// 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(); + }); +}) \ No newline at end of file