Projet : créer une machine à café virtuelle (html/css/js)

Cette semaine, il m'est venu une idée un peu folle : créer une machine à café virtuelle. Mais une vraie machine ! Je voulais réfléchir à son design, l'intégrer en html/css, et mettre en place des animations pour servir différents cafés. Un projet simple, qui m'a permet de tester une autre façon d'utiliser le css, et de refaire du Javascript.

Maintenant que j'ai l'idée, je fais quoi ? #

Même si c'est un petit projet, je voulais faire les choses bien. Et surtout, j'avais besoin de mettre des limites à ce challenge : définir les objectifs à atteindre, m'empêcher de partir dans les sens, et surtout de me donner une limite de temps.

Imaginer un design et définir sa palette de couleurs.
Bosser ma CSS : animations, formes, position...
Améliorer le nommage des classes et des éléments.
Coder en JS ES6 (sans utiliser jQuery).
Avoir un projet qui peut évoluer : de nouvelles boissons, animations, adapter la page sur mobile, ajouter des sons...
Avoir un projet limité dans le temps : 4-5 jours.

1. Créer un moodboard et une charte graphique #

J'ai ouvert un projet Figma, des dizaines d'onglets Pinterest, et j'ai construit un moodboard (planche d'inspiration). À partir de là, j'avais une idée plus précise du rendu que je voulais, la forme de la machine et de la tasse, les couleurs, et la disposition.

2. Réaliser les premières maquettes #

À partir du moodboard et de mes sélections, j'ai pu réaliser des morceaux de maquettes des éléments de ma page :

Machine à café
Menu
Tasse
Design des différents cafés proposés

Ensuite, j'ai mis les différents éléments sur une page. C'était indispensable pour donner une unité au rendu, et cela m'a permis de réfléchir et d'anticiper les étapes à suivre.

3. Initialisation du dépôt et du projet #

J'aurai pu bosser directement dans CodePen, ou le garder en local, mais je voulais aussi en profiter pour remplir un peu mon GitHub, et conserver les bonnes pratiques d'un projet web : git, la documentation, le déploiement, la relecture...

4. On code ! #

Les étapes précédentes m'ont pris environ 2 jours. J'avais hâte de "coder". Comme j'avais ma maquette, la structure HTML/CSS était déjà définie. J'avais les blocs, leurs positions, leurs tailles, leurs couleurs.

J'ai profité de ce projet pour tester la méthode BEM (Blocks - Elements - Modifiers) pour le nommage des classes.

Au fur et à mesure, j'ai apporté quelques modifications sur la maquette : c'est comme ça que la cafetière est devenu jaune, et que j'ai retiré les bordures.

Le projet n'est pas destiné à être responsive, mais j'ai quand même pensé à un affichage de secours.

5. Les animations et le script JS #

Quand j'ai finalisé le plus gros de l'interface, j'ai pu démarrer les animations :

La tasse qui se remplit avec la couleur + hauteur de liquide souhaité
Le liquide (café ou lait) qui coule de la machine pour remplir la tasse
Bonus : le voyant lumineux marche/arrêt de la machine

C'est là qu'est le point complexe du projet : comment remplir en CSS un contenant arrondi ?

Je pense qu'il existe plusieurs méthodes, et certaines plus simples, mais pour ce challenge, j'ai privilégié clip-path: path()*. J'ai défini ma forme de tasse avec path(), et j'ai réalisé la même chose pour la <div> qui contient le liquide. Ainsi, je peux animer de différentes façons, sans voir changer l'arrondi de ma tasse.

Une fois satisfaite de mes différentes animations, j'ai commencé de coder mon script. J'ai adapté mon html/css pour utiliser des attributs data, qui m'ont permis de gérer les différentes étapes de mon script.

*update : après vérification, l'animation n'était pas fonctionnelle sous Chrome avec clip-path. J'ai donc corrigé sur codepen mon scss et j'ai utilisé border et border-radius pour la forme de la tasse et animer le remplissage.

Un petit café ? #

Si l'aperçu ne s'affiche pas, vous pouvez retrouver mon projet sur Codepen.