Here I build a table using data stored in a JavaScript array. I have also create filters to make this table fully dynamic, meaning that it will react to user input, and then placed the table into an HTML file for easy viewing.
I have customized my webpage using Bootstrap, adding specific CSS components to the stylesheet such as applying a background color to the page , adding an image to the jumbotron and equipped my table with several fully functional filters that will allow users to interact with our visualizations.
Software: HTML/CSS, JavaScript, BootStrap 4.0.0
The website link deployed in github is https://nishatsultana3538.github.io/UFOs/
Using two javascript file app.js , data.js, one css file style.css and html file index.html I made the website to filter data for UFO sightings in different cities , shapes and time.
Below is how the website looks like
On ipad air
The website has 5 filter options to filter the data
in where previous filter button
was removed.
Using different filter criteria we can get data depending on which filter options we use. We can also use one search field or multiple search field combined to narrow down the result. Using different date only in the Enter date search filed we can get data of different dates UFO sightings. Here are UFO sightings data for different dates.
Here is UFO sightings data for 1/10/2010 and only in California state:
Here is UFO sightings data for California state and triangle shape:
Here is UFO sightings data for 1/12/2010 and only in California state and with fireball shape:
-
One drawback of the webpage is that user don't know what parameter to use to filter the data. They have to look at the data to use a filter option.
-
Another drawback is that search area has some data already shown which seems confusing and also the search data need to be cleared to re-input again.
-
Using a dropdown menu in the search option will be easier to choose from.
-
The search field need to be cleared after one search has done.