app.js

// when a user clicks the button we fetch some data

const fetchBtn = document.getElementById('fetch');
const filterBtn = document.getElementById('filter');
const content = document.getElementById('content');
const input = document.getElementById('text');

let items;

fetchBtn.addEventListener('click', function () {
	// get some data from an API
	window.fetch('https://fakestoreapi.com/products').then((res) => {
		res.json().then((data) => {
			console.log(data);

			items = data;

			for (let i = 0; i < data.length; i++) {
				// add this to the page
				content.innerHTML += `
                <div>
                <h1>${data[i].title}</h1>
                <img src=${data[i].image}
                </div>
                `;
			}
		});
	});
});

filterBtn.addEventListener('click', function () {
	// set the screen to empty
	content.innerHTML = '';
	// get the value from the input
	const val = input.value;
	// filter the items by the input

	// TODO: can you figure out the filtering logic?
});

/**
 * PS - check out parsity.io/dev30 if you want to learn JS the right way;)
 */