Responsive web application for a car dealership showcasing services, used car listings with advanced filtering (price, mileage, year), and customer testimonials using PHP,  Symfony, Doctrine, Twig, CSS and JavaScript. Implemented user authentication and an admin dashboard with EasyAdminBundle for managing data.

Javascript implementation:

• Dynamic Filtering: Handles fetching and applying filters to car listings using AJAX.

• Interactive Controls: Manages event handling for slider changes, dropdown selections and pagination links.

• URL Updates: Updates the browser URL to reflect current filter state for sharable links and navigation.

Summary of the Overall Filtering Functionality:

1. Page Load:

   • assets/app.js sets up the price, kilometer, and year sliders using noUiSlider.

   • It also sets up the Filter class, which finds the form and initial state of the car list.

2. User Interaction:

   • When the user interacts with a slider, its value updates displayed on the related inputs.

   • When a slider is released, the form submits an AJAX request.

   • When the user selects a brand in the select box, the javascript sends an AJAX request to fetch the models for this brand.

   • When the user change others selects a form submit is send

   • When a user click on a link pagination or a sorting link, the same is done with AJAX

3. AJAX Request:

   • assets/modules/Filter.js intercepts form changes.

   • It constructs a URL with query parameters based on the current form state and trigger the AJAX request.

   • It updates the URL with history.replaceState.

4. Server Response:

   • The server processes the AJAX request, filters the car listings according to the parameters and sends back a JSON with the HTML of the updated car listings and pagination.

5. Client-Side Update:

   • The client-side javascript receives a JSON data

   • assets/modules/Filter.js dynamically replaces the existing car listing, sorting and pagination HTML with the new data.

In short, the assets/app.js sets up the interactive controls while assets/modules/Filter.js handles the logic of making asynchronous calls to update the results, provide a loader and the navigation in the result page.