diff --git a/index.html b/index.html
index be6da78c5e9ec9f23846a724d7820f71b1816897..f75d6a64028d80417def3c54682ec7164c15dec0 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 0000000000000000000000000000000000000000..4a731d0b74bdbb469e9f1ac85ca3b1dee0888de5
--- /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 0000000000000000000000000000000000000000..d5f7ff9bd055aaff03a975e7372fe578b0c8ea21
--- /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 4e1d11911c0a43dddf4d16bc89f1d2d5005e1fb2..5612a69e5d3218636ca8d4852d714b9b02f07bfc 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')]) });
 
