Shopping cart

krayem90 Messages postés 5 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour tout le monde, je veux calculer le total des articles, c'est à dire quand l'utilisateur appuie sur les boutons "+" ou "-" le total varie.
Aussi les boutons + et - ne marche pas correctement.
Merci pour votre aide, je suis vraiment bloqué.
Je vous partage ci-dessous le lien du code (HTML , CSS, et JAVASCRIPT)
https://github.com/KARIMOUESLATI/shopping-cart12

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour

Merci de partager ton code directement ici en utilisant les balises de code
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Je remarque au passage qu'il nous manque un fichier js 
 <script src="/shopping card/script.js"></script>

Et, à moins que ça ne soit dedans, rien dans ton code ne modifie le total.......
Si tu veux de l'aide, montres nous ce que tu as essayé de faire... sans ça, pas de réponse de notre part ( on ne fourni pas de code tout cuit... )
0
Réponse 2 / 2
krayem90 Messages postés 5 Date d'inscription   Statut Membre Dernière intervention  
 
Merci jordane45, ci-dessous le code javascript , HTML , et css


Le code HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="js.js" async></script>
</head>
<body>
    <header><h1>Total : <span id="total">0</span> $</h1></header>
    
    <nav>
<ul>
    <li>like</li>
    <li>product</li>
    <li>quantity</li>
    <li>price</li>
    <li>remove</li>
</ul>
    </nav>
    <section>
        <div>
            <ion-icon id="likes" name="heart"></ion-icon>
          
            <img class="image" src="https://cdn.shoplightspeed.com/shops/619825/files/9115781/768x768x2/cordoba-guitare-classique-cordoba-protege-c1.jpg" alt="Guitar classique"/>
            <p>
                <button class="minus">-</button>
                <span class="counter">0</span>
                <button class="plus">+</button>
              </p>
              <p>100 TND</p>
              <ion-icon name="trash-outline"></ion-icon>

             </div>
        <div>
            <ion-icon id="likes"  name="heart"></ion-icon>
        <img class="image" src="https://d1aeri3ty3izns.cloudfront.net/media/25/251309/1200/preview_2.jpg" alt="Guitar electrique">
        <p>
            <button class="minus">-</button>
            <span class="counter">0</span>
            <button class="plus">+</button>
          </p>
         <span class="price">200</span>  TND
          <ion-icon name="trash-outline"></ion-icon>

          </div>
   
       
     <div>
        <ion-icon id="likes"  name="heart"></ion-icon>
        <img class="image" src="https://www.pmtonline.co.uk/media/catalog/product/cache/1/image/1999x/9df78eab33525d08d6e5fb8d27136e95/5/4/54400-172112-yamaha-trbx604fm-translucent-black-1.jpg" alt="Guitar Bass">
        <p>
            <button class="minus">-</button>
            <span class="counter">0</span>
            <button class="plus">+</button>
          </p>
          <p>300 TND</p>
          <ion-icon name="trash-outline"></ion-icon>

    </div>
    </section>
    
       
    
    <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
    <script src="/shopping card/script.js"></script>
    </body>
</html>


le code css 

    {

padding: 0;
margin: 0;
box-sizing: border-box;
}
nav ul {
display: flex;
justify-content: space-around;

}
nav ul li {
list-style-type: none;

}

section div{
display: flex;
justify-content: space-around;
margin-bottom: 60px;
align-items: center;


}
section{
margin-top: 30px;


}

.image {
height: 100px;
width: 100px;
}


le code javascript: 


let likes =Array.from(document.querySelectorAll("#likes"))
let minus=Array.from(document.querySelectorAll(".minus"))
let plus=Array.from(document.querySelectorAll (".plus"))






function changeColor(el) {
if (el.target.style.color !== "red") {
el.target.style.color = "red";
} else {
el.target.style.color = "black";
}
}
for (let i = 0; i <likes.length; i++) {
likes[i].addEventListener("click", changeColor);
plus[i].addEventListener("click", increment);
minus[i].addEventListener("click", decrement);
}


function increment(el) {
el.target.previousElementSibling.innerText =
Number(el.target.previousElementSibling.innerText) + 1;
console.log(el)

}
function decrement(el) {
if (Number(el.target.nextElementSibling.innerText) > 0) {
el.target.nextElementSibling.innerText =
Number(el.target.nextElementSibling.innerText) - 1;

}
}


EDIT : Ajout des balises de code
EDIT² : Regroupement de tous les codes dans UN SEUL message !
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Je ne vois toujours pas dans ton code là où tu modifies le total...

Et on a toujours pas le contenu de ton fichier /shopping card/script.js
0

Discussions similaires

arnaque site factory shop
aligc3s -
Afrikarnak -

2 réponses
Foot factory shop arnaque ?
Imoreb -
Alex42 -

45 réponses
Avis sneakers1factory.com
Christina_mlt -
pauline -

15 réponses
Votre avis sur Maillot Factory 45. Arnaque ou pas?
BaptW62 -
Katy -

43 réponses
football factory shop avis
dodie -
fany -

194 réponses