From 5e892d3c557b9bc12690bb6737792f4850423a62 Mon Sep 17 00:00:00 2001
From: Yannick Bauduin <yannick.bauduin.etu@univ-lille.fr>
Date: Fri, 4 Feb 2022 11:36:34 +0100
Subject: [PATCH] C. 2.3
---
.babelrc | 4 +-
index.html | 2 +-
src/components/Component.js | 22 +++++
src/components/Img.js | 9 ++
src/data.js | 28 ++++++
src/main.js | 172 +-----------------------------------
6 files changed, 66 insertions(+), 171 deletions(-)
create mode 100644 src/components/Component.js
create mode 100644 src/components/Img.js
create mode 100644 src/data.js
diff --git a/.babelrc b/.babelrc
index dfb789c..91da876 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,5 @@
{
- "presets": ["@babel/env"]
+ "presets": [
+ ["@babel/env", {"modules": false}]
+ ]
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 059864d..a3a7118 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
<link rel="stylesheet" href="css/pizzaList.css">
<link rel="stylesheet" href="css/footer.css">
- <script src="build/main.js" defer></script>
+ <script type="module" src="build/main.js" defer></script>
</head>
<body>
<header>
diff --git a/src/components/Component.js b/src/components/Component.js
new file mode 100644
index 0000000..bec5bb2
--- /dev/null
+++ b/src/components/Component.js
@@ -0,0 +1,22 @@
+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}>`;
+ }
+}
+export default Component;
diff --git a/src/components/Img.js b/src/components/Img.js
new file mode 100644
index 0000000..5ac6c17
--- /dev/null
+++ b/src/components/Img.js
@@ -0,0 +1,9 @@
+import Component from "./Component.js";
+
+class Img extends Component {
+ constructor(attribute) {
+ super("img", { name: "src", value: attribute });
+ }
+}
+
+export default Img;
diff --git a/src/data.js b/src/data.js
new file mode 100644
index 0000000..d0738e9
--- /dev/null
+++ b/src/data.js
@@ -0,0 +1,28 @@
+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: "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",
+ },
+];
+
+export default data;
diff --git a/src/main.js b/src/main.js
index 88b4399..77324a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,118 +1,6 @@
-// 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: "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();
- }
-}
+import data from "./data.js";
+import Component from "./components/Component.js";
+import Img from "./components/Img.js";
const title = new Component("h1", null, "La Carte");
document.querySelector(".pageTitle").innerHTML = title.render();
@@ -134,57 +22,3 @@ const img2 = new Img(
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">
- <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 ));
-*/
--
GitLab