Intégrer un code javascript dans une page HTML

**olialex** · 18/10/2023, 11h23

Bonjour à tous,
Je vous sollicite car je suis en difficulté pour intégrer le code javascript suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const cartes = [
    { id: 'card1', date: new Date('2023-10-18T00:00:00') },
    { id: 'card2', date: new Date('2023-10-19T00:00:00') },
];

Comment puis-je procéder pour l'intégrer dans la page web ?

En vous remerciant par avance.

Voici le code CSS :

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
<style>
.card {
    width: 200px;
    height: 200px;
    perspective: 1000px;
}
 
.card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}
 
.card:hover .card-inner {
    transform: rotateY(180deg);
}
 
.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}
 
.card-back {
    transform: rotateY(180deg);
}
</style>

Voici le code HTML :

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
 <link rel="stylesheet" type="text/css" href="style.css">
 
 
    <div class="card" id="card1">
        <div class="card-inner">
            <div class="card-front">
                <div class="flip-card-front"><img src="/upload/client/Calendrier2023/Jour_1.png" alt="Avatar" style="width: 200px; height: 200px;"></div>
            </div>
            <div class="card-back">
                <div class="flip-card-front"><img src="/upload/client/Calendrier2023/Jour_1_-_Cadeau.png" alt="Avatar" style="width: 200px; height: 200px;"></div>
            </div>
        </div>
    </div>
    <div class="card" id="card2">
        <div class="card-inner">
            <div class="card-front">
                <div class="flip-card-front"><img src="/upload/client/Calendrier2023/Jour_2.png" alt="Avatar" style="width: 200px; height: 200px;"></div>
            </div>
            <div class="card-back">
                <div class="flip-card-front"><img src="/upload/client/Calendrier2023/Jour_2_-_Cadeau.png" alt="Avatar" style="width: 200px; height: 200px;"></div>
            </div>
        </div>
    </div>
    <!-- Ajoutez plus de cartes ici si nécessaire -->
<p></p></div></div></div></div>

**ASCIIDEFOND** · 18/10/2023, 17h09

Salut olialex,

Si tu veux simplement insérer du code JavaScript dans une page HTML

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<body>
<!-- Ton code HTML -->
...
    <script>
        const cartes = [
            { id: 'card1', date: new Date('2023-10-18T00:00:00') },
            { id: 'card2', date: new Date('2023-10-19T00:00:00') }
        ]
    </script>
<body>

Maintenant je ne sais pas ce que tu souhaites faire ensuite ?

**olialex** · 18/10/2023, 17h14

Bonsoir ASCIIDEFOND,
Je te remercie pour la réponse.
Je viens de tester l'intégration du code javascript et cela ne fonctionne pas.
La carte 2 se retourne malgré le fait qu'elle doit s'afficher au 19/10/2023.
Qui est-ce qui ne va pas avec le code ?
En te remerciant par avance.

**SpaceFrog** · 18/10/2023, 17h21

La carte 2 se retourne malgré le fait qu'elle doit s'afficher au 19/10/2023.

Il ya du code quelque part qui retourne les cartes ?
Tu ne nous le montre pas ...

**olialex** · 18/10/2023, 17h24

Bonsoir SpaceFrog,
Je te remercie pour la réponse.
Je te partage le code en entier :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<style>.flip-card {
  background-color: #f1f1f1;
  width: 200px;
  height: 200px;
  perspective: 1000px;
  float: left;
  margin: 10px;
}
 
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
 
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
 
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
 
.flip-card-front {
  background-color: #bbb;
  color: black;
}
 
.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
</style>
</p>
<div class="flip-card" id="card1">
<div class="flip-card-inner">
<div class="flip-card-front"><!-- Contenu de la face avant de la carte 1 -->
<div class="flip-card-front"><img src="/upload/client/Calendrier2023/Jour_1.png" alt="Avatar" style="width: 200px; height: 200px;"></div>
</div>
<div class="flip-card-back"><!-- Contenu de la face arrière de la carte 1 -->
<div class="flip-card-front"><img src="/upload/client/Calendrier2023/Jour_1_-_Cadeau.png" alt="Avatar" style="width: 200px; height: 200px;"></div>
</div>
</div>
</div>
<div class="flip-card" id="card2">
<div class="flip-card-inner">
<div class="flip-card-front"><!-- Contenu de la face avant de la carte 2 -->
<div class="flip-card-front"><img src="/upload/client/Calendrier2023/Jour_2.png" alt="Avatar" style="width: 200px; height: 200px;"></div>
</div>
<div class="flip-card-back"><!-- Contenu de la face arrière de la carte 2 -->
<div class="flip-card-front"><img src="/upload/client/Calendrier2023/Jour_2_-_Cadeau.png" alt="Avatar" style="width: 200px; height: 200px;"></div>
</div>
</div>
</div>
<!-- Ajoutez plus de cartes au besoin -->
<p></p>
<p>

En te remerciant par avance.

**SpaceFrog** · 18/10/2023, 17h26

Ben c'est pire que ce que je pensais ...
Je ne vois pas le code en charge de retourner les cartes ...

Intégrer un code javascript dans une page HTML

JavaScript

Vue hybride

Discussions similaires

Partager

Partager