From 60c643d40c1033190389fe7fc7c6f8e5cac5423e Mon Sep 17 00:00:00 2001 From: salimkhr Date: Fri, 9 Feb 2024 10:15:28 +0100 Subject: [PATCH] Optimize car card rendering process on index.js Changed the car card rendering process from directly appending to innerHTML to using a string variable for concatenation. This change provides performance benefits by limiting direct DOM manipulation. Additionally, a new "category" field has been added to the car card. --- js/index.js | 39 ++++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/js/index.js b/js/index.js index c929caf..4e1d119 100644 --- a/js/index.js +++ b/js/index.js @@ -105,31 +105,35 @@ const cars = [ const app = document.getElementById('app'); let index = 0; +let s = ""; + for (const car of cars) { if(car !== undefined) { index++; - app.innerHTML += `
-
-
-
-
${car.make} ${car.model}
-

${car.description}

-
    -
  • Prix: ${car.price} €
    • -
  • Année: ${car.year}
    • -
  • Kilométrage: ${car.mileage}
    • -
- -
-
-
-
` + s += `
+
+
+
+
${car.make} ${car.model}
+

${car.description}

+
    +
  • Catégorie: ${car.category}
    • +
  • Prix: ${car.price} €
    • +
  • Année: ${car.year}
    • +
  • Kilométrage: ${car.mileage}
    • +
+ +
+
+
+
` } } -app.innerHTML += '' +s += '' +app.innerHTML = s index =0; for (const car of cars) { @@ -142,6 +146,7 @@ for (const car of cars) { if(car.generateExtras !== undefined) car.generateExtras(document.getElementById("body-car-"+ index)); + document.getElementById("btn-car-"+ index).addEventListener('click',(event)=>{ showHideExtra(event.target,event.target.parentElement.querySelector('.body-extra'),cars[event.target.getAttribute('data-index')]) }); } -- GitLab