Jour Titre Description Modifications/Améliorations
01 Drum Kit Utilisez votre clavier d'ordinateur comme un clavier de piano ! (Je sais que je me suis répété)
  • Image de fond
  • Effet visuel des touches
02 Clock J'avais déjà fait une horloge auparavant, mais plus minimaliste. Voici une autre horloge plus jolie.
  • Fond de cadran
  • Bruit de tic-tac
  • Différenciation des aiguilles
03 CSS variables and JS Modifiez les inputs pour que les changements se répercutent sur la voiture.
  • Redimensionnement sur l'axe X
04 Array Cardio 1 De la manipulation de tableaux (Filter, Map, Sort, Reduce).
  • Affichage des résultats directement sur la page
05 Flex panels of terror Ils disent qu'il faut combattre ses peurs. Je vais vous aider... (contenus susceptibles de choquer par leur brutalité)
  • Police custom (ANUDRG)
06 Ajax Un JSON en ligne contient une liste de personnages de RPG. Allons récupérer les informations à leur sujet !
  • Si input vide ou espace: annuler recherche au lieu de rechercher une chaîne vide
  • Scroll vertical si trop de noms
07 Array Cardio 2 Parlons code, parlons foot ! (Every, Some, Find, FindIndex)
  • Affichage des résultats directement sur la page
08 Fun with Canvas Nous venons de revisiter Paint ! Vous allez en voir de toutes les couleurs.
  • Progression plus lente de la teinte
09 Console.log() La BFF du développeur !
  • Explications visuelles
10 SHIFT pour cases à cocher Je vais tâcher d'être bref. Utilisez la touche SHIFT pour cocher automatiquement toutes les cases comprises entre la case cliquée N-1 et la case cliquée N.
  • Ajout du principe inverse (décocher automatiquement)
11 HTML Video Player La Team Rocket, plus rapide que la lumière ! Je m'amuse comme un bambin avec JS30 !
  • Visuel et couleurs
12 Key Sequence Detection Une fois de plus la Team Rocket s'envole vers d'autres cieux ! Votre clavier va leur apprendre à voler.
  • Fond animé
  • Bruitages
13 Slide-in on scroll Les images apparaissent en coulissant quand on arrive à leur niveau. (Article sur la Slovénie)
  • Effet slide-in différent
14 Array Reference vs Copy Il est important de savoir faire la différence entre référencer un tableau et dupliquer ce dernier.
  • Explications visuelles
15 LocalStorage Faites-vous une liste de tâches à faire, qui persiste même après actualisation de la page.
  • Les tâches faites lors d'un rechargement de page sont automatiquement retirées de la liste, mais pas du LocalStorage
16 Text Shadow Il y a beaucoup de reflets de couleurs.
  • 8 reflets au lieu de 4
17 Sort() without articles On souhaite ordonner des noms de films, sans prendre en compte l'article au début (Le, La, Les, ...).
  • Adaptation en frnaçais
18 Tally times with reduce Un let's play sur Youtube est composé de nombreuses vidéos. Quelle est leur durée cumulée ?
  • Secondes et minutes inférieures à 10 mieux formatées (2:1:8 -> 2:01:08)
19 Unreal Webcam Fun Êtes-vous photogénique ? Attention, il vous faut cloner mon repository (instructions ultérieures), aller dans /challenges/19, faire npm install et lancer un serveur sur le port 3000 avec npm start !
Adresse: localhost:3000/19.html
  • Rien
20 Speech Recognition Vous parlez et hop, ça écrit à peu près ce que vous avez dit ! Comme pour le 19, ça nécessite de faire tourner un serveur.
Adresse: localhost:3000/20.html
  • Rien
21 Geolocation Ce challenge est le seul à ne pas vraiment marcher, faute de matériel.
Adresse: localhost:3000/21.html
  • Rien
22 Effet de focus sur un lien Quand vous passez sur un lien, celui-ci apparaît en surbrillance.
  • Présentation
23 Speech Synthesis J'ai une copine très bavarde qui va vous dire/chanter/[Autre verbe pertinent] ce que vous aurez marqué.
  • Boutons radio permettant de rajouter automatiquement une phrase.
    Inspiration
24 Sticky Nav Un petit effet très tendance sur votre menu de navigation.
  • Rajout d'ancres sur la nav
25 Propagation d'événements Le principe du bubbling, de l'interruption de propagation, et comment exécuter une seule fois l'événement. Tout se passe dans la console.
  • Description du principe
26 Stripe Follow among Dropdown C'est un peu la suite du challenge 22. Au focus sur un élément du menu, plus d'informations s'affichent.
  • Éléments personnalisés
27 Click and drag to scroll Le principe du glisser-déplacer, en 4 événements seulement !
  • Rien
28 Video Speed Controller C'est un peu comme le challenge 11 (avec la Team Rocket), sauf qu'il n'y a que la variation de vitesse, mais elle est mieux présentée.
  • Glissière restreinte pour rendre la vitesse minimum visible
29 Countdown Clock Une horloge qui fait également office de rappel.
  • Style personnalisé
30 Whack-a-Knux ! Cet échidné rouge a creusé plein de trous dans votre jardin ! Réglez-lui son compte à coups de clic !
  • Les Sonic apparaissent au hasard et rapportent 3 points !
  • Bruitage quand touché