Skip to content
Snippets Groups Projects
Commit 6553d988 authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

A.2. nettoyage js

parent 4bfd901f
No related branches found
No related tags found
No related merge requests found
/*
// D. Manipulation des chaînes
// D.2. Créer une constante appelée `nom` et y assigner la chaîne de caractères `Regina`
const nom = 'Regina';
// D.3. Créer une constante nommée `url`.
const url = 'images/'+nom.toLowerCase()+'.jpg';
// D.4. Créer la variable `html`
let html = `<a href="${url}">${url}</a>`;
console.log( html );
// D.5. Afficher le contenu de la variable `html` dans la page.
document.querySelector('.pizzasContainer').innerHTML = html;
// D.6. Modifier encore la variable html avant son affichage
html = `<a href="${url}">
<img src="${url}" />
<h4>${nom}</h4>
</a>`;
document.querySelector('.pizzasContainer').innerHTML = html;
// E.1. Manipulation des tableaux
let data = [ 'Regina', 'Napolitaine', 'Spicy' ];
html = '';
// E.1. boucle for :
for (let i = 0; i < data.length; i++) {
const nom = data[i],
url = `images/${nom.toLowerCase()}.jpg`;
html += `<a href="${url}">
<img src="${url}" />
<h4>${nom}</h4>
</a>`;
}
document.querySelector('.pizzasContainer').innerHTML = html;
// E.1. Array.forEach :
html = '';
data.forEach( nom => {
const url = `images/${nom.toLowerCase()}.jpg`;
html += `<a href="${url}">
<img src="${url}" />
<h4>${nom}</h4>
</a>`;
})
document.querySelector('.pizzasContainer').innerHTML = html;
// E.1. Array.map + Array.join :
html = data.map( nom => `<a href="images/${nom.toLowerCase()}.jpg">
<img src="images/${nom.toLowerCase()}.jpg" />
<h4>${nom}</h4>
</a>`).join('');
document.querySelector('.pizzasContainer').innerHTML = html;
// E.1. Array.reduce :
html = data.reduce( (str, nom) => str+`<a href="images/${nom.toLowerCase()}.jpg">
<img src="images/${nom.toLowerCase()}.jpg" />
<h4>${nom}</h4>
</a>`,'');
document.querySelector('.pizzasContainer').innerHTML = html;
*/
// E.2. Les objets littéraux
const data = [
{
nom: 'Regina',
......@@ -80,55 +20,4 @@ const data = [
prix_grande: 8,
image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300'
}
];
function render(pizzas) {
const html = pizzas.reduce( (str, {image, nom, prix_petite, prix_grande}) => str +
`<article class="media">
<a href="${image}">
<img src="${image}" />
<section class="infos">
<h4>${nom}</h4>
<ul>
<li>Prix petit format : ${prix_petite.toFixed(2)} €</li>
<li>Prix grand format : ${prix_grande.toFixed(2)} €</li>
</ul>
</section>
</a>
</article>`, '');
document.querySelector('.pizzasContainer').innerHTML = html;
}
// G.1. Tri de tableaux
function sortByName(a, b) {
if ( a.nom < b.nom ) {
return -1;
} else if ( a.nom > b.nom ) {
return 1;
}
return 0;
}
// tri par prix_petit croissant PUIS par prix_grande croissant
function sortByPrice(a, b) {
if ( a.prix_petite !== b.prix_petite ) {
return a.prix_petite - b.prix_petite;
}
return a.prix_grande - b.prix_grande;
}
// Attention : data.sort() modifie le tableau original
render( data.sort(sortByName) );
render( data.sort(sortByPrice) );
// // G.2. Système de filtre
render( data.filter( pizza => pizza.base == 'tomate' ))
render( data.filter( pizza => pizza.prix_petite < 6 ))
// deux possibilités pour les pizzas avec deux fois la lettre "i"
render( data.filter( pizza => pizza.nom.split('i').length == 3 ))
render( data.filter( pizza => pizza.nom.match(/i/g).length == 2 ))
// // G.3. Destructuring
render( data.filter( ({base}) => base == 'tomate' ))
render( data.filter( ({prix_petite}) => prix_petite < 6 ))
render( data.filter( ({nom}) => nom.match(/i/g).length === 2 ));
\ No newline at end of file
];
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment