From 37533e7dda80c6f7776cf8e4a4f965488512701f Mon Sep 17 00:00:00 2001
From: Florian Janot <jf222060@localhost.localdomain>
Date: Fri, 16 Feb 2024 16:43:03 +0100
Subject: [PATCH] Rendu du DS Machine 1

---
 index.html  | 18 ++++++++++++++++--
 js/car.js   | 34 ++++++++++++++++++++++++++++++++++
 js/extra.js |  4 ++++
 js/index.js |  8 ++++++--
 4 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 js/car.js
 create mode 100644 js/extra.js
diff --git a/index.html b/index.html
index be6da78..f75d6a6 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 <head>
     <title>Page Title</title>
     <!-- Bootstrap CSS Link -->
+    <link href="js/car.js" reel="script">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 </head>
 <body>
@@ -33,15 +34,28 @@
 
 <!-- include prototypes here -->
 
+<script src="js/car.js"></script>
+<script src="js/extra.js"></script>
+
 <script>
 
     function generateCar(image, make, model, description, price, category, year, mileage, extras) {
-        //Create an array of Extra instances based on Extras names and prices
+        // Create an array of Extra instances based on Extras names and prices
+        array = new Array(extras)
+        return new Car(image, make, model, description, price, category, year, mileage, array);
         // Create a new Car instance
     }
 
-    function showHideExtra(btn,elt,car) {
 
+    function showHideExtra(btn,elt,car) {
+        if ( btn.textContent === '+' ) {
+            btn.textContent = '-';
+            car.generateExtras(elt)
+            
+        } else {
+            btn.textContent = '+';
+            elt.textContent = "";
+        }
     }
 
 
diff --git a/js/car.js b/js/car.js
new file mode 100644
index 0000000..4a731d0
--- /dev/null
+++ b/js/car.js
@@ -0,0 +1,34 @@
+function Car(image, make, model, description, price, category, year, mileage, extras) {
+    this.image = image;
+    this.make = make;
+    this.model = model;
+    this.description = description;
+    this.price = price;
+    this.category = category;
+    this.year = year;
+    this.mileage = mileage;
+    this.extras = extras;
+}
+
+Car.prototype.generateImage = function(elt) {
+    let img = document.createElement('img');
+
+    img.setAttribute('src',this.image);
+    img.setAttribute('alt',this.make+this.model);
+    img.classList.add('card-img-top');
+
+    elt.appendChild(img);
+}
+
+Car.prototype.generateExtras = function(elt) {
+    let liste = document.createElement('ul');
+
+    this.extras.forEach(ext => {
+        let element = document.createElement('li');
+        element.textContent = ext.name+""+ext.price;
+        liste.appendChild(element);
+    });
+
+    elt.appendChild(liste);
+}
+
diff --git a/js/extra.js b/js/extra.js
new file mode 100644
index 0000000..d5f7ff9
--- /dev/null
+++ b/js/extra.js
@@ -0,0 +1,4 @@
+function Extra(name, price) {
+    this.name = name;
+    this.price = price;
+}
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 4e1d119..5612a69 100644
--- a/js/index.js
+++ b/js/index.js
@@ -141,11 +141,15 @@ for (const car of cars) {
     {
         index++;
 
-        if(car.generateImage !== undefined)
+        if(car.generateImage !== undefined) {
             car.generateImage(document.getElementById("img-car-"+ index));
+        }
+            
 
-        if(car.generateExtras !== undefined)
+        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

