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
No related branches found
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 @@
<link rel="stylesheet" href="css/pizzaList.css">
<link rel="stylesheet" href="css/footer.css">
<script src="build/main.js" defer></script>
<script src="build/main.bundle.js" defer></script>
</head>
<body>
<header>
......
package-lock.json
+ 1261
− 18
View file @ 807f9e06
This diff is collapsed.
package.json
+ 8
− 2
View file @ 807f9e06
......@@ -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": "webpack --mode=production",
"watch": "webpack --mode=development --watch"
},
"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,10 @@
"devDependencies": {
"@babel/cli": "^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
// 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 ));
import Component from './components/Component.js';
import Img from './components/Img.js';
import PizzaThumbnail from './components/PizzaThumbnail.js';
import data from './data.js';
import PizzaList from './pages/PizzaList.js';
const title = new Component('h1', null, ['La', ' ', 'carte']);
document.querySelector('.pageTitle').innerHTML = title.render();
const pizzaList = new PizzaList(data);
document.querySelector('.pageContent').innerHTML = pizzaList.render();
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