Le Fizz-Buzz, le test d'embauche à la mode

18 avril 2019 - : CSS HTML Javascript Nouvelle-Techno.fr - : 0 commentaire - : 1440 - Javascript Généralités

Comment choisir un développeur ?

Cette question, beaucoup de recruteurs se la posent...

Il existe, bien sûr, la sélection sur CV, à l'ancienne, sans aucune garantie que le candidat sera compétent.

Depuis quelques temps maintenant, les concours pratiques ou tests techniques se sont démocratisés. Ces tests apportent une meilleure garantie sur les compétences du candidat.

Parmi ces tests, le Fizz-Buzz

Fizz-Buzz ? Kesako ?

Le test Fizz-Buzz est issu d'une méthode permettant d'apprendre les divisions aux enfants.

Pour les nombres entre 1 et 20 :

  • si le nombre est divisible par 3 : on écrit Fizz
  • si le nombre est divisible par 5 : on écrit Buzz
  • si le nombre est divisible par 3 et par 5 : on écrit Fizzbuzz
  • sinon : on écrit le nombre

Pourquoi utiliser ce test en recrutement ?

Le candidat développeur est soumis à ce test sous la contrainte du chronomètre, avec le choix du langage à utiliser et les nombres à traiter en règle générale de 1 à 100.

Il est convenu qu'un bon développeur mettra moins de 15 minutes pour délivrer un code de qualité. Un candidat qui dépasserait ce temps serait, de fait, disqualifié.

Un exemple en javascript

Si vous souhaitez travailler sur le code, ne lisez pas la suite.

Dans le cas contraire, voici un exemple de Fizz-Buzz infini en javascript.

Commençons par le code HTML

<!-- Une div vide qui accueillera les nombres -->
<div id="contenu" class="row"></div>
Nous allons ensuite faire de la mise en forme en CSS (facultative mais elle permet de faciliter la vérification)
/* Sépare la ligne en colonnes */
.row{
  display: flex;
  flex-wrap: wrap;
}

/* Formate les colonnes pour en faire des carrés */
.col{
  width: 75px;
  height: 75px;
  text-align: center;
  background-color: #f44336;
  box-sizing: border-box;
  padding: 10px;
  margin: 10px;
  color: white;
}

/* Couleurs spécifiques pour les cases Fizz-Buzz */
.fizz{
  background-color: #4CAF50;
}
.buzz{
  background-color: #607d8b;
}
.fizz.buzz{
  background-color: #ff9800;
}
Et enfin, le javascript, qui va faire tout le travail.

A noter que j'utilise des conditions ternaires pour raccourcir l'écriture, dont voici l'explication

// Cette ligne avec une condition ternaire
contenu += (i%3 == 0) ? "fizz " : "";

// Sera équivalente à
if(i%3 == 0){
    contenu += "fizz ";
}else{
    contenu += "";
}
Passons au code du Fizz-Buzz
// Variables globales
var i = 1;
var contenu = "";

$(function(){
  // Lancement du 1er lot (de 1 à 100)
  fizzBuzz(i);

  // Détection du défilement pour ajouter un nouveau lot de nombres
  $(document).on("scroll", scrolled);
});

// Fonction lancée quand on défile
function scrolled(){
  // Si on est en bas de l'écran
  if($(document).scrollTop() + $(window).height() >= $(document).height()){
    // On ajoute 100 au 1er nombre du lot
    i+=100;

    // On lance le lot
    fizzBuzz(i);
  }
}

// Fonction d'affichage des lots de nombres
function fizzBuzz(j){
  // On boucle sur tous les nombres du lot
  for(var i=j; i<=j+99; i++){
    // On écrit fizz si le nombre est divisible par 3 (le modulo 3 donne un reste nul)
    contenu += (i%3 == 0) ? "fizz " : "";

    // On écrit buzz si le nombre est divisible par 5 (s'ajoute au fizz si il a déjà été écrit)
    contenu += (i%5 == 0) ? "buzz" : "";

    // On écrit le nombre si contenu est vide
    contenu += (contenu == "") ? i : "";

    // On écrit le nom des classes à appliquer
    classe = contenu + " col"

    // On affiche le contenu
    $("#contenu").append("<div class='"+classe+"'>"+contenu+"</div>");
    contenu = "";
  }
}
Voilà, si vous voulez voir le résultat, c'est ci-dessous.

https://codepen.io/nouvelletechno/pen/bJvwNG

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder aux forums de Nouvelle-Techno.fr ou au serveur Discord pour une entraide par chat

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

Pas encore de commentaire

Ecrire un commentaire