diff --git a/index.html b/index.html index be6da78c5e9ec9f23846a724d7820f71b1816897..2d923d7ae73d7d7d1462300677c3ea70d86b0e3d 100644 --- a/index.html +++ b/index.html @@ -1,50 +1,91 @@ - Page Title - - + Page Title + + +
- -
-
+ +
+
+ + + + + diff --git a/js/car.js b/js/car.js new file mode 100644 index 0000000000000000000000000000000000000000..697e51d898bb577967fc4690c5a2e3208d5f8d98 --- /dev/null +++ b/js/car.js @@ -0,0 +1,44 @@ +// Création de l'objet Car avec les propriétés image, make, model, description, price, category, +// year, mileage, extras --> Tableau d'Extra + +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; +} + +// Méthode permettant de générer l'image de la voiture souhaité selon +// son chemin d'accès donné en paramètre + +Car.prototype.generateImage = function ( elt ) +{ + const imageCar = document.createElement("img"); + + imageCar.src = this.image; + imageCar.alt = this.make + ' ' + this.model; + imageCar.className = 'card-img-top'; + + elt.appendChild(imageCar); +} + +// Méthode permettant de générer concernant les extras de la voiture souhaité + +Car.prototype.generateExtras = function ( elt ) +{ + const listeUL = document.createElement("ul"); + + this.extras.forEach(element => { + const elementLI = document.createElement("li"); + elementLI.innerText = element.name + ' ' + element.price + ' €'; + listeUL.appendChild(elementLI) + }); + + elt.appendChild(listeUL); +} \ No newline at end of file diff --git a/js/extra.js b/js/extra.js new file mode 100644 index 0000000000000000000000000000000000000000..c0b0d2cbd269f83289daf82d14225a1c62f0d1a8 --- /dev/null +++ b/js/extra.js @@ -0,0 +1,7 @@ +// Création de l'objet Extra avec les propriétés name et price + +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 4e1d11911c0a43dddf4d16bc89f1d2d5005e1fb2..de5ab5686a2b630438887f01f9865a972ccc718c 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,16 @@ 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')]) }); + } +} \ No newline at end of file