index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
			integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
		/>
		<link rel="stylesheet" href="style.css" />
		<title>Shopping List</title>
	</head>

	<body>
		<div class="container">
			<header>
				<img src="images/note.png" alt="" />
				<h1>Shopping List</h1>
			</header>
			<form id="item-form">
				<div class="form-control">
					<input
						type="text"
						class="form-input"
						id="item-input"
						name="item"
						placeholder="Enter Item"
					/>
				</div>
				<div class="form-control">
					<button type="submit" class="btn">
						<i class="fa-solid fa-plus"></i>
						Add Item
					</button>
				</div>
			</form>

			<div class="filter">
				<input
					type="text"
					class="form-input-filter"
					id="filter"
					placeholder="Filter Items"
				/>
			</div>

			<ul id="item-list" class="items"></ul>

			<button id="clear" class="btn-clear">Clear All</button>
		</div>

		<script src="script.js"></script>
	</body>
</html>