Skip to content
Snippets Groups Projects
Commit 8a9b3133 authored by Simon Prevost's avatar Simon Prevost
Browse files

premier commit

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 1447 additions and 147 deletions
.babelrc
+ 4
− 1
View file @ 8a9b3133
{
"presets": ["@babel/env"]
"presets": [
["@babel/env",{"modules": false}]
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
\ No newline at end of file
.prettierrc 0 → 100644
+ 7
− 0
View file @ 8a9b3133
{
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "lf",
"useTabs": true,
"arrowParens": "avoid"
}
.vscode/settings.json 0 → 100644
+ 6
− 0
View file @ 8a9b3133
{
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
index.html
+ 1
− 1
View file @ 8a9b3133
......@@ -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 @ 8a9b3133
This diff is collapsed.
package.json
+ 9
− 2
View file @ 8a9b3133
......@@ -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.0",
"webpack-cli": "^4.5.0"
}
}
src/components/Components.js 0 → 100644
+ 50
− 0
View file @ 8a9b3133
//import Img from './Img.js';
export default class Component {
tagname;
children;
attribute;
constructor(tagname, attribute, children) {
this.tagname = tagname;
this.attribute = attribute;
this.children = children;
}
renderChildren() {
if (!this.children) {
// Si pas de Children
return '';
}
let res = '';
if (this.children instanceof Array) {
// Si Array
for (let index = 0; index < this.children.length; index++) {
res = res + this.children[index];
}
return res;
} else if (this.children instanceof Component) {
// Si Component
return this.children.render();
} else {
// Si String
res = `${this.children}`;
}
return res;
}
renderAttribute() {
if (!this.attribute) {
return `<${this.tagname}>`;
} else if (!this.children) {
return `<${this.tagname} ${this.attribute.name}="${this.attribute.value}"/>`; //balise auto fermante comme img
} else {
return `<${this.tagname} ${this.attribute.name}="${this.attribute.value}">`;
}
}
render() {
if (!this.children) {
return this.renderAttribute();
}
return `${this.renderAttribute()}${this.renderChildren()}</${
this.tagname
}>`;
}
}
src/components/Img.js 0 → 100644
+ 7
− 0
View file @ 8a9b3133
import Component from './Components.js';
export default class Img extends Component {
constructor(img) {
super('img', { name: 'src', value: img });
}
}
src/components/PizzaThumbnail.js 0 → 100644
+ 27
− 0
View file @ 8a9b3133
import Component from './Components.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 @ 8a9b3133
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
+ 21
− 125
View file @ 8a9b3133
// D. Manipulation des chaînes
import data from './data.js';
import Component from './components/Components.js';
import Img from './components/Img.js';
import PizzaThumbnail from './components/PizzaThumbnail.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', null, ['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 img = 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;
const c = new Component('article', { name: 'class', value: 'pizzaThumbnail' }, [
new Img(
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
),
'Regina',
]);
// // 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 pizza = data[0];
const pizzaThumbnail = new PizzaThumbnail(pizza);
// // 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;
document.querySelector('.pageTitle').innerHTML = title.render();
//document.querySelector('.pageContent').innerHTML = img.render();
//document.querySelector('.pageContent').innerHTML = c.render();
document.querySelector('.pageContent').innerHTML = pizzaThumbnail.render();
// 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 ));
console.log(title.render(), '\n', img.render(), '\n', c.render());
webpack.config.js 0 → 100644
+ 27
− 0
View file @ 8a9b3133
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