JSFiddle - React, Tailwind, and code Playground

by replicateur

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container mt-5">
  <h1 class="text-center">Weekly Meal Planner</h1>
  <div class="row mt-4">
    <div class="col-md-6">
      <h4>Select Meal for Each Day</h4>
      <div id="meal-selectors"></div>
      <button class="btn btn-primary mt-3 w-100" onclick="generateSummary()">
        Validate meals
      </button>
    </div>
    <div class="col-md-6">
      <h4>Meal Summary</h4>
      <ul id="meal-summary" class="list-group"></ul>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col-md-12">
      <h4>Grocery List</h4>
      <ul id="grocery-list" class="list-group"></ul>
    </div>
  </div>
</div>

CSS

.meal-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.meal-selector label {
  flex: 1;
  margin-right: 10px;
}
.meal-selector select {
  flex: 2;
}
#meal-summary,
#grocery-list {
  max-height: 400px;
  overflow-y: auto;
}

JavaScript

// Define a list of meals and their ingredients
let meals = JSON.parse(localStorage.getItem('meals')) || [
  { id: 1, name: "Poulet grillé aux légumes rôtis", ingredients: ["Poulet", "Carottes", "Courgettes", "Patates douces", "Huile d'olive", "Sel", "Poivre"] },
  { id: 2, name: "Saumon au four avec quinoa et brocoli", ingredients: ["Saumon", "Quinoa", "Brocoli", "Citron", "Huile d'olive", "Sel", "Poivre"] },
  { id: 3, name: "Pâtes complètes aux épinards, champignons et ricotta", ingredients: ["Pâtes complètes", "Épinards", "Champignons", "Ricotta", "Ail", "Huile d'olive", "Sel", "Poivre"] },
  { id: 4, name: "Curry de pois chiches et riz basmati", ingredients: ["Pois chiches", "Riz basmati", "Oignons", "Ail", "Tomates", "Épices curry", "Huile d'olive"] },
  { id: 5, name: "Bœuf sauté aux légumes et nouilles de riz", ingredients: ["Bœuf", "Nouilles de riz", "Poivrons", "Carottes", "Oignons", "Sauce soja", "Huile de sésame"] },
  { id: 6, name: "Omelette aux légumes", ingredients: ["Œufs", "Tomates", "Poivrons", "Oignons", "Sel", "Poivre", "Huile d'olive"] },
  { id: 7, name: "Tacos végétariens avec haricots noirs", ingredients: ["Tortillas", "Haricots noirs", "Maïs", "Avocat", "Tomates", "Salsa", "Fromage râpé"] },
  { id: 8, name: "Lasagnes de légumes", ingredients: ["Pâtes à lasagnes", "Aubergines", "Courgettes", "Poivrons", "Tomates", "Fromage râpé", "Béchamel"] },
  { id: 9, name: "Cabillaud avec patates douces et haricots verts", ingredients: ["Cabillaud", "Patates douces", "Haricots verts", "Huile d'olive", "Sel", "Poivre"] },
  { id: 10, name: "Poulet à la moutarde avec riz complet", ingredients: ["Poulet", "Moutarde", "Riz complet", "Haricots verts", "Crème fraîche", "Sel", "Poivre"] },
  { id: 11, name: "Salade complète", ingredients: ["Quinoa", "Feta", "Concombre", "Tomates", "Pois chiches", "Olives", "Vinaigrette"] },
  { id: 12, name: "Risotto de champignons et asperges", ingredients: ["Riz à risotto", "Champignons", "Asperges", "Parmesan",...