README.md

@@ -32,7 +32,7 @@ git commit -m "Message de commit"
 Pousser vos modifications vers votre dépôt distant:
 
 ```bash
-git push origin nom_de_votre_branche
+git push origin ks110222
 ```
 
 Créer une merge request:
@@ -45,10 +45,11 @@ Résumé du sujet :
 Vous devrez réaliser un site de e-commerce proposant des voitures.
 
 ## Partie A : Utilisation des prototypes
-**Créer un prototype Extra dans le fichier js/extra.js, contenant les propriétés suivantes :
+Créer un prototype Extra dans le fichier js/extra.js, contenant les propriétés suivantes :
+
+- `name`
+- `price`
 
-name
-price
 Créer un prototype Car dans le fichier js/car.js contenant les propriétés suivantes :
 
 - `image`
@@ -66,19 +67,19 @@ Modifier la fonction `generateCar` pour qu'elle retourne une nouvelle instance d
 ## Partie B : Modification du DOM
 Ajouter au prototype Car :
 
-1. la méthode `generateImage(elt)` qui, sans utiliser innerHTML, va créer une balise img qui aura comme source l'attribut image du prototype et comme alt, attribut make concaténé à model. En plus, ajouter les classes img-fluid, rounded-top et w-100.
+1. la méthode `generateImage(elt)` qui, sans utiliser innerHTML, va créer une balise img qui aura comme source l'attribut image du prototype et comme alt, attribut make concaténé à model. En plus, ajouter la classe `card-img-top` .
 
 1. la méthode `generateExtras(elt)` qui, sans utiliser innerHTML, va créer une balise ul, puis, pour chaque Extra, une balise li qui contiendra le nom concaténé au prix.
 
 Ces 2 méthodes doivent ajouter l'élément créé à celui passé en paramètre.
 
 
-completer la fonction showHideExtra de maniére a : 
+completer la fonction `showHideExtra` de maniére a : 
 1. afficher `+` sur le boutton si les extras sont masqué et `-` sinon
-1. afficher ou masquer la liste des extras en utilisant `car.generateExtras()`
+1. afficher ou masquer la liste des extras en utilisant les fonctions du prototype Car
 
 Département Informatique
-BUT Info 2 - 2022/2023
+BUT Info 2 - 2023/2024
 
 Applications Web
 Khraimeche Salim.
\ No newline at end of file

index.html

@@ -36,10 +36,8 @@
 <script>
 
     function generateCar(image, make, model, description, price, category, year, mileage, extras) {
-        // Créer un tableau d'instances d'Extra à partir des noms d'extras
-
-
-        // Créer une nouvelle instance de Car
+        //Create an array of Extra instances based on Extras names and prices
+        // Create a new Car instance
     }
 
     function showHideExtra(btn,elt,car) {

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 +=  `<div class="col">
-                            <div class="card h-100">
-                                <div id="img-car-${index}"></div>
-                                <div class="card-body">
-                                    <h5 class="card-title">${car.make} ${car.model}</h5>
-                                    <p class="card-text">${car.description}</p>
-                                    <ul class="list-group list-group-flush">
-                                        <li class="list-group-item">Prix: ${car.price} €</li>
-                                        <li class="list-group-item">Année:  ${car.year}</li>
-                                        <li class="list-group-item">Kilométrage: ${car.mileage} </li>
-                                     </ul>
-                                     <button class="float-end btn btn-secondary" id="btn-car-${index}" data-index="${index-1}">-</button>
-                                     <div id="body-car-${index}" class="body-extra"></div>
-                                </div>
-                            </div>
-                        </div>`
+        s +=  `<div class="col">
+                    <div class="card h-100">
+                        <div id="img-car-${index}"></div>
+                        <div class="card-body">
+                            <h5 class="card-title">${car.make} ${car.model}</h5>
+                            <p class="card-text">${car.description}</p>
+                            <ul class="list-group list-group-flush">
+                                <li class="list-group-item">Catégorie: ${car.category} </li>
+                                <li class="list-group-item">Prix: ${car.price} €</li>
+                                <li class="list-group-item">Année:  ${car.year}</li>
+                                <li class="list-group-item">Kilométrage: ${car.mileage} </li>
+                             </ul>
+                             <button class="float-end btn btn-secondary" id="btn-car-${index}" data-index="${index-1}">-</button>
+                             <div id="body-car-${index}" class="body-extra"></div>
+                        </div>
+                    </div>
+                </div>`
     }
 }
-app.innerHTML += '</div>'
+s += '</div>'
 
+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')]) });
 
     }