From 76366bfc93f0b99307b796c5acb283b578d11434 Mon Sep 17 00:00:00 2001
From: Yannick Bauduin <yannick.bauduin.etu@univ-lille.fr>
Date: Fri, 4 Feb 2022 10:37:24 +0100
Subject: [PATCH] B. POO
---
.vscode/.prettierrc | 7 +++
.vscode/settings.json | 6 +++
package-lock.json | 21 ++++++++-
package.json | 7 ++-
src/main.js | 101 +++++++++++++++++++++++++++++++++---------
5 files changed, 118 insertions(+), 24 deletions(-)
create mode 100644 .vscode/.prettierrc
create mode 100644 .vscode/settings.json
diff --git a/.vscode/.prettierrc b/.vscode/.prettierrc
new file mode 100644
index 0000000..d64a3b6
--- /dev/null
+++ b/.vscode/.prettierrc
@@ -0,0 +1,7 @@
+{
+ "singleQuote": true,
+ "trailingComma": "es5",
+ "endOfLine": "lf",
+ "useTabs": true,
+ "arrowParens": "avoid"
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..4eb987c
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+ "[javascript]": {
+ "editor.formatOnSave": true,
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e9a6b05..951c5d2 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 9403339..95ebef7 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": "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 9bc6f7a..88b4399 100644
--- a/src/main.js
+++ b/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 ));
+*/
--
GitLab