We here at ALIENS-R-REAL certainly believe that extraterrestrial life exists! That is why we have collected all of the eye-witness reports/sightings of UFO's (however reliable that may be) to prove this. The matter will finally be put to rest when we put this information online for the world to see. 🙄 😄
I've been tasked to create a dynamic table with filtering capabilites based on a dataset provided. Highly distrustful (paranoid? 😅) of other technologies, the only programming languages that can be trusted are JS, HTML, CSS, and D3.js (it is important to note that the HTML and CSS was given to us; so the website design was already there, but the important functionalities were not).
Level 1 - an automatic table with date search... with the data in the form of an array of JS objects, the task was to "write code that appends a table to your web page and then adds new rows of data for each UFO sighting", and use event listeners (specifically from D3.js) to "search through the date/time column to find rows that match user input".
Here is the outcome:
I met this criteria, but, unfortunately, did not meet the criteria for the optional Level 2; this was to set multiple searchable filters - city, state, country, and shape - using multiple input tags and/or select dropdowns.
I was disappointed to have not been able to finish the bonus part of this assignment. However, JavaScript was still very foreign to me at the time, and I worked hard to complete the base requirements, so I should not be discouraged!
Thank you for reading!
Objectives for JavaScript and DOM Manipulation Unit:
- Understand JS fundamentals: arrays, conditionals, loops, functions, objects.
- Understand functional programming with map, forEach.
- Work with common data structures.
- Be introduced to data driven documents (d3.js).
- Understand how to select elements using d3.select.
- Use d3 for basic DOM manipulation.
- Understand how to use callbacks.
- Understand the structure of html tables.
- Populate a table using static data structures.
- Understand events.
- Use d3 to attach events to DOM elements.
- Dynamically manipulate the DOM through events.
- Filter data with JavaScript.