dupontL2: 2025

En action → https://dupontdenis.github.io/pizza/

Code → https://github.com/dupontdenis/pizza.git

🥷https://github.com/dupontdenis/pizza?tab=readme-ov-file#readme

🍕PizzasAPI

{
  "message": "Welcome to Pizza API! 🍕",
  "description": "A simple REST API for pizzas - inspired by ghibliapi.dev",
  "endpoints": {
    "pizzas": "/API/pizzas",
    "pizzaById": "/API/pizzas/:id",
    "pizzasWithPrices": "/API/pizzasWithPrices",
    "ingredientPrices": "/API/ingredientPrices",
    🪛"pizzaSearchByIngredient": "/API/pizzas/search?ingredient=🧀",
    "pizzaSinglePrice": "/API/pizzasWithPrices/:id/price",
    "customPrice": {
      "method": "POST",
      "path": "/API/pizzasWithPrices/compute",
      "body": {
        "ingredients": [
          "🍅",
          "🧀"
        ]
      }
    }
  }
}

Exemples :

🪛Ainsi pour tester l'API avec ingredient=🧀

https://mypizzasapi.onrender.com/API/pizzas/search?ingredient=🧀

🪛Ainsi pour tester l'API avec ingredient=🍅 et ingredient=🍄

https://mypizzasapi.onrender.com/API/pizzas/search?ingredient=🍄&ingredient=🍅

🥷Pour tester : https://dupontdenis.github.io/testMyPizzasAPI/

https://github.com/dupontdenis/myPizzasAPI.git

https://dupontl2.blogspot.com/2025/11/pizzas-api.html

🍕Commander une pizza

order pizza : https://dupontdenis.github.io/orderPizza/

TD Students

Affichage de la liste des étudiants : TD

TD - pizzas

display pizzas : https://dupontdenis.github.io/pizza/

order pizza : https://dupontdenis.github.io/orderPizza/

Usage API

/**

 * Simple Example: Get All Pizzas
 * This is a simplified version showing the core functionality
 * without error handling - perfect for learning the basics!
 */

// Step 1: Import functions from modules
import { getAllPizzas } from "./pizzaAPI.mjs"; // API communication
import { displayResults, showLoading, fetchWithMinDelay } from "./ui.mjs"; // UI utilities
import { renderPizzaGrid } from "./renderer.mjs"; // HTML rendering

// Step 2: Show loading spinner while fetching
showLoading();

// Step 3: Fetch pizzas (with minimum delay handled by UI)
const pizzas = await fetchWithMinDelay(getAllPizzas);

// Step 4: Render pizzas as HTML and display in the page
displayResults("📋 All Pizzas", renderPizzaGrid(pizzas));

Cours

TD

Try yourself

Projet

🆒 https://dupontdenis.github.io/SFP-Lib/

-> https://github.com/dupontdenis/SFP-Lib.git

Vidéo

Le DOM

Aprrendre à manipuler les éléments du DOM

🌍 TD Dom

films !

https://github.com/dupontdenis/filmsGhibli_Vanilla.git

Bilan : saison 1

🏭Découvrez une nouvelle Data, concernant les entreprises de la Tech !

🪛Posez-vous les questions suivantes :

See the Pen compagnies by dupont (@dupontcodepen) on CodePen.

Plus d'infos »

🎞️ les films à revoir !

🪛 code

🚀 Définition d'un template !

🪛 code with forEach

🚀 code with map

Lotery !

🚀clone

🪛En action

👿 Choisir 5 numéros parmi 49 vous offre 1 906 884 combinaisons possibles.

Nous pouvons augmenter nos chances en choisissant jusqu'à 9 numéros !

Le numéro Chance apporte 10 possibilités, puisque vous choisissez un numéro entre 1 et 10. Avec 5 bons numéros et le numéro Chance, c'est plus de 19 068 840 combinaisons possibles qui s'offrent à vous.

Parcours arbre du DOM : Action

Travail perso !

Mon tirage

