Shopping cart

krayem90 Messages postés 7 Statut Membre -
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention - 4 juil. 2020 à 00:53

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

Afficher la suite

2 réponses

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

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
1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
  
  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

krayem90 Messages postés 7 Statut Membre

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 !

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

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

Shopping cart

2 réponses

Discussions similaires

Newsletters