diff --git a/index.html b/index.html
index be6da78c5e9ec9f23846a724d7820f71b1816897..feed5f1a65b23fa0245a616c965b929c30d144fc 100644
--- a/index.html
+++ b/index.html
@@ -32,16 +32,31 @@
 </div>
 
 <!-- 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
+        let tmpTableau = new Array();
+        extras.forEach(element => {
+            tmpTableau.push(new Extra(element.name,element.price))
+            
+        });
         // Create a new Car instance
+        return new Car(image,make,model,description,price,category,year,mileage,tmpTableau);
     }
 
     function showHideExtra(btn,elt,car) {
-
+        console.log(btn)
+        if (btn.textContent == '-'){
+            btn.textContent='+';
+            car.hideExtras(elt);
+        }
+        else {
+            btn.textContent='-'
+            car.generateExtras(elt)
+        }    
     }
 
 
diff --git a/js/car.js b/js/car.js
new file mode 100644
index 0000000000000000000000000000000000000000..3aa8932131ce0f0412fb3ca673cbd01bef6d9132
--- /dev/null
+++ b/js/car.js
@@ -0,0 +1,33 @@
+function Car(image,make,model,description,price,category,year,mileage,tabExtra)
+{
+	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.tabExtra = tabExtra;
+}
+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');
+	this.tabExtra.forEach(element => {
+		let li = document.createElement('li');
+		li.textContent = element.name + " : " + element.price + " €";
+		ul.appendChild(li);
+	});
+	elt.appendChild(ul);
+	
+}
+Car.prototype.hideExtras = function(elt){
+	elt.innerHTML='';
+}
\ No newline at end of file
diff --git a/js/extra.js b/js/extra.js
new file mode 100644
index 0000000000000000000000000000000000000000..51c633c8658eafe21da673e836cf50aef9321f20
--- /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..ce2a5bd092cc400e4d2368f8b65d377147d110c3 100644
--- a/js/index.js
+++ b/js/index.js
@@ -148,6 +148,7 @@ for (const car of cars) {
             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')]) });
+        
 
     }