TP1

b10cba98 · Quentin Gillot · 096c4ded · b10cba98 · b10cba98 · b10cba98
Commit b10cba98 authored 4 years ago by Quentin Gillot
--- a/.babelrc
+++ b/.babelrc
+{
+    "presets": ["@babel/env"]
+}
\ No newline at end of file
--- a/build/main.js
+++ b/build/main.js
+"use strict";
+
+var name = 'Regina';
+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'
+}]; //const data = ['Regina','Napolitaine','Spicy'];
+
+for (var pas = 0; pas < data.length; pas++) {
+  //  const url = 'images/'+data[pas].toLowerCase()+'.jpg';
+  var url = data[pas].image;
+  html += '<article class ="pizzaThumbnail"><a href="' + url + '">' + '<img src="' + url + '"/><' + 'section>' + '<h4>' + data[pas].name + '</h4>' + '<ul> <li>Prix petit format :' + data[pas].price_small + '€ </li> <li>Prix grand format : ' + data[pas].price_large + '€ </li> </ul>' + '</section>' + '</a>\n</article>';
+} // const map = data.map(element => '<article class ="pizzaThumbnail"> \n \t <a href="'+'images/'+element.toLowerCase()+'.jpg'+'">'+'\n \t \t<img src="'+'images/'+element.toLowerCase()+'.jpg'+'"/> \n \t \t<'+'section>'+element+'</section>'+'\n \t</a>\n</article>\n')
+// for (let pas = 0 ; pas < map.length ; pas++) {
+//    html += map [pas];
+// }
+
+
+console.log(html);
+document.querySelector('.pageContent').innerHTML = html;
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
-
+	<script src="src/main.js" defer></script>
 	<title>PizzaLand</title>

 	<link rel="icon" href="images/icon.png" sizes="96x96">

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "pizzaland",
+  "version": "1.0.0",
+  "description": "<img src=\"images/readme/header.jpg\">",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.univ-lille.fr/quentin.gillot.etu/tp1.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11"
+  }
+}
--- a/src/main.js
+++ b/src/main.js
-console.log('Welcome to PizzaLand 🍕 !');
\ No newline at end of file
+const name = 'Regina';
+
+let html='';
+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',
+	}
+];
+//const data = ['Regina','Napolitaine','Spicy'];
+// data.sort(function compare (a,b){
+//   if (a.name < b.name){
+//     return -1;
+//   }
+//   if (a.name > b.name) {
+//     return 1;
+//   }
+//   return 0;
+// });
+// data.sort(function compare (a,b){
+//   if (a.price_small < b.price_small){
+//     return -1;
+//   }
+//   if (a.price_small > b.price_small) {
+//     return 1;
+//   }
+//   return 0;
+// });
+// data.sort(function compare (a,b){
+//     if (a.price_small < b.price_small){
+//       return -1;
+//     }
+//     if (a.price_small > b.price_small) {
+//       return 1;
+//     }
+//     if ( a.price_large < b.price_large){
+//      return -1;
+//     }
+//     if (a.price_large > b.price_large){
+//       return 1;
+//     }
+//     return 0;
+//   });
+const filter = data.filter(data => data.price_small < 6);
+ for (let pas = 0 ; pas < filter.length ; pas++) {
+    //  const url = 'images/'+data[pas].toLowerCase()+'.jpg';
+    const url = filter[pas].image;
+     html += '<article class ="pizzaThumbnail"><a href="'+url+'">'+'<img src="'+url+'"/><'+'section>'+'<h4>'+filter[pas].name+'</h4>'+'<ul> <li>Prix petit format :'+data[pas].price_small+'€ </li> <li>Prix grand format : '+data[pas].price_large+'€ </li> </ul>'+'</section>'+'</a>\n</article>';        
+}
+
+// const map = data.map(element => '<article class ="pizzaThumbnail"> \n \t <a href="'+'images/'+element.toLowerCase()+'.jpg'+'">'+'\n \t \t<img src="'+'images/'+element.toLowerCase()+'.jpg'+'"/> \n \t \t<'+'section>'+element+'</section>'+'\n \t</a>\n</article>\n')
+// for (let pas = 0 ; pas < map.length ; pas++) {
+//    html += map [pas];
+// }
+ console.log(html);
+document.querySelector('.pageContent').innerHTML = html;