diff --git a/js/main.js b/js/main.js index eac79b2b81c3edaded3110535c68f4cd28c3d977..807180b95240c3dece9b3941e2ddee11a4baeda7 100644 --- a/js/main.js +++ b/js/main.js @@ -1,63 +1,3 @@ -/* -// 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