A Beginner’s Guide To Nuxt 3/

...

/

Displaying Color Filters and Binding Dynamic Styles

Displaying Color Filters and Binding Dynamic Styles

Learn about the additional colors property that we can add to our query string to filter the returned images.

We'll cover the following...

We can filter the images from Pixabay by adding a color option. Pixabay uses a set of 14 colors, which we can add when requesting images. For example, adding the “blue” filter may return images containing a blue sky or a blue car.

We will approach this in two stages:

  1. Loop over the available colors and display them to the user to select.

  2. Add the selected colors to the request to filter the images.

Press + to interact

Creating constants to store colors

In the useState.js file, we need two additional constants:

Press + to interact
export const useAvailableColors = () =>
	useState("available-colors", () => [
		"grayscale",
		"transparent",
		"red",
		"orange",
		"yellow",
		"green",
		"turquoise",
		"blue",
		"lilac",
		"pink",
		"white",
		"gray",
		"black",
		"brown",
	]);
export const useSelectedColors = () => useState("selected-colors", () => []);

  • Lines 1–17: We have an array containing all of the available colors we can use with the API.

  • Line 18: ...