Skip to content
Snippets Groups Projects
Commit 03e3293c authored by Cody Dumortier's avatar Cody Dumortier
Browse files

partie C

parent ef7b6d6a
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
.babelrc
+ 4
− 1
View file @ 03e3293c
{ {
"presets": ["@babel/env"], "presets": [
["@babel/env", {"modules": false}]
],
"plugins": ["@babel/plugin-proposal-class-properties"] "plugins": ["@babel/plugin-proposal-class-properties"]
} }
index.html
+ 1
− 1
View file @ 03e3293c
...@@ -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
+ 1118
− 5
View file @ 03e3293c
This diff is collapsed.
package.json
+ 7
− 4
View file @ 03e3293c
...@@ -5,8 +5,9 @@ ...@@ -5,8 +5,9 @@
"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": "babel src -d build", "build": "webpack --mode=production",
"watch": "babel src -d build --verbose --watch --source-maps" "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",
...@@ -16,7 +17,9 @@ ...@@ -16,7 +17,9 @@
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.11", "@babel/preset-env": "^7.12.11",
"prettier": "^2.2.1" "babel-loader": "^8.2.2",
"prettier": "^2.2.1",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0"
} }
} }
src/components/Component.js 0 → 100644
+ 39
− 0
View file @ 03e3293c
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} />`;
} else if (!this.children && this.attribute !== null) {
return `<${this.tagName} ${this.renderAttribute(this.attribute)} />`;
} else if (this.children !== null && !this.attribute) {
return `<${this.tagName}>${this.renderChildren(this.children)}</${
this.tagName
}>`;
} else {
return `<${this.tagName} ${this.renderAttribute(this.attribute)}>
${this.renderChildren(this.children)}</${this.tagName}>`;
}
}
renderChildren(children) {
let res;
if (children instanceof Array) {
for (let i = 0; i < children.length; i++) {
res += children[i];
}
} else {
return children;
}
}
renderAttribute({ name, value }) {
return `${name}="${value}"`;
}
}
src/components/Img.js 0 → 100644
+ 7
− 0
View file @ 03e3293c
import Component from './Component.js';
export default class Img extends Component {
constructor(sourceImg) {
super(`img`, { name: 'src', value: sourceImg });
}
}
src/data.js 0 → 100644
+ 28
− 0
View file @ 03e3293c
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
+ 6
− 72
View file @ 03e3293c
class Component { import Component from './components/Component.js';
tagName;
children;
attribute;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.children = children;
this.attribute = attribute;
}
render() {
if (
(this.children === null || this.children === undefined) &&
this.attribute === null
) {
return `<${this.tagName} />`;
} else if (
(this.children === null || this.children === undefined) &&
this.attribute !== null
) {
return `<${this.tagName} ${this.renderAttribute(this.attribute)} />`;
} else if (this.children !== null && this.attribute === null) {
return `<${this.tagName}>${this.children}</${this.tagName}>`;
} else {
return `<${this.tagName} ${this.renderAttribute(this.attribute)}>
${this.children}</${this.tagName}>`;
}
}
renderAttribute({ name, value }) { import data from './data.js';
return `${name}="${value}"`;
}
}
const data = [ import Img from './components/Img.js';
{
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',
},
];
const title = new Component(`h1`, null, `La carte`); const title = new Component('h1', null, ['La', ' ', 'carte']);
const img = new Component('img', { console.log(title.renderChildren());
name: 'src', document.querySelector('.pageTitle').innerHTML = title.render();
value:
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
});
console.log(title.render());
console.log(img.render());
let html = `${title.render()}
${img.render()}`;
document.querySelector('.pageTitle').innerHTML = html;
webpack.config.js 0 → 100644
+ 27
− 0
View file @ 03e3293c
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