Comment déclencher n’importe quel événement en JavaScript vanilla

Après avoir réussi à automatiser les clicks sur les fortunes de Cookie Clicker (voir ici), par curiosité je me suis intéressé à la première version de ce jeu (voir ici).

Sur cette version, la première chose que j’ai cherché à automatiser est bien évidemment le click sur le cookie.

Après un rapide coup d’oeil au code de la page, j’ai trouvé l’id de notre cookie (dans notre cas “cookie”), et j’ai mis en place un classique setInterval pour déclencher un clic, avec notre grande amie la méthode click().

let legacyCookieClicker = setInterval(() => {
   document.querySelector('#cookie').click();
}, 250);

Mais cela n’avais par l’air d’avoir d’effet.

Continuer la lecture

Une flip card en CSS

Vous avez toujours voulu savoir comment créer un effet de carte retournée (flip card en anglais) ? Cet article est ce qu’il vous faut !

Le résultat final est disponible ici.

Structure HTML

Pour commencer, attaquons nous à la structure HTML d’une carte.

Pour schématiser, une carte se décompose comme ceci : un cadre, qui contient une planche sur les faces de laquelle il y a ce que l’on veut afficher, et au survol de la souris, on fait pivoter cette planche interne.

Cela nous donne la structure HTML suivante :

<div class="card">
  <div class="card_inner">
    <div class="card_face card_back"></div>
    <div class="card_face card_front"><h2>Don't worry</h2><p>Be happy</p></div>
  </div>
</div>

La classe .card, représente le cadre, la classe .card_inner la planche et la classe .card_face les deux faces de cette planche (avec également une classe différente pour chaque face.

Continuer la lecture