UFO Sightings with HTML/CSS, JavaScript, Visual Studio Code 1.49.1, BootStrap 4.0.0
This poroject creates a webpage that accepts user inputs to display information about UFO sightings. Users will be able to filter the UFO sightings table based on multiple criteria such as the event date, city, state, country and shape. Process
- Build a table using data stored in a JavaScript array and create filters to make this table fully dynamic with user input.
- Place the table into an HTML file for easy viewing.
- Customize webpage using Bootstrap with several fully functional filters to vizualize data easily.
- HTML/CSS and Bootstrap were used to modify the aesthetics of the website.
- Data Sources: UFO Sightings Data information stored in a javascript file.
- Software/Libraries: HTML/CSS, JavaScript, Visual Studio Code 1.49.1, BootStrap 4.0.0
Link to UFO Sightings deployed webpage: UFO Finder
Search Criteria The user can filter the table by (Date, City, State, Country, Shape)typing in the suggested placeholder elements. The change is detected and the table is updated accordingly.
- Search criteria has to be entered in lower case letters with no spaces at the end of the text.
- Press enter to initiate the filter.
- To reset the filter criteria, click the UFO Sightings at the top left of the website.
Initial page appearance when landing on the webpage
Page appearance with filtered data on Date and State
Page appearance with filtered data on country
Page appearance with filtered data on shape
The user must know the specific data(city, date, state etc) to search which is cumbersome and not user-friendly. This also means they can lose vital information that they are looking for.
- All filters should have drop-down lists so that the user can pick the data to be filtered on
- Date field should filter on not just specific dates but for a date range, month and year.