Créons des bulles 🎈
-
Ecouter le clic sur le document
-
Au clic, on crée une
<div>que l'on rajoute au<body> -
Ce div doit s'afficher en un rond noir de 100px.
-
Le centre de la bulle doit s'afficher à l'endroit où l'on clique. Ces pages de docs peuvent vous aider :
https://api.jquery.com/event.pageX/
https://api.jquery.com/event.pageY/
https://api.jquery.com/category/events/event-object/
-
Un peu de différence : à chaque clic, la bulle créée doit mesurer entre 10 et 200px de diamètre, aléatoirement.
-
Un peu de couleur : à chaque clic, la bulle créée doit avoir une couleur aléatoire, avec une opacité aléatoire entre .5 et .75.
(vous pouvez vous référer au jeu du plus petit plus grand pour retrouver comment on trouve un nombre aléatoire)
-
A la 20e bulle créée, toutes les bulles doivent tomber doucement tout en bas de la fenêtre.
-
Une fois arrivée en bas, les bulles disparaissent en opacité.
-
On peut toujours continuer à créer des bulles, et à 20 bulles, ça retombe à nouveau.
-
SUPER BONUS : faites en sorte que les bulles rebondissent quand elles tombent en bas de la fenêtre.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent