Multiplication

Exemple

Dans le dossier 4-objetsNoyau :

  • Ajoutez le fichier 3-multiplication.html

1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
        <title>JS Multiplication</title>
5
        <meta charset="utf-8" />
6
        <meta name="viewport" content="width=device-width, initial-scale=1" />
7
        <link
8
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
9
          rel="stylesheet"
10
          integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
11
          crossorigin="anonymous"
12
        />
13
        <style> main > div {background-color: #c5c5c5;}</style>
14
    </head>
15
    <body>
16
        <header class="p-2 bg-secondary text-light bg-gradient">
17
            <section>
18
                <h2>JS - Multiplication (<a href="https://www.vincent-vanneste.fr/videos/javascript/js-multiplication.mp4">vidéo</a>)</h2>
19
            </section>
20
        </header>
21
22
        <main>
23
            <div class="p-3 row">
24
                <div class="col-2 mb-3">
25
                    <input type="text" id="nb1" class="form-control" readonly/>
26
                </div>
27
                <div class="col-1 mb-3">
28
                    <span>*</span>
29
                </div>
30
                <div class="col-2 mb-3">
31
                    <input type="text" id="nb2" class="form-control" readonly/>
32
                </div>
33
                <div class="col-1 mb-3">
34
                    <span>=</span>
35
                </div>
36
                <div class="col-2 mb-3">
37
                    <input type="text" id="proposition" class="form-control"/>
38
                </div>
39
            </div>
40
            <div class="p-3 row">
41
                <div class="col mb-3">
42
                    <input type="text" id="resultat" class="form-control" readonly/>
43
                </div>
44
            </div>
45
            <div class="p-3 row">
46
                <div class="col-2">
47
                    <button type="submit" onclick="verifier()" class="btn btn-primary">Vérifier</button>
48
                </div>
49
                <div class="col-2">
50
                    <button type="submit" onclick="jeu()" class="btn btn-primary">Rejouer</button>
51
                </div>
52
            </div>
53
54
        </main>
55
56
        <footer>
57
            <nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
58
              <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
59
                <li class="nav-item">
60
                  <a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
61
                </li>
62
                <li class="nav-item">
63
                  <a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
64
                </li>
65
                <li class="nav-item">
66
                  <a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
67
                </li>
68
              </ul>
69
            </nav>
70
        </footer>
71
72
        <script src="js/3-multiplication.js"></script>
73
74
    </body>
75
</html>
  • Dans le dossier js ajoutez le fichier 3-multiplication.js
1
const proposition = document.querySelector('#proposition');
2
const resultat = document.querySelector('#resultat');
3
const nb1 = document.querySelector('#nb1');
4
const nb2 = document.querySelector('#nb2');
5
let nb, depart;
6
7
const init = () => {
8
9
};
10
11
const jeu = () => {
12
13
}
14
jeu();
15
 
16
const verifier = () => {
17
   
18
};
Exercice :
Ouvrez dans votre navigateur le fichier 3-multiplication.html