diff --git a/index.html b/index.html
index be6da78c5e9ec9f23846a724d7820f71b1816897..f565b7537210c607169fd337e6f1e028a2704a8e 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <title>Page Title</title>
+    <title>Voitures</title>
     <!-- Bootstrap CSS Link -->
     <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>
@@ -32,17 +32,32 @@
 </div>
 
 <!-- include prototypes here -->
+<script src="js/extra.js"></script>
+<script src="js/car.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 a new Car instance
-    }
+	function generateCar(image, make, model, description, price, category, year, mileage, extras) {
+		extrasBon = [];
+		for (const extra of extras) {
+			extrasBon.push(new Extra(extra[0], extra[1]));
+		}
+		// Create a new Car instance
+		return new Car(image, make, model, description, price, category, year, mileage, extrasBon);
+	}
 
-    function showHideExtra(btn,elt,car) {
-
-    }
+	function showHideExtra(car, elt, buttonText) {
+		var ulElement = elt.querySelector('ul');
+		if (!ulElement) {
+			// Si la liste d'extras n'existe pas, la générer
+			car.generateExtras(elt);
+			buttonText.textContent = '-';
+		} else {
+			// Si la liste d'extras existe déjà, la supprimer
+			elt.removeChild(ulElement);
+			buttonText.textContent = '+';
+		}
+	}
 
 
 </script>
diff --git a/js/car.js b/js/car.js
new file mode 100644
index 0000000000000000000000000000000000000000..8fd2c883c0797ff882fca04c9a2c50409bc52753
--- /dev/null
+++ b/js/car.js
@@ -0,0 +1,36 @@
+// Définition du prototype Car
+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) {
+	var imgElement = document.createElement('img');
+	imgElement.src = this.image;
+	imgElement.alt = this.make + " " + this.model;
+	imgElement.classList.add('card-img-top');
+
+	elt.appendChild(imgElement);
+}
+
+Car.prototype.generateExtras = function(elt) {
+	var ulElement = document.createElement('ul');
+
+	this.extras.forEach(function(extra) {
+	  var liElement = document.createElement('li');
+	  var extraText = extra.name + ' - ' + extra.price;
+	  var textNode = document.createTextNode(extraText);
+	  liElement.appendChild(textNode);
+	  ulElement.appendChild(liElement);
+	});
+  
+	elt.appendChild(ulElement);
+}
+
diff --git a/js/extra.js b/js/extra.js
new file mode 100644
index 0000000000000000000000000000000000000000..b78279a95a6251091cefff8dc48620328e1bf5ee
--- /dev/null
+++ b/js/extra.js
@@ -0,0 +1,5 @@
+// Définition du prototype Extra
+function Extra(name, price) {
+	this.name = name;
+	this.price = price;
+	}
\ No newline at end of file
