F12 : création de TD how to

Ouvrir le jsbin ci-dessous, lancer F12 et modifier la largeur du body

element.style {

// modifier la largeur du body

   width : 300px;

}

body {

1. margin: 0;
2. padding: 0;
3. background: transparent;

}

JS Bin on jsbin.com

Voici pour information, le code à mettre en place pour les tests.


function isBodyWidthCorrect(expected) {
  var isCorrect = false;
  var width = Math.max(document.body.clientWidth,  document.body.getBoundingClientRect().width || 0);
  console.log(width);
  if (width==expected[0]) {
    isCorrect = true;
  } else{
    isCorrect = false;
  }
  // console.log("width: " + isCorrect);
  return isCorrect;
}

function createResultsDisplay() {
  var head = document.querySelector('head');
  var fontAwesome = document.createElement('link');
  fontAwesome.rel = 'stylesheet';
  fontAwesome.href = 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
  head.appendChild(fontAwesome);

  var gradeDisplayDiv = document.createElement('div');
  gradeDisplayDiv.classList.add('grade-display');
  gradeDisplayDiv.style.position = 'absolute';
  gradeDisplayDiv.style.minWidth = '200px';
  gradeDisplayDiv.style.backgroundColor = 'rgba(110, 120, 140, 0.8)';
  gradeDisplayDiv.style.left = '0px';
  gradeDisplayDiv.style.top = '0px';
  gradeDisplayDiv.style.padding = "0.5em";

  document.querySelector('body').appendChild(gradeDisplayDiv);
}

createResultsDisplay();

var tests = [
  {
    test: isBodyWidthCorrect,
    params: [
      300
    ],
    desc: "Body width is set correctly."
  }
];

var gradeLoop = setInterval(function() {
    var testObj,testCorrect;
    for (var i in tests) {
      //console.log(tests[0]);
        testCorrect = tests[i].test(tests[i].params);
        testObj = {
        desc: tests[i].desc,
        correct: testCorrect
      };
      /*
      updateResultsDisplay(testObj);
      if (arr.indexOf(arr[i]) === 0) {
        isCorrect = testCorrect;
      } else {
        isCorrect = isCorrect && testCorrect;
      }
      */
    }


    if (testCorrect) {
      clearInterval(gradeLoop);
        //displayCode(code);
        alert("Bravo!");
      updateResultsDisplay(testObj, function(){
      });
    }
  }, 1000);