diff --git a/index.html b/index.html index be6da78c5e9ec9f23846a724d7820f71b1816897..d4926418b804f1473e3e97dfc9275df19f8b8b5f 100644 --- a/index.html +++ b/index.html @@ -1,52 +1,71 @@ - Page Title - - + Page Title + +
- -
-
+ +
+
+ + + diff --git a/js/car.js b/js/car.js new file mode 100644 index 0000000000000000000000000000000000000000..56637a5b739929c85e534c8f70a8f5d30abd2064 --- /dev/null +++ b/js/car.js @@ -0,0 +1,36 @@ +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) +{ + img = document.createElement('img'); + img.setAttribute('src', this.image); + img.setAttribute('alt', this.make + this.model); + img.setAttribute('class', 'card-img-top'); + + elt.appendChild(img); +} + +Car.prototype.generateExtras = function(elt) +{ + ul = document.createElement('ul'); + + this.extras.forEach(function(elt) + { + li = document.createElement('li'); + li.innerText = elt.name + " " + elt.price; + ul.appendChild(li); + }); + + 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..c189709f11f42103baa9a5aee2a249b78c5eb7ed --- /dev/null +++ b/js/extra.js @@ -0,0 +1,5 @@ +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..78ef5ed0dd4d454cb8a6f812f6eecc856e40c121 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,18 @@ 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')]) }); - } + } }