nazanin-hub / ufos

Created an interactive Web Page to analyze UFO sightings using JavaScript, HTML, CSS, and Bootstrap.

UFOs

Create a Web Page with JavaScript, HTML, CSS, and Bootstrap.

Overview of Project

Helping a data journalist to analyze UFO sightings by allowing users to filter for multiple criteria at the same time. I used JavaScript to display the data as a table and manipulate it by adding filters for the event date, city, state, country, and shape. Then, I put everything together in a tidy HTML page.

Resources

• Data Source: UFO data
• Software: HTML/CSS, JavaScript, Visual Studio Code 1.49.1, BootStrap 4.0.0

Results

Filtering by date

As the below image shows, the user enters the desired date. The webpage will be updated with the desired date after pressing "Enter".

Filtering by city

As the below image shows, the user enters the desired city. The webpage will be updated with the desired city after pressing "Enter".

Filtering by state

As the below image shows, the user enters the desired state. The webpage will be updated with the desired state after pressing "Enter".

Filtering by country

As the below image shows, the user enters the desired country. The webpage will be updated with the desired country after pressing "Enter".

Filtering by shape

As the below image shows, the user enters the desired shape. The webpage will be updated with the desired shape after pressing "Enter".

Multiple criteria filtering

As the below image shows, the user can enter multiple criteria simultaneously. The webpage will be updated with the search criteria after pressing "Enter".

Summary

one drawback of this new design

The drawback of this design is that we don't provide the user with an autocomplete list of potential inputs at each filter box. For example, when the user wants to enter the desired city at the city filter box, he has no other choice other than going through the table to find it.

Two recommendations for further development

The first recommendation could be using the drop-down list. So, the user can select the desired criteria from the list instead of going through the table to find them.

The second recommendation could be inserting a filter button at the end of the filter part to clear all user inputs.