diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..24c0f50f048664f7d10cf60b3997ecdfee2dfa06
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"endOfLine": "lf",
+	"useTabs": true,
+	"arrowParens": "avoid"
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..cfa3c4b30a33353682927627476e80cbfd403908
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+	"[javascript]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	}
+}
diff --git a/package-lock.json b/package-lock.json
index e9a6b050f27fcc509dfaa3aa38dc67cf09a6d0a1..951c5d2b35e25e6037aa4647bd75f033f1e0bded 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
       "devDependencies": {
         "@babel/cli": "^7.16.8",
         "@babel/core": "^7.16.12",
-        "@babel/preset-env": "^7.16.11"
+        "@babel/preset-env": "^7.16.11",
+        "prettier": "^2.5.1"
       }
     },
     "node_modules/@babel/cli": {
@@ -2328,6 +2329,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
+      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4211,6 +4224,12 @@
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
       "dev": true
     },
+    "prettier": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
+      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
+      "dev": true
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
diff --git a/package.json b/package.json
index 940333961b4e90183053162f5074af7b53c41c92..9f66e368b7546abd3c38e79b3c006ffe35d702fd 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,9 @@
   "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": "./node_modules/.bin/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",
@@ -12,6 +14,7 @@
   "devDependencies": {
     "@babel/cli": "^7.16.8",
     "@babel/core": "^7.16.12",
-    "@babel/preset-env": "^7.16.11"
+    "@babel/preset-env": "^7.16.11",
+    "prettier": "^2.5.1"
   }
 }
diff --git a/src/main.js b/src/main.js
index 9bc6f7a62365cece33475f77137ebf98fd0945c8..bcfab0a95871d260987c71026249fe157a2c87c5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -78,43 +78,70 @@ const data = [
 	}
 ];
 
-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;
+class Component {
+	children;
+	tagName;
+	attribute;
+	constructor(tagName,attribute ,children) {
+		this.tagName = tagName;
+		this.attribute = attribute;
+		this.children = children;
 	}
-	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;
+	render(){ 
+		let html =`<${this.tagName} ${this.attribute.name}=${this.attribute.value}/>`;
+		if(this.children){
+			html=`<${this.tagName}>${this.children}</${this.tagName}>`;
+		}
+		return html;
 	}
-	return a.price_large - b.price_large;
 }
+class Img extends Component{
+	super('img',{name:'src', value: null} ,null);
+}
+
+const title = new Component( 'h1' ,'', 'La carte');
+document.querySelector('.pageTitle').innerHTML = title.render();
+const img = new Img('https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300');
+document.querySelector( '.pageContent' ).innerHTML = img.render();
+
+
+// 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 );
 // render( data.sort(sortByName) );
 // render( data.sort(sortByPrice) );