Générateur de citations

Projets

Vous êtes à la recherche d’inspiration ? Ne vous en faites pas, le générateur de citations de notre site est fait pour ça ! 
Vous connaissez les bases du HTML ? Cette article vous présente et explique pas à pas la création du site ainsi que l’intégration des quelques modules utilisés.

Si vous êtes sur cet article, il est probable que créer un générateur, de citations en l’occurrence, vous a intrigué. Voilà les explications du procédé de sa création et de son intégration sur notre site :

Notre projet a été de créer un site qui comporte un générateur de citations de grands auteurs ou philosophes mais également certaines répliques de films connus afin d’apporter une source d’inspiration pour nos visiteurs. Pour cela, nous avons fait le choix de créer qu’une seule page de site, ce qui est amplement suffisant pour mener à bien le projet. Cependant, une consigne a été imposée : intégrer des modules. Heureusement pour nous, la toile regorge de scripts intéressants et variés de générateurs : de JavaScript à Python, le choix est large.

Avant de commencer

Tout d’abord, avant d’intégrer quelconque script choisi par nos soins, nous devions mettre la balise <nsi-xyz> préalablement installée sur l’éditeur de texte avant la réalisation du site. Cette balise sert de « support » pour les fonctionnalités que nos professeurs peuvent ajouter. Cette ligne doit se situer entre les balises <head>.

<script src="https://package.nsi.xyz/api/"></script>

Après avoir ajouté la fonction menu fournie par nos professeurs, ils pourront relier les sites réalisés par les autres élèves avec le notre.

< !— Appel du menu —>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>

Icône du menu

Le script du générateur et du bouton

Pour pouvoir générer des citations aléatoirement nous avons pris un module sur le site freeCodeCamp.org qui nous permet d’apprendre le codage chez soi et apporte des aides précieuses pour les projets. Pour le nôtre, il explique pas à pas le processus de construction du script JavaScript complet. Il contient également un bouton qui permet de générer les citations que nous avons préalablement choisi ainsi que le générateur. Ce script sera le cœur de notre site. 

Cependant, la question se pose : comment un bouton a pu être relié au générateur me direz-vous ? Le déroulement est simple : il existe une fonction dans le langage HTML nommé “onclick” qui permet, ainsi inséré dans les balise “button”, de définir une fonction sur le bouton, qui dans notre cas, sera paramétré dans le script JavaScript et que nous aurons appelé “newQuote()”.

<button onclick="newQuote()"> Appuyez </button>
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber]
    document.getElementById('quoteDisplay').style.fontFamily = 'Scope One', serif;
}

En revanche, au niveau de la stylisation des citations, celle-ci diffère d’une stylisation en CSS car elle se fait directement dans le script JavaScript. En effet, on place les citations entre des balises qu’on utilise également dans le langage HTML, comme les balises de sauts de lignes, d’alignement de texte, de la couleur, de la taille et bien plus encore selon vos envies. Une fois les citations tapées dans le script JavaScript et la stylisation faite, le générateur est prêt à fonctionner !

<br><br><center><div style="font-size : 155%"><p style="color:white ;"> "La vie sans musique est tout simplement une erreur, une fatigue, un exil" </center></p></div> <br> <center><div style="font-size : 120%"><p style="color:white ;"> Friedrich Nietzsche </center></p></div>

Le Header

Au niveau de la mise en page, lorsqu’on vous impose l’intégration de modules, la difficulté est tout autre que ce que l’on peut penser : il faut CHOISIR parmi des CENTAINES de scripts tous aussi beaux et impressionnants les uns que les autres. La difficulté est d’en choisir UN pour chaque fonctionnalités ou décoration du site. Réussir à les intégrer correctement est une autre histoire…

Pour ce faire, nous avons tout d’abord décidé de créer un header plutôt esthétique. Nous le rappelons, ce que nous voulons est de permettre aux visiteurs du site de lire des citations inspirantes. Ces visiteurs sont donc à la recherche d’inspiration, d’apaisement, de revigoration. L’esthétique du site compte alors énormément. Nous allons même jusqu’à dire que c’est ce qui compte ! Pour un site, le header, « en-tête » en anglais, est le haut du site, le commencement et est donc est la première partie sur laquelle arrive le visiteur. Cela signifie qu’elle doit être accrochante et agréable esthétiquement parlant, pour ainsi donner au lecteur une idée de la qualité du site et des citations mis à sa disposition.

Un diaporama de belles images sous une petite opacité et le titre du site fut une très bonne idée. Avec la simple recherche « slider photos css html » (slider qui veut dire « glissant » en anglais), nous avons choisi parmi un très large choix le tutoriel de Salvador el semestre « Speed Code-Full Screen Automatic Image Slider Background-HTML CSS », qui nous a permis d’intégrer un header qui prend toute la largeur de l’écran pour un plus beau résultat et un rendu plus fluide et aéré. L’intégration s’est très bien déroulée sans aucun blocage.

