Frontend and Backend contribution

Frontend developed code (js + html):

const randomIngredients = [];
for (let i = 0; i < 5; i++) {
    const randomIndex = Math.floor(Math.random() * ingredients.length);
    randomIngredients.push(ingredients[randomIndex]);
}
return randomIngredients; }

document.getElementById(‘customRecipeButton’).addEventListener(‘click’, () => { const randomIngredients = getRandomIngredients(); document.getElementById(‘randomIngredients’).innerHTML = randomIngredients.map(ingredient => <li>${ingredient}</li>).join(‘’); });

document.getElementById(‘randomRecipeButton’).addEventListener(‘click’, () => { const randomRecipe = recipes[Math.floor(Math.random() * recipes.length)]; const recipeResult = ` <div class="recipe"> <h3>${randomRecipe.name}</h3> <p>${randomRecipe.description}</p> <p>Cooking Time: ${randomRecipe.cookingTime}</p> <p>Ingredients: ${randomRecipe.ingredients.join(‘, ‘)}</p> <p>Cooking Process: ${randomRecipe.cookingProcess}</p> </div> `; document.getElementById(‘recipeResults’).innerHTML = recipeResult; });

generate random ingredients w/ 5x loop (takes list of 5 ingedients and function returns for display) event listener for the custom recipe to generate list of ingredients (random) event listener to select random recipe us ing math.random and display with html

Backend code (js):

fetchChannels(); document.getElementById(‘channelForm’).reset(); } catch (error) { console.error(‘Error adding channel:’, error); alert(‘Error adding channel: ‘ + error.message);

refresh list when new is added, and logs errors w/ msg