https://kimberlyw618.github.io/UFO-s/
In this project I was tasked with creating a way to share some UFO sightings data. In order to properly display the information I created a dynamic website. On the site there is a table and filtering tools to search through the sightings data.
- Software:
- Visual Studio Code (version: 1.76.2)
- Google Chrome
- Languages: JavaScript, CSS, HTML
- Data Source: static/js/data.js
JavaScript Code static/js/app.js
CSS Code static/css/style.css
HTML Code index.html
When first opening the webpage, you will notice that there is a header and some intro text with a title on the left. Below that there is a table with columns named date, city, state, country, shape, duration, and comments. To the left of that you’ll find a filter function that can be used to search through the data. When slicing the available information stored here one can narrow down the list with date, city, state, country, or shape. Simply enter in the data you’d like to search for and press enter on your keyboard, this will bring up the rows in the table that matches the inputted criteria.
To reset the filter, click the “UFO Sightings” text at the top of the page.
The biggest drawback I found with this design is that the filters are case sensitive. If I were to further develop this webpage, I’d investigate making sure the filter function was flexible in the format typed by users. Another thing I’d look into is finding additional data to add to the data base, weather that’s more fields in the table and/or sightings around the world. Lastly, I’d add a few buttons under the input felids to reset and deploy the filters.