From ebcd3c261da17db8c3571b60b51f059e98e323ef Mon Sep 17 00:00:00 2001
From: TomGoureau <tom.goureau@gmail.com>
Date: Fri, 16 Feb 2024 16:40:44 +0100
Subject: [PATCH] rendu

---
 index.html  | 15 ++++++++++++---
 js/car.js   | 31 +++++++++++++++++++++++++++++++
 js/extra.js | 15 +++++++++++++++
 js/index.js | 30 +++++++++++++++---------------
 4 files changed, 73 insertions(+), 18 deletions(-)
 create mode 100644 js/car.js
 create mode 100644 js/extra.js

diff --git a/index.html b/index.html
index be6da78..7b77436 100644
--- a/index.html
+++ b/index.html
@@ -32,15 +32,24 @@
 </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
-        // Create a new Car instance
+        return new Car(image, make, model, description, price, category, year, mileage, extras)
     }
 
     function showHideExtra(btn,elt,car) {
+        if(btn.innerText == "-")
+        {
+            btn.setInerText("+");
+        }
+
+        if(btn.innerText == "+")
+        {
+            btn.setInerText("-");
+        }
 
     }
 
diff --git a/js/car.js b/js/car.js
new file mode 100644
index 0000000..34f314a
--- /dev/null
+++ b/js/car.js
@@ -0,0 +1,31 @@
+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(elt)
+{
+	const image = document.createElement("img");
+	image.setAttribute("source", this.image);
+	image.setAttribute("alt", this.make + "" + this.model);
+	elt.appendChild(image);
+}
+
+Car.prototype.generateExtras(elt)
+{
+	const ul = document.createElement("ul");
+	extras.forEach(element => {
+		const elem = document.createElement("li");
+		elem.textContent(element.getName() + "" + element.getPrice)
+		ul.appendChild(elem);
+	});
+	elt.appendChild(ul);
+}
+
diff --git a/js/extra.js b/js/extra.js
new file mode 100644
index 0000000..8bea638
--- /dev/null
+++ b/js/extra.js
@@ -0,0 +1,15 @@
+function Extra(name, price) {
+	this.name = name;
+	this.price = price;
+}
+
+
+Extra.prototype.getName()
+{
+	return this.name;
+}
+
+Extra.prototype.getPrice()
+{
+	return this.price;
+}
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 4e1d119..207e6b3 100644
--- a/js/index.js
+++ b/js/index.js
@@ -3,10 +3,10 @@ const extraList = [
     { name: "Toit ouvrant", price: 1000 },
     { name: "Sièges chauffants", price: 400 },
     { name: "Radar de recul", price: 200 },
-    { name: "Peinture métallisée", price: 600 },
+    { name: "Peinture metallisee", price: 600 },
     { name: "Pack hiver", price: 800 },
-    { name: "GPS intégré", price: 300 },
-    { name: "Caméra de recul", price: 150 },
+    { name: "GPS integre", price: 300 },
+    { name: "Camera de recul", price: 150 },
     { name: "Système d'aide au stationnement", price: 450 },
     { name: "Autopilot", price: 2500 },
     { name: "Peinture premium", price: 1000 },
@@ -17,7 +17,7 @@ const cars = [
         "img/1.jpg",
         "Renault",
         "Clio",
-        "Voiture citadine 5 portes, année 2020",
+        "Voiture citadine 5 portes, annee 2020",
         15000,
         "citadine",
         2020,
@@ -28,7 +28,7 @@ const cars = [
         "img/2.jpg",
         "Peugeot",
         "208",
-        "Voiture citadine 5 portes, année 2021",
+        "Voiture citadine 5 portes, annee 2021",
         16000,
         "citadine",
         2021,
@@ -39,7 +39,7 @@ const cars = [
         "img/3.jpg",
         "Volkswagen",
         "Golf",
-        "Voiture compacte 5 portes, année 2022",
+        "Voiture compacte 5 portes, annee 2022",
         25000,
         "compacte",
         2022,
@@ -50,7 +50,7 @@ const cars = [
         "img/4.jpg",
         "Ford",
         "Focus",
-        "Voiture compacte 5 portes, année 2023",
+        "Voiture compacte 5 portes, annee 2023",
         24000,
         "compacte",
         2023,
@@ -61,7 +61,7 @@ const cars = [
         "img/5.jpg",
         "Citroën",
         "C4",
-        "Voiture compacte 5 portes, année 2020",
+        "Voiture compacte 5 portes, annee 2020",
         22000,
         "compacte",
         2020,
@@ -72,7 +72,7 @@ const cars = [
         "img/6.jpg",
         "Toyota",
         "Yaris",
-        "Voiture hybride 5 portes, année 2021",
+        "Voiture hybride 5 portes, annee 2021",
         28000,
         "hybride",
         2021,
@@ -83,7 +83,7 @@ const cars = [
         "img/7.jpg",
         "Hyundai",
         "Ioniq",
-        "Voiture électrique 5 portes, année 2022",
+        "Voiture electrique 5 portes, annee 2022",
         35000,
         "electrique",
         2022,
@@ -94,7 +94,7 @@ const cars = [
         "img/8.jpg",
         "Tesla",
         "Model 3",
-        "Voiture électrique 4 portes, année 2023",
+        "Voiture electrique 4 portes, annee 2023",
         50000,
         "electrique",
         2023,
@@ -119,10 +119,10 @@ for (const car of cars) {
                             <h5 class="card-title">${car.make} ${car.model}</h5>
                             <p class="card-text">${car.description}</p>
                             <ul class="list-group list-group-flush">
-                                <li class="list-group-item">Catégorie: ${car.category} </li>
-                                <li class="list-group-item">Prix: ${car.price} €</li>
-                                <li class="list-group-item">Année:  ${car.year}</li>
-                                <li class="list-group-item">Kilométrage: ${car.mileage} </li>
+                                <li class="list-group-item">Categorie: ${car.category} </li>
+                                <li class="list-group-item">Prix: ${car.price} euro</li>
+                                <li class="list-group-item">Annee:  ${car.year}</li>
+                                <li class="list-group-item">Kilometrage: ${car.mileage} </li>
                              </ul>
                              <button class="float-end btn btn-secondary" id="btn-car-${index}" data-index="${index-1}">-</button>
                              <div id="body-car-${index}" class="body-extra"></div>
-- 
GitLab