This is a simple Vanilla JavaScript project that fetches a list of cities and states from a specified URL and allows users to filter the list based on user input. If a city or state name includes the value entered by the user, it filters the list and matched value's background color will turn yellow.
- Fetches city and state data from a remote URL.
- Provides a user-friendly interface with an input field for filtering.
- Dynamically updates the display based on user input.
- Changes the background color of matching city/state names to yellow for easy identification.
To use this project, follow these steps:
-
Clone the repository to your local machine:
git clone https://github.com/dogukankumru/Vanilla-Javascript-Filter-App.git
-
Open the project directory in your code editor.
-
Open the index.html file in a web browser to run the application locally.
- Open the application in a web browser.
- Enter a value (e.g., a city or state name) in the input field.
- As you type, the list of cities and states will be filtered in real-time to display only items that contain the entered value.
- Matching city/state names will have a yellow background, making them easy to identify.
- Clear the input field to reset the filter.
![Screenshot 2023-09-10 at 22 09 26](https://private-user-images.githubusercontent.com/95023894/266864251-c325d7a6-c657-4433-aa74-c74212f4fb0c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwNjQxNzQsIm5iZiI6MTcxOTA2Mzg3NCwicGF0aCI6Ii85NTAyMzg5NC8yNjY4NjQyNTEtYzMyNWQ3YTYtYzY1Ny00NDMzLWFhNzQtYzc0MjEyZjRmYjBjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDEzNDQzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVmYjI2NjE3YzA1MTI1MDA4MmY4NDAwZmI0MTg0MzY3M2UwZWEyYjM1MWYxMjM3ODhlZjkwZjMwNmFhYTE0ZjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.OAUkUKmBEN3c-jpqfay_bUjdL9yxn2ARCWM501vaHV0)
![Screenshot 2023-09-10 at 22 10 32](https://private-user-images.githubusercontent.com/95023894/266864264-4f93e94a-bc38-4445-99bd-8af016b51b62.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwNjQxNzQsIm5iZiI6MTcxOTA2Mzg3NCwicGF0aCI6Ii85NTAyMzg5NC8yNjY4NjQyNjQtNGY5M2U5NGEtYmMzOC00NDQ1LTk5YmQtOGFmMDE2YjUxYjYyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDEzNDQzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc2NGZiYTFkNzA0NmM1OTA2ZjY5NTcyYzBlMmVlN2M4MGQzYjY2N2RiMzhlNjIzYWE0NDIwYWIxMjIzNWZmZTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.atyLt6hfNcL5HmbqOYQMiwetskhe0VYnh6JV31izDnc)