Affichage d'objets dans une même DIV
Bonjour;
Voila j 'ai récupéré mon tableau, j'ai 5 produits à l'intérieur du tableau (nom , description, prix et un bouton pour renvoyer vers la page produit). J'ai créer dans HTML 5 div pour les placer seulement tous mes produits sont dans la même div du coup impossible de les placés avec mon css. Ce que je souhaite c'est la photo puis en dessous le titre de l'objet, en dessous sa description et pour finir le prix.(voilà l'ordre des éléments) Si quelqu'un un peut m'aider se serait sympa.
Merci par avance.
Code:
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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="robots" content="index, follow">
<meta name="description" content="La boutique Orinoco vends des appareils photos de qualité à prix très abordable">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://kit.fontawesome.com/cf7cad016f.js" crossorigin="anonymous"></script>
<title>Orinoco -Accueil</title>
</head>
<body>
<header>
<img class="header__logo" src="images/logo.png" alt="logo Orinoco">
<h1 class="header__h1">Bienvenue sur Orinoco</h1>
<ul class="header__validation">
<li><a class="header__validation_commande" href="confirmation_de_commande.html"></i>Commandes</a></li>
<li><a class="header__validation_panier" href="panier.html"><i class="fas fa-shopping-cart"></i> Panier</a></li>
</ul>
</header>
<main>
<h2 class="main_h2">Trouvez votre appareil photo vintage</h2>
<p class="main__text">
Qui dit photographie dit forcément appareil photo... La gamme de produits présente sur le marché est vaste et
propose de nombreuses références.
Chez Orinoco, vous obtiendrez des modèles à la pointe de la technologie.
</p>
<section id="produit">
<div class="cameras"></div>
<div class="cameras"></div>
<div class="cameras"></div>
<div class="cameras"></div>
<div class="cameras"></div>
</section>
</main>
<footer>
<a class="text" href="#">À propose de nous</a>
<a class="text" href="#">Contactez-nous</a>
</footer>
<script src="essai.js"></script>
</body>
</html> |
mon code Javascript :
Code:
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
| //section de mes divs
document.getElementsByClassName("cameras")
//requête
fetch('http://localhost:3000/api/cameras')
.then(function(response){
return response.json()
}).then (function (data) {
console.log(data)
for(let i = 0; i <data.length; i++){
//création de ma balise image
let images = document.createElement("img");
images.classList.add("images")
images.textContent = data[i].imageUrl ;
images.setAttribute('src', data[i].imageUrl);
document.querySelector("div").appendChild(images);
//création de mon nom de l'article
let names = document.createElement("H2");
names.textContent = data[i].name;
document.querySelector("div").appendChild(names);
//création de mon paragraphe: description
let description = document.createElement("p");
description.textContent = data[i].description;
document.querySelector("div").appendChild(description);
//création de l'emplacement prix
let price = document.createElement("p");
price.textContent = data[i].price/100 + "€";
document.querySelector("div").appendChild(price);
//création de mon bouton
let button = document.createElement("div");
button.classList.add("button_detail");
button.innerHTML = `<a href=produit.html?id=${data._id}><button class="button_detail" type="button">Détails</button></a>`;
document.querySelector("div").appendChild(button);
}
}) |
