Démos interactives

Voici quelques petites démos en JavaScript inspirées de différents projets : mini-jeux, interactions front-end et une démo plus avancée (Cookie Dev) qui utilise aussi un vrai back-end (PHP, MySQL, comptes utilisateurs).

Jeu de clic rapide

Cliquez le plus de fois possible en 5 secondes. Démo simple pour illustrer la gestion du temps, des événements et de l’état en JavaScript.

Temps restant : 5 s

Score : 0 clic(s)

Deviner le nombre

Le script choisit un nombre entre 1 et 100. À vous de le deviner. Cette démo illustre la gestion d’entrées utilisateur, de messages d’erreur et de logique conditionnelle.

J’ai choisi un nombre entre 1 et 100. À vous de deviner :

Essais : 0

Animation & interactions

Petit carré que l’on peut déplacer avec les touches du clavier (Z, Q, S, D ou flèches) dans une zone limitée. Démo pour montrer la gestion des événements clavier et des positions.

Utilisez les flèches ou ZQSD pour déplacer le carré.

Cookie Dev – Clicker du développeur

Mini-jeu de type Cookie Clicker dans l’univers du développement web : vous gagnez des lignes de code en cliquant et débloquez des langages, frameworks et outils.

Cette démo utilise un back-end en PHP avec une base MySQL pour gérer les comptes utilisateurs et sauvegarder la progression.

Le jeu complet est disponible sur une page dédiée :

Jouer à Cookie Dev

Vous pouvez jouer en invité, mais si vous créez un compte ou Connexion, votre progression sera sauvegardée.

Démos liées à certains projets

Ces exemples sont inspirés de projets présentés sur la page Projets : dashboard d’administration, gestion de planning, etc. L’objectif est de montrer, en version simplifiée, des comportements que j’implémente dans ces applications.

Filtrage d’une liste de projets

Démo inspirée de mon dashboard OVH / outils d’administration : filtrer une liste côté front avant d’envoyer une requête plus complexe au serveur (ou à une DataTable).

  • Dashboard OVH – gestion de domaines et VPS
  • PlanningApp – gestion de planning employés
  • Garbadge – gestion de repas / menus
  • JCDecaux Vélo’v – disponibilité des stations
  • SteamRest – API + front pour bibliothèque de jeux

Mini planning cliquable

Démo inspirée du projet PlanningApp : affecter ou retirer rapidement une présence en cliquant sur un créneau (matin / après-midi).

Cliquez sur les cases pour marquer la présence d’un collaborateur.

Lun
Matin
Lun
Après-midi
Mar
Matin
Mar
Après-midi
Mer
Matin
Mer
Après-midi
Jeu
Matin
Jeu
Après-midi

Aucun créneau sélectionné pour le moment.

Et pour les projets plus complexes ?

Ces exemples sont volontairement simples, mais ils s’appuient sur les mêmes bases que des interfaces plus avancées : gestion des événements, mise à jour de l’interface en fonction de l’état, validation d’entrées, etc.

Pour des projets plus complets (applications web, outils métiers, APIs, etc.), vous pouvez consulter la page Projets ou me contacter pour discuter d’un besoin spécifique.

Exemple de site vitrine (Restaurant)

Exemple complet de site vitrine pour restaurant : page d’accueil, présentation, carte, réservation et contact. C’est un modèle que je peux adapter pour un client en changeant simplement les contenus et quelques éléments graphiques.

Cette démo montre le type de structure que je peux proposer rapidement pour un projet de site vitrine.

Voir l’exemple de site vitrine