Skip to content
GitLab
Commits (5)
Masquer les modifications d'espaces
En ligne Côte à côte
README.md
Voir le fichier @ 8ffaeb16
......@@ -32,7 +32,7 @@ git commit -m "Message de commit"
Pousser vos modifications vers votre dépôt distant:
```bash
git push origin nom_de_votre_branche
git push origin ks110222
```
Créer une merge request:
......@@ -45,10 +45,11 @@ Résumé du sujet :
Vous devrez réaliser un site de e-commerce proposant des voitures.
## Partie A : Utilisation des prototypes
**Créer un prototype Extra dans le fichier js/extra.js, contenant les propriétés suivantes :
Créer un prototype Extra dans le fichier js/extra.js, contenant les propriétés suivantes :
- `name`
- `price`
name
price
Créer un prototype Car dans le fichier js/car.js contenant les propriétés suivantes :
- `image`
......@@ -66,19 +67,19 @@ Modifier la fonction `generateCar` pour qu'elle retourne une nouvelle instance d
## Partie B : Modification du DOM
Ajouter au prototype Car :
1. la méthode `generateImage(elt)` qui, sans utiliser innerHTML, va créer une balise img qui aura comme source l'attribut image du prototype et comme alt, attribut make concaténé à model. En plus, ajouter les classes img-fluid, rounded-top et w-100.
1. la méthode `generateImage(elt)` qui, sans utiliser innerHTML, va créer une balise img qui aura comme source l'attribut image du prototype et comme alt, attribut make concaténé à model. En plus, ajouter la classe `card-img-top` .
1. la méthode `generateExtras(elt)` qui, sans utiliser innerHTML, va créer une balise ul, puis, pour chaque Extra, une balise li qui contiendra le nom concaténé au prix.
Ces 2 méthodes doivent ajouter l'élément créé à celui passé en paramètre.
completer la fonction showHideExtra de maniére a :
completer la fonction `showHideExtra` de maniére a :
1. afficher `+` sur le boutton si les extras sont masqué et `-` sinon
1. afficher ou masquer la liste des extras en utilisant `car.generateExtras()`
1. afficher ou masquer la liste des extras en utilisant les fonctions du prototype Car
Département Informatique
BUT Info 2 - 2022/2023
BUT Info 2 - 2023/2024
Applications Web
Khraimeche Salim.
\ No newline at end of file
index.html
Voir le fichier @ 8ffaeb16
......@@ -36,10 +36,8 @@
<script>
function generateCar(image, make, model, description, price, category, year, mileage, extras) {
// Créer un tableau d'instances d'Extra à partir des noms d'extras
// Créer une nouvelle instance de Car
//Create an array of Extra instances based on Extras names and prices
// Create a new Car instance
}
function showHideExtra(btn,elt,car) {
......
js/index.js
Voir le fichier @ 8ffaeb16
......@@ -105,31 +105,35 @@ const cars = [
const app = document.getElementById('app');
let index = 0;
let s = "";
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>`
s += `<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">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>
</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>'
s += '</div>'
app.innerHTML = s
index =0;
for (const car of cars) {
......@@ -142,6 +146,7 @@ for (const car of cars) {
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')]) });
}
......