Skip to content
Snippets Groups Projects
Commit 15b83ada authored by Hugo Dutoit's avatar Hugo Dutoit
Browse files

C2

parent eaae571f
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
.babelrc
+ 3
− 1
View file @ 15b83ada
{ {
"presets": ["@babel/env"], "presets": [
["@babel/env", {"modules": false}]
],
"plugins": ["@babel/plugin-proposal-class-properties"] "plugins": ["@babel/plugin-proposal-class-properties"]
} }
\ No newline at end of file
index.html
+ 1
− 1
View file @ 15b83ada
...@@ -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 type="module" src="build/main.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
......
src/components/Component.js 0 → 100644
+ 18
− 0
View file @ 15b83ada
export default class Component {
tagName;
children;
attribute;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.children = children;
this.attribute = attribute;
}
render() {
let render = "<" + this.tagName;
if (this.attribute) {
render += " " + this.attribute.name + "='" + this.attribute.value + "'";
}
render += ((!this.children) ? " />" : (">" + this.children + "</" + this.tagName + ">"));
return render;
}
}
src/components/Img.js 0 → 100644
+ 7
− 0
View file @ 15b83ada
import Component from './Component.js';
export default class Img extends Component {
constructor(src) {
super("img", { name: 'src', value: src });
}
}
src/data.js 0 → 100644
+ 24
− 0
View file @ 15b83ada
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
+ 4
− 153
View file @ 15b83ada
// D. Manipulation des chaînes // import data from 'data.js';
import Component from './components/Component.js';
import Img from './components/Img.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;
// // 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;
// 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;
// // 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;
// // 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;
// 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',
}
];
class Component{
tagName;
children;
attribute;
constructor(tagName, attribute, children){
this.tagName = tagName;
this.children = children;
this.attribute= attribute;
}
render(){
let render = "<"+this.tagName;
if(this.attribute){
render+=" "+this.attribute.name+"='"+this.attribute.value+"'";
}
render += ((!this.children)?" />":(">"+this.children+"</"+this.tagName+">"));
return render;
}
}
class Img extends Component{
constructor(src) {
super("img",{name:'src',value:src});
}
}
const title = new Component('h1',null,'La carte'); const title = new Component('h1',null,'La carte');
document.querySelector('.pageTitle').innerHTML = title.render(); document.querySelector('.pageTitle').innerHTML = title.render();
const img = new Img('https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'); const img = new Img('https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300');
console.log(img.render()); console.log(img.render());
document.querySelector( '.pageContent' ).innerHTML = img.render(); document.querySelector( '.pageContent' ).innerHTML = img.render();
\ No newline at end of file
// 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 ));
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment