Skip to content
Snippets Groups Projects
Commit 522136ab authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

maj skin css & solution tp1

parent 8bd74a54
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
js/main.js deleted 100644 → 0
+ 0
− 134
View file @ 8bd74a54
/*
// D. Manipulation des chaînes
// D.2. Créer une constante appelée `nom` et y assigner la chaîne de caractères `Regina`
const nom = 'Regina';
// D.3. Créer une constante nommée `url`.
const url = 'images/'+nom.toLowerCase()+'.jpg';
// D.4. Créer la variable `html`
let html = `<a href="${url}">${url}</a>`;
console.log( html );
// D.5. Afficher le contenu de la variable `html` dans la page.
document.querySelector('.pizzasContainer').innerHTML = html;
// D.6. Modifier encore la variable html avant son affichage
html = `<a href="${url}">
<img src="${url}" />
<h4>${nom}</h4>
</a>`;
document.querySelector('.pizzasContainer').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 += `<a href="${url}">
<img src="${url}" />
<h4>${nom}</h4>
</a>`;
}
document.querySelector('.pizzasContainer').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('.pizzasContainer').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('.pizzasContainer').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('.pizzasContainer').innerHTML = html;
*/
// E.2. Les objets littéraux
const data = [
{
nom: 'Regina',
base: 'tomate',
prix_petite: 6.5,
prix_grande: 9.95,
image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
},
{
nom: 'Napolitaine',
base: 'tomate',
prix_petite: 6.5,
prix_grande: 8.95,
image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
},
{
nom: 'Spicy',
base: 'crème',
prix_petite: 5.5,
prix_grande: 8,
image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300'
}
];
function render(pizzas) {
const html = pizzas.reduce( (str, {image, nom, prix_petite, prix_grande}) => str +
`<article class="media">
<a href="${image}">
<img src="${image}" />
<section class="infos">
<h4>${nom}</h4>
<ul>
<li>Prix petit format : ${prix_petite.toFixed(2)} €</li>
<li>Prix grand format : ${prix_grande.toFixed(2)} €</li>
</ul>
</section>
</a>
</article>`, '');
document.querySelector('.pizzasContainer').innerHTML = html;
}
// G.1. Tri de tableaux
function sortByName(a, b) {
if ( a.nom < b.nom ) {
return -1;
} else if ( a.nom > b.nom ) {
return 1;
}
return 0;
}
// tri par prix_petit croissant PUIS par prix_grande croissant
function sortByPrice(a, b) {
if ( a.prix_petite !== b.prix_petite ) {
return a.prix_petite - b.prix_petite;
}
return a.prix_grande - b.prix_grande;
}
// Attention : data.sort() modifie le tableau original
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.prix_petite < 6 ))
// deux possibilités pour les pizzas avec deux fois la lettre "i"
render( data.filter( pizza => pizza.nom.split('i').length == 3 ))
render( data.filter( pizza => pizza.nom.match(/i/g).length == 2 ))
// // G.3. Destructuring
render( data.filter( ({base}) => base == 'tomate' ))
render( data.filter( ({prix_petite}) => prix_petite < 6 ))
render( data.filter( ({nom}) => nom.match(/i/g).length === 2 ));
\ No newline at end of file
package-lock.json
+ 963
− 1311
View file @ 522136ab
This diff is collapsed.
package.json
+ 5
− 4
View file @ 522136ab
......@@ -6,11 +6,12 @@
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "thomas.fritsch@univ-lille.fr",
"author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
"homepage": "https://gitlab.univ-lille.fr/js",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4"
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11"
}
}
src/main.js 0 → 100644
+ 131
− 0
View file @ 522136ab
// D. Manipulation des chaînes
// 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',
}
];
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 register or to comment