diff --git a/index.html b/index.html
index be6da78c5e9ec9f23846a724d7820f71b1816897..f0a0ce22796a621a20ba74907189d2a28a942448 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <title>Page Title</title>
+    <title>tp js</title>
     <!-- Bootstrap CSS Link -->
+    <script src="js/extra.js"></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>
@@ -36,15 +37,31 @@
 <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 a new Car instance
+        const tuture =  new Car(image, make, model, description, price, category, year, mileage,extras);
+        return tuture;
     }
 
     function showHideExtra(btn,elt,car) {
 
+        
+        if (btn.innerHTML== "-")
+        {
+            btn.innerHTML = "+";
+            elt.innerHTML = "";
+        }
+        else
+        {
+            btn.innerHTML = "-";
+            car.generateExtras(elt);
+
+        }
+
+
     }
 
 
+
+
 </script>
 
 <!-- Do not change -->
diff --git a/js/extra.js b/js/extra.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c386d8d33a1020078665c70942e2f111f1ee1b3
--- /dev/null
+++ b/js/extra.js
@@ -0,0 +1,36 @@
+
+function Extra(name, price) {
+    this.name = name;
+    this.price = price;
+}
+
+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.src = this.image;
+    img.alt = this.make + " " + this.model;
+    img.classList.add("card-img-top");
+    elt.appendChild(img);
+}
+
+Car.prototype.generateExtras = function(elt) {
+    let ul = document.createElement("ul");
+    for (const extra of this.extras) {
+        let li = document.createElement("li");
+        li.textContent = extra.name+ "-" + extra.price;
+        ul.appendChild(li);
+    }
+    elt.appendChild(ul);
+}
\ No newline at end of file
