Classe versie 1.0

This commit is contained in:
Atilla
2024-03-06 11:46:11 +01:00
parent 152ccd551a
commit 12b1bba6a3
2 changed files with 40 additions and 23 deletions

View File

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

View File

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