diff --git a/.vscode/.prettierrc b/.vscode/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..d64a3b68f4051320da34d4186e0d66e75ca87f24
--- /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 0000000000000000000000000000000000000000..4eb987ccaa632c6cdf2622a15071d12c874c1ac6
--- /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 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..95ebef73dab7e1bac6ad128dc1c22857bee7892d 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 9bc6f7a62365cece33475f77137ebf98fd0945c8..88b43995e7b5ca3b2b5edd245e5e151150decc6e 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 ));
+*/