tp1

.babelrc

+{
+	"presets": ["@babel/env"]
+}

build/main.js

+"use strict";
+
+var html = "";
+var 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'
+}];
+data.forEach(function (d) {
+  html = html + "\n    <article class=\"pizzaThumbnail\">\n        <a href=\"".concat(d.image, "\">\n            <img src=\"").concat(d.image, "\"/>\n            <section>\n                <h4>").concat(d.name, "</h4>\n                <ul>\n                    <li>Prix petit format : ").concat(d.price_small, " \u20AC</li>\n                    <li>Prix grand format : ").concat(d.price_large, " \u20AC</li>\n                </ul>\n            </section>\n        </a>\n    </article>");
+});
+console.log(html);
+document.querySelector('.pageContent').innerHTML = html;
+//# sourceMappingURL=main.js.map
\ No newline at end of file

build/main.js.map

+{"version":3,"sources":["../src/main.js"],"names":["html","data","name","base","price_small","price_large","image","forEach","d","console","log","document","querySelector","innerHTML"],"mappings":";;AAAA,IAAIA,IAAI,KAAR;AAEA,IAAMC,IAAI,GAAG,CACZ;AACCC,EAAAA,IAAI,EAAE,QADP;AAECC,EAAAA,IAAI,EAAE,QAFP;AAGCC,EAAAA,WAAW,EAAE,GAHd;AAICC,EAAAA,WAAW,EAAE,IAJd;AAKCC,EAAAA,KAAK,EAAE;AALR,CADY,EAQZ;AACCJ,EAAAA,IAAI,EAAE,aADP;AAECC,EAAAA,IAAI,EAAE,QAFP;AAGCC,EAAAA,WAAW,EAAE,GAHd;AAICC,EAAAA,WAAW,EAAE,IAJd;AAKCC,EAAAA,KAAK,EAAE;AALR,CARY,EAeZ;AACCJ,EAAAA,IAAI,EAAE,OADP;AAECC,EAAAA,IAAI,EAAE,OAFP;AAGCC,EAAAA,WAAW,EAAE,GAHd;AAICC,EAAAA,WAAW,EAAE,CAJd;AAKCC,EAAAA,KAAK,EAAE;AALR,CAfY,CAAb;AAyBAL,IAAI,CAACM,OAAL,CAAa,UAASC,CAAT,EAAY;AACrBR,EAAAA,IAAI,GAAGA,IAAI,yEAEIQ,CAAC,CAACF,KAFN,yCAGSE,CAAC,CAACF,KAHX,8DAKOE,CAAC,CAACN,IALT,sFAO+BM,CAAC,CAACJ,WAPjC,uEAQ+BI,CAAC,CAACH,WARjC,8FAAX;AAaH,CAdD;AAeAI,OAAO,CAACC,GAAR,CAAYV,IAAZ;AACAW,QAAQ,CAACC,aAAT,CAAuB,cAAvB,EAAuCC,SAAvC,GAAmDb,IAAnD","sourcesContent":["let html = ``;\r\n\r\nconst data = [\r\n\t{\r\n\t\tname: 'Regina',\r\n\t\tbase: 'tomate',\r\n\t\tprice_small: 6.5,\r\n\t\tprice_large: 9.95,\r\n\t\timage: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'\r\n\t},\r\n\t{\r\n\t\tname: 'Napolitaine',\r\n\t\tbase: 'tomate',\r\n\t\tprice_small: 6.5,\r\n\t\tprice_large: 8.95,\r\n\t\timage: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'\r\n\t},\r\n\t{\r\n\t\tname: 'Spicy',\r\n\t\tbase: 'crème',\r\n\t\tprice_small: 5.5,\r\n\t\tprice_large: 8,\r\n\t\timage: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',\r\n\t}\r\n];\r\n\r\n\r\ndata.forEach(function(d) {\r\n    html = html + `\r\n    <article class=\"pizzaThumbnail\">\r\n        <a href=\"${d.image}\">\r\n            <img src=\"${d.image}\"/>\r\n            <section>\r\n                <h4>${d.name}</h4>\r\n                <ul>\r\n                    <li>Prix petit format : ${d.price_small} €</li>\r\n                    <li>Prix grand format : ${d.price_large} €</li>\r\n                </ul>\r\n            </section>\r\n        </a>\r\n    </article>`;\r\n});\r\nconsole.log(html)\r\ndocument.querySelector('.pageContent').innerHTML = html;\r\n"],"file":"main.js"}
\ No newline at end of file

package.json

+{
+  "name": "pizzaland",
+  "version": "1.0.0",
+  "description": "Un site web incroyable sur les pizzas",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.univ-lille.fr/nathanael.malderez.etu/tp1.git"
+  },
+  "author": "Nathanael MALDEREZ",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11"
+  }
+}

src/main.js

 let html = ``;
-const data = ['Regina', 'Napolitaine', 'Spicy'];
+
+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',
+	}
+];
+
+
 data.forEach(function(d) {
-    const url = `images/${d.toLowerCase()}.jpg`;
     html = html + `
     <article class="pizzaThumbnail">
-        <a href="${url}">
-            <img src="${url}"/>
-            <section>${d}</section>
+        <a href="${d.image}">
+            <img src="${d.image}"/>
+            <section>
+                <h4>${d.name}</h4>
+                <ul>
+                    <li>Prix petit format : ${d.price_small} €</li>
+                    <li>Prix grand format : ${d.price_large} €</li>
+                </ul>
+            </section>
         </a>
     </article>`;
 });