diff --git a/index.html b/index.html
index be6da78c5e9ec9f23846a724d7820f71b1816897..1b079f0e78c051bbcf05a2d94fff4ab83d9edd87 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <title>Page Title</title>
+    <title>Auto Shop</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>
 <body>
 <!-- Menu -->
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <a class="navbar-brand" href="#">Navbar</a>
+    <a class="navbar-brand" href="#">AutoShop</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
@@ -16,7 +16,7 @@
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                <a class="nav-link" href="#">Home</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" href="#">Link</a>
@@ -32,16 +32,39 @@
 </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
+        var tabExtras = [];
+        for (var i = 0; i < extras.length; i++) {
+            tabExtras.push(new Extra(extras[i].name, extras[i].price));
+        }
+
         // Create a new Car instance
+        return new Car(image, make, model, description, price, category, year, mileage, tabExtras);
     }
 
     function showHideExtra(btn,elt,car) {
 
+        //Si le bouton est - (donc que les extras sont montrés)
+        if (btn.innerText == "-")
+        {
+            //On change l'apparence du bouton + on supprime les extras
+            btn.innerText = "+";
+            elt.innerText = "";
+        }
+        else //sinon
+        {
+            //On change l'apparence du bouton + on affiche les extras
+            btn.innerText = "-";
+            car.generateExtras(elt);
+
+        }
+
     }
 
 
diff --git a/js/car.js b/js/car.js
new file mode 100644
index 0000000000000000000000000000000000000000..7f0e570dde36044e3ea49dd7fee56201a5d2e701
--- /dev/null
+++ b/js/car.js
@@ -0,0 +1,49 @@
+//Classe 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) 
+{
+	//On crée un élement
+	var img = document.createElement("img");
+
+	//On met les attributs
+	img.setAttribute("src", this.image);
+	img.setAttribute("alt", this.make + this.model);
+	img.setAttribute("alt", this.make + this.model);
+	img.setAttribute("class", "card-img-top");
+
+	//On l'ajoute à l'élément donné
+	elt.appendChild(img);
+}
+
+Car.prototype.generateExtras  = function (elt) 
+{
+	//On crée la liste
+	var ul = document.createElement("ul");
+
+	//Pour chaque extras...
+	for (var i = 0; i < this.extras.length; i++) {
+		//On crée un éléments de liste
+        var li = document.createElement("li");
+
+		//On met le texte correspondant
+		li.innerText = this.extras[i].name + " (" + this.extras[i].price + "€)";
+
+		//On l'ajoute à la liste
+		ul.appendChild(li);
+    }
+
+	//On ajoute la liste à l'éléments donnée
+	elt.appendChild(ul);
+}
\ No newline at end of file
diff --git a/js/extra.js b/js/extra.js
new file mode 100644
index 0000000000000000000000000000000000000000..aa60010cf6ad72d91ec4247a7754c84e60ce43d6
--- /dev/null
+++ b/js/extra.js
@@ -0,0 +1,6 @@
+//Classe Extra
+
+function Extra(name, price) {
+	this.name  = name;
+	this.price = price;
+}
\ No newline at end of file
