Home
API
code source

Créez une Web App pour générer des Faits Intéressants en utilisant HTML, CSS et JavaScript

webapp Les web apps interactives sont devenues de plus en plus populaires, offrant aux utilisateurs des fonctionnalités amusantes et informatives. Dans cet article, nous allons découvrir comment créer une web app de génération de faits intéressants en utilisant les langages de base du web : HTML, CSS et JavaScript. Nous allons également intégrer une API pour obtenir des faits intéressants aléatoires et permettre aux utilisateurs de les partager sur Twitter. Commençons !

Mise en place du projet

Pour commencer, nous allons créer les fichiers HTML, CSS et JavaScript nécessaires à notre web app. Voici la structure de base de notre projet :

Code initiale


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Générateur de Faits Intéressants</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Contenu de la web app -->
  <script src="script.js"></script>
</body>
</html>
Nous avons inclus les fichiers CSS et JavaScript nécessaires en utilisant les balises <link> et <script>. Assurez-vous de créer ces fichiers et de les lier correctement à votre page HTML.

La structure de la web app

La web app se compose de quelques éléments clés : un titre, un bouton pour générer de nouveaux faits, une zone d'affichage des faits et un bouton pour partager sur Twitter. Voici comment notre structure HTML pourrait ressembler :

Double taper sur le code pour copier son contenu


<div class="fact-container">
  <h2 id="fact-title">Appuyez sur le bouton "Nouveau" pour obtenir un fait intéressant !</h2>
  <button id="new-fact-btn">Nouveau</button>
  <div id="fact-info" class="fact-info">
    <!-- Les informations du fait seront ajoutées ici -->
  </div>
  <button id="tweet-btn" class="pulse-animation">Tweeter</button>
</div>
La classe CSS fact-container est utilisée pour encapsuler tous les éléments de la web app, et la classe fact-info est utilisée pour la zone d'affichage des faits.

Ajout du style à notre web app

Pour rendre notre web app attrayante, nous allons appliquer un design neumorphic en utilisant CSS. Voici un extrait du code CSS pour styliser notre web app :

Double taper sur le code pour copier son contenu


/* Styles CSS */

/* Style de base */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.fact-container {
  background-color: #f0f0f0;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 8px 8px 20px #d3d3d3, -8px -8px 20px #ffffff;
}

h2 {
  text-align: center;
  color: #333333;
}

button {
  background-color: #ffffff;
  color: #333333;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 8px;
  box-shadow: 4px 4px 10px #d3d3d3, -4px -4px 10px #ffffff;
}

button:focus {
  outline: none;
}

.fact-info {
  background-color: #ffffff;
  color: #333333;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 4px 4px 10px #d3d3d3, -4px -4px 10px #ffffff;
}

.pulse-animation {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
Ces styles CSS appliquent un effet neumorphic aux différents éléments de la web app, en utilisant des ombres douces, des bordures arrondies et des couleurs subtiles.

L'interactivité avec JavaScript

Maintenant que nous avons la structure de base, passons à l'implémentation des fonctionnalités en JavaScript. Nous allons utiliser l'API Fetch pour récupérer des faits intéressants à partir de https://lesaviezvous.onrender.com/infos. Voici un extrait du code JavaScript :

Double taper sur le code pour copier son contenu


const factTitle = document.getElementById('fact-title');
const factInfo = document.getElementById('fact-info');
const newFactBtn = document.getElementById('new-fact-btn');
const tweetBtn = document.getElementById('tweet-btn');

// Fonction pour récupérer un fait intéressant depuis l'API
async function getFact() {
  const response = await fetch('https://lesaviezvous.onrender.com/infos');
  const data = await response.json();
  return data.infos;
}

// Fonction pour afficher un nouveau fait intéressant
async function showNewFact() {
  const fact = await getFact();
  factTitle.textContent = 'Fait intéressant :';
  factInfo.textContent = fact;
}

// Événement lorsqu'on clique sur le bouton "Nouveau"
newFactBtn.addEventListener('click', showNewFact);

// Événement lorsqu'on clique sur le bouton "Tweeter"
tweetBtn.addEventListener('click', function() {
  const fact = factInfo.textContent;
  const tweetUrl = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(fact);
  window.open(tweetUrl);
});
Dans ce code, nous utilisons addEventListener pour ajouter des événements de clic aux boutons "Nouveau" et "Tweeter". Lorsque l'utilisateur clique sur le bouton "Nouveau", nous récupérons un nouveau fait intéressant à partir de l'API et l'affichons à l'utilisateur. Lorsque l'utilisateur clique sur le bouton "Tweeter", nous ouvrons une nouvelle fenêtre de navigateur avec une URL préremplie pour tweeter le fait intéressant.

Code source complet

Voici le code source complet

Double taper sur le code pour copier son contenu


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Générateur de faits intéressants</title>
  <style>
 /* Styles CSS */

/* Style de base */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.fact-container {
  background-color: #f0f0f0;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 8px 8px 20px #d3d3d3, -8px -8px 20px #ffffff;
}

h2 {
  text-align: center;
  color: #333333;
}

button {
  background-color: #ffffff;
  color: #333333;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 8px;
  box-shadow: 4px 4px 10px #d3d3d3, -4px -4px 10px #ffffff;
}

button:focus {
  outline: none;
}

.fact-info {
  background-color: #ffffff;
  color: #333333;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 4px 4px 10px #d3d3d3, -4px -4px 10px #ffffff;
}

.pulse-animation {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

  </style>
</head>
<body>
  <div class="fact-container">
    <h2 id="fact-title">Appuyez sur le bouton "Nouveau" pour obtenir un fait intéressant !</h2>
    <button id="new-fact-btn">Nouveau</button>
    <div id="fact-info" class="fact-info">
      <!-- Les informations du fact seront ajoutées ici -->
    </div>
    <button id="tweet-btn" class="pulse-animation">Tweeter</button>
  </div>

  <script>
    // JavaScript
    const factTitle = document.getElementById('fact-title');
    const factInfo = document.getElementById('fact-info');
    const newFactBtn = document.getElementById('new-fact-btn');
    const tweetBtn = document.getElementById('tweet-btn');

    // Fonction pour récupérer un fait intéressant depuis l'API
    async function getFact() {
      const response = await fetch('https://lesaviezvous.onrender.com/infos');
      const data = await response.json();
      return data.infos;
    }

    // Fonction pour afficher un nouveau fait intéressant
    async function showNewFact() {
      const fact = await getFact();
      factTitle.textContent = 'Fait intéressant :';
      factInfo.textContent = fact;
    }

    // Événement lorsqu'on clique sur le bouton "Nouveau"
    newFactBtn.addEventListener('click', showNewFact);

    // Événement lorsqu'on clique sur le bouton "Tweeter"
    tweetBtn.addEventListener('click', function() {
      const fact = factInfo.textContent;
      const tweetUrl = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(fact);
      window.open(tweetUrl);
    });
  </script>
</body>
</html>

Commentaires

  • A+
  • A-