Practice project: Recipe Sieve - filtering

Language Help JavaScript
1

In the Recipe Sieve project the user must type in the correct case in the input field for the filter to work. I want to add a .toLowerCase() so it can filter lower case input text. However after adding it to the inputField.value.toLowerCase() my filter doesn’t work anymore. Is my code correct?

// For full API documentation, including code examples, visit https://wix.to/94BuAAs
const recipeList = [
	{
		name: 'BBQ Chicken',
		ingredients: ['Chicken', ' BBQ Sauce', 'Oil', 'Salt', 'Black Pepper'],
		rating: 5,
		image: 'https://content.codecademy.com/courses/wix/objects/project/bbq_chicken.jpg',
		instructions: 'Chicken goes in the hot oil.Prepare the grill (450°F). Brush the cooking grates clean. Drizzle the chicken breasts with extra virgin olive oil and rub over the breasts. Season generously with kosher salt and freshly ground black pepper. Place the chicken breasts on the hot grill. Cover and cook for 5-6 minutes.'
	},
	{
		name: 'Cheeseburger',
		ingredients: ['American Cheese', 'Ground Beef', 'Lettuce', 'Tomato', 'Onion', 'Onion Powder', 'Salt', 'Black Pepper', 'Hamburger Buns'],
		rating: 4,
		image: 'https://content.codecademy.com/courses/wix/objects/project/cheeseburger.jpg',
		instructions: 'In a large bowl, mix ground beef, onion powder, salt and pepper until just combined. Divide into desired portions and form patties. Cook until the crust that forms on the bottom of the burger releases it from the pan or grate — about 2 minutes.'
	},
	{
		name: 'Dumplings',
		ingredients: ['Dumpling Wrappers', 'Ground Pork', 'Cabbage', 'Onion', 'Salt', 'Black Pepper'],
		rating: 4.5,
		image: 'https://content.codecademy.com/courses/wix/objects/project/dumpling.jpg',
		instructions: 'Marinate ground pork in soy sauce and mix with minced cabbage and onion. Add a tablespoon of the mixture into a dumpling wrapper and repeat until done. Boil the dumplings until they float.'
	},
	{
		name: 'Curried Chickpeas',
		ingredients: ['Chickpeas', 'Garlic', 'Coconut Milk', 'Curry Powder', 'Red Onion', 'Salt', 'Black Pepper'],
		rating: 5,
		image: 'https://content.codecademy.com/courses/wix/objects/project/curried_chickpeas.jpg',
		instructions: 'Cook the diced red onion and minced garlic before adding in curry powder. Add in the drained chickpeas with a can of coconut milk. Simmer until desired texture and season with salt and pepper to taste.'
	},
	// Add a new object here:
	{
		name: 'Sizzle Crisps',
		ingredients: ['Potato', 'Chili Powder', 'Salt', 'Oil'],
		rating: 3.5,
		image: 'https://content.codecademy.com/courses/wix/objects/project/sizzle_crisps.jpg',
		instructions: 'Slice the potato up. Fry up the slices and take out when golden brown. Apply seasoning while crisps are hot.'
	}
];


$w.onReady(function () {
	// Pre-selected elements
	const inputField = $w('#input');
	const dropdownElement = $w('#dropdown');
	const filterButton = $w('#filterBtn');
	const reset = $w('#resetBtn');

	// Add your code below

	for (let i = 0; i < recipeList.length; i++) {
		let currentImage = $w(`#image${i}`);
		let currentName = $w(`#name${i}`);
		let currentIngredients = $w(`#ingredients${i}`);
		let currentInstructions = $w(`#instructions${i}`);
		let currentRating = $w(`#rating${i}`);
		
		currentImage.src = recipeList[i].image;
		currentName.text = recipeList[i].name;
		currentIngredients.text = recipeList[i].ingredients.join(', ');
		currentInstructions.text = recipeList[i].instructions;
		currentRating.text = `${recipeList[i].rating} / 5`;
	}

	const recipeBoxes = $w('Box');

	filterButton.onClick ((event) => {
		const filterOut = inputField.value.toLowerCase();
		const filterOption = dropdownElement.value;

		for (let j = 0; j < recipeBoxes.length; j++) {
			if (recipeList[j][filterOption].includes(filterOut)) {
				recipeBoxes[j].collapse();
			}
		}
	});

	reset.onClick((event) => {
		recipeBoxes.forEach((box) => {
			box.expand();
		})
	});
});
2

If you want to allow lower case input values as well, you need to compare the lowercased input value to lower cased dropdown values.

Since you haven’t posted the html, I don’t know what the dropdown shows and the input field expects. Let’s assume it is recipeList[x].name. Then with an input value ‘Curried chickpeas’ you would have this:

if ([..., 'Dumplings', 'Curried Chickpeas', 'Sizzle Crisps'].includes('curried chickpeas')) { ...

That’ll always be false, so you need a method that returns the recipeList name props as lowercase values.

2 Likes