From 5c1002309ff5a841d81b7979578f4ad29cfd641e Mon Sep 17 00:00:00 2001 From: Eleonore Bouloche Date: Fri, 16 Feb 2024 16:42:13 +0100 Subject: [PATCH] Controle --- index.html | 61 ++++++------ js/car.js | 43 +++++++++ js/extra.js | 4 + js/index.js | 260 ++++++++++++++++++++++++++-------------------------- 4 files changed, 212 insertions(+), 156 deletions(-) create mode 100644 js/car.js create mode 100644 js/extra.js diff --git a/index.html b/index.html index be6da78..b84e967 100644 --- a/index.html +++ b/index.html @@ -1,48 +1,55 @@ - Page Title - - + Page Title + +
- -
-
+ +
+
+ + diff --git a/js/car.js b/js/car.js new file mode 100644 index 0000000..f7eea91 --- /dev/null +++ b/js/car.js @@ -0,0 +1,43 @@ +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 ) { + const image = document.createElement("img"); + elt.appendChild( image ); + + image.src = this.image; + image.alt = this.make + " " + this.model; + + image.class = "card-img-top"; +} + + + + +Car.prototype.generateExtras = function ( elt ) { + const ul = document.createElement("ul"); + let li; + + elt.appendChild( ul ); + + + this.extras.forEach (function(e) { + li = document.createElement("li"); + ul.appendChild( li ); + + li.innerText = e.name + " : " + e.price + "€"; + }) + +} \ No newline at end of file diff --git a/js/extra.js b/js/extra.js new file mode 100644 index 0000000..59a35f2 --- /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 4e1d119..874a860 100644 --- a/js/index.js +++ b/js/index.js @@ -1,106 +1,106 @@ const extraList = [ - { name: "Jantes alliage", price: 500 }, - { 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: "Pack hiver", price: 800 }, - { name: "GPS intégré", price: 300 }, - { name: "Caméra de recul", price: 150 }, - { name: "Système d'aide au stationnement", price: 450 }, - { name: "Autopilot", price: 2500 }, - { name: "Peinture premium", price: 1000 }, + { name: "Jantes alliage", price: 500 }, + { 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: "Pack hiver", price: 800 }, + { name: "GPS intégré", price: 300 }, + { name: "Caméra de recul", price: 150 }, + { name: "Système d'aide au stationnement", price: 450 }, + { name: "Autopilot", price: 2500 }, + { name: "Peinture premium", price: 1000 }, ]; const cars = [ - generateCar( - "img/1.jpg", - "Renault", - "Clio", - "Voiture citadine 5 portes, année 2020", - 15000, - "citadine", - 2020, - 10000, - [extraList[0],extraList[3],extraList[4],extraList[6],extraList[8],extraList[9]] - ), - generateCar( - "img/2.jpg", - "Peugeot", - "208", - "Voiture citadine 5 portes, année 2021", - 16000, - "citadine", - 2021, - 5000, - [extraList[2],extraList[3]] - ), - generateCar( - "img/3.jpg", - "Volkswagen", - "Golf", - "Voiture compacte 5 portes, année 2022", - 25000, - "compacte", - 2022, - 1000, - [extraList[4],extraList[5]] - ), - generateCar( - "img/4.jpg", - "Ford", - "Focus", - "Voiture compacte 5 portes, année 2023", - 24000, - "compacte", - 2023, - 8000, - [extraList[0],extraList[1]] - ), - generateCar( - "img/5.jpg", - "Citroën", - "C4", - "Voiture compacte 5 portes, année 2020", - 22000, - "compacte", - 2020, - 15000, - [extraList[6],extraList[7]] - ), - generateCar( - "img/6.jpg", - "Toyota", - "Yaris", - "Voiture hybride 5 portes, année 2021", - 28000, - "hybride", - 2021, - 2000, - [extraList[4],extraList[8]] - ), - generateCar( - "img/7.jpg", - "Hyundai", - "Ioniq", - "Voiture électrique 5 portes, année 2022", - 35000, - "electrique", - 2022, - 500, - [extraList[0],extraList[1]] - ), - generateCar( - "img/8.jpg", - "Tesla", - "Model 3", - "Voiture électrique 4 portes, année 2023", - 50000, - "electrique", - 2023, - 1000, - [extraList[9],extraList[10]] - ), + generateCar( + "img/1.jpg", + "Renault", + "Clio", + "Voiture citadine 5 portes, année 2020", + 15000, + "citadine", + 2020, + 10000, + [extraList[0],extraList[3],extraList[4],extraList[6],extraList[8],extraList[9]] + ), + generateCar( + "img/2.jpg", + "Peugeot", + "208", + "Voiture citadine 5 portes, année 2021", + 16000, + "citadine", + 2021, + 5000, + [extraList[2],extraList[3]] + ), + generateCar( + "img/3.jpg", + "Volkswagen", + "Golf", + "Voiture compacte 5 portes, année 2022", + 25000, + "compacte", + 2022, + 1000, + [extraList[4],extraList[5]] + ), + generateCar( + "img/4.jpg", + "Ford", + "Focus", + "Voiture compacte 5 portes, année 2023", + 24000, + "compacte", + 2023, + 8000, + [extraList[0],extraList[1]] + ), + generateCar( + "img/5.jpg", + "Citroën", + "C4", + "Voiture compacte 5 portes, année 2020", + 22000, + "compacte", + 2020, + 15000, + [extraList[6],extraList[7]] + ), + generateCar( + "img/6.jpg", + "Toyota", + "Yaris", + "Voiture hybride 5 portes, année 2021", + 28000, + "hybride", + 2021, + 2000, + [extraList[4],extraList[8]] + ), + generateCar( + "img/7.jpg", + "Hyundai", + "Ioniq", + "Voiture électrique 5 portes, année 2022", + 35000, + "electrique", + 2022, + 500, + [extraList[0],extraList[1]] + ), + generateCar( + "img/8.jpg", + "Tesla", + "Model 3", + "Voiture électrique 4 portes, année 2023", + 50000, + "electrique", + 2023, + 1000, + [extraList[9],extraList[10]] + ), ]; const app = document.getElementById('app'); @@ -108,28 +108,28 @@ let index = 0; let s = ""; for (const car of cars) { - if(car !== undefined) - { - index++; + if(car !== undefined) + { + index++; - s += `
-
-
-
-
${car.make} ${car.model}
-

${car.description}

-
    -
  • Catégorie: ${car.category}
    • -
  • Prix: ${car.price} €
    • -
  • Année: ${car.year}
    • -
  • Kilométrage: ${car.mileage}
    • -
- -
-
-
-
` - } + s += `
+
+
+
+
${car.make} ${car.model}
+

${car.description}

+
    +
  • Catégorie: ${car.category}
    • +
  • Prix: ${car.price} €
    • +
  • Année: ${car.year}
    • +
  • Kilométrage: ${car.mileage}
    • +
+ +
+
+
+
` + } } s += '' @@ -137,18 +137,20 @@ app.innerHTML = s index =0; for (const car of cars) { - if(car !== undefined) - { - index++; + if(car !== undefined) + { + index++; - if(car.generateImage !== undefined) - car.generateImage(document.getElementById("img-car-"+ index)); + if(car.generateImage !== undefined) + car.generateImage(document.getElementById("img-car-"+ index)); - if(car.generateExtras !== undefined) - car.generateExtras(document.getElementById("body-car-"+ index)); + if(car.generateExtras !== undefined) + 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')]) }); + document.getElementById("btn-car-"+ index).addEventListener('click',(event)=>{ showHideExtra(event.target,event.target.parentElement.querySelector('.body-extra'),cars[event.target.getAttribute('data-index')]) }); - } + } } + + -- GitLab