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

bug : chrome

Il arrive que les navigateurs ne se comportent pas comme le demande la spécification :

Exemple  :
JS Bin on jsbin.com
 Version 49.0.2623.87 m de chrome : 
(version corrigé sur 51)

Internet explorer 11

Quizz css

class

var _createClass = function () { 
  
  function defineProperties(target, props) { 
    for (var i = 0; i < props.length; i++) { 
      var descriptor = props[i]; 
      descriptor.enumerable = descriptor.enumerable || false; 
      descriptor.configurable = true; 
      
      if ("value" in descriptor) descriptor.writable = true; 
      
      Object.defineProperty(target, descriptor.key, descriptor); 
    } 
  } 
  
  //create class
  return function (Constructor, protoProps, staticProps) { 
    
    if (protoProps) defineProperties(Constructor.prototype, protoProps); 
    if (staticProps) defineProperties(Constructor, staticProps); 
    
    return Constructor; 
  }; 
}();

function _possibleConstructorReturn(self, call) { 
  if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } 
  
  return call && (typeof call === "object" || typeof call === "function") ? call : self; 
}

function _inherits(subClass, superClass) { 
  if (typeof superClass !== "function" && superClass !== null) { 
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); }
  
  subClass.prototype = Object.create(superClass && superClass.prototype, { 
    constructor: { value: subClass, enumerable: false, writable: true, configurable: true } 
  }); 
  
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { 
  if (!(instance instanceof Constructor)) { throw new         TypeError("Cannot call a class as a function"); } }

var Animal = function () {
  function Animal(name) {
    _classCallCheck(this, Animal);

    this.name = name;
  }

  _createClass(Animal, [{
    key: 'speak',
    value: function speak() {
      console.log(this.name + ' makes a noise.');
    }
  }]);

  return Animal;
}();

var Dog = function (_Animal) {

  _inherits(Dog, _Animal);

  function Dog() {
    _classCallCheck(this, Dog);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(Dog).apply(this, arguments));
  }

  _createClass(Dog, [{
    key: 'speak',
    value: function speak() {
      console.log(this.name + ' barks.');
    }
  }]);

  return Dog;
}(Animal);

http://jsbin.com/zayoro/1/

Menu

On peut écrire une règle unique pour la mise en place du sous menu :

Tous les sous menu sont à hauteur zéro sauf celui sur lequel je suis ! 

li:not(:hover) ul{
        height: 0;
        overflow: hidden;
}

En ajoutant de l'animation !

étude CSS

Etudier le css de http://vincennes1900.blogspot.fr/ en redimentionnant la page !

Quizz CSS

Quizz HTML

Etude du CSS

Etudier le css de http://vincennes1900.blogspot.fr/