Passo 13

Instruções

Agora é hora de usar suas funções. Declare uma nova função processIngredient que aceita quatro argumentos: baseQuantity, baseUnit, newUnit e newServings. Sua função deve ajustar as porções para a quantidade base para as novas porções, converter essa quantidade ajustada da unidade base para a nova unidade e retornar a quantidade convertida como uma string fixa com duas casas decimais. Se você ficar preso, consulte suas chamadas de função de exemplo que você registrou. Você pode alterar os valores em ambos esses exemplos para explorar.

O que fazer:

Testes:

Você deve declarar uma função `processIngredient`.
Sua função `processIngredient` deve ter `baseQuantity` como o primeiro parâmetro.
Sua função `processIngredient` deve ter `baseUnit` como o segundo parâmetro.
Sua função `processIngredient` deve ter `newUnit` como o terceiro parâmetro.
Sua função `processIngredient` deve ter `newServings` como o quarto parâmetro.
Sua função `processIngredient` deve retornar uma string.
Sua função `processIngredient` deve retornar o valor correto.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recipe Ingredient Converter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="container">
      <h1>Recipe Ingredient Converter</h1>
      <form id="recipe-form">
        <div class="input-container">
          <label for="ingredient">Ingredient:</label>
          <input type="text" id="ingredient" required />
        </div>

        <div class="input-container">
          <label for="quantity">Quantity:</label>
          <input type="number" id="quantity" step="any" required />
        </div>

        <div class="input-container">
          <label for="unit">Unit:</label>
          <select id="unit">
            <option value="cup">Cup</option>
            <option value="gram">Gram</option>
            <option value="ounce">Ounce</option>
            <option value="teaspoon">Teaspoon</option>
          </select>
        </div>
        <div class="input-container">
          <label for="servings">Number of Servings:</label>
          <input type="number" id="servings" step="any" value="1" />
        </div>
        <button type="submit">Convert</button>
      </form>

      <section>
        <h2>Converted Ingredients</h2>
        <ul id="result-list"></ul>
      </section>
    </main>
    <script src="script.js"></script>
  </body>
</html>

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --dark-grey: #0a0a23;
  --white: #fff;
  --light-grey: #ddd;
  --golden-yellow: #fecc4c;
  --yellow: #ffcc4c;
  --gold: #feac32;
  --orange: #ffac33;
  --dark-orange: #f89808;
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--dark-grey);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  margin: 10px 0 15px;
}

.container {
  text-align: center;
  background: var(--white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
}

input,
select {
  padding: 10px;
  font-size: 16px;
  margin: 5px 0;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
}

button {
  font-size: 1.2rem;
  cursor: pointer;
  width: 200px;
  margin: 20px 0 30px;
  color: var(--dark-grey);
  background-color: var(--gold);
  background-image: linear-gradient(var(--golden-yellow), var(--orange));
  border-color: var(--gold);
  border-width: 3px;
}

button:hover {
  background-image: linear-gradient(var(--yellow), var(--dark-orange));
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid var(--light-grey);
  display: flex;
  justify-content: space-between;
}

const conversionTable = {
  cup: { gram: 240, ounce: 8.0, teaspoon: 48 },
  gram: { cup: 1 / 240, ounce: 0.0353, teaspoon: 0.2 },
  ounce: { cup: 0.125, gram: 28.35, teaspoon: 6 },
  teaspoon: { cup: 1 / 48, gram: 5, ounce: 0.167 },
}

const convertQuantity = (fromUnit) => (toUnit) => (quantity) => {
  const conversionRate = conversionTable[fromUnit][toUnit];
  return quantity * conversionRate;
}

const gramsResult = convertQuantity("cup")("gram")(2);
console.log(gramsResult);

const adjustForServings = (baseQuantity) => (newServings) =>
  baseQuantity * newServings;

const servingsResult = adjustForServings(4)(6);
console.log(servingsResult);

Preview