partie a et b

.babelrc

 {
-	"presets": ["@babel/env"]
+	"presets": ["@babel/env"],
+	"plugins": ["@babel/plugin-proposal-class-properties"]
 }
\ No newline at end of file

.prettierrc

+{
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"endOfLine": "lf",
+	"useTabs": true,
+	"arrowParens": "avoid"
+}

.vscode/settings.json

+{
+	"[javascript]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	}
+}

package-lock.json

@@ -2433,6 +2433,12 @@
       "dev": true,
       "optional": true
     },
+    "prettier": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
+      "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
+      "dev": true
+    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",

package.json

@@ -4,14 +4,18 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel src -d build",
+    "watch" : "babel src -d build --verbose --watch --source-maps"
   },
+  
   "author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
   "homepage": "https://gitlab.univ-lille.fr/js",
   "license": "ISC",
   "devDependencies": {
     "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11"
+    "@babel/preset-env": "^7.12.11",
+    "prettier": "^2.2.1"
   }
 }

src/main.js

-// D. Manipulation des chaînes
+class Component {
+	tagName;
+	children;
+	attribute;
+	constructor(tagName, attribute, children) {
+		this.tagName = tagName;
+		this.attribute = attribute;
+		this.children = children;
+	}
 
-// const name = 'Regina';
-// const url = `images/${name.toLowerCase()}.jpg`;
-// const html = `
-// 	<article class="pizzaThumbnail">
-// 		<a href="${url}">
-// 			<img src="${url}" />
-// 			<section>${name}</section>
-// 		</a>
-// 	</article>
-// `;
-// document.querySelector('.pageContent').innerHTML = html;
+	render() {
+		if (this.attribute != null) {
+			return `<${this.tagName} ${this.renderAttribute()} /> `;
+		}
+		if (this.children != null || this.children != undefined) {
+			return `<${this.tagName}> ${this.children} </${this.tagName}>`;
+		} else {
+			return '<' + this.tagName + '/>';
+		}
+	}
 
-// // 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 += `<article class="pizzaThumbnail">
-// 		<a href="${url}">
-// 			<img src="${url}" />
-// 			<section>${nom}</section>
-// 		</a>
-// 	</article>`;
-// }
-// document.querySelector('.pageContent').innerHTML = html;
+	renderAttribute() {
+		return `${this.attribute.name}="${this.attribute.value}"`;
+	}
+}
 
-// 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('.pageContent').innerHTML = html;
+class Img extends Component {
+	constructor(valeur) {
+		super('img', { name: 'src', value: valeur }, null);
+	}
+}
 
-// // 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('.pageContent').innerHTML = html;
+const title = new Component('h1', null, 'La carte');
+document.querySelector('.pageTitle').innerHTML = title.render();
 
-// // 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('.pageContent').innerHTML = html;
+/*const img = new Component('img', {
+	name: 'src',
+	value:
+		'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
+}); */
+const img = new Img(
+	'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+);
+document.querySelector('.pageContent').innerHTML = img.render();
 
-// E.2. Les objets littéraux
 const data = [
 	{
 		name: 'Regina',
 		base: 'tomate',
 		price_small: 6.5,
 		price_large: 9.95,
-		image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+		image:
+			'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
 	},
 	{
 		name: 'Napolitaine',
 		base: 'tomate',
 		price_small: 6.5,
 		price_large: 8.95,
-		image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
+		image:
+			'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
 	},
 	{
 		name: 'Spicy',
 		base: 'crème',
 		price_small: 5.5,
 		price_large: 8,
-		image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
-	}
+		image:
+			'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
+	},
 ];
-
-function render(pizzas) {
-	const html = pizzas.reduce( (str, {image, name, price_small, price_large}) => str +
-		`<article class="pizzaThumbnail">
-			<a href="${image}">
-				<img src="${image}" />
-				<section>
-					<h4>${name}</h4>
-					<ul>
-						<li>Prix petit format : ${price_small.toFixed(2)} €</li>
-						<li>Prix grand format : ${price_large.toFixed(2)} €</li>
-					</ul>
-				</section>
-			</a>
-		</article>`, '');
-	document.querySelector('.pageContent').innerHTML = html;
-}
-
-// G.1. Tri de tableaux
-function sortByName(a, b) {
-	if ( a.name < b.name ) {
-		return -1;
-	} else if ( a.name > b.name ) {
-		return 1;
-	}
-	return 0;
-}
-
-// tri par price_small croissant PUIS par price_large croissant
-function sortByPrice(a, b) {
-	if ( a.price_small !== b.price_small ) {
-		return a.price_small - b.price_small;
-	}
-	return a.price_large - b.price_large;
-}
-
-// // Attention : data.sort() modifie le tableau original
-render( data );
-// 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.price_small < 6 ))
-// // deux possibilités pour les pizzas avec deux fois la lettre "i"
-// render( data.filter( pizza => pizza.name.split('i').length == 3 ))
-// render( data.filter( pizza => pizza.name.match(/i/g).length == 2 ))
-
-// // G.3. Destructuring
-// render( data.filter( ({base}) => base == 'tomate' ))
-// render( data.filter( ({price_small}) => price_small < 6 ))
-// render( data.filter( ({name}) => name.match(/i/g).length === 2 ));