UFOs

Created a website that displays UFO-sightings data and is able to filter through it on user input using JavaScript, HTML/CSS, and Bootstrap

Overview

In this project I created a website using HTML/CSS and bootstrap to display data that was stored in a js file. At the same time, I utilized JavaScript to add this data to the website in a table format while being able to filter through it with the user's input.

Resources

• Datasets:

  • data.js

• Software:

  • JavaScript
  • D3 library
  • HTML
  • CSS
  • Bootstrap

Results

The final result was the working website that allowed for five different categories to filter the data: date, city, state, country, and shape of the UFO.

To access the webpage you can click here: Active Github Pages

• The website displays the data in the form of a well structured table with UFO's sighting date, city, state, country, shape, duration, and additional comments.
• The website was designed using JavaScript and HTML. It has been well arranged and decorated using CSS and Bootstrap.
• To navigate through its functionality, the user would need to click on the input boxes provided to the left and enter a valid text-option for the category to be filtered. If you enter a incorrect fitler or a variable that does not exist in the data, you will get an empty table. In this case, try again.
• To come back to the original dataset (without filters included) click on the top left where it says UFO Sightings and the HTML will get redirected.

Filter example:

Multi-filter example:

Summary

One drawback is that the dataset used only includes sightings in the US. This may affect the website because it might not get as much attention from other parts of the World. One recommendation could be to find more data online and insert it in the same data.js file following the same format. Additionally, another recommendation could be to futher decorate the website. CSS and Bootstrap have infinite options to make an even more aesthetically pleasant website.