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>