Skip to content
Snippets Groups Projects
Select Git revision
  • master
1 result

README.md

Blame
  • Forked from an inaccessible project.
    • Thomas Fritsch's avatar
      276eff54
      maj readme · 276eff54
      Thomas Fritsch authored
      - fork
      - nouveau dom (maj skin css)
      - passage PageRenderer -> Router
      - suppression classe Page (inutile à ce stade avec le Router)
      - fusion avec readme cours-react/tp2
      276eff54
      History
      maj readme
      Thomas Fritsch authored
      - fork
      - nouveau dom (maj skin css)
      - passage PageRenderer -> Router
      - suppression classe Page (inutile à ce stade avec le Router)
      - fusion avec readme cours-react/tp2
    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',
    		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 ));