IntroductionIn today's fast-paced world, having a user-friendly and efficient website is crucial for any business. One way to achieve this is by implementing conditional filtering for products, such as tyres. This allows users to easily find the products they are looking for, based on specific criteria. In this tutorial, we will be using JavaScript ES6 to create a component for conditional tyre filtering based on width, profile, and diameter. We will be writing the code in HTML5, the latest version of the markup language used for creating web pages. So, let's get started!Understanding the ConceptBefore we dive into the code, let's first understand the concept of conditional filtering. In simple terms, conditional filtering is a way to narrow down a large set of data based on specific conditions. In our case, we will be filtering tyres based on their width, profile, and diameter. This will allow users to easily find the tyres that match their vehicle's specifications.Setting Up the HTML StructureTo get started, we will first create the basic HTML structure for our component. We will be using the

element to create a form for our filtering options. Inside the form, we will have three elements for width, profile, and diameter. We will also add a element for the user to submit their filtering options. Here's the code for our HTML structure: All Widths 185 195 205 215 225 All Profiles 40 45 50 55 60 All Diameters 15 16 17 18 19 Filter

As you can see, we have given each element an id, which we will use later in our JavaScript code to access their values.Creating the JavaScript ComponentNow, let's move on to the JavaScript part of our component. We will be using ES6, the latest version of JavaScript, to write our code. We will start by creating a class called "TyreFilter" which will contain all the necessary methods for our component. Here's the code for our class:class TyreFilter { constructor() { this.width = document.getElementById("width"); this.profile = document.getElementById("profile"); this.diameter = document.getElementById("diameter"); this.submit = document.getElementById("submit"); this.tyres = document.getElementsByClassName("tyre"); }}In the constructor, we have used the document.getElementById() method to access the elements and the element we created earlier. We have also used the document.getElementsByClassName() method to access all the elements with the class "tyre". This class will be added to each tyre element in our HTML code.Next, we will create a method called "filterTyres" which will be responsible for filtering the tyres based on the user's input. Here's the code for our method:filterTyres() { for (let tyre of this.tyres) { let tyreWidth = tyre.dataset.width; let tyreProfile = tyre.dataset.profile; let tyreDiameter = tyre.dataset.diameter; if (this.width.value !== "all" && this.width.value !== tyreWidth) { tyre.style.display = "none"; } else if (this.profile.value !== "all" && this.profile.value !== tyreProfile) { tyre.style.display = "none"; } else if (this.diameter.value !== "all" && this.diameter.value !== tyreDiameter) { tyre.style.display = "none"; } else { tyre.style.display = "block"; } }}Let's break down the code. First, we are using a for loop to loop through all the tyre elements. Inside the

Useful Links:

• Introduction to ES6
• Conditional Statements in JavaScript
• Functions in JavaScript
• Objects in JavaScript
• Arrays in JavaScript
• For Loops in JavaScript
• While Loops in JavaScript
• For...of Loops in JavaScript
• For...in Loops in JavaScript
• Arrow Functions in JavaScript