Projet JavaScript : Générateur de Contenu

Je me suis récemment mise au JavaScript et pour mettre en pratique mes connaissances, j’ai décidé de faire un mini projet. Le principe est simple : le site génère automatiquement du contenu prédéfini. Pour m’amuser un peu, j’ai aussi ajouté des animations et décidé qu’à chaque mise à jour de la page, la couleur du fond serait, elle aussi, générée automatiquement.

Générateur de Contenu en JavaScript
00:00
--
/
--

 

La technologie

Ce projet utilise 3 languages de base : du HTML pour la structure, du CSS pour le design et du JavaScript pour l’interactivité.

Les animations sont faites en CSS, avec une bibliothèque appelée Animate.css et le contenu et la couleur de fond sont générés en jQuery.

Les fichiers

Le site est divisés en 3 fichiers principaux : un pour le HTML, un pour le CSS et le dernier pour le JavaScript. Dans le fichier HTML, le CSS et le JavaScript sont appelés de la façon suivante :

HTML : le squelette du site

Voici le reste de notre fichier HTML. Il est composé de trois éléments :

  • Un “call to action” incitant l’utilisateur de la page à rafraîchir cette dernière afin de générer plus de contenu,
  • La div #container où sera affiché le contenu généré,
  • Un pied de page, histoire d’ajouter un peu plus de contenu.

Notez que techniquement, seule la div pour afficher le contenu généré est nécessaire.

JavaScript : le moteur du projet

Jetons ensuite un coup d’oeil au JavaScript: le moteur de ce projet. Ce générateur est basé sur du jQuery, que nous avons appelé précédemment dans les balises <head> du fichier HTML (voir plus haut).

Tout d’abord il y a une première formule qui génère automatiquement la couleur de fond de la page avec un code HEX. Notez que si le code fait moins de six caractères, la couleur sera noire (#000000) par défaut.

Ensuite, on défini une liste de contenu à générer. Dans cet exemple, j’ai choisi des citations de John F. Kennedy.

Vient ensuite la fameuse formule magique qui, au lancement de la page, affichera l’une des citations de façon aléatoire.

Enfin, j’ai ajouté deux fonctions afin de permettre à l’utilisateur de rafraîchir (et donc, de générer du nouveau contenu) en cliquant sur certains éléments de la page.

CSS : donner son style au site

Comme expliqué plus haut, les animations sont faîtes en CSS, grâce à la librairie Animate.css. Toujours pour améliorer un peu plus le design du projet, j’ai apporté une autre feuille de style venant de Font Awesome pour des icônes personnalisées.

Et si besoin, voici le code CSS avec quelques règles que j’ai définies. À noter que ceci est complètement personnel et n’affecte en rien le fonctionnement de ce projet 🙂

→ GitHub – Télécharger l’ensemble des fichiers :