Skip to content
Snippets Groups Projects
Commit 18033d44 authored by Mathis Verleene's avatar Mathis Verleene
Browse files

C.

parent 43eeec15
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
.babelrc
+ 4
− 2
View file @ 18033d44
{
"presets": ["@babel/env"],
"presets": [
["@babel/env", {"modules": false}]
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
index.html
+ 36
− 32
View file @ 18033d44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
......@@ -14,8 +15,9 @@
<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>
<nav>
......@@ -37,7 +39,9 @@
<footer>
<div>Une (incroyable) création originale de <a href="http://uidlt.fr">Thomas Fritsch</a> pour l'<a href="https://www.iut-a.univ-lille.fr/">IUT A</a> de l'<a href="https://www.univ-lille.fr/">Université de Lille</a></div>
<div>Free photos from <a href="https://unsplash.com/unsplash">Unsplash</a></div>
<div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
<div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0"
target="_blank">CC 3.0 BY</a></div>
</footer>
</body>
</html>
\ No newline at end of file
package-lock.json
+ 1118
− 5
View file @ 18033d44
This diff is collapsed.
package.json
+ 6
− 3
View file @ 18033d44
......@@ -5,8 +5,8 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d build",
"watch": "./node_modules/.bin/babel src -d build --verbose --watch --source-maps"
"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",
......@@ -16,6 +16,9 @@
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.11",
"prettier": "^2.2.1"
"babel-loader": "^8.2.2",
"prettier": "^2.2.1",
"webpack": "^5.18.0",
"webpack-cli": "^4.4.0"
}
}
src/components/Component.js 0 → 100644
+ 25
− 0
View file @ 18033d44
class Component {
tagName;
children;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.attribute = attribute;
this.children = children;
}
render() {
if (
typeof this.attribute !== 'undefined' &&
typeof this.children !== 'undefined'
) {
return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}" >${this.children}</${this.tagName}`;
}
if (typeof this.children !== 'undefined') {
return `<${this.tagName}>${this.children}</${this.tagName}>`;
}
if (typeof this.attribute !== 'undefined') {
return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}" />`;
}
return `<${this.tagName} />`;
}
}
export default Component;
\ No newline at end of file
src/components/Img.js 0 → 100644
+ 6
− 0
View file @ 18033d44
import Component from './Component.js';
export default class Img extends Component {
constructor(url) {
super('img', { name: 'src', value: url });
}
}
\ No newline at end of file
src/data.js 0 → 100644
+ 23
− 0
View file @ 18033d44
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;
\ No newline at end of file
src/main.js
+ 6
− 55
View file @ 18033d44
// E.2. Les objets littéraux
class Component {
tagName;
children;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.attribute = attribute;
this.children = children;
}
render() {
if (
typeof this.attribute !== 'undefined' &&
typeof this.children !== 'undefined'
) {
return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}" >${this.children}</${this.tagName}`;
}
if (typeof this.children !== 'undefined') {
return `<${this.tagName}>${this.children}</${this.tagName}>`;
}
if (typeof this.attribute !== 'undefined') {
return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}" />`;
}
return `<${this.tagName} />`;
}
}
class Img extends Component {
constructor(url) {
super('img', { name: 'src', value: url });
}
}
import Component from './components/Component.js';
import data from './data.js';
import Img from './components/Img.js';
const title = new Component('h1', {}, 'La carte');
document.querySelector('.pageTitle').innerHTML += title.render();
const img = new Img(
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
);
document.querySelector('.pageContent').innerHTML = img.render();
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',
},
];
\ No newline at end of file
document.querySelector('.pageContent').innerHTML += img.render();
\ No newline at end of file
webpack.config.js 0 → 100644
+ 25
− 0
View file @ 18033d44
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',
};
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment