0

Хочу сделать себе подсказку рецептов коктейлей по ингредиентам которые есть в наличии, помогите написать код фильтра на js. Логика такая загрузилась страница показываются все рецепты, выбираю Tequila мне показывает рецепт только дайкири, выбираю 2 чек Liquor мне показывает дайкири и маргариту, выбираю 3 чек Gin мне к выводу добавился джин-тоник.

<form id="form">
    <div>
        <p>Алкоголь</p>
        <input id="alc1" type="checkbox" name="Tequila">
        <label for="alc1">Текила</label> <br>
        <input id="alc2" type="checkbox" name="Gin">
        <label for="alc2">Джин</label> <br>
        <input id="alc3" type="checkbox" name="Liquor">
        <label for="alc3">Ликер</label> <br>
        <input id="alc4" type="checkbox" name="Vermouth">
        <label for="alc4">Вермут</label> <br>
    </div>
</form>
<br>
<div>
    <div class="cocktail_block">
        <div class="cocktail" id="negroni">Негрони</div>
        <div class="cocktail" id="margarita">Маргарита</div>
        <div class="cocktail" id="daikiri">Дайкири</div>
        <div class="cocktail" id="gin-tonic">Джин-тоник</div>
    </div>
</div>
const recipes  = [{
    Name: "Негрони",
    Ingr: ("Gin" + "Vermouth")
},
{
    Name: "Джин-тоник",
    Ingr: ("Gin")
},
{
    Name: "Маргарита",
    Ingr: ("Tequila" + "Liquor")
},
{
    Name: "Дайкири",
    Ingr: ("Tequila")
}
]

1 ответ 1

1

выбираю Tequila мне показывает рецепт только дайкири, выбираю 2 чек Liquor мне показывает дайкири и маргариту, выбираю 3 чек Gin мне к выводу добавился джин-тоник

Предложу такой вариант... Но с ИД там не так все просто.

const recipes = [{
    Name: "Негрони",
    Ingr: ["Gin", "Vermouth"]
  },
  {
    Name: "Джин-тоник",
    Ingr: ["Gin"]
  },
  {
    Name: "Маргарита",
    Ingr: ["Tequila", "Liquor"]
  },
  {
    Name: "Дайкири",
    Ingr: ["Tequila"]
  }
]

const of = document.querySelector('#form')
of.addEventListener('click', e => {
  const o = e.target
  if (o.tagName != 'INPUT') return
  const ob = document.querySelector('.cocktail_block')
  ob.innerHTML = ''
  const a = [...of.querySelectorAll(':checked')].map(o => o.name)
  const res = recipes.filter(({Ingr}) => Ingr.every(v => a.includes(v)))
  res.forEach(o => {
    const v = `<div class="cocktail">${o.Name}</div>`
    ob.insertAdjacentHTML('beforeend', v)
  })
})
<form id="form">
  <div>
    <p>Алкоголь</p>
    <input id="alc1" type="checkbox" name="Tequila">
    <label for="alc1">Текила</label> <br>
    <input id="alc2" type="checkbox" name="Gin">
    <label for="alc2">Джин</label> <br>
    <input id="alc3" type="checkbox" name="Liquor">
    <label for="alc3">Ликер</label> <br>
    <input id="alc4" type="checkbox" name="Vermouth">
    <label for="alc4">Вермут</label> <br>
  </div>
</form>
<br>
<div>
  <div class="cocktail_block">
  </div>
</div>

3
  • спасибо немного нето, при выборе текила должно показать только дайкири так как там нужна только текила, чтоб показать еще маргариту нужно выбрать текила и ликер. По самому коду можно изменить так как проще написать js, красоту html+css после буду делать 16 фев в 14:02
  • @ИванСергеев, учел пожелания... :)
    – ksa
    16 фев в 14:05
  • Супер! спасибо большое 16 фев в 14:50

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.