1/18/22, 11:15 AM Module 11 Challenge Module 11 Challenge Start Assignment Due 23 Jan by 23:59 Points 100 Submitting a text entry box or a website url Background Dana’s webpage and dynamic table are...

1/18/22, 11:15 AM Module 11 Challenge

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 1/11

1/18/22, 11:15 AM Module 11 Challenge

Deliverable 1: Filter UFO sightings on multiple criteria (80 points)

Deliverable 1 Instructions

Using JavaScript and HTML, you’ll modify the code in your index.html le to create more table lters. In addition to the date lter you created in this module, you’ll add lters for the city, state, country, and shape, as shown in the following image:

Using JavaScript, you’ll replace the handleClick() function in your
app.js le with a new function that saves the element, value, and id of the

lter that was changed. Then, you’ll create a new function to loop through the dataset and keep only the results that match the search criteria. The webpage will be updated with the search criteria after pressing "Enter".

REWIND

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 2/11

1/18/22, 11:15 AM Module 11 Challenge

Follow the instructions below and the numbered comments in the starter code to complete Deliverable 1.

1. Download the ufo_starterCode.js , rename it app.js , and place it in the js folder of your UFOs GitHub repository. The starter code includes the code used to populate the table from this module.

NOTE

Before you rename the ufo_starterCode.js le, we suggest that you rename the app.js you created in this module as app_1.js or

For this deliverable, you’ve already done the following in this module:

Lesson 11.1.3: Use console.log() to debug code Lesson 11.2.2: Create variables with var and let Lesson 11.2.4: Use d3.select()
Lesson 11.3.1: Use JavaScript functions

Lesson 11.3.3: Use arrow functions

Lesson 11.5.2: Use forEach() with JavaScript objects

Lesson 11.5.3: Use lters with d3.select()

Lesson 11.5.4: Write if-else statements

Lesson 11.6.1: Add , , and input tags to add ltered data to an le

Lesson 11.6.2: Add the script tags for your code to an index.html le

list-group-item class

label

index.html

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 3/11

1/18/22, 11:15 AM Module 11 Challenge

something similar to avoid using the wrong le for the Challenge.

