• [^] # Re: le code source

    Posté par (site web personnel) . En réponse au journal Faire un calendrier de l'avent par une IA. Évalué à 3.

    Oui bien tu as raison,
    voici le code source la page index.php 

    <!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <title>Calendrier de l'Avent</title>
 <link rel="stylesheet" href="style.css"> <!-- Lien vers votre feuille de style CSS -->
 <script src="script.js"></script> <!-- Lien vers votre fichier JavaScript -->
</head>
<body>
 <div class="container">
 <header class="banner">
 <h1><span class="banner">Calendrier de l'Avent généré par ChatGpt</span></h1>
 </header>
 <div class="calendar">
 <!-- Bouton d'introduction -->
 <button class="day" onclick="openDay('00')">Introduction</button>
 <!-- Boucle PHP pour générer les boutons des jours -->
 <?php
 // Obtenir le jour actuel
 $jourActuel = (int)date("d");
 $moisActuel = (int)date("m");
 //$moisActuel = 12;
 for ($i = 1; $i <= 25; $i++) {
 $dayFormatted = str_pad($i, 2, "0", STR_PAD_LEFT);
 // Vérifier si le jour du calendrier est passé ou est le jour actuel
 if ($i <= $jourActuel && $moisActuel == 12) {
 echo "<button class='day' onclick='openDay(\"$dayFormatted\")'>Jour $dayFormatted</button>";
 } else {
 // Désactiver le bouton pour les jours futurs
 echo "<button class='day inactive' disabled>Jour $dayFormatted</button>";
 }
 }
 ?>
 </div>
 <footer>
 <!-- Contenu du pied de page -->
 <a href="https://www.selnet.ch/#contact">Contact</a>
 </footer>
 </div>
 <!-- Overlay pour l'affichage du contenu de chaque jour -->
 <div id="overlay" style="display:none;">
 <div id="overlay-content">
 <h2 id="day-title"></h2> 
 <p class="subtitle">Passage du jour</p>
 <p id="day-verse"></p>
 <img id="day-image" src="" alt="Image du jour">
 <p class="subtitle">Réflexion de l'IA</p>
 <p id="day-reflection"></p>
 <button onclick="closeOverlay()">Fermer</button>
 </div>
 </div>
</body>
</html>

    et voici le fichier script.js (bon celui la vous pouviez le voir :-)

    function openDay(day) {
 // Charger les données JSON
 document.getElementById('day-title').innerText = day + " décembre";
 fetch('versets.json').then(response => response.json()).then(versets => {
 const versetText = versets[day];
 const versetHtml = versetText.replace(/ - ([^ ]+ [^ ]+)$/, "<br/><span class='verse-reference'>1ドル</span>");
 document.getElementById('day-verse').innerHTML = versetHtml;
 });
 fetch('reflexion.json').then(response => response.json()).then(reflexions => {
 document.getElementById('day-reflection').innerText = reflexions[day];
 });
 // Définir l'image pour le jour
 document.getElementById('day-image').src = `images/${String(day).padStart(3, '0')}.jpg`;
 // Afficher l'overlay
 document.getElementById('overlay').style.display = 'block';
}
function closeOverlay() {
 document.getElementById('overlay').style.display = 'none';
}

    En fait le code est très simple.