solution TP1

.babelrc

+{
+	"presets": ["@babel/env"]
+}
\ No newline at end of file

.gitignore

+.DS_Store
+node_modules
+*.zip
+build
\ No newline at end of file

js/main.js

-console.log('Welcome to PizzaLand 🍕 !');
\ No newline at end of file
+/*
+// 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',
+		base: 'tomate',
+		prix_petite: 6.5,
+		prix_grande: 9.95,
+		image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+	},
+	{
+		nom: 'Napolitaine',
+		base: 'tomate',
+		prix_petite: 6.5,
+		prix_grande: 8.95,
+		image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
+	},
+	{
+		nom: 'Spicy',
+		base: 'crème',
+		prix_petite: 5.5,
+		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;
+}
+function sortByPrice(a, b) {
+	if ( a.prix_petite < b.prix_petite ) {
+		return -1;
+	} else if ( a.prix_petite > b.prix_petite ) {
+		return 1;
+	} else if ( a.prix_grande < b.prix_grande ) {
+		return -1;
+	} else if ( a.prix_grande > b.prix_grande ) {
+		return 1;
+	}
+	return 0;
+}
+
+// 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

package.json

+{
+  "name": "pizzaland",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "thomas.fritsch@univ-lille.fr",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4"
+  }
+}