B. POO

.vscode/.prettierrc

+{
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"endOfLine": "lf",
+	"useTabs": true,
+	"arrowParens": "avoid"
+}
\ No newline at end of file

.vscode/settings.json

+{
+	"[javascript]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	}
+}
\ No newline at end of file

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",

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": "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"
   }
 }

src/main.js

@@ -54,30 +54,88 @@
 // document.querySelector('.pageContent').innerHTML = html;
 
 // 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'
-	},
-	{
-		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'
-	},
-	{
-		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',
-	}
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    name: "So 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",
+  },
 ];
 
+class Component {
+  tagname;
+  children;
+  attribute;
+  constructor(tagname, attribute, children) {
+    this.tagname = tagname;
+    this.attribute = attribute;
+    this.children = children;
+  }
+
+  renderAttribute() {
+    return `${this.attribute.name}="${this.attribute.value}"`;
+  }
+
+  render() {
+    if (this.tagname == "img") {
+      return `<${this.tagname} ${this.renderAttribute()}/>`;
+    }
+    return `<${this.tagname}>${this.children}</${this.tagname}>`;
+  }
+}
+
+class Img extends Component {
+  constructor(attribute) {
+    super("img", { name: "src", value: attribute });
+  }
+
+  render() {
+    return super.render();
+  }
+}
+
+const title = new Component("h1", null, "La Carte");
+document.querySelector(".pageTitle").innerHTML = title.render();
+console.log("Generated : " + title.render());
+
+/*
+const img = new Component("img", {
+  name: "src",
+  value:
+    "https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300",
+});
+document.querySelector(".pageContent").innerHTML = img.render();
+console.log("Generated : " + img.render());
+*/
+
+const img2 = new Img(
+  "https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300"
+);
+
+document.querySelector(".pageContent").innerHTML = img2.render();
+console.log("Generated : " + img2.render());
+
+/*
 function render(pizzas) {
 	const html = pizzas.reduce( (str, {image, name, price_small, price_large}) => str +
 		`<article class="pizzaThumbnail">
@@ -129,3 +187,4 @@ render( data );
 // render( data.filter( ({base}) => base == 'tomate' ))
 // render( data.filter( ({price_small}) => price_small < 6 ))
 // render( data.filter( ({name}) => name.match(/i/g).length === 2 ));
+*/