code 2024

 https://dupontdenis.github.io/revision24/

Mise en place d'un serveur Python

 https://docs.google.com/document/d/1Ep1eOhzgF-Bc3pRwcemHLyDdeAjcMhzwbK-sNJJa1OU/edit?usp=sharing

On dispose d'une BD (un tableau de pizzas) et d'une carte (Map). Chaque élément de la carte (Map) associe un emoji représentant un ingrédient à son prix.

pizzas = [{ name:"queen", toppings: ["🐷","🍄","🍅","🧀"], crust:"" }, …  ]  prices = new Map([ 🍅", 1], …]

1) Donnez le code pour afficher un tableau.

Utilisez

  • Object.keys

  • map

  • join


2) Donnez le code pour obtenir  les pizzas à pâte épaisse pizzasWithYeastedCrust 


3) Donnez uniquement le code de la transformation qui permettrait d'afficher les prix des pizzas.

Utilisez

  • reduce

  • map

  • get

  • …


4) Donnez l'écriture de l'événement sur le container des cartes pour rendre visible ou pas les informations d'une pizza.



  const cardTemplate = `

        <div class="col card" g-3>

          <div class="card-title">

            <h5>Pizza {{name}}</h5>

          </div>

          <div class="card-body d-none">

            <p>Crust: {{crust}} </p>

            <p>Toppings: {{toppings}}</p>

         </div>

        </div>

      `;

container.addEventListener("click", function (event) {

    if (event.target.closest(".card")) {







  cardBody.classList.toggle("d-none");

  }

 });



Donnez le code pour avoir un bouton qui compte le nombre de clics ! 

Donnez l'équivalent de la méthode closest. La méthode closest() traverse l'élément courant et ses parents (en direction de la racine) jusqu'à trouver un nœud qui correspond aux sélecteurs exprimés par la chaîne de caractères passée en argument. Elle renverra l'élément ou l'ancêtre le plus proche qui correspond. Si aucun élément ne correspond, la méthode renvoie null.

function closest(element, selector). Utilisez element.matches(selector). La méthode element.matches() renvoie true lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramètre ; sinon, elle renvoie false.


Complétez le code pour afficher les pizzas en promo

const temp = pizzas.map((pizza) => ({

  ...pizza,

  price: value

}));

const groups = Object.__0__(temp, (pizza) =>

  __1__

);

const transformation = Object.__2__(groups).map(([key, value]) => ({Type:__3__,

  pizzas: __4__,

}));

0:


1 :  


2 :  


3 :


4 : 



Mettre en place en react une application qui permet de tester le résultat d'un calcul de nombre aléatoire et ajouter 1 au score si le résultat est correct. 

 

  

Mathis "Obstinate" Beauville, a présenté l'alternance en miage. Il nous a parlé d'un sujet test que peuvent demander un employeur pour tester nos connaissance : la TODO list


Je vous propose de finir l'année avec ce projet.

Pour commencer voici le code de base : 

et nous pourrions finir avec une conception Objet et le design pattern MVC :🧙‍♂️https://dupontdenis.github.io/TODOes6/


Etude : voici un début de lecture pour appréhender cet exercice.




Afficher une base de données

 Préparation à l'examen ! 


cliquez sur la figure

https://docs.google.com/document/d/1PlQV0kN9rHzO894GzqNlterJT_rYWEX9rehrBwDtQ7c/edit?usp=sharing



Base de Données !

 Nous disposons de deux structures : un tableau de films et d'un Map.

Tableau de films :

Il s'agit d'un tableau d'objets où chaque objet représente un film.

Chaque objet film contient les propriétés suivantes :

  • titre : Le titre du film (chaîne de caractères).

  • année : L'année de sortie du film (nombre).

  • director : Le réalisateur du film (chaîne de caractères).

  • actors : Tableau des acteurs ayant joué dans le film (tableau de chaînes).

Exemple

  1. {

  2.     title: "Inception",

  3.     year: 2010,

  4.     director: "Christopher Nolan",

  5.     actors: ["Leonardo DiCaprio", "Elliot Page", "Tom Hardy"]

  6. }

  1. const films = [

  2.     {

  3.         title: "Inception",

  4.         year: 2010,

  5.         director: "Christopher Nolan",

  6.         actors: ["Leonardo DiCaprio", "Elliot Page", "Tom Hardy"]

  7.     },

  8.     {

  9.         title: "The Dark Knight",

  10.         year: 2008,

  11.         director: "Christopher Nolan",

  12.         actors: ["Christian Bale", "Heath Ledger", "Michael Caine"]

  13.     },

  14.     {

  15.         title: "Titanic",

  16.         year: 1997,

  17.         director: "James Cameron",

  18.         actors: ["Leonardo DiCaprio", "Kate Winslet", "Billy Zane", "Kathy Bates"]

  19.     },

  20.     {

  21.         title: "Avatar",

  22.         year: 2009,

  23.         director: "James Cameron",

  24.         actors: ["Sam Worthington", "Zoe Saldana", "Sigourney Weaver"]

  25.     },

  26.     {

  27.         title: "Mad Max: Fury Road",

  28.         year: 2015,

  29.         director: "George Miller",

  30.         actors: ["Tom Hardy", "Charlize Theron"]

  31.     }

  32. ];

  33. console.log(films);


actorSalaries Map :

Il s'agit d'un objet Map où chaque entrée représente un acteur et son salaire.

La clé est le nom de l'acteur (chaîne de caractères).

La valeur est le salaire de l'acteur en milliers de dollars (nombre).

Exemple :

["Leonardo DiCaprio", 200000]


  1. const actorSalaries = new Map([

  2.     ["Leonardo DiCaprio", 200000],

  3.     ["Elliot Page", 1000],

  4.     ["Tom Hardy", 15000],

  5.     ["Christian Bale", 10000],

  6.     ["Heath Ledger", 5000],

  7.     ["Michael Caine", 2000],

  8.     ["Kate Winslet", 8000],

  9.     ["Billy Zane", 1000],

  10.     ["Kathy Bates", 3000],

  11.     ["Sam Worthington", 5000],

  12.     ["Zoe Saldana", 6000],

  13.     ["Sigourney Weaver", 7000],

  14.     ["Charlize Theron", 10000]

  15. ]);


  17. console.log(actorSalaries);

Object.groupeBy

 https://docs.google.com/document/d/17gS3GjpX5KUFTM4TPMRMP8Zsn9OXieT8rL1sgUqhyiA/edit?usp=sharing

Inscription à : Articles (Atom)