Предыдущая версия, написанная другим человеком, состояла из следующих нескольких файлов. Она имела недостаток, что работала только на ПК, а в браузере на Андроид нет. Не отображались чекбоксы и не нажимались кнопки.
Так как нужно было, чтобы работало и в Андроид, человек объединил всё в один файл и после этого антивирус Виндовс 10 не стал пропускать этот файл через браузер на ПК, когда пытался скачать его.
Это прототип для написания более сложной версии на её основе. На скриншоте ещё более ранняя версия, где файлы базы выбираются вручную через кнопки-окошки выбора, это было убрано позднее и база подгружается сама или находится в самом коде html в последней версии.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Рецепты</title>
<style>
hr {
border: none;
background-color: black;
color: black;
height: 2px;
}
</style>
</head>
<body>
<div id="input-container"></div>
<button id="submit">Обработать</button>
<button id="clear">Очистить</button>
<button id="check-all">Выбрать всё</button>
<p id="answer"></p>
<script>
window.recipes = [
{
"name": "Пицца",
"ingredients": [
"Мука", "Вода", "Соль", "Колбаса", "Помидоры", "Соус"
]
},
{
"name": "Хлеб",
"ingredients": ["Мука", "Вода", "Соль"]
},
{
"name": "Кекс",
"ingredients": ["Мука", "Вода", "Яйца", "Соль", "Сахар"]
}
]
window.ingredients = [
"Мука",
"Вода",
"Сахар",
"Яйца",
"Соль",
"Колбаса",
"Помидоры",
"Соус"
]
// функция переводит русские слова на латиницу это нужно для создания уникальных id для checkbox-ов
function rus_to_latin ( str ) {
var ru = {
'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd',
'е': 'e', 'ё': 'e', 'ж': 'j', 'з': 'z', 'и': 'i',
'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o',
'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u',
'ф': 'f', 'х': 'h', 'ц': 'c', 'ч': 'ch', 'ш': 'sh',
'щ': 'shch', 'ы': 'y', 'э': 'e', 'ю': 'u', 'я': 'ya',
'ъ': 'ie', 'ь': '', 'й': 'i'
}, n_str = [];
for ( var i = 0; i < str.length; ++i ) {
n_str.push(
ru[ str[i] ]
|| ru[ str[i].toLowerCase() ] == undefined && str[i]
|| ru[ str[i].toLowerCase() ].replace(/^(.)/, function ( match ) { return match.toUpperCase() })
);
}
return n_str.join('');
}
// рецепты
const recipes = window.recipes; // все рецепты из полученного файла
const button = document.querySelector("#submit");
const answer = document.querySelector("#answer");
// кнопка обработки. Не работает, пока не загружен файл
button.addEventListener("click", () => {
// список всех выбранных ингредиентов
const selected = [...document.querySelectorAll("input[id]:checked")].map(
(input) => input.id
);
answer.innerHTML = ""; // очистка ответа
let lines = 0;
//сравнение массива выбранных ингредиентов с массивом всех ингредиентов
let intersectionsList = [];
let intersections;
for (recipe of recipes) {
intersections = recipe.ingredients.filter((item) =>
selected.includes(rus_to_latin(item).toLowerCase()))
recipeIntersections = {"name": recipe.name, "intersections": intersections} // словарь {имя, пересечения}
intersectionsList.push(recipeIntersections); // добавляем словарь в список
}
// сортировка
intersectionsList.sort((a, b) => {
return b.intersections.length-a.intersections.length;
});
// вывод на экран ингредиентов
for (i of intersectionsList) {
if (i.intersections.length !== 0){
let line = document.createElement("hr");
let nextLine = document.createElement("br");
answer.append(i.intersections.join(", ") + ": " + i.name);
answer.append(nextLine);
answer.append(line);
lines++;
}
}
if (lines === 0){
answer.innerHTML = "Таких рецептов нет!";
}
});
// ингредиенты
let ingredients = window.ingredients;
let inputContainer = document.getElementById("input-container")
inputContainer.innerHTML = "";
// вывод всех ингредиентов из файла
for(let i = 0; i<ingredients.length; i++) {
let ingredientCheckbox = document.createElement("input")
ingredientCheckbox.id = rus_to_latin(ingredients[i]).toLowerCase();
ingredientCheckbox.type = "checkbox"
let ingredientLabel = document.createElement("label")
ingredientLabel.for = ingredientCheckbox.id
ingredientLabel.id = ingredientCheckbox.id + "-label"
ingredientLabel.innerHTML = ingredients[i] + "\n"
let nextLine = document.createElement("br")
inputContainer.append(ingredientCheckbox);
inputContainer.append(ingredientLabel);
inputContainer.append(nextLine)
}
// кнопка очистки выбора
let clearButton = document.getElementById("clear")
clearButton.addEventListener("click", () => {
const selected = [...document.querySelectorAll("input[id]:checked")].map(
(input) => input.id
);
for (ingredient of selected) {
const getInput = document.getElementById(ingredient)
getInput.checked = false;
}
});
// кнопка "Выбрать все"
let checkAllButton = document.getElementById("check-all")
checkAllButton.addEventListener("click", () => {
const inputs = [...document.querySelectorAll("input[id]")].map(
(input) => input.id
);
for (ingredient of inputs) {
const getInput = document.getElementById(ingredient)
getInput.checked = true;
}
});
</script>
</body>
</html>
Прошу поправить, чтобы не было проблемы.
Ссылка на код одним файлом в архиве, который не мог скачать из Виндовс (перегружался в Линукс)
https://disk.yandex.ru/d/Q3zx2KZFWXdg0w
Предыдущая версия, до объединения в один файл
https://disk.yandex.ru/d/rasHcsA_v5iDgw 
Простой
