Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
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 },
];
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]]
),
];
const app = document.getElementById('app');
let index = 0;
for (const car of cars) {
if(car !== undefined)
{
index++;
app.innerHTML += `<div class="col">
<div class="card h-100">
<div id="img-car-${index}"></div>
<div class="card-body">
<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">Prix: ${car.price} €</li>
<li class="list-group-item">Année: ${car.year}</li>
<li class="list-group-item">Kilométrage: ${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>
</div>
</div>
</div>`
}
}
app.innerHTML += '</div>'
index =0;
for (const car of cars) {
if(car !== undefined)
{
index++;
if(car.generateImage !== undefined)
car.generateImage(document.getElementById("img-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')]) });
}
}