javascripthtmlbuttonfavorites

How do I add a favorite option on my site?

I need to add a favorite button on a menu website. If the meal is favorited, it needs to be visual on the 'favorieten' button. I need to use HTML and JavaScript. The code is in Dutch, please don't worry about the names. I fixed the checkboxes on the top but I cannot get the 'hartje' (this means: heart) to respond properly and ad it to the 'Favorieten' button. Can someone help me?

This is my code:

const checkboxes = document.getElementsByTagName("input")
let actieve_types = []

for (let x = 0; x < checkboxes.length; x++) {
  const checkbox = checkboxes[x]

  checkbox.addEventListener("change", e => {
    if (actieve_types.includes(checkbox.value)) {
      const index_value = actieve_types.indexOf(checkbox.value)

      actieve_types.splice(index_value, 1)
    } else {
      actieve_types.push(checkbox.value)
    }

    updateView()
  })
}

const updateView = () => {
  const meals = document.getElementsByClassName("meal")

  for (let x = 0; x < meals.length; x++) {
    const meal = meals[x]

    meal.style.display = "block"

    if (actieve_types.length > 0) {
      if (!actieve_types.includes(meal.dataset.type)) {
        meal.style.display = "none"
      }
    }
  }
}

document.getElementsByClassName("hartje");.onclick = function(event) {
  for (var i = 0; i < faveMe.length; i++) {
    if (faveMe[i].className === "hartje") {
      faveMe[i].classList.replace("hartje", "welFavo");
      console.log(faveMe);
    } else {
      faveMe[i].style.visibility = "";
    }
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/Menukaart_wk5/css/master.css">
  <script src="/Menukaart_wk5/js/main.js" charset="UTF-8" defer></script>
  <title>Yes!BosFood!</title>
</head>

<body>
  <main>
    <section>
      <header>
        <h1>Yes!BosFood</h1>
      </header>
      <ul class="filterSection">
        <li>
          <input type="checkbox" name="checkbox" value="alleen">
          <label>Ik eet alleen &#124;</label>
        </li>
        <li>
          <input type="checkbox" name="checkbox" value="groot">
          <label>Ik wil een groot gerecht &#124;</label>
        </li>
        <li>
          <input type="checkbox" name="checkbox" value="delen">
          <label>Wij gaan delen</label>
        </li>
      </ul>
      <div class="favo">
        <input id="eventClick" type="button" value="Favorieten">
      </div>
      <article>
        <ul id="itemsToFilter">
          <li data-type="alleen" class="meal">
            <figure><img src="/Menukaart_wk5/image/sushi_1.jpg" alt="Sushi close up"></figure>
            <h2><strong>Sushi box &#124; &euro;14.50 </strong></h2>
            <p>Keuze uit 3 grote sushisoorten en 4 kleine. Of laat je verassen door de keuze van de chef!</p>
            <button class="hartje"></button>
          </li>
          <li data-type="alleen" class="meal">
            <figure><img src="/Menukaart_wk5/image/sushi_2.jpg" alt="Vegetarische sushi"></figure>
            <h2><strong>Sushi vegabox &#124; &euro;19.50</strong></h2>
            <p>Keuze uit 3 grote sushisoorten en 4 kleine, zonder vis. Of laat je verassen door de keuze van de chef! </p>
            <button class="hartje"></button>
          </li>
          <li data-type="delen" class="meal">
            <figure><img src="/Menukaart_wk5/image/sushi_3.jpg" alt="Grote box met sushi"></figure>
            <h2><strong>Sushi box groot &#124; &euro;29.95 </strong></h2>
            <p>Keuze uit 7 grote sushisoorten en 8 kleine. Ideaal om te delen! </p>
            <button class="hartje"></button>
          </li>
          <li data-type="groot" class="meal">
            <figure><img src="/Menukaart_wk5/image/pasta_1.jpg" alt="Pasta tagliatelle"></figure>
            <h2><strong>Pasta tagliatelle &#124; &euro;12.50 </strong></h2>
            <p>Altijd lekker en dit gerecht is vegetarisch!</p>
            <button class="hartje"></button>
          </li>
          <li data-type="alleen" class="meal">
            <figure><img src="/Menukaart_wk5/image/champ_soep.jpg" alt="Champignonsoep"></figure>
            <h2><strong>Champignonsoep &#124; &euro;8.50 </strong></h2>
            <p>Heerlijk als voorgerecht en dit gerecht is vegetarisch!</p>
            <button class="hartje"></button>
          </li>
          <li data-type="groot" class="meal">
            <figure><img src="/Menukaart_wk5/image/gnocchi.jpg" alt="Gnocchi"></figure>
            <h2><strong>Gnocchi &#124; &euro;11.50</strong></h2>
            <p>Te bestellen als vega gerecht, of met vlees!</p>
            <button class="hartje"></button>
          </li>
          <li data-type="delen" class="meal">
            <figure><img src="/Menukaart_wk5/image/ei_in_saus.jpg" alt="Shakshuka"></figure>
            <h2><strong>Shakshuka &#124; vanaf &euro;8.50 </strong></h2>
            <p>Heerlijk om mee te dippen. Kies je eigen dipsoort!</p>
            <button class="hartje"></button>
          </li>
          <li data-type="delen" class="meal">
            <figure><img src="/Menukaart_wk5/image/pizza.jpg" alt="Pizza"></figure>
            <h2><strong>Pizza &#124; vanaf &euro;11.50 </strong></h2>
            <p>Stel jouw eigen pizza samen!</p>
            <button class="hartje"></button>
          </li>
          <li data-type="groot" class="meal">
            <figure><img src="/Menukaart_wk5/image/patat.jpg" alt="Patat"></figure>
            <h2><strong>Patat &#124; vanaf &euro;3.50 </strong></h2>
            <p>Stel jouw eigen patatje samen! Ga jij voor de patat met of pak je uit met een patatje oorlog?</p>
            <button class="hartje"></button>
          </li>
        </ul>
        <footer>
          <h2>Gemaakt door Simone Bos</h2>
        </footer>
      </article>
    </section>
  </main>
</body>

Solution

  • I would try the following: In your <ul> you can add icons to your buttons like this:

    <ul id="itemsToFilter">
                <li data-type="alleen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/sushi_1.jpg" alt="Sushi close up"></figure>
                    <h2><strong>Sushi box &#124; &euro;14.50 </strong></h2>
                    <p>Keuze uit 3 grote sushisoorten en 4 kleine. Of laat je verassen door de keuze van de chef!</p>
                    <button class="hartje" onclick="favorizeMeal(0)"><i id="0" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="alleen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/sushi_2.jpg" alt="Vegetarische sushi"></figure>
                    <h2><strong>Sushi vegabox &#124; &euro;19.50</strong></h2>
                    <p>Keuze uit 3 grote sushisoorten en 4 kleine, zonder vis. Of laat je verassen door de keuze van de chef! </p>
                    <button class="hartje" onclick="favorizeMeal(1)"><i id="1" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="delen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/sushi_3.jpg" alt="Grote box met sushi"></figure>
                    <h2><strong>Sushi box groot &#124; &euro;29.95 </strong></h2>
                    <p>Keuze uit 7 grote sushisoorten en 8 kleine. Ideaal om te delen! </p>
                    <button class="hartje" onclick="favorizeMeal(2)"><i id="2" class="fa fa-heart"></i></i></button>
                </li>
                <li data-type="groot" class="meal">
                    <figure><img src="/Menukaart_wk5/image/pasta_1.jpg" alt="Pasta tagliatelle"></figure>
                    <h2><strong>Pasta tagliatelle &#124; &euro;12.50 </strong></h2>
                    <p>Altijd lekker en dit gerecht is vegetarisch!</p>
                    <button class="hartje" onclick="favorizeMeal(3)"><i id="3" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="alleen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/champ_soep.jpg" alt="Champignonsoep"></figure>
                    <h2><strong>Champignonsoep &#124; &euro;8.50 </strong></h2>
                    <p>Heerlijk als voorgerecht en dit gerecht is vegetarisch!</p>
                    <button class="hartje" onclick="favorizeMeal(4)"><i id="4" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="groot" class="meal">
                    <figure><img src="/Menukaart_wk5/image/gnocchi.jpg" alt="Gnocchi"></figure>
                    <h2><strong>Gnocchi &#124; &euro;11.50</strong></h2>
                    <p>Te bestellen als vega gerecht, of met vlees!</p>
                    <button class="hartje" onclick="favorizeMeal(5)"><i id="5" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="delen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/ei_in_saus.jpg" alt="Shakshuka"></figure>
                    <h2><strong>Shakshuka &#124; vanaf &euro;8.50 </strong></h2>
                    <p>Heerlijk om mee te dippen. Kies je eigen dipsoort!</p>
                    <button class="hartje" onclick="favorizeMeal(6)"><i id="6" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="delen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/pizza.jpg" alt="Pizza"></figure>
                    <h2><strong>Pizza &#124; vanaf &euro;11.50 </strong></h2>
                    <p>Stel jouw eigen pizza samen!</p> 
                    <button class="hartje" onclick="favorizeMeal(7)"><i id="7" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="groot" class="meal">
                    <figure><img src="/Menukaart_wk5/image/patat.jpg" alt="Patat"></figure>
                    <h2><strong>Patat &#124; vanaf &euro;3.50 </strong></h2>
                    <p>Stel jouw eigen patatje samen! Ga jij voor de patat met of pak je uit met een patatje oorlog?</p>
                    <button class="hartje" onclick="favorizeMeal(8)"><i id="8" class="fa fa-heart-o"></i></i></button>
                </li>
            </ul>

    For the icons to show up you need to add this link to the icon library I used in the head section of your html:

    <head>
...
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

    There are more icon libraries, find a tutorial here: https://www.w3schools.com/icons/default.asp

    Then you need to implement a logic in your Javascript that exchanges the icon class 'fa-heart' with 'fa-heart-o' if the user clicked on the button.

    favorizeMeal(mealNumber) {
  console.log("favorizeMeal clicked for meal number: ", mealNumber);
  var selectedIcon = document.getElementById(mealNumber);
  if (selectedIcon.classList.contains('fa-heart') { 
   selectedIcon.classList.remove("fa-heart");
   selectedIcon.classList.add("fa-heart-o");
  } else {
   selectedIcon.classList.add("fa-heart");
   selectedIcon.classList.remove("fa-heart-o");
  }
}

    Something like this (I didn't test it though!)