Skip to content
Snippets Groups Projects
Commit f1d7f975 authored by Aymane Ismail's avatar Aymane Ismail
Browse files

D1.3

parent 556b7f8f
Branches main
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
.babelrc
+ 4
− 2
View file @ f1d7f975
{ {
"presets": ["@babel/env"] "presets": [
["@babel/env", {"modules": false}]
]
} }
.prettierrc 0 → 100644
+ 8
− 0
View file @ f1d7f975
{
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "lf",
"useTabs": true,
"arrowParens": "avoid"
}
LIRE 0 → 100644
+ 2
− 0
View file @ f1d7f975
c2.3
index.html
+ 1
− 1
View file @ f1d7f975
...@@ -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
+ 2385
− 11
View file @ f1d7f975
This diff is collapsed.
package.json
+ 8
− 2
View file @ f1d7f975
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
"description": "", "description": "",
"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": "webpack --mode=production",
"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",
...@@ -12,6 +14,10 @@ ...@@ -12,6 +14,10 @@
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.16.8", "@babel/cli": "^7.16.8",
"@babel/core": "^7.16.12", "@babel/core": "^7.16.12",
"@babel/preset-env": "^7.16.11" "@babel/preset-env": "^7.16.11",
"babel-loader": "^8.2.3",
"prettier": "^2.5.1",
"webpack": "^5.68.0",
"webpack-cli": "^4.9.2"
} }
} }
src/components/Component.js 0 → 100644
+ 44
− 0
View file @ f1d7f975
class Component {
containsComponent = false;
comp;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.attribute = attribute;
let temp = children;
if (Array.isArray(children)) {
temp = '';
children.forEach(x => {
if (x instanceof Component) {
temp += x.render() + ' ';
this.containsComponent = true;
this.comp = x;
} else if (this.containsComponent) {
temp += '<section><h4> ' + x + ' <h4></section></a>';
} else {
temp += x;
}
});
}
this.children = temp;
}
render() {
if (!this.children) {
return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}" />`;
}
return this.renderChildren(); //`<${this.tagName}> ${this.children} </${this.tagName}`;
}
renderChildren() {
if (this.containsComponent) {
console.log(
`<${this.tagName} ${this.attribute.name}="${this.attribute.value}"><a href=${this.comp.attribute.value}> ${this.children} </${this.tagName}>`
);
return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}"> <a href=${this.comp.attribute.value}> ${this.children} </${this.tagName}>`;
} else {
return `<${this.tagName}> ${this.children} </${this.tagName}`;
}
}
}
export default Component;
\ No newline at end of file
src/components/Img.js 0 → 100644
+ 13
− 0
View file @ f1d7f975
import Component from "./Component.js";
class Img extends Component {
constructor(value) {
super('img', { name: 'src', value: value });
}
render() {
return super.render();
}
}
export default Img;
\ No newline at end of file
src/data.js 0 → 100644
+ 28
− 0
View file @ f1d7f975
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
+ 60
− 0
View file @ f1d7f975
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
// document.querySelector('.pageContent').innerHTML = html; // document.querySelector('.pageContent').innerHTML = html;
// E.2. Les objets littéraux // E.2. Les objets littéraux
/*
const data = [ const data = [
{ {
name: 'Regina', name: 'Regina',
...@@ -77,6 +78,22 @@ const data = [ ...@@ -77,6 +78,22 @@ const data = [
image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300', image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
} }
]; ];
*/
import data from './data.js';
import Component from './components/Component.js';
import Img from './components/Img.js';
function render(pizzas) { function render(pizzas) {
const html = pizzas.reduce( (str, {image, name, price_small, price_large}) => str + const html = pizzas.reduce( (str, {image, name, price_small, price_large}) => str +
...@@ -129,3 +146,46 @@ render( data ); ...@@ -129,3 +146,46 @@ render( data );
// render( data.filter( ({base}) => base == 'tomate' )) // render( data.filter( ({base}) => base == 'tomate' ))
// render( data.filter( ({price_small}) => price_small < 6 )) // render( data.filter( ({price_small}) => price_small < 6 ))
// render( data.filter( ({name}) => name.match(/i/g).length === 2 )); // render( data.filter( ({name}) => name.match(/i/g).length === 2 ));
/*
class Component {
tagName;
attribute;
children;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.attribute = attribute;
this.children = children;
}
render() {
if(this.tagName == 'img' && this.attribute == '') {
return `<${this.tagName} src="${this.children}"/>`;
}
if (this.tagName == 'img') {
return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}"/>`;
} else {
return `<${this.tagName}>${this.attribute}</${this.tagName}>`;
}
}
}
*/
let title = new Component( 'h1' );
console.log(title.render());
title = new Component( 'h1', 'La carte' );
console.log(title.render());
title = new Component('h1', null, 'La Carte');
document.querySelector('.pageTitle').innerHTML = title.render();
console.log(title.render());
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',
]);
document.querySelector('.pageContent').innerHTML = c.render();
\ No newline at end of file
webpack.config.js 0 → 100644
+ 26
− 0
View file @ f1d7f975
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: 'cheap-source-map'
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment