25 Idées de projets Javascript

Facebook Twitter LinkedIn

Les 20 premiers projets Javascript listés mettront à l’épreuve les codeurs intermédiaires et avancés mais si vous débutez ou si vous êtes débutant, vous pouvez tenter les plus simples comme le projet Smart Home ou le Splitter Bill Eating Out. Les 5 derniers projets Javascript sont plus simples et sont d’excellents projets de démarrage que tout codeur Javascript devrait faire..

20 idées de projets Javascript pour vous

• Boîte popup – construire une boîte popup avec plus d’une entrée.
• Jeu de mémoire – construire un jeu de mémoire pour tester votre cerveau.
• Jeu de tic tac toe – construire un jeu de tic tac toe.
• Tétris en Javascript – construire le jeu de tetris.
• Horloge en Javascript – construire une horloge numérique moderne.
• Horloges mondiales – construisez un panneau de date et d’heure pour divers endroits dans le monde.
• Galerie de photos – construisez un diaporama avec des boutons suivant et précédent.
• Icône de charge de batterie – construisez un compteur de progression en animant une charge de batterie.
• Séparateur de factures de restaurant – construisez un séparateur de factures et mangez avec des amis.
• Calculatrice – construisez une calculatrice vintage qui ajoute, soustrait, multiplie et divise deux nombres.
• Plan du centre commercial – construisez un plan du centre commercial et donnez des indications aux acheteurs perdus.
• Maison intelligente – construisez 2 pages Web pour simuler un panneau de maison intelligente et une page d’état de la maison.
• Liste d’épicerie – construisez une liste d’articles d’épicerie à acheter.
• Jeu de labyrinthe – construisez un labyrinthe et traversez-le aussi vite que possible.
• Formulaire d’inscription/de signature – construisez un formulaire de validation et acceptez les informations d’inscription et de signature.
• Email côté client – construisez un formulaire puis envoyez par e-mail le contenu du formulaire.
• Lecteur vidéo – construisez un lecteur vidéo.
• Lecteur de musique – construisez un lecteur mp3.
• Jeu de Pong – construisez le jeu classique de raquettes et de balles.
• Jeu de breakout – construire le jeu classique de breakout.

Boîte popup

Ce projet vous apprend la limitation de la fonction ‘prompt’ en Javascript car elle ne permet la saisie que d’un seul champ. Pour demander à l’utilisateur un nom d’utilisateur et un mot de passe en utilisant uniquement la fonction prompt, vous devriez demander à l’utilisateur deux fois. Essayez-le d’abord puis construisez une boîte popup appropriée de votre propre pour demander deux champs ou plus.

Jeu de mémoire

Javascript peut être utilisé pour construire des jeux et le jeu classique de mémoire est l’un des meilleurs jeux à construire. Le jeu de mémoire consiste en un plateau qui montre le dos des cartes. Lorsqu’on clique sur une carte, celle-ci se retourne et montre un symbole. Lorsque l’on clique sur une deuxième carte, celle-ci se retourne également et affiche un symbole. Le joueur dispose de quelques secondes pour mémoriser la position des symboles avant que les deux cartes ne soient retournées. Le joueur continue à découvrir des symboles, deux cartes à la fois, jusqu’à ce que les symboles correspondent. Lorsque deux cartes sont retournées et ont des symboles identiques, les deux cartes restent affichées. Le jeu continue jusqu’à ce que toutes les cartes aient été retournées.

Tic Tac Toe

Le jeu du tic tac toe existe depuis des lustres et il est toujours apprécié par des personnes de tous âges. Construisez le jeu en Javascript et apprenez à organiser votre code en fonctions. Commencez par la logique et construisez lentement l’affichage en HTML. Une fois que vous avez les fonctions de base du jeu qui fonctionnent, vous pouvez élaborer sur le HTML et le CSS pour rendre la page animée et réactive.

Javascript Tetris

Un autre jeu classique que vous pouvez construire en Javascript est le tetris. Le terrain de jeu est constitué d’une grille et de polygones qui tombent lentement. Le but est d’arranger ces polygones de manière à ce qu’ils remplissent toutes les cases de la grille. Au début du jeu, la grille est vide. Un polygone de forme étrange apparaît et commence à tomber, une rangée à la fois. Le joueur peut choisir de le faire tourner à gauche ou à droite ou de le déplacer horizontalement à gauche ou à droite, une case à la fois. Lorsque le polygone atteint le bas de la grille, il reste définitivement en place et un autre polygone apparaît en haut et commence sa chute.

Construisez le jeu de tetris en fournissant une grille, des polygones et six boutons pour Démarrer, Pause, Rotation gauche, Rotation droite, Déplacement gauche et Déplacement droit. Une fois que vous avez le jeu de base qui fonctionne, essayez d’ajouter des niveaux au jeu et une minuterie pour tester vos compétences.

Ce projet mettra au défi vos compétences en Javascript car il met en pratique vos compétences en matière d’animation et d’enregistrement des états.

Horloge Javascript

Avec un peu de HTML et quelques CSS, construisez une horloge numérique en utilisant Javascript. L’horloge peut afficher les heures, les minutes et les secondes.

Horloge mondiale

Ce projet vous permettra de vous exercer aux fonctions de date et d’heure en Javascript. Construisez une page avec des villes de diverses régions du monde et calculez la date et l’heure à chaque endroit spécifique. Pour rester simple, vous pouvez garder l’affichage de l’horloge mondiale en texte et en chiffres, mais comme un bonus supplémentaire, vous pouvez le changer en animation complète et utiliser des éléments graphiques. En changeant le visage de l’horloge (littéralement), votre Javascript changera légèrement mais vous aurez besoin de plus de CSS ou HTML pour afficher plus d’éléments.

Galerie de photos

Configurez une page Web pour afficher une série d’images mais prévoyez deux boutons pour permettre à l’utilisateur d’avancer ou de reculer. Pour plus de défis, ajoutez une fonction d’avancement automatique pour passer automatiquement à l’image suivante après un temps déterminé. Prévoyez un champ de saisie pour accepter le temps en secondes. Définissez le temps d’intervalle et faites avancer les images en conséquence.

Chargeur de batterie

Avec Javascript, vous pouvez animer un processus avec ce projet de chargeur de batterie. Construisez une barre de progression de chargeur de batterie et animez le processus de charge en récupérant l’élément et en y paramétrant le HTML.

Eating Out Bill Splitter

Construisez un formulaire HTML et acceptez les entrées puis calculez le montant que chaque personne doit payer pour diviser l’addition. Ajoutez la possibilité d’accepter un pourboire et de le diviser en le payant.

Utilisez HTML et mettez en page les champs nécessaires pour accepter le montant de l’addition, le nombre de personnes qui mangent avec vous et deux boutons pour diviser l’addition et réinitialiser les champs.

Calculatrice

Construire une calculatrice en Javascript est l’un des meilleurs projets par lequel vous pouvez commencer. Il vous permettra de vous mouiller les pieds avec Javascript et vous aidera à comprendre ce que vous devez faire avec HTML, CSS et Javascript. Vous apprendrez également à structurer votre application web et à faire fonctionner les choses.

Votre calculatrice doit fournir toutes les fonctionnalités de base telles que l’addition de deux nombres, la soustraction d’un nombre, la multiplication de deux nombres et la division d’un nombre par un autre. Essayez de rester simple au début, en permettant à l’utilisateur de saisir un nombre suivi d’un opérateur puis d’un autre nombre avant d’appuyer sur le signe égal ‘=’ pour obtenir le résultat. Une fois que votre calculatrice fonctionne, vous pouvez modifier le code pour permettre à l’utilisateur de saisir une chaîne arithmétique plus longue avant d’appuyer sur le signe « = » pour obtenir le résultat. Vous pouvez également ajouter un bouton « CLR » pour effacer la boîte de résultats ou un bouton « DEL » pour supprimer la dernière entrée. Ou si vous voulez plus de défi, ajoutez des fonctions scientifiques à votre calculatrice.

C’est à vous de choisir comment vous voulez mettre en œuvre l’interface utilisateur (IU). Elle peut être aussi simple qu’une liste de boutons HTML ou aussi fantaisiste que des boutons qui changent de couleur lorsque vous les survolez à l’aide de CSS.

Vous trouverez ci-dessous une suggestion pour faire jaillir votre créativité :

Pour une fonctionnalité supplémentaire, ajoutez un code de vérification des erreurs pour avertir vos utilisateurs que la division par zéro soulèvera une erreur. Fournissez soit une popup, soit changez la couleur de la boîte de résultat en rouge et faites-la clignoter.

