Skip to content
Snippets Groups Projects
Commit adf04429 authored by Sacha LEPAGE's avatar Sacha LEPAGE
Browse files

partie C

parent 40944e9d
No related branches found
No related tags found
No related merge requests found
......@@ -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>
......
This diff is collapsed.
......@@ -5,8 +5,9 @@
"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 +17,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.19.0",
"webpack-cli": "^4.4.0"
}
}
export default class Component{
tagName;
attribute;
children;
constructor( tagName, attribute, children ) {
this.tagName=tagName
this.children=children;
this.attribute=attribute;
}
render(){
if(this.tagName == 'img'){
return `<${this.tagName} ${this.attribute.name}='${this.attribute.value}' ${this.children} /> `;
}
return `<${this.tagName}>${this.children}</${this.tagName}>`;
}
}
\ No newline at end of file
import Component from './Component.js'
export default class Img extends Component{
chemin;
constructor(chemin){
super('img',
{
name:'src',
value: chemin,
}
,null)
}
}
\ No newline at end of file
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
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',
}
];
class Component{
tagName;
attribute;
children;
constructor( tagName, attribute, children ) {
this.tagName=tagName
this.children=children;
this.attribute=attribute;
}
render(){
if(this.tagName == 'img'){
return `<${this.tagName} ${this.attribute.name}='${this.attribute.value}' ${this.children} /> `;
}
return `<${this.tagName}>${this.children}</${this.tagName}>`;
}
}
class Img extends Component{
chemin;
constructor(chemin){
super('img',
{
name:'src',
value: chemin,
}
,null)
}
}
import Component from'./Component.js';
import data from './data.js';
import Img from './Img.js';
const title = new Component( 'h1',null, 'La carte' );
document.querySelector('.pageTitle').innerHTML = title.render();
......
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% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment