diff --git a/index.html b/index.html
index be6da78c5e9ec9f23846a724d7820f71b1816897..9d4cd4376ba5563267db7f0878d4bca45d720e49 100644
--- a/index.html
+++ b/index.html
@@ -32,15 +32,25 @@
 </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
+        const extraInstances = extras.map(extra => new Extra(extra.name, extra.price));
+        return new Car(image, make, model, description, price, category, year, mileage, extraInstances);
     }
 
-    function showHideExtra(btn,elt,car) {
+    function showHideExtra(btn,element,car) {
+        if (element.style.display === "none") {
+            element.style.display = "block";
+            btn.innerHTML = "-";
+        } else {
+            element.style.display = "none";
+            btn.innerHTML = "+";
+        }
 
     }
 
diff --git a/js/car.js b/js/car.js
new file mode 100644
index 0000000000000000000000000000000000000000..22ed5627a4df674fdd278db3765c2694241a5520
--- /dev/null
+++ b/js/car.js
@@ -0,0 +1,29 @@
+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 (element) {
+    const img = document.createElement('img');
+    img.src = this.image;
+    img.alt = this.make + " " + this.model;
+    img.className = "card-img-top";
+    element.appendChild(img);
+}
+
+Car.prototype.generateExtras = function (element) {
+    const ul = document.createElement('ul');
+    for (const extra of this.extras) {
+        const li = document.createElement('li');
+        li.textContent = extra.name + " " + extra.price + " €";
+        ul.appendChild(li);
+    }
+    element.appendChild(ul);
+}
diff --git a/js/extra.js b/js/extra.js
new file mode 100644
index 0000000000000000000000000000000000000000..811daa50fecf828fa83bdf75e9adee641293ceb3
--- /dev/null
+++ b/js/extra.js
@@ -0,0 +1,4 @@
+function Extra(name, price) {
+    this.name = name;
+    this.price = price;
+}