Appliquer la notion

On dispose des codes HTML, CSS et JavaScript suivants.

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Exercice</title>
6
    <link rel="stylesheet" type="text/css" href="style.css">
7
  </head>
8
  <body>
9
    <section class="cards">
10
      <div class="green">0</div>
11
      <div class="red">7</div>
12
      <div class="blue">9</div>
13
      <div class="blue">6</div>
14
      <div class="yellow">6</div>
15
      <div class="red">0</div>
16
      <div class="green">1</div>
17
      <div class="blue">3</div>
18
      <div class="green">8</div>
19
      <div class="red">2</div>
20
    </section>
21
    <button onclick="add()">Ajouter</button>
22
    <script src="script.js"></script>    
23
  </body>
24
</html>
1
.cards {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: center;
5
  padding: 0 20px;
6
}
7
div {
8
  padding: 70px 50px;
9
  margin: 20px;
10
  border-radius: 5%;
11
  color: white;
12
  font-weight: bold;
13
}
14
.green {
15
  background: green;
16
}
17
.blue {
18
  background: blue;
19
}
20
.red {
21
  background: red;
22
}
23
.yellow {
24
  background: yellow;
25
}
26
button {
27
  background: white;
28
  border: solid 1px black;
29
  padding: 10px;
30
  border-radius: 10px;
31
}
1
const colors = ["green", "red", "yellow", "blue"]
2
3
function add() {
4
    const cards = document.querySelector(".cards");
5
    const num = Math.trunc(Math.random() * 9);
6
    const randomColor = Math.trunc(Math.random() * 4);
7
    console.log(num, randomColor);
8
9
    const newCard = document.createElement("div");
10
    newCard.classList = colors[randomColor];
11
    newCard.innerText = num;
12
    cards.appendChild(newCard);
13
}

Question

Créez les fichiers index.html, style.css et script.js dans Repl.it et afficher le résultat.

Question

Quel événement est écouté sur la page ? Sur quel élément HTML ?

Solution

L'événement onclick sur l'élément button.

Question

Que se passe-t-il lorsque l'on clique sur le bouton ?

Solution

Le script crée une nouvelle carte avec une couleur et un chiffre aléatoire.

Question

Ajouter un second bouton sur la page HTML avec le même comportement et Adjoindre comme nom.

Solution

On ajoute une seconde balise <button> juste après la première dans le fichier HTML.

1
<button onclick="add()">Adjoindre</button>
Stéphane Crozat, Jinane Ben Salem Paternité - Partage des Conditions Initiales à l'Identique