<div class="slider">
			<div class="load">
			</div>
			<div class="content">
				<div class="principal">
                    <h1>Citations Inspirantes</h1>
					<p>Générateur de citations et répliques de films</p>
					<p>Diaporama d'images inspirantes</p>
				</div>
			</div>
		</div>
.load {
  animation : slide 1s;
}

.slider {
  background-repeat : no-repeat;
  background-size : cover;
  background-position : center;
  width : 100%;
  height : 100vh;
  animation : slide 20s infinite;
}

.content {
  color : black;
  width : 100%;
  height : 100vh;
  background-color : rgba(255, 255, 255, 0.2);
}

.principal {
  left : 50%;
  top : 50%;
  transform : translate(-50%, -50%);
  position : absolute;
  letter-spacing : 5px;
  text-align : center;
}

.principal h1 {
  font-size : 70px;
  margin-bottom : 20px;
  font-family : 'Playfair Display', serif;
}

.principal p {
  font-size : 20px;
  font-family : 'Playfair Display', serif;
}

Résultat :

Par rapport au script original, nous avons modifié les images du slider avec background-image, le texte aux balises h1, p et nous avons ajouté un peu d’opacité avec opacity

Création de la boîte qui contient le générateur de citations

Ensuite, dans le corps du site, le « body« , il a fallu trouver une mise en page sympa afin d’y insérer le script JavaScript du générateur de citations. L’idée de créer une sorte de boîte avec des ombres pour lui donner du relief mais surtout l’illusion d’une petite feuille avec une citation inscrite dessus était intéressant. Pour cela, rien de plus simple : on tape sur son moteur de recherche « text box html css » et nous avons trouvé le tutoriel de Kevin Powell « CSS box-shadow – how to make them look good ».

En effet, taper votre recherche en anglais vous donne la plupart du temps plus de contenu et de réponses, alors il ne faut pas hésiter ! Pour cette boîte, un simple script suffisait puisqu’on ajuste nous même la forme de la boîte et son apparence selon nos envies en le modifiant.

Cependant, nous avons eu un PROBLEME au niveau de la dimension de la boîte : en effet, lorsqu’on active le générateur en cliquant sur le bouton, les dimensions de la boîte changeaient selon la taille de la citation (elle s’élargissait et inversement). Il a fallu un certain nombre de recherche sur internet avant de comprendre d’où venait le problème et comment le résoudre : le script original ne comportait pas les paramètres width et height, qui indiquent respectivement la largeur et la hauteur d’un objet. Sans eux, la dimensions de la boîte n’a pas été définie, ce qui implique que la taille de la boîte s’adapte à la taille des citations.

<div class="box">

			<div id="quoteDisplay">
				<p>
			< !— citation ici —>
				<p class="titre">...</p>
				</p>
			</div>
		</div>
.titre {
  text-align : center;
  color : black;
  font-family : 'Rubik', sans-serif;
  font-size : 40px;
}

.box {
  background : #F5B7B1;
  width : 1000px;
  height : 400px;
  padding-top : 120px;
  padding-right : 20px;
  padding-left : 20px;
  box-shadow : 10px 10px 9px black;
}

Résultat :

Par rapport au script original, nous avons modifié la taille de la boîte avec width, height, padding-top, padding-right, padding-left, les dimensions de l’ombrage avec box-shadow, la couleur de fond avec background et nous avons remplacé le texte par notre générateur de citations en ajoutant id= »quoteDisplay »

Stylisation du bouton du générateur

Bien sûr, le mieux est que le visiteur puisse activer ce générateur de citation via le bouton sur lequel il devra cliquer. La stylisation d’un bouton est une chose facile puisque des centaines de scripts de styles différents existent sur le web. Cette fois cependant, nous avons essayé d’intégrer une dizaines de scripts mais il arrive que cela ne soit pas aussi simple que ça puisse paraître puisque certains n’affichent pas le résultat espéré, même après maintes et maintes modifications du script.

Nous avons alors opté pour un simple bouton animé très sympa qui utilise du html/css. Il provient du site w3school.com qui est un site optimisé pour l’apprentissage et la formation du langage web. L’intégration n’a causé aucun problème et nous l’avons évidemment adapté aux couleurs de la page.

button {
  position : relative;
  background-color : black;
  border : none;
  border-radius : 3px;
  font-size : 15px;
  color : #FFFFFF;
  padding : 20px;
  width : 100px;
  text-align : center;
 -webkit-transition-duration : 0.4s; /* Safari */
  transition-duration : 0.4s;
  text-decoration : none;
  overflow : hidden;
  cursor : pointer;
}

