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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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); } })
Partager