Intégrer un code javascript dans une page HTML

Version imprimable

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

Code:

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:

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:

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>

Salut olialex,

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

Code:

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 ?

18/10/2023, 17h14
olialex

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.
18/10/2023, 17h21
SpaceFrog

Citation:

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 ...

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

Code:

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.

18/10/2023, 17h26
SpaceFrog

Ben c'est pire que ce que je pensais ...
Je ne vois pas le code en charge de retourner les cartes ...
18/10/2023, 17h29
olialex

SpaceFrog,
C'est curieux. L'animation fonctionne bien de mon côté.
Pour personnaliser le code, je me suis aidé de cet exemple : https://www.w3schools.com/howto/howto_css_flip_card.asp
Ce qui ne fonctionne pas c'est que la carte n°2 doit se déclencher au 19/10/2023.
En te remerciant par avance.

Tu voudrais afficher la valeur de date du tableau cartes au dos de l'image (lorsque l'image se retourne plus exactement)

Code:

1
2
3
4
5
6
7
8
9
10
11
    <script>
        const cartes = [
            { id: 'card1', date: new Date('2023-10-18T00:00:00') },
            { id: 'card2', date: new Date('2023-10-19T00:00:00') },
        ]
 
        for (const divcarte of cartes) {
            let divSelect= document.querySelector(`#${divcarte.id} .card-back .flip-card-front`);
            divSelect.textContent = divcarte.date
        }
    </script>

18/10/2023, 18h15
olialex

ASCIIDEFOND,
Je te remercie pour la réponse.
Je souhaite que la carte n°1 au survole de la souris se retourne aujourd'hui, et que la carte n°2 au survole de la souris se retourne le 19/10/2023.
En te remerciant par avance.

Citation:

Envoyé par olialex

ASCIIDEFOND,
Je souhaite que la carte n°1 au survole de la souris se retourne aujourd'hui, et que la carte n°2 au survole de la souris se retourne le 19/10/2023...

Code:

1
2
3
4
5
6
7
8
9
10
11
    <script>
        const cartes = [
            { id: 'card1', date: Date.now()},
            { id: 'card2', date: new Date('2023-10-19T00:00:00') },
        ]
 
        for (const divcarte of cartes) {
            let divSelect= document.querySelector(`#${divcarte.id} .card-back .flip-card-front`);
            divSelect.textContent = new Date(divcarte.date)
        }
    </script>

18/10/2023, 18h50
olialex

ASCIIDEFOND,
Je te remercie pour la réponse.
18/10/2023, 19h12
ASCIIDEFOND

En reprenant ton code (HTML & CSS) avec la partie JavaScript, cela fonctionne chez moi.
Si j'ai bien compris, tu cherches après un survol de l'image à afficher une date sur la deuxième image?

Bonjour,

Citation:

Envoyé par olialex

Je souhaite que la carte n°1 au survole de la souris se retourne aujourd'hui, et que la carte n°2 au survole de la souris se retourne le 19/10/2023.

ce que j'en comprends c'est que la carte « du jour » peut flipper.

Dans ce cas il te faut vérifier quelle carte est à la date du jour et de lui affecter une class CSS l'autorisant à flipper.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 const cartes = [ { id: 'card1', date: new Date('2023-10-18T00:00:00') }, { id: 'card2', date: new Date('2023-10-19T00:00:00') }, { id: 'card3', date: new Date('2023-10-20T00:00:00') }, ] const today = new Date().toLocaleDateString() cartes.forEach((carte) => { if (today === carte.date.toLocaleDateString()) { // ajout d'une class autorisant le :hover sur l'élément carte.id console.log("Bingo pour", carte.id); } })
Tu pourrais même t'épargner le new Date dans la déclaration de tes cartes.