button:after {
  content : "";
  background : white;
  display : block;
  position : absolute;
  padding-top : 300%;
  padding-left : 350%;
  margin-left : -20px !important;
  margin-top : -120%;
  opacity : 0;
  transition : all 0.8s;
}

button:active:after {
  padding : 0;
  margin : 0;
  opacity : 1;
  transition : 0s;
  border : none ;
}

Résultat :

Par rapport au script original, nous avons modifié la forme du bouton avec border-radius pour arrondir les coins, la couleur avec background-color et background lors du cliquage et le texte dans la balise button

Le Diaporama d’images

Enfin, l’idée finale du projet a été de donner la possibilité aux visiteurs du site d’avoir à disposition également certaines images inspirantes qui pourraient accompagner le concept des citations inspirantes. Pour se faire, encore une fois, la recherche « diaporama css html » nous a permis de choisir le script du site pierre-giraud.com qui est un site incroyablement bien fait pour apprendre à coder et contient toutes les ressources sur le développement web. L’intégration du script s’est très bien déroulé et nous avons bien évidemment intégré nos images dans le diaporama, avec un très beau rendu.

<div class="d1"></div>

	<div class="conteneur"></div>
.d1 {
  width : 576px;
  height : 384px;
  margin : 50px auto;
  box-shadow : 0px 15px 10px -5px #777;
  border-radius : 15px;
  background-color : #EDEDED;
  background-size : contain;
  animation : fondu 15s ease-in-out infinite both;
}

.conteneur {
  max-width : 576px;
  margin : 50px auto;
}

.d1:hover, .d2:hover {
  animation-play-state : paused;
}

@keyframes fondu {
  0% {
    background-image : url(ins.jpg);
  }
  33.33% {
    background-image : url(ins1.jpg);
  }
  66.67% {
    background-image : url(ins2.jpg);
  }
  100% {
    background-image : url(ins.jpg);
  }
}

Résultat :

Par rapport au script original, nous avons modifié la taille du diaporama avec height, arrondi les coins avec border-radius et modifié les images avec background-image

Les Plus+

1° Nous avons aussi fait le choix d’intégrer un bouton qui nous ramène automatiquement en haut de page, ce qui est une fonction pratique lorsque le site est très long. Pour notre part, nous voulions permettre au visiteur de remonter la page au moment où il arrive au niveau du diaporama d’images, afin de lui permettre d’atteindre plus rapidement la partie du générateur de citations.

Pour cette fonctionnalité et pour bien d’autres encore, le site w3school.com contient des dizaines de scripts expliqués et que l’on peut modifier directement sur le site pour en comprendre le fonctionnement. Après l’intégration du script JavaScript cette fois-ci du bouton, nous l’avons bien sûr modifié afin de le fondre dans l’esthétique du site.

<button onclick="topFunction()" id="myBtn" title="Go to top">🔝</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() scrollFunction();

function scrollFunction() {
  if (document.body.scrollTop > 1400 || document.documentElement.scrollTop > 1400) {
   mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>
#myBtn {
  display : none;
  position : fixed;
  bottom : 20px;
  right : 30px;
  z-index : 99;
  font-size : 23px;
  border : none;
  outline : none;
  background-color : #EC7063;
  color : white;
  cursor : pointer;
  padding : 7px;
  border-radius : 30px;
}

#myBtn:hover {
  background-color : #555;
}

Résultat :

Par rapport au script original, nous avons modifié la couleur du bouton avec background-color, le texte dans la balise button, la taille du texte avec font-size, sa taille avec padding et arrondi les coins avec border-radius

2° C’est également le cas du scroll bar qui se trouve à l’extrême droite du site. Nous avons intégré son script dans le code de la page et aucune modification n’a été nécessaire dans sa stylisation car elle convient parfaitement aux couleurs de notre site.

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* width */
::-webkit-scrollbar {
  width : 10px ;
}

/* Track */
::-webkit-scrollbar-track {
  background : #f1f1f1 ; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background : #888 ; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background : #555 ; 
}

</style>

Résultat :

Pour résumer, l’intégration des modules et des scripts nous ont permis d’obtenir un site avec un rendu agréable et esthétique avec quelques fonctionnalités comme le slider du header, le générateur de citations et le diaporama d’images. Cela donne un aspect sympa et vivant au site car le niveau de codage est plus poussé donc le résultat est plus intéressant et complexe. Cependant, à ne pas oublier que pour intégrer des modules dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML, car il sera très souvent nécessaire de modifier certains paramètres pour obtenir le résultat attendu, que ce soit dans le code HTML, JavaScript ou le style CSS.

Voici une vue d’ensemble de notre site :

Source

citations.nsi.xyz