Select Git revision
Forked from an inaccessible project.
-
Thomas Fritsch authoredThomas Fritsch authored
main.js 3.77 KiB
/*
// 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',