diff --git a/.babelrc b/.babelrc
index dfb789cd44ba0e6b8f22e3479dd33bfe8b1fd83e..e35c6fde65989e7f7b3c1ea6ca9135aa17ed7c45 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,6 @@
{
- "presets": ["@babel/env"]
+ "presets": [
+ ["@babel/env", {"modules": false}]
+ ],
+ "plugins": ["@babel/plugin-proposal-class-properties"]
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 059864d784d0f8290a8fc1fe1597a9a0a9b99809..8c82b581661fa347e69b450ddc20e7928cf82af5 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
<link rel="stylesheet" href="css/footer.css">
<script src="build/main.js" defer></script>
+ <script type="module" src="build/main.js"></script>
</head>
<body>
<header>
diff --git a/package-lock.json b/package-lock.json
index b550b6731d085ba1d342ed2d2f56c3451c0c08cd..64290a76d125be87202523ba12b93ab2726f8ee3 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 00564885fe7cc5e47495c8ce63f08a100c0f9161..9aedb6aa269c3eed0c094e82aee0c5a822455027 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,8 @@
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
- "@babel/preset-env": "^7.12.11"
+ "@babel/plugin-proposal-class-properties": "^7.12.1",
+ "@babel/preset-env": "^7.12.11",
+ "prettier": "^2.2.1"
}
}
diff --git a/src/main.js b/src/main.js
index 9bc6f7a62365cece33475f77137ebf98fd0945c8..744bf1780b2dff1fca7dbc3191472be5ed389227 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,131 +1,12 @@
-// D. Manipulation des chaînes
-
-// 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;
-
-// // 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;
-
-// 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;
-
-// // 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;
-
-// // 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;
-
-// 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',
- }
-];
-
-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 ));
+export default data;
+export function render() {}
+export class component {}
+export const title = new Component('h1', '', 'La carte');
+document.querySelector('.pageTitle').innerHTML = 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();