cba85/app.js

## app.js
let recipes = [];

const form = document.querySelector("form");

form.addEventListener("submit", function (e) {
  e.preventDefault();

  if (
    !form.name.value ||
    form.time.value < 1 ||
    form.people.value < 1 ||
    !form.ingredients.value ||
    !form.preparation.value
  ) {
    document.querySelector(".error").style.display = "block";

    return;
  }

  const recipe = {
    id: Date.now(),
    name: form.name.value,
    time: form.time.value,
    people: form.people.value,
    ingredients: form.ingredients.value,
    preparation: form.ingredients.value,
  };

  recipes.push(recipe);

  document.querySelector(".error").style.display = "none";

  const recipeHtml = document.createElement("article");

  recipeHtml.innerHTML = `<h3>${recipe.name}</h3>
  <p>Nombre de personnes : <strong>${recipe.people}</strong></p>
  <p>Temps de préparation : <strong>${recipe.time}</strong> minutes</p>
  <h4>Ingrédients</h4>
  <p>${recipe.ingredients}</p>
  <h4>Préparation</h4>
  <p>${recipe.preparation}</p>`;

  const deleteButton = document.createElement("button");
  deleteButton.innerHTML = "Supprimer";

  deleteButton.addEventListener("click", function (e) {
    e.preventDefault();

    recipeHtml.remove();
  });

  recipeHtml.appendChild(deleteButton);

  form.name.value = "";
  form.time.value = "";
  form.people.value = "";
  form.ingredients.value = "";
  form.preparation.value = "";

  document.querySelector("#recipes").appendChild(recipeHtml);
});

## index.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mes recettes</title>
    <meta name="description" content="Ma liste de recettes" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
    />
    <style>
      .error {
        color: red;
        text-align: center;
        font-weight: bold;
      }
    </style>
    <script src="/app.js" defer></script>
  </head>
  <body class="container">
    <h1>Mes recettes</h1>

    <article>
      <h2>Créer une recette</h2>

      <form>
        <label for="name">Nom</label>
        <input type="text" name="name" id="name" />

        <label for="people">Nombre de personnes</label>
        <input type="number" name="people" id="people" min="1" />

        <label for="time">Temps de préparation (minutes)</label>
        <input type="number" name="time" id="time" min="1" />

        <label for="ingredients">Ingrédients</label>
        <textarea
          name="ingredients"
          id="ingredients"
          cols="30"
          rows="5"
        ></textarea>

        <label for="preparation">Préparation</label>
        <textarea
          name="preparation"
          id="preparation"
          cols="30"
          rows="5"
        ></textarea>

        <button type="submit">Créer</button>
      </form>

      <div class="error" style="display: none">
        🔴 Veuillez remplir les champs correctement
      </div>
    </article>

    <div id="recipes"></div>
  </body>
</html>
	let recipes = [];

	const form = document.querySelector("form");

	form.addEventListener("submit", function (e) {
	e.preventDefault();

	if (
	!form.name.value \|\|
	form.time.value < 1 \|\|
	form.people.value < 1 \|\|
	!form.ingredients.value \|\|
	!form.preparation.value
	) {
	document.querySelector(".error").style.display = "block";

	return;
	}

	const recipe = {
	id: Date.now(),
	name: form.name.value,
	time: form.time.value,
	people: form.people.value,
	ingredients: form.ingredients.value,
	preparation: form.ingredients.value,
	};

	recipes.push(recipe);

	document.querySelector(".error").style.display = "none";

	const recipeHtml = document.createElement("article");

	recipeHtml.innerHTML = `<h3>${recipe.name}</h3>
	<p>Nombre de personnes : <strong>${recipe.people}</strong></p>
	<p>Temps de préparation : <strong>${recipe.time}</strong> minutes</p>
	<h4>Ingrédients</h4>
	<p>${recipe.ingredients}</p>
	<h4>Préparation</h4>
	<p>${recipe.preparation}</p>`;

	const deleteButton = document.createElement("button");
	deleteButton.innerHTML = "Supprimer";

	deleteButton.addEventListener("click", function (e) {
	e.preventDefault();

	recipeHtml.remove();
	});

	recipeHtml.appendChild(deleteButton);

	form.name.value = "";
	form.time.value = "";
	form.people.value = "";
	form.ingredients.value = "";
	form.preparation.value = "";

	document.querySelector("#recipes").appendChild(recipeHtml);
	});
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Mes recettes</title>
	<meta name="description" content="Ma liste de recettes" />
	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
	/>
	<style>
	.error {
	color: red;
	text-align: center;
	font-weight: bold;
	}
	</style>
	<script src="/app.js" defer></script>
	</head>
	<body class="container">
	<h1>Mes recettes</h1>

	<article>
	<h2>Créer une recette</h2>

	<form>
	<label for="name">Nom</label>
	<input type="text" name="name" id="name" />

	<label for="people">Nombre de personnes</label>
	<input type="number" name="people" id="people" min="1" />

	<label for="time">Temps de préparation (minutes)</label>
	<input type="number" name="time" id="time" min="1" />

	<label for="ingredients">Ingrédients</label>
	<textarea
	name="ingredients"
	id="ingredients"
	cols="30"
	rows="5"
	></textarea>

	<label for="preparation">Préparation</label>
	<textarea
	name="preparation"
	id="preparation"
	cols="30"
	rows="5"
	></textarea>

	<button type="submit">Créer</button>
	</form>

	<div class="error" style="display: none">
	🔴 Veuillez remplir les champs correctement
	</div>
	</article>

	<div id="recipes"></div>
	</body>
	</html>