Evolution : comparaison
Méthode : map
like composant
le code sépare maintenant la logique de construction de l'en-tête et du corps du tableau en deux fonctions distinctes : buildTableHeader
et buildTableBody
.
node | element |
function buildTable(data) { var table = document.createElement("table");
var fields = Object.keys(data[0]); console.log(fields); var headRow = document.createElement("tr"); fields.forEach(function(field) { var headCell = document.createElement("th"); headCell.textContent = field; headRow.appendChild(headCell); }); table.appendChild(headRow); data.forEach(function(object) { var row = document.createElement("tr"); fields.forEach(function(field) { var cell = document.createElement("td"); cell.textContent = object[field]; if (typeof object[field] == "number") cell.style.cssText = "background-color:black;color:white;text-align:right;" row.appendChild(cell); }); table.appendChild(row); }); return table; } document.body.appendChild(buildTable(PERSON)); | function buildTable(data) { const table = document.createElement("table"), fields = Object.keys(data[0]); let template = `<tr><th>${fields[0]}</th><th>${fields[1]}</th><th>${fields[2]}</th></tr>`; table.insertAdjacentHTML("afterBegin", template); for (let { name, age, country } of data) { template = `<tr><td>${name}</td><td>${age}</td><td>${country}</td></tr>`; table.insertAdjacentHTML("beforEEnd", template); } return table; } document.body.appendChild(buildTable(PERSON)); |
le code sépare maintenant la logique de construction de l'en-tête et du corps du tableau en deux fonctions distinctes : buildTableHeader
et buildTableBody
.
🎞️Etudiez une API
API : https://ghibliapi.dev/
Créez un application avec les films du studio
Chaque film a la structure suivante
Hugo écrit :
"Evry me manque aussi parfois et merci à vous car c’est votre discours en L1 sur l’importance de résultats en l1 et l2 pour accéder à l’alternance qui m’a motivé sur ces deux premières années !!! "
🚀Quelle couleur est la plus proche de 610 ?
const table = new Map([
[0,'yellowgreen'],
[150, 'green'],
[600, 'olive'],
[750, 'red'],
[800, 'black'],
]);
const closestKey = [...table.keys()].reduce( (acc, key) => {
return acc = ( Math.abs(acc-value) < Math.abs(key-value) ) ? acc : key
})
console.log(`the closest value of ${value} is ${table.get(closestKey)}`
https://docs.google.com/document/d/10h_6uHYvPKyLtQPNlUNkr7L_jqS98r0AD3PlAvsHE2g/edit?usp=sharing
https://docs.google.com/document/d/1t0oOJ5Vo2AmxwvLodTaobpY7BOs0_QPIME23wAx08SA/edit?usp=sharing
https://docs.google.com/document/d/1PUUE7HBeqJ2hDh6c5MxJsBS3N0W2xl83l0kaVofl4V4/edit?usp=sharing
https://docs.google.com/document/d/1DYadNNz9MejGkKGWo31DCLhT_Nxnbh94vohXyDaJ_YY/edit?usp=sharing
https://docs.google.com/document/d/1EU2hY-ZjEGV0E9VQVuYry4n_ohApN0OGEfWp1hONrNI/edit?usp=sharing
https://docs.google.com/document/d/1En2R7iD3RabNgeSjYjjofCVxKjXglSNH8_34qgD54SQ/edit?usp=sharing
https://docs.google.com/document/d/1U7StYdejEdcYjezKIkgukU23awAz4nwWLzNq6AF54YY/edit?usp=sharing