Smarthome

Ce projet nécessite deux pages web, une pour le panneau smarthome afin de gérer les paramètres du smarthome et l’autre pour montrer l’état de la maison. Avec le panneau smarthome, ajoutez un certain nombre de listes déroulantes HTML et des boîtes de saisie pour les heures de début et de fin. Remplissez la liste avec des dispositifs smarthome tels que :

• La lampe du salon
• La lampe de bureau de la chambre à coucher # 1
• La lampe sur pied de la chambre à coucher # 2
• Le ventilateur de la salle de bain
• Le lave-linge
• Le sèche-linge

.

• Porte avant
• Porte arrière
• Porte de garage
• Ventilateur de cuisine
• Lumière de salle à manger

Avec chacun de ces dispositifs, permettre à l’utilisateur d’entrer une heure de début et de fin de sorte que lorsque l’heure actuelle se situe entre ces deux moments, le dispositif s’allume. Éteignez le dispositif lorsque l’heure actuelle atteint l’heure de fin.

La deuxième page Web affichera l’état de la maison. Prévoyez un bouton ‘Run’ sur cette page pour démarrer la simulation. Lorsque le bouton ‘Run’ est pressé, obtenez l’heure actuelle et enregistrez-la dans une variable. Affichez-la sur la page d’accueil et mettez-la à jour toutes les secondes. Laissez la simulation se dérouler et vérifiez à nouveau sur la page lorsque les appareils sont réglés pour s’allumer ou s’éteindre.

Fournissez un graphique similaire à celui illustré ci-dessous pour montrer que les lumières sont allumées ou éteintes, que les verrous de porte sont ouverts ou fermés, que les thermostats indiquent la température et l’humidité, etc.

Pour ajouter de la complexité à votre codage Javascript, essayez d’ajouter un dégradé à votre page d’état d’accueil pour indiquer le jour et la nuit.

Carte des centres commerciaux

Avez-vous fait des achats dans un centre commercial dernièrement ? Ou préférez-vous faire vos achats en ligne ? Faire du shopping dans un centre commercial a ses avantages, comme vous donner la chance d’essayer des vêtements et de voir s’ils s’accordent avec votre jean ou non. Vous ne pouvez pas faire cela lorsque vous êtes assis devant votre ordinateur à faire du shopping en ligne.

Ce projet fournira une carte de centre commercial où les acheteurs perdus entreront un nom de magasin ou un article qu’ils souhaitent acheter. Vous fournirez la fonctionnalité Javascript pour rechercher le magasin dans le centre commercial et l’indiquer sur la carte avec une grande flèche pointant vers le magasin ou vous pouvez éclairer le magasin en rouge et le faire clignoter. Cela aiderait l’acheteur perdu si vous pouvez afficher l’emplacement actuel de l’acheteur par un cercle coloré et les mots  » Vous êtes ici  » à côté.

Utiliser HTML pour fournir une boîte de saisie pour soit un nom de magasin ou un article. Fournissez un objet de type base de données pour stocker une liste de noms de magasins et d’articles que chaque magasin peut vendre. C’est votre chance d’être créatif avec Javascript. Ce serait formidable si Javascript disposait d’un objet dictionnaire permettant de spécifier une liste de paires clé-valeur. Vous pourriez compiler une liste d’articles comme clés et mettre le nom du magasin comme valeur. Lorsque le client perdu saisit un article, vous pouvez parcourir le dictionnaire en comparant la clé à l’article saisi. Lorsqu’il y a correspondance, vous prenez le nom du magasin comme valeur et l’affichez.

Javascript n’a pas d’objet dictionnaire mais il a des tableaux. Essayez d’implémenter une structure de type base de données en utilisant des tableaux. Travailler avec des tableaux de manière extensive vous donnera une appréciation des opérations de tableau et avec ce projet, vous avez la chance de travailler avec des chaînes de texte et des manipulations de chaînes.

Liste d’épicerie

Le projet de liste d’épicerie est une variation d’une liste de choses à faire qui est souvent sur une liste de projets Javascript à construire. Fournissez une liste déroulante secondaire en HTML et remplissez-la avec des catégories telles que :

• Snacks
• Fruits
• Végétaux
• Articles en conserve
• Périssables
• Biens secs. Goods
• Supplies
• Bakery Items
• Frozen Goods

Au-dessous de la liste déroulante, fournissez une zone de saisie pour que l’utilisateur puisse entrer un article d’épicerie qui est sous la catégorie sélectionnée. Par exemple, si j’ai sélectionné  » légumes « , je peux saisir  » chou frisé « . Fournissez d’abord la fonctionnalité de base, puis ajoutez la validation au projet. Un message d’erreur doit s’afficher si un utilisateur tente de saisir un produit d’épicerie qui ne fait pas partie de la catégorie sélectionnée. Par exemple, un message d’erreur devrait apparaître si l’utilisateur essaie de saisir ‘Milk’ sous ‘Dry Goods’.

Pour montrer que votre code est correctement écrit, fournissez un bouton ‘Show List’ et lorsqu’il est pressé, il énumérera toute la liste d’épicerie par catégorie.

Jeu de labyrinthe

Aucune liste n’est complète sans inclure un jeu. Avec Javascript, vous pouvez ajouter de l’amusement dans une page web statique et ennuyeuse. Construisez un labyrinthe sur une page web et voyez si vous pouvez commencer à l’entrée du labyrinthe et finir en un temps record en traversant le labyrinthe, une étape à la fois.

Vous pouvez faire un labyrinthe aussi simple que vous le voulez ou aussi difficile que vous le pouvez. Mettez un compte à rebours dessus et voyez si vous pouvez battre le temps avant qu’il n’atteigne zéro. Ou mettez un compte à rebours et ajoutez du temps jusqu’à ce que vous réussissiez à traverser le labyrinthe.

Rendez-le intéressant en y ajoutant des trous cachés à l’aide d’un randomiseur. Lorsque vous marchez sur un trou caché, vous êtes transporté dans une autre partie du labyrinthe. Une autre chose que vous pouvez faire est d’ajouter des éléments de trésor dans le labyrinthe afin que vous puissiez ramasser des choses en cours de route. Cela rend la traversée du labyrinthe plus amusante, mais cela ajoutera plus de temps au chronomètre.

Validation de formulaire

Ce projet consiste à construire un formulaire qui valide les entrées et s’assure que les données saisies sont valides avant de les stocker dans un magasin de données persistant tel qu’une base de données. Les validations de formulaire peuvent se produire à la fois sur le front-end ou le back-end (c’est-à-dire le serveur), mais certains préfèrent effectuer les validations plus tôt dans le processus que plus tard. Créez un formulaire d’inscription et validez les données saisies. Le formulaire d’inscription doit inclure des champs tels que le prénom, le nom, l’adresse e-mail, le numéro de téléphone, le pays et le code postal.

Vous pouvez étendre ce projet en ajoutant la fonctionnalité de stockage des informations d’inscription dans un magasin de données persistant ou améliorer le HTML pour fournir des conseils lorsque l’utilisateur survole un champ.

Email côté client

Ce projet vous apprendra les limites de Javascript lorsque vous envoyez un email à partir d’un formulaire client. Construisez un formulaire avec une validation simple sur une adresse email et une zone de texte puis envoyez le contenu de la zone de texte à l’email fourni.

Lecteur vidéo

Ce projet consiste à construire une page web qui contient une vidéo et deux boutons pour mettre en pause la vidéo et la reprendre. Utilisez la balise HTML ‘video’ pour afficher l’élément et fournir deux boutons pour mettre en pause la vidéo et pour reprendre une vidéo. Codez une routine Javascript pour mettre en pause et lire la vidéo lorsque les boutons sont pressés.

Lecteur de musique

Amusez votre espace avec ce projet Javascript qui consiste à construire un lecteur de musique. Prévoyez un bouton pour lire une chanson et un bouton pour arrêter le lecteur. Pour rendre le projet plus stimulant, ajoutez un indicateur de progression qui se déplace sur la page au fur et à mesure que la musique joue.

Jeu de Pong

Un autre jeu classique à construire avec Javascript est le jeu de pong. Ce projet consiste à construire le jeu de pong à 2 joueurs en fournissant deux pagaies et des contrôles pour déplacer les pagaies vers le haut et le bas verticalement. Une balle rouge rebondit sur la raquette et se déplace de gauche à droite. Il est possible d’imprimer un mouvement de rotation à la balle lorsqu’elle touche le bord de la raquette, ce qui la fait rebondir à un angle de 45 degrés. La balle se déplace entre une frontière imaginaire qui entoure le terrain.

Un joueur marque un point lorsque son adversaire rate la balle. Le joueur qui a le plus de points gagne. Pour compléter le projet, ajoutez un tableau de scores pour afficher le score de chaque joueur. Incrémentez le score et rafraîchissez la page chaque fois qu’un point est marqué.

Jeu de breakout

Similaire au jeu de Pong est ce projet où le jeu de breakout est à construire. Le but de ce jeu est de supprimer tous les blocs en dirigeant la balle vers les blocs avec une palette coulissante. Ce projet consiste à construire le jeu de breakout en utilisant Javascript.

Un point est ajouté au score si le joueur efface la totalité du plateau avant que les  » vies  » soient épuisées. Un joueur commence avec 5 vies et chaque fois que le joueur rate la balle, une vie est déduite. Si un joueur perd toutes les vies, le jeu est terminé.

5 projets Javascript simples

• Barre de progression – Montrer la progression avec une barre coulissante.
• Tri de liste – Trier une liste de mots par ordre alphabétique.
• Horloge de compte à rebours du Nouvel An – Sonner la nouvelle année avec cette horloge simple qui compte jusqu’à minuit.
• Convertisseur impérial à métrique – Convertit les montants du système impérial au système métrique.
• Page de connexion – Accepte l’entrée d’un nom d’utilisateur et d’un mot de passe et le valide.

Barre de progression

Au lieu d’afficher un sablier lorsque vous attendez qu’un processus se termine, construisez une barre de progression en Javascript pour montrer la progression. Ce projet simple vous apprendra à accéder à un élément en HTML et à le manipuler en utilisant Javascript.

Utilisez une balise div pour fournir la barre de progression suivante.

Trier la liste

Démarrez avec une liste de villes telles que Berlin, Madrid, Oslo, Rome, Stockholm et Helsinki. Prévoyez un bouton pour  » Trier « . Lorsque le bouton est pressé, triez les villes par ordre alphabétique et affichez la liste triée.

Compte à rebours pour le Nouvel An

Que faites-vous pour célébrer la nouvelle année ? Vous faites exploser les feux d’artifice ou vous faites la fête ? Si vous ne répondez rien à ce qui précède, alors construisez ce projet Javascript simple et amusez-vous un peu. Construisez une horloge à rebours et regardez les secondes défiler jusqu’à 0:00.

Vous pouvez être aussi simple que vous le souhaitez ou aussi élaboré que vous le désirez mais l’horloge à rebours prend simplement le jour et l’heure actuels et effectue quelques calculs de date et d’heure pour l’afficher en jours, heures, minutes et secondes.

Convertisseur

En grandissant à l’école, j’ai appris à mesurer les volumes en gallons, quarts et pintes. Juste au moment où je le maîtrisais, ils sont passés au système métrique. Maintenant, je suis perdu en litres, grammes et centimètres cubes. Pour simplifier les recettes, créez un convertisseur de mesure en Javascript pour permettre à l’utilisateur d’entrer un nombre et une unité de mesure (par exemple, un gallon, un quart ou un pinte) et un bouton pour convertir. En appuyant sur le bouton, les quantités seront converties à l’aide de routines de conversion.

Page de connexion

La plupart des pages web sur Internet nécessitent qu’un utilisateur se connecte à son compte via une page de connexion. Un projet Javascript simple consiste à fournir deux zones de saisie et deux boutons, un pour ‘Annuler’ et un pour ‘Se connecter’. Au chargement de la page, désactivez le bouton « Connexion » et activez-le une fois que les deux entrées ont été saisies. Cryptez le champ de saisie du mot de passe afin que le mot de passe saisi ne soit pas visible. Ajoutez un code de vérification des erreurs en Javascript pour valider le nom d’utilisateur et le mot de passe. Alertez l’utilisateur que la saisie est incorrecte si le nom d’utilisateur ou le mot de passe est erroné.

De même, alertez l’utilisateur si la saisie est correcte. Soit redirigez l’utilisateur vers une autre page Web, soit fournissez un message indiquant que la connexion a réussi.

.