Skip to content
Snippets Groups Projects
Commit 807f9e06 authored by Leonard Corre's avatar Leonard Corre
Browse files

tp presque fini juste avant le router

parent cb202be9
Branches
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1434 additions and 154 deletions
.babelrc
+ 6
− 2
View file @ 807f9e06
{ {
"presets": ["@babel/env"] "presets": [
["@babel/env", {"modules": false}]
],
"plugins": ["@babel/plugin-proposal-class-properties"]
} }
.prettierrc 0 → 100644
+ 7
− 0
View file @ 807f9e06
{
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "lf",
"useTabs": true,
"arrowParens": "avoid"
}
\ No newline at end of file
.vscode/settings.json 0 → 100644
+ 6
− 0
View file @ 807f9e06
{
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
index.html
+ 1
− 1
View file @ 807f9e06
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<link rel="stylesheet" href="css/pizzaList.css"> <link rel="stylesheet" href="css/pizzaList.css">
<link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/footer.css">
<script src="build/main.js" defer></script> <script src="build/main.bundle.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
......
package-lock.json
+ 1261
− 18
View file @ 807f9e06
This diff is collapsed.
package.json
+ 8
− 2
View file @ 807f9e06
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=production",
"watch": "webpack --mode=development --watch"
}, },
"author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)", "author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
"homepage": "https://gitlab.univ-lille.fr/js", "homepage": "https://gitlab.univ-lille.fr/js",
...@@ -12,6 +14,10 @@ ...@@ -12,6 +14,10 @@
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.12.10", "@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11" "@babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"prettier": "^2.2.1",
"webpack": "^5.20.0",
"webpack-cli": "^4.5.0"
} }
} }
src/components/Component.js 0 → 100644
+ 33
− 0
View file @ 807f9e06
export default class Component {
tagName;
children;
attribute;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.children = children;
this.attribute = attribute;
}
render() {
if (this.children && this.attribute)
return `<${this.tagName} ${this.attribute.name}=${
this.attribute.value
} >${this.renderChildren()}</${this.tagName}>`;
else if (this.children)
return `<${this.tagName}>${this.renderChildren()}</${this.tagName}>`;
else return this.renderAttribute();
}
renderAttribute() {
return `<${this.tagName} ${this.attribute.name}=${this.attribute.value}/>`;
}
renderChildren() {
let res = '';
if (this.children instanceof Array)
this.children.forEach(element => {
if (element instanceof Component) res += element.render();
else res += element;
});
else res = this.children;
return res;
}
}
src/components/Img.js 0 → 100644
+ 6
− 0
View file @ 807f9e06
import Component from './Component.js';
export default class Img extends Component {
constructor(url) {
super('img', { name: 'src', value: url });
}
}
src/components/PizzaThumbnail.js 0 → 100644
+ 26
− 0
View file @ 807f9e06
import Component from './Component.js';
import Img from './Img.js';
export default class PizzaThumbnail extends Component {
constructor({ name, image, price_small, price_large }) {
super('article', { name: 'class', value: 'pizzaThumbnail' }, [
new Component('a', { name: 'href', value: image }, [
new Img(image),
new Component('section', null, [
new Component('h4', null, name),
new Component('ul', null, [
new Component(
'li',
null,
`Prix petit format : ${price_small.toFixed(2)} €`
),
new Component(
'li',
null,
`Prix grand format : ${price_large.toFixed(2)} €`
),
]),
]),
]),
]);
}
}
src/data.js 0 → 100644
+ 27
− 0
View file @ 807f9e06
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',
},
];
export default data;
src/main.js
+ 10
− 131
View file @ 807f9e06
// D. Manipulation des chaînes import Component from './components/Component.js';
import Img from './components/Img.js';
// const name = 'Regina'; import PizzaThumbnail from './components/PizzaThumbnail.js';
// const url = `images/${name.toLowerCase()}.jpg`; import data from './data.js';
// const html = ` import PizzaList from './pages/PizzaList.js';
// <article class="pizzaThumbnail">
// <a href="${url}"> const title = new Component('h1', null, ['La', ' ', 'carte']);
// <img src="${url}" /> document.querySelector('.pageTitle').innerHTML = title.render();
// <section>${name}</section> const pizzaList = new PizzaList(data);
// </a> document.querySelector('.pageContent').innerHTML = pizzaList.render();
// </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 ));
src/pages/PizzaList.js 0 → 100644
+ 16
− 0
View file @ 807f9e06
import Component from '../components/Component.js';
import PizzaThumbnail from '../components/PizzaThumbnail.js';
import data from '../data';
export default class PizzaList extends Component {
constructor(data) {
super('section', { name: 'class', value: 'pizzaThumbnail' }, data);
}
render() {
let res = this.renderAttribute();
this.children.forEach(element => {
res += new PizzaThumbnail(element).render();
});
return res;
}
}
webpack.config.js 0 → 100644
+ 27
− 0
View file @ 807f9e06
const path = require('path');
module.exports = {
// Fichier d'entrée :
entry: './src/main.js',
// Fichier de sortie :
output: {
path: path.resolve(__dirname, './build'),
filename: 'main.bundle.js',
},
// compatibilité anciens navigateurs (si besoin du support de IE11 ou android 4.4)
target: ['web', 'es5'],
// connexion webpack <-> babel :
module: {
rules: [
{
test: /\.js$/, // tous les fichiers js ...
exclude: /node_modules/, // ... sauf le dossier node_modules ...
use: {
// ... seront compilés par babel !
loader: 'babel-loader',
},
},
],
},
devtool: 'source-map',
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment