Générateur Aléatoire d'Histoire

Reprise et modification de l'application de Mozilla pour apprendre JS

by philBou

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="histoire.css" />
    <title>Générateur aléatoire d'histoire</title>
  </head>

  <body>
    <h1>
      Générateur aléatoire d'histoire (Mozilla)
    </h1>
    <div>
      <label for="customname">Saisissez votre prénom :</label>
      <input id="customname" type="text" placeholder="" value="philippe" />
    </div>
    <div>
      <label for="fr">FR</label>
      <input id="fr" type="radio" name="ukus" value="fr" checked="checked" />
      <label for="us">US</label><input id="us" type="radio" name="ukus" value="us" />
    </div>
    <div>
      <button id="randomize">Générer une histoire</button>
    </div>
    <p class="texte"></p>

    <script src="histoire.js"></script>
  </body>

</html>

CSS

body {
  font-family: helvetica, sans-serif;
  width:500px;
  display: block;
  background-color: #FA8072;
}

label {
  font-weight: bold;  
}

div {
  padding-bottom: 20px;
}

input[type="text"] {
  padding: 5px;
  width: 150px;
}

.texte {
  background: rgb(236, 222, 187);
  color: rgb(14, 5, 2);
  padding: 10px;
  visibility: hidden;
}

JavaScript

const customName = document.getElementById('customname');
console.log("prénom : ", customName);
const randomize = document.getElementById('randomize');
console.log("randomize : ", randomize);
const story = document.querySelector('.texte');
console.log("visibility :", story);

// méthode pour choisir aléatoirement un des éléments d'un tableau reçu en paramètre.
function randomValueFromArray(array) {
  const random = Math.floor(Math.random() * array.length);
  return array[random];
}

// le texte à afficher
const storyText = "Il faisait 94 degrés à l’extérieur, lorsque  :insertx: décida de partir se promener. Arrivé à :inserty:, il est resté pétrifié pendant quelques instants, puis :insertz:. Philippe a tout vu et n'a pas été surpris. — :insertx: avait beaucoup grossi. Il pesait renviron 300 tonnes.";
const insertX = ['Emmanuel Macron', 'Jean-Luc Mélenchon', 'Tom Cruise'];
const insertY = ["l\'Elysée", "Disneyland", "la plage"];
const insertZ = ['partit en sautant à cloche pied', 'se mit à chanter', 'se mit à danser la java'];

// on lance la fonction generer()
randomize.addEventListener('click', generer);

function generer() {
  // déclaration et affectation d'une nouvelle variable avec le texte de l'histoire par défaut
  let newStory = storyText;

  const xItem = randomValueFromArray(insertX); // affecte à la variable l'un des 3 éléments du tableau insertX
  const yItem = randomValueFromArray(insertY); // affecte à la variable l'un des 3 éléments du tableau insertY
  const zItem = randomValueFromArray(insertZ); // affecte à la variable l'un des 3 éléments du tableau insertZ

  // Pour construire la nouvelle histoire, on effectue les remplacements 
  newStory = newStory.replaceAll(':insertx:', xItem);
  newStory = newStory.replaceAll(':inserty:', yItem);
  newStory = newStory.replaceAll(':insertz:', zItem);

  // si l'internaute entre une valeur pour le nom
  // on la récupère avec la value et on remplace celle par défaut
  if (customName.value !== '') {
    // ...