Skip to content
Snippets Groups Projects
Commit da4cd44e authored by Ayoub Lahouaichri's avatar Ayoub Lahouaichri
Browse files

pas fini

parent 756346a4
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
.babelrc
+ 6
− 2
View file @ da4cd44e
{
"presets": ["@babel/env"]
"presets": [
["@babel/env", {"modules": false}]
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
.prettierrc 0 → 100644
+ 7
− 0
View file @ da4cd44e
{
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "lf",
"useTabs": true,
"arrowParens": "avoid"
}
.vscode/settings.json 0 → 100644
+ 6
− 0
View file @ da4cd44e
{
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
index.html
+ 1
− 1
View file @ da4cd44e
......@@ -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 @ da4cd44e
This diff is collapsed.
package.json
+ 9
− 2
View file @ da4cd44e
......@@ -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,11 @@
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11"
"@babel/plugin-proposal-class-properties": "^7.12.13",
"@babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"prettier": "^2.2.1",
"webpack": "^5.20.1",
"webpack-cli": "^4.5.0"
}
}
src/components/Component.js 0 → 100644
+ 47
− 0
View file @ da4cd44e
export default class Component {
tagName;
children;
attribute;
constructor(tagName, attribute, children) {
if (children == undefined || children == null) {
this.children = '';
} else {
this.children = children;
}
if (tagName == undefined || tagName == null) {
this.tagName = '';
} else {
this.tagName = tagName;
}
if (attribute == undefined || attribute == null) {
this.attribute = '';
} else
this.attribute = attribute;
}
}
renderChildren() {
if (this.children instanceof Array {
let tmp;
for (let index = 0; index < this.children.length ; index++) {
tmp += this.children[index] ;
}
} else {
tmp = this.children;
}
return tmp;
}
render() {
if (this.tagName == `img`) {
return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}" />`;
}
return `<${this.tagName}>${this.renderChildren()}</${this.tagName}>`;
}
}
src/components/Img.js 0 → 100644
+ 11
− 0
View file @ da4cd44e
import Component from './Component.js';
export default class Img extends Component {
constructor(source, children) {
super('img', { name: 'src', value: `${source}` });
// this.children = children;
}
render() {
return super.render();
}
}
src/data.js 0 → 100644
+ 28
− 0
View file @ da4cd44e
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
+ 13
− 126
View file @ da4cd44e
// D. Manipulation des chaînes
// import data from 'data.js';
import Component from './components/Component.js';
import Img from './components/Img.js';
// 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;
// const title = new Component('h1', undefined, 'La carte');
// // 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;
const img2 = new Img(
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
);
// 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;
// document.querySelector('.pageTitle').innerHTML = title.render();
// console.log(title.render());
// // 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;
const title = new Component('h1', null, ['La', ' ', 'carte']);
document.querySelector('.pageTitle').innerHTML = title.render();
// // 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 ));
document.querySelector('.pageContent').innerHTML = img2.render();
console.log(img2.render());
webpack.config.js 0 → 100644
+ 27
− 0
View file @ da4cd44e
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