11 Projets Javascript débutants pour vous améliorer en code

projets debutants javascript

Comment apprendre le JavaScript en développant des projets simples ? Comment coder des mini projets en JavaScript ? Qu’est-ce qu’un débutant peut faire avec JavaScript pour progresser ? Vous voulez vous construire un portfolio mais vous n’avez pas d’idée de projet ?

Développer des projets en Javascript est le meilleur moyen de vous améliorer en code, surtout si vous êtes débutant. En plus, construire un portfolio est extrêmement important pour un développeur.

En programmant un plusieurs de ces projets concrets en Javascript, vous serez capables :

  • De montrer des projets dans votre portfolio
  • De manipuler de la data, tant à l’input qu’à l’output
  • De construire des interfaces utilisateurs web en html

Découvrons quelques exemples de projets et exercices destinés aux débutants en Javascript.

Développer une TODO list en Javascript

Une TODO list est un excellent projet pour commencer à se familiariser avec l’entrée de données et son affichage. En faisant une todo list, vous apprendrez, par exemple :

  • Comment gérer et afficher différents elements en fonction de leur état
  • Comment créer, récupérer, modifier et supprimer des objets en javascript
  • Comment aller plus loin avec de la permanence de data localement en explorant localStorage

Une TODO liste est un projet qui sera souvent repris en exemple quand vous apprendrez des frameworks ou libraires telles que react, react-native, vue.js, angular.js et d’autres. Faire ce projet en JS Vanilla et HTML a donc beaucoup de sens et facilitera votre apprentissage dans le futur.

Développer un Générateur de Citations en Javascript

Créer un mini projet qui donne aléatoirement des citations de votre rappeur, auteur ou personnalité préférée vous semble fun ?

Alors profitez-en pour vous familiariser avec les tableaux et la fonction Math.random() en javascript en créant un générateur de citations.

  1. Dans un premier temps il vous faudra récolter les citations voulues, essayez de faire ça de manière intelligente en scrapant la data.
  2. Ensuite, vous devrez mettre ces citations dans un tableau pour pouvoir les exploiter.
  3. Finalement, vous construirez une UI pour afficher le contenu de manière aléatoire.

Pour vous inspirer, j’ai créé un bot qui génère des citations de Naval Ravikant en Python hébergé sur les Amazon Web Services et qui tweet tous les jours.

Développer un Calculateur d’IMC en Javascript

Faire un petit calculateur peut également être un bon exercice pour les débutants javascript. La formule du calcul de l’IMC est simple :

const IMC = poids * taille ** 2

Avec le poids en kg, et la taille en m.

Il ne vous reste plus qu’à construire le formulaire d’entrée de donnée et une interface utilisateur en html pour afficher le résultat.

Pour aller plus loin, vous pouvez aussi afficher la catégorie d’Indice de Masse Corporelle dans laquelle votre utilisateur se trouve.

Développer un Convertisseur de devises en Javascript

Dans le même genre que le calculateur d’IMC, le convertisseur de devises est un bon exercice très simple pour la base de votre portfolio github et vous faire la main en JS.

Vous aurez besoin du cours actuel, que vous pouvez entrer en dur dans votre code ou bien récupérer avec une API. Ensuite, avec le montant entré en input par l’utilisateur, vous afficherez le résultat de votre calcul pour obtenir la conversation de la devise choisie.

Développer une Calculatrice en Javascript

Coder une bonne vieille calculatrice est une excellent exercice pratique pour améliorer vos compétences en JavaScript. Vous pourrez vous amuser sur le développement de l’interface graphique en HTML et CSS, puis ajoutez de l’intelligence avec JavaScript.

Commencez avec quelques opérateurs simples et des boutons de base pour gérer :

  • L’addition
  • La soustraction
  • La multiplication
  • La Division

Ensuite, vous pourrez prendre en compte les degrés, racines carrés et toutes les autres operations que vous voulez. Une calculatrice complète et aboutie est un excellent projet javascript pour progresser.

Développer un Compte à rebours en Javascript

Manipuler les dates est une compétence qui vous sera utile au quotidien en tant que développeur Javascript ou Web. Même si certaines libraires comme moment.js nous aident, vous serez amené à utiliser des dates dans vos différents projets. C’est pour ça que faire un petit chronomètre, un compte à rebours ou une horloge en JS vous familiarisera avec l’api de Date de Javascript en plus des timeouts et intervals.

Développer un Compteur de mots en Javascript

Un compteur de mots permet de savoir combien il y a de mots dans un texte fourni par l’utilisateur. Cette fonctionnalité est très pratique quand vous voulez rédiger un article d’un certain nombre de mots minimums et des sites existent même dans le seul but de vous dire combien de mots votre texte contient. Ce projet vous apprendra comment manipuler les chaînes de caractères et comment se servir d’un compteur.

Dans les grandes lignes, vous voulez :

  • un formulaire pour que l’utilisateur puisse entrer son texte
  • un bouton pour valider le texte
  • le résultat du nombre de mots présents dans le texte

Pour aller plus loin, vous pourrez aussi donner le nombre de lettres, le nombre de lignes, le nombre d’une même occurrence et bien d’autres choses.

Développer un Jeu de Pierre Papier Ciseaux en Javascript

Saviez-vous que les ciseaux est le meilleur choix au jeu de pierre papier ciseaux ?

Non ?

C’est normal, ce n’est pas le cas.

Pour vous en rendre compte, vous pouvez coder votre propre jeu. L’ordinateur jouera une main au hasard parmi les 3 combinaisons et votre objectif sera de le battre. Trois boutons HTML et l’utilisation de Math.random() feront l’affaire.

Pour aller plus loin, vous pourrez ajouter un compteur de points, ajouter de l’intelligence à voter intelligence artificielle (plutôt que de l’aléatoire simple) et faire jouer deux ordinateurs entre eux.

Développer un clone de YouTube en Javascript

Il est très simple d’intégrer une vidéo dans vos pages HTML, vous en avez peut-être deja vu dans mes articles. Mais il est aussi possible d’utiliser l’API de YouTube pour effectuer des recherches et présenter les résultats en HTML. Ce projet peut s’avérer un peu plus compliqué que les autres mais il sera parfait pour vous faire comprendre comment fonctionnent les API et comment effectuer des requêtes.

Développer un clone de Google Maps en Javascript

Dans le même esprit que le clone de YouTube, Google fournit une API simple pour manipuler Google Maps. Vous pourrez vous amuser à afficher ce que vous voulez sur une map en fonction d’un tableau d’object javascript par exemple.

Développer un Bot en Javascript

Un autre moyen d’apprendre Javascript avec des petits projets simples est de vous familiariser avec des libraires pour faire des bots. Vous pouvez facilement faire un bot qui execute des tâches très simples et une dizaine de lignes de code. Par exemple, j’ai fait un Bot Discord en Javascript avec la librairie discord.js sur lequel vous pouvez vous baser pour construire un bot plus complexe.

Aller plus loin et devenir meilleur avec plus de projets en Javascript

J’espère vous avoir inspiré à créer un ou plusieurs projets en Javascript.

La différence entre ne pas avoir de projets du tout dans son portfolio et avoir quelques petits projets est énorme. S’exercer et publier des projets dans votre temps libre est la preuve que vous avez la bonne mentalité pour apprendre à programmer et c’est exactement ce que les entreprises qui recrutent veulent voir ! J’en parle d’ailleurs dans mon article Comment devenir développeur Freelance.

Si vous avez effectué un projet ou que vous avez une idée de projet, n’hésitez pas à les partager en commentaire via Twitter en cliquant sur le lien ci-dessous.



Je m'appelle Thomas. Depuis ma sortie de la première promo de l'École 42, j'ai développé une app qui a été téléchargée plus de 400.000 fois. J'ai lancé près de 10 idées de startups et de nombreux autres business. Sur ce blogue, je vous apprends comment utiliser le Code pour devenir libre.

Recevez gratuitement 9 Astuces pour apprendre à coder !
Suivez la newsletter !
Désinscrivez-vous quand vous voulez
Gratuit, c'est un très bon prix
Les emails sont gratuits. Pas de spam. Vos informations sont stockées de manière sécurisée et privée. Vous pourrez vous désinscrire en un clic et à tout moment. En renseignant votre adresse email vous demandez expressément de recevoir la newsletter de tcoll.art pouvant contenir des promotion.