2. In the index.html le, remove the list (

3. 
   

   Create four more list elements: city, state, country, and shape. These will be similar to the "Enter Date" list element. Each element should have the same "id" as the object properties in the data.js le.
   

   
   


4. 
   

   In Step 1 of the app.js le, create an empty filters variable to keep track of all the elements that change when a search is entered. This variable will be used in Step 5 to store the property “id” and the value that was entered from user input.
   

   
   


5. 
   

   Next, you will need to write code for two functions whose names we’ve provided in the starter code, updateFilters() and
   

   
   

   filterTable() .
   The updateFilters() function will replace your handleClick()
   

   
   

   function and update the filters variable you created in Step 1. The filterTable() function will lter the table data by the value
   

   
   

   that is entered for the "id" that has changed.
   

   
   

. For Step 2, located before the buildTable(tableData) function at the end of the starter code, modify the event listener from this module so that it detects a "change" on each input element and calls the

updateFilters() function.

7. In Step 3, we’ve provided the function, updateFilters() . Inside this function, you’ll write code in Steps 4-5 to update the lters based on user input.

. In Step 4a, create a variable that saves the element that was changed using d3.select(this) .

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 4/11

1/18/22, 11:15 AM Module 11 Challenge

9. 
   

   In Step 4b, create a variable that saves the value of the changed element’s property.
   

   
   


10. 
    

    In Step 4c, create a variable that saves the attribute of the changed element’s id.
    

    
    


11. 
    

    In Step 5, write an if-else statement that checks if a value was changed by the user (variable from Step 4b). If a value was changed, add the element’s id (variable from Step 4c) as the property and the value that was changed to the filters variable you created in Step 1. If a value was not entered, then clear the element id from the filters variable.
    

    
    

If you’d like a hint on how to update the lters based on user input, that’s totally okay. If not, that’s great too. You can always revisit this later if you change your mind.

12. 
    

    In Step 6, inside the updateFilters() function, call the filterTable() function that will be used in Step 7.
    

    
    


13. 
    

    In the filterTable() function in Step 7, write code to lter the table based on the user input that is stored in the filters variable.
    

    
    


14. 
    

    In Step 8, create a variable for the ltered data that is equal to the data that builds the table. This variable will hold the updated table data based on the user input.
    

    
    


15. 
    

    In Step 9, loop through the lters object and store the data that matches the lter values in the variable created in Step 8.
    

    
    

SHOW HINT

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 5/11

1/18/22, 11:15 AM Module 11 Challenge

1. In Step 10, rebuild the table with the ltered data by passing the variable created in Step 8.

17. Deploy the web app on your GitHub pages.

Deliverable 1 Requirements

You will earn a perfect score for Deliverable 1 by completing all requirements below:

The list element that creates the button is removed, and there are ve list elements for ltering in the index.html le. (20 pt)

The event listener is modied to detect changes to each lter in the app.js le. (10 pt)

The updateFilters() function saves the element, value, and the id of the lter that was changed. (20 pt)

The filterTable() function loops through all of the lters and keeps any data that matches the lter values. (20 pt)

The webpage lters the table correctly based on user input. (20 pt)

Deliverable 2: A written report on the UFO analysis (README.md) (20 points)

Initialize your repository with a README, and write your analysis of Deliverable 1.

Deliverable 2 Instructions

For your written analysis, be sure to use complete and coherent sentences. Your written analysis should contain three sections, which cover the following:

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 6/11

1/18/22, 11:15 AM Module 11 Challenge

1. Overview of Project: Explain the purpose of this analysis.

2. Results: Describe to Dana how someone might use the new webpage by walking her through the process of using the search criteria. Use images of your webpage during the ltering process to support your explanation.

3. Summary: In a summary statement, describe one drawback of this new design and two recommendations for further development.

Deliverable 2 Requirements
Structure, Organization, and Formatting (8 points)

The written analysis has the following structure, organization, and formatting:

There is a title, and there are multiple paragraphs. (2 pt)
Each paragraph has a heading. (2 pt)
There are subheadings to break up text. (2 pt)
Images are formatted and displayed where appropriate. (2 pt)

Analysis (12 points)

The written analysis has the following: 1. Overview of the analysis:

The purpose is well dened (2 pt) 2. Results:

There is a description of how to perform a search, with images.

(4 pt)

3. Summary:

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 7/11

1/18/22, 11:15 AM Module 11 Challenge

The summary addresses one drawback of this webpage (2 pt) The summary addresses two additional recommendations for

further development (4 pt)

Submission

Once you’re ready to submit, make sure to check your work against the rubric to ensure you are meeting the requirements for this Challenge one nal time. It’s easy to overlook items when you’re in the zone!

As a reminder, the deliverables for this Challenge are as follows:

Deliverable 1: Filter UFO sightings on multiple criteria
Deliverable 2: A written report on the UFO analysis (README.md)

Upload the following to your UFOs GitHub repository:

1. The updated app.js le with the code for the challenge. 2. The updated index.html le.
3. The data.js le.
4. An updated README.md that has your written analysis

To submit your challenge assignment in Canvas, click Submit, then provide the URL of your UFOs GitHub repository for grading. Comments are disabled for graded submissions in BootCampSpot. If you have questions about your feedback, please notify your instructional staff or the Student Success Manager. If you would like to resubmit your work for an improved grade, you can use the Re-Submit Assignment button to upload new links. You may resubmit up to 3 times for a total of 4 submissions.

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 8/11

1/18/22, 11:15 AM Module 11 Challenge

Once you receive feedback on your Challenge, make any suggested updates or adjustments to your work. Then, add this week’s Challenge to your professional portfolio.

NOTE

You are allowed to miss up to two Challenge assignments and still earn your certicate. If you complete all Challenge assignments, your lowest two grades will be dropped. If you wish to skip this assignment, click Next, and move on to the next Module.

IMPORTANT

Module-11 Rubric

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 9/11

1/18/22, 11:15 AM Module 11 Challenge

Criteria Ratings Pts

Deliverable 1: Filter UFO Sightings on Multiple Criteria

80 to >72.0 Pts Mastery

The index.html file has the following: The list element for the button is removed. ALL FIVE list elements for filtering are created. The app.js file has the following:

The event listener is modified to detect changes to ALL FIVE filters. The updateFilters() function saves the element, value, and the id

72 to >66.0 Pts Approaching Mastery

The index.html file has the following: The list element for the button is removed. FOUR of FIVE list elements for filtering are created. The app.js file has the following:

The event listener is modified to detect changes to FOUR of FIVE filters. The updateFilters() function saves the element,

66 to >60.0 Pts Progressing

The index.html file has the following: The list element for the button is removed.

THREE of FIVE list elements for filtering are created. The app.js file has the following:

The event listener is modified to detect changes to THREE of FIVE filters The updateFilters() function saves the element,

60 to >0.0 Pts Emerging

The index.html file has the following: The list element for the button is removed.

TWO of FIVE list elements for filtering are created. The app.js file has the following:

The event listener is modified to detect changes to TWO of FIVE filters. The updateFilters() function saves the element, value, and the id

0 Pts Incomplete

80 pts

Deliverable 2: Structure, Organization, and Formatting

of the filter that

value, and the id

value, and the id

of the filter that

8 to >7.0 Pts wMastcehraynged.

7 to >6.0 Pts Aopf pthroeaficltheirntghat

6 to >4.0 Pts Porfotgherefsilsteinr gthat

4 to >0.0 Pts Ewmaesrcghinagnged,

The
The written

filterTable() analysis has

function loops ALL of the

through all of following:

the filters and There is a

keeps any data title, and there

that matches the are multiple

filter values. paragraphs.

The webpage Each

filters the table paragraph has

based on user a heading.

input. There are

subheadings. Images are

correct and displayed where appropriate.

was changed,

was changed, The written

with two minor analysis has ALL

errors. The of the following:

filterTable() There is a title,

function loops and there are

through all of the multiple

filters and keeps paragraphs.

any data that Each

matches the filter paragraph has a

values, with two heading. AND

minor errors. ONE of the

The webpage following:

filters the table There are

based on user subheadings.

input. Images are

correct and displayed where appropriate.

with three or The written

more minor analysis has ALL

errors. The of the following:

filterTable() There is a title,

function loops and there are

through all of multiple

the filters and paragraphs.

keeps any data AND ONE of the

that matches following: Each

the filter values, paragraph has a

with three or heading. There

more minor
are subheadings.

errors. The Images are

webpage filters correct and

the table based displayed where

on user input. appropriate.

Mastery

with one minor The written

error. The analysis has ALL

filterTable()
of the following:

function loops There is a title,

through all of the and there are

filters and keeps multiple

any data that paragraphs.

matches the filter Each

values, with two paragraph has a

minor errors. heading. There

The webpage are subheadings.

filters the table Images are

based on user correct and

input. displayed where

appropriate, but with one or two minor errors.

0 Pts Incomplete

8 pts

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 10/11

✓✓ ✓✓✓

✓

✓✓✓

✓ ✓

✓ ✓✓

✓✓

✓ ✓✓ ✓

✓✓ ✓✓

✓✓ ✓✓

✓✓✓

✓ ✓✓✓

✓✓

✓

✓

1/18/22, 11:15 AM Module 11 Challenge

Criteria Ratings Pts

Deliverable 2: Analysis

12 to >10.0 Pts Mastery

The Deliverable
Fulfills
"Emerging"
Required Criteria:
AND has the
following: The
summary
addresses a
drawback of the
design. The
summary has
TWO
recommendations
for furt©he2r020 - 2022 TrTilWogOy Education Serviceresc, oam2Um,eIndc.abtiroansd. All Rights Reserved. development. recommendations for further

for further development. development.

10 to >8.0 Pts Approaching Mastery

8 to >6.0 Pts Progressing

6 to >0.0 Pts Emerging

The Deliverable Fulfills "Emerging" Required Criteria: AND has at least ONE of the following: summary addresses a drawback of the design. The summary has

The Deliverable Fulfills "Emerging" Required Criteria: AND has at least ONE of the following: summary addresses a drawback of the design. The summary has ONE of TWO

REQUIRED: The

purpose is well defined.

The

The

The description of how the search criteria works is well described with images.

0 Pts Incomplete

12 pts

Total points: 100

https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 11/11