UFOs : What is up there?

Resources:

Data Source: ufo_starterCode.js and index.html

Data Tools: ECMAScript, JavaScript, Jupyter Notebook, Python and MongoDB

Software: ES6+, ECMAScript, MongoDB, Python 3.8.3, Visual Studio Code 1.50.0

Overview of the analysis:

Accomplishments abound: webpage and dynamic table are working as intended. An interactive webpage that allows readers to parse the data around UFO sightings. The webpage allow users to view the data via an HTML and a dynamic table that presents the information via JavaScript. However, further advancments are necessary: provide a more in-depth analysis of UFO sightings by allowing users to filter for multiple criteria at the same time. In addition to the date, we customized the site to allow for additional table filters for the city, state, country, and shape.

Skills Acquired:

  -  Explain the strengths and weaknesses of JavaScript "standard" and JavaScript version ES6+.
   
  -  Describe JavaScript syntax and ideal use cases.
  
  -  Build and deploy JavaScript functions, including built-in functions.
  
  -  Convert JavaScript functions to arrow functions.
  
  -  Build and deploy forEach (JavaScript for loop).
    
  -  Create, populate, and dynamically filter a table using JavaScript and HTML  

Results:

Initially a storyboard was designed for the website to have an idea of what the readers will see when they view the final product. A storyboard serves as a kind of blueprint for the site and helps with the transition from idea to finished product. Once the template was created, coding was underway in JavaScript portion by first importing the data and then referencing it with a variable.

Using JavaScript and HTML, modifications of the code in the index.html file allowed for the creatation of more table filters. In addition to the date filter, to assist the reader we added filters for the city, state, country, and shape, as shown in the following image: image 2

Using JavaScript, the handleClick() function was replaced in your app.js file with a new function that saves the element, value, and id of the filter that was changed. There are five list elements for filtering in the index.html file. The event listener was modified to detect changes to each filter in the app.js file. The updateFilters() function saves the element, value, and the id of the filter that was changed. The filterTable() function loops through all of the filters and keeps any data that matches the filter values. The webpage filters the table correctly based on user input.

** one drawback of this webpage is the limited amount of sitting offered. ** two additional recommendations for further development allow for a more extensive research as well as pictures.