Comment savoir mes numéros gagnants ?

DS : 15mn

const pizzas = [
  { name: "queen", ing: ["🐷", "🍄", "🍅", "🧀"] },
  { name: "cheese", ing: ["🧀", "🍅", "🌵"] },
  { name: "oriental", ing: ["🍅", "🐑", "🍄", "🌶"] },
];

const prices = new Map([
  ["🍅", 1],
  ["🐷", 2],
  ["🌶", 2],
  ["🍄", 5],
  ["🧀", 5],
  ["🐑", 2],
  ["🌵", 10],
]);

🪛Donnez le code JavaScript qui calcule la pizza la plus chère dans une liste de pizzas, en se basant sur les ingrédients et leurs prix.

🪛 Dessinez la structure du code pizzas et pizzasWithPrices (like pythontutor)

const pizzasWithPrices = pizzas.map(pizza => ({

...pizza,

price: pizza.ing.reduce((acc, ing) => acc + prices.get(ing), 0)

}));

Plus d'infos »

Cours 2 :

Chap 1 :JS

Chap 2 : DOM

🪛 Objectifs

View dom ( svg )

Le code HTML

<body>
Para 1
second Para 2
 dernier Para

</body>

La représentation

vue

La structuration

arbre

On peut retrouver une représentation suivante !

Magie de JS

HTML

<div id="wrapper">
  <div data-tabname="Onglet 1">Contenu 1</div>
  <div data-tabname="Onglet 2">Contenu 2</div>
  <div data-tabname="Onglet 3">Contenu 3</div>
</div>

Magie du JS

Création des boutons

Gestion des événements

Contenu 1

Contenu 2

Contenu 3

See the Pen Untitled by dupont (@dupontcodepen) on CodePen.

The end

pizzas : https://docs.google.com/document/d/1WtTFIo9p5tqizm7m3oxpfqabaS63iUOsUGHp1nf-Gt8/edit?usp=sharing

Cours : Map/Set

const languageSkills = [

{

    language: "Spanish",

    skill: "Professional Proficiency",

},

{

    language: "English",

    skill: "Professional Working Proficiency",

},

{

    language: "German",

    skill: "Professional Proficiency",

},

];

const output = languageSkills.reduce((map, { language, skill }) => {

  if (map.has(skill)) map.get(skill).push(language);

  else map.set(skill, [language]);

  return map;

}, new Map());

const nativeResult = Object.groupBy(languageSkills, (item) => item.skill);

Préparation au DS

...

🍕Base des données

const pizzas = [

{ name:"queen", ingredients: ["🐷","🍄","🍅","🧀"] },

{ name: "cheese", ingredients: ["🧀", "🍅"]},

{ name: "oriental", ingredients: ["🍅","🐑","🍄","🌶"]},

{ name: "royal", ingredients: ["🍅","🌵"]},

];

🪛 Questions

Trouvez les pizzas avec du 🧀

Trouvez les pizzas avec du 🍅

Trouvez les pizzas avec un ingrédient quelconque (soit du "🍅" ou du "🧀" ou du "🐑" ...)

Trouvez les pizzas avec au moins un ingrédient parmi une liste d'ingrédients

Trouvez les pizzas avec tous les ingrédients d'une liste

Trouvez les pizzas avec viande

Ajoutez pour chaque pizza le type (🐮ou ☘️)

Trouvez l'ensemble des ingrédients "🐷","🍄","🍅","🧀","🐑","🌶","🌵"

Trouvez pour chaque ingrédient le nombre de pizzas l'utilisant ,"🧀":2 …

Trouvez pour chaque ingrédient la liste des pizzas l'utilisant

Ajoutez le prix de chaque pizza

prices = new Map([ ["🍅", 1], ["🐷", 2], ["🌶",2], ["🍄", 5], ["🧀", 5], ["🐑", 2], ["🌵", 10]]);

Projet : Guess

Le joueur a trois chances pour trouver un nombre secret !

💥Imaginez que vous soyez chef de projet, vous rédigez en urgence un prototype pour les membres de votre équipe. Ce prototype permet à tous de fixer les idées (proto).

👷 Il faudra l'implémenter en JS.

TD

const pizzas = [

{ name:"queen", ingredients: ["🐷","🍄","🍅","🧀"] },

{ name: "cheese", ingredients: ["🧀", "🍅"]},

{ name: "oriental", ingredients: ["🍅","🐑","🍄","🌶"]},

{ name: "royal", ingredients: ["🍅","🌵"]},

];

Voici une représentation sous forme de tableau :

🍕Questions ?

Trouvez la liste des ingredients : ["🐷","🍄","🍅","🧀",🐑","🌶","🌵"]
Trouvez pour chaque ingredient la liste des pizzas :

test :

Evaluez :

  const dataBase = [
  { name: "queen", ingredients: ["🐷", "🍄", "🍅", "🧀"] },
  { name: "cheese", ingredients: ["🧀", "🍅"] },
  { name: "oriental", ingredients: ["🍅", "🐑", "🍄", "🌶"] },
  { name: "royal", ingredients: ["🍅", "🌵"] },
];


const orientalPizza = dataBase.find( (pizza) => {
  return pizza.name==="oriental";
})
console.log(orientalPizza);

const royalPizza =
dataBase.find((pizza) => pizza.ingredients === ["🍅", "🌵"]);
console.log(royalPizza);

const pizzas = [

{ name:"queen", ingredients: ["🐷","🍄","🍅","🧀"] },

{ name: "cheese", ingredients: ["🧀", "🍅"]},

{ name: "oriental", ingredients: ["🍅","🐑","🍄","🌶"]},

{ name: "royal", ingredients: ["🍅","🌵"]},

];

Voici une représentation sous forme de tableau :

🍕Questions ?

Trouvez les pizzas avec du 🧀
Trouvez les pizzas avec du 🍅
Trouvez les pizzas avec un ingrédient quelconque

TD : methods

// trouvez 🚀

const getRandomArray = (length) => {
  return Array.from({ length }, () => Math.floor(Math.random() * 5));
};

getRandomArray(5); // 
const arr = getRandomArray(5);

// give max
const max = Math.max( 🚀 ); // 

// give max with reduce
const maxWithReduce = arr.reduce( 🚀 ); 

// give min and max with reduce
const minMaxWithReduce = arr.reduce(
  🚀 ,
  { min: Infinity, max: -Infinity }
);

//use destructuring to get min and max
const {  🚀  } = minMaxWithReduce; 
console.log(min, maximum);

// give ocurrences of numbers in array
const occurrences = arr.reduce((acc, val) => {
   🚀 );

console.log(occurrences);

Exemple d'affichage : 

Cours : Methodes sur les array

Notre structure de base pour les TDs

const pizzas = [
  { name: "queen", toppings: ["🐷", "🍄", "🍅", "🧀"] },
  { name: "cheese", toppings: ["🧀", "🍅"] },
  { name: "oriental", toppings: ["🍅", "🐑", "🍄", "🌶"] },
  { name: "royal", toppings: ["🍅", "🌵"] },
];

2) Coupez les fruits en deux.

3) Comment utiliser cette fonction

function randomDrink(fruit, i, fruits) {
  const drinks = ["🥤", "🧋", "🍹"];
  const choice = drinks[Math.floor(Math.random() * drinks.length)];
  const article = /^[aeiou]/i.test(fruit) ? "d'" : "de ";
  fruits[i] = `${choice} ${article}${fruit}`;
}

Voici des résultats possibles

Plus d'infos »

Pages

🍕PizzasAPI

Cours

🆒 Module ES6

TD

Projet

Vidéo

Le code HTML

La représentation

La structuration

Magie du JS

🍕Base des données

🪛 Questions

Le joueur a trois chances pour trouver un nombre secret !

🍕Questions ?

🍕Questions ?

Function Style, Method Style