Simulateur flex : avec proportion et taille dynamique !

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);

createClass : ES6

class Nb {
    constructor(x, y) {
        this.x = x;
    }
    carre () {
        return this.x*this.x;
    }
}
const p1 = new Nb(2);
console.log(p1.carre());

Test : flex;

Donner le code CSS à écrire dans le simulateur (donner en dessous) pour obtenir les cinq figures suivantes.

Par exemple pour la figure suivante :

on pourrait écrire :

.flex-conteneur { display :flex; padding : 10px 0; } .flex-conteneur *{ flex : 100%; }

Utiliser le simulateur ! 

---

1

2

Object.create

Les fonctions et les objets ont un [[Prototype]]. 

• Il assure la chaîne de délégation.

Seule la fonction possède un prototype. 

• Il regroupe les méthodes et objets à partager, 
• Il est pointé par la chaîne de délégation

-> Un objet n'a pas de prototype !




let animal = {

        legs: 4

    },




let dog = Object.create(animal);

-> Une fonction possède un prototype !
function Animal() { }; //SuperClass

function Dog() { }; // SubClass

Dog.prototype = Object.create(Animal.prototype);

Dog.prototype.constructor = Dog; // mise à jour, car l'objet a été ecrasé



Dans le cas des fonctions, Il ne faudra pas confondre la propriété __proto__ ou [[Prototype]] avec la propriété prototype.

le prototype permet de partager les fonctions communes des instances d’un même objet. Et cet objet est pointé par le lien __proto__ d’autres objets.

Vous pouvez vérifier sur le code suivant les structures !

@media : en action

Modifier la taille de votre fenêtre revient à simuler une taille d'écran différente.

Article : flex

Solved by Flexbox

Cleaner, hack-free CSS