JSFiddle - React, Tailwind, and code Playground

by replicateur

HTML

<div class="container">
  <h1>Weekly Meal Planner</h1>
  <div id="mealPlanner" class="meal-planner"></div>
  <button onclick="generateMealPlan()" class="generate-button">
    Generate Meal Plan
  </button>
  <button onclick="randomizeMealPlan()" class="generate-button">
    Randomize Meal Plan
  </button>
  <button onclick="saveMealPlan()" class="generate-button">
    Save Meal Plan
  </button>
  <button onclick="loadLastMealPlan()" class="generate-button">
    Load Last Plan
  </button>
  <h2>Weekly Meal Plan:</h2>
  <div id="mealOutput" class="output"></div>
  <h2>Shopping List:</h2>
  <div id="shoppingList" class="output"></div>
  <div id="feedback" class="feedback"></div>
</div>

Tailwind CSS

/* styles.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1, h2 {
    text-align: center;
    font-weight: bold;
}

#mealPlanner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.day {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
}

.day h3 {
    font-size: 1.2em;
    margin-bottom: 8px;
}

select {
    width: 100%;
    padding: 8px;
    margin: 4px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.generate-button {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 20px 0;
}

.generate-button:hover {
    background-color: #0056b3;
}

.output {
    margin-top: 16px;
    text-align: center;
}

.output p {
    font-size: 1.1em;
    margin: 8px 0;
}

/* Additions to styles.css */
.feedback {
    text-align: center;
    font-size: 1.1em;
    color: green;
    margin-top: 10px;
}

JavaScript

// Listes d'ingrédients disponibles
const vegetables = [
  "Brocoli",
  "Épinards",
  "Carottes",
  "Courge",
  "Choux de Bruxelles",
  "Betterave",
]
const proteins = [
  "Poulet",
  "Saumon",
  "Tofu",
  "Lentilles",
  "Pois chiches",
  "Œufs",
]
const carbs = [
  "Riz complet",
  "Quinoa",
  "Pâtes complètes",
  "Patates douces",
  "Semoule complète",
]

// Jours de la semaine
const daysOfWeek = [
  "Lundi",
  "Mardi",
  "Mercredi",
  "Jeudi",
  "Vendredi",
  "Samedi",
  "Dimanche",
]

// Fonction pour générer l'interface de sélection des repas
function generateMealPlannerUI() {
  const plannerDiv = document.getElementById("mealPlanner")
  plannerDiv.innerHTML = ""

  daysOfWeek.forEach((day) => {
    const dayDiv = document.createElement("div")
    dayDiv.classList.add("day")

    const dayTitle = document.createElement("h3")
    dayTitle.textContent = day
    dayDiv.appendChild(dayTitle)

    // Création du sélecteur pour les légumes
    const vegSelect = createDropdown(vegetables, `${day}-vegetable`)
    dayDiv.appendChild(vegSelect)

    // Création du sélecteur pour les protéines
    const proteinSelect = createDropdown(proteins, `${day}-protein`)
    dayDiv.appendChild(proteinSelect)

    // Création du sélecteur pour les féculents
    const carbSelect = createDropdown(carbs, `${day}-carb`)
    dayDiv.appendChild(carbSelect)

    plannerDiv.appendChild(dayDiv)
  })
}

// Fonction pour créer un élément de liste déroulante
function createDropdown(options, id) {
  const select = document.createElement("select")
  select.id = id

  options.forEach((option) => {
    const optionElement = document.createElement("option")
    optionElement.value = option
    optionElement.textContent = option
    select.appendChild(optionElement)
  })
  return select
}

// Fonction pour générer le plan de repas et la liste de courses en fonction des sélections
function generateMealPlan() {
  const mealOutput = document.getElementById("mealOutput")
  mealOutput.innerHTML = ""
 ...