Background Robin's web app is looking good and functioning well, but she wants to add more polish to it. She had been admiring images of Mars’s hemispheres online and realized that the site is...

Background

Robin's web app is looking good and functioning well, but she wants to add more polish to it. She had been admiring images of Mars’s hemispheres online and realized that the site is scraping-friendly. She would like to adjust the current web app to include all four of the hemisphere images. To do this, you’ll use BeautifulSoup and Splinter to scrape full-resolution images of Mars’s hemispheres and the titles of those images, store the scraped data on a Mongo database, use a web application to display the data, and alter the design of the web app to accommodate these images.

What You're Creating

This new assignment consists of three technical analyses. You will submit the following deliverables:

• Deliverable 1: Scrape Full-Resolution Mars Hemisphere Images and Titles


• Deliverable 2: Update the Web App with Mars Hemisphere Images and Titles


• Deliverable 3: Add Bootstrap 3 Components

Files

Use the following links to download the Challenge starter codes.

Download the starter code.(Links to an external site.)

Download the updated index.html file.(Links to an external site.)

Deliverable 1: Scrape Full-Resolution Mars Hemisphere Images and Titles (40 points)

Deliverable 1 Instructions

Using BeautifulSoup and Splinter, you’ll scrape full-resolution images of Mars’s hemispheres and the titles of those images.

REWIND

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

• 
  
  Lesson 10.3.2:
  Use Splinter and Beautiful Soup


• 
  
  Lesson 10.3.4:
  Scrape images


• 
  
  Lesson 10.5.1:
  Use Flask to create a web app


• 
  
  Lesson 10.5.2:
  Update the code for the web app


• 
  
  Lesson 10.5.3:
  Connect MongoDB with the web app

Follow the instructions below to complete Deliverable 1.

1. Make a copy of yourMission_to_Mars.ipynbfile, and rename itMission_to_Mars_Challenge.ipynb.


2. Download theMission_to_Mars_Challenge_starter_code.ipynb, copy the starter code, and paste at the end of yourMission_to_Mars_Challenge.ipynbfile.


3. In Step 1, use your browser to visit theMars Hemispheres(Links to an external site.)website to view the hemisphere images.

4. Use the DevTools to inspect the page for the proper elements to scrape. You will need to retrieve the full-resolution image for each of Mars's hemispheres.

NOTE

There is more than one way to get the images and titles.

5. In Step 2, create a list to hold the.jpgimage URL string and title for each hemisphere image.


6. In Step 3, write code to retrieve the full-resolution image URL and title for each hemisphere image. The full-resolution image will have the.jpgextension.


7. Loop through the full-resolution image URL, click the link, find theSampleimage anchor tag, and get thehref.

HINT

8. Save the full-resolution image URL string as the value for theimg_urlkey that will be stored in the dictionary you created from theHint.


9. Save the hemisphere image title as the value for thetitlekey that will be stored in the dictionary you created from theHint.


10. Before getting the next image URL and title, add the dictionary with the image URL string and the hemisphere image title to the list you created in Step 2.


11. In Step 4, print the list of dictionary items. Your list should look like the following image:

12. After you have confirmed that you have the image URLs and titles for all four hemisphere images, quit the browser by executing Step 5.

Deliverable 1 Requirements

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

• Code is written that retrieves the full-resolution image and title for each hemisphere image(10 pt)
  


• The full-resolution images of the hemispheres are added to the dictionary.(10 pt)
  


• The titles for the hemisphere images are added to the dictionary.(10 pt)
  


• The list contains the dictionary of the full-resolution image URL string and title for each hemisphere image.(10 pt)
  

Deliverable 2: Update the Web App with Mars’s Hemisphere Images and Titles (40 points)

Deliverable 2 Instructions

Using your Python and HTML skills, you’ll add the code you created in Deliverable 1 to yourscraping.pyfile, update your Mongo database, and modify yourindex.htmlfile so the webpage contains all the information you collected in this module as well as the full-resolution image and title for each hemisphere image.

REWIND

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

• 
  
  Lesson 10.3.6:
  Export your script as a Python file


• 
  
  Lesson 10.5.1
  Use Flask to create a web app


• 
  
  Lesson 10.5.2:
  Update the code for the web app


• 
  
  Lesson 10.5.3:
  Connect MongoDB with the web app

Follow the instructions below to complete Deliverable 2.

1. Export theMission_to_Mars_Challenge.ipynbfile as a Python file, and save it asMission_to_Mars_Challenge.py.


2. In thedef scrape_all()function in yourscraping.pyfile, create a new dictionary in thedatadictionary to hold a list of dictionaries with the URL string and title of each hemisphere image.


3. Below thedef mars_facts()function in thescraping.pyfile, create a function that will scrape the hemisphere data by using your code from theMission_to_Mars_Challenge.pyfile. At the end of the function, return the scraped data as a list of dictionaries with the URL string and title of each hemisphere image.


4. Run theapp.pyfile, then check your Mongo database to make sure that you are retrieving all of the data.


5. Modify theindex.htmlfile to access your database, and retrieve theimg_urlandtitleas you loop through the dictionary in the database using{% for hemisphere in mars.hemispheres %}. The dictionary in the marshemispheresdatabase is the dictionary that was created from the Hint after Step 3 in Deliverable 1.

If you’d like a hint on coding the syntax for rendering Mongo database objects in yourindex.htmlfile, that’s totally okay. If not, that’s great too. You can always revisit this later if you change your mind.

HINT

6. Run theapp.pyfile, open theindex.htmlfile, and click the "Scrape New Data" button.


7. After you have scraped the data, confirm that your webpage has the full-resolution images and the titles of the four hemisphere images, like the image below.

8. Save yourMission_to_Mars_Challenge.ipynbfile, the updatedscraping.pyfile, and the updatedindex.htmlfile.

Deliverable 2 Requirements

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

• Thescraping.pyfile contains code that retrieves the full-resolution image URL and title for each hemisphere image(10 pt)
  


• The Mongo database is updated to contain the full-resolution image URL and title for each hemisphere image(10 pt)
  


• Theindex.htmlfile contains code that will display the full-resolution image URL and title for each hemisphere image(10 pt)
  


• After the scraping has been completed, the web app contains all the information from this module and the full-resolution images and titles for the four hemisphere images(10 pt)
  

Deliverable 3: Add Bootstrap 3 Components (20 points)

Deliverable 3 Instructions

For this part of the Challenge, update your web app to make it mobile-responsive, and add two additional Bootstrap 3 components to make it stand out.

REWIND

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

• 
  
  Lesson 10.6.1:
  Customize the appearance of a webpage

As you update your app, keep the following questions in mind:

• Is this page clean?


• Does the page stand out from other pages?

Follow the instructions below to complete Deliverable 3.

1. Use theBootstrap 3 grid system(Links to an external site.)examples to update yourindex.htmlfile so your website is mobile-responsive. Use the DevTools to test the responsiveness of your website.
   
   
   • Click on the Toggle Device Toolbar icon to open the UI that enables you to simulate responsiveness.
   
   
   • Choose a device to test your webpage, as shown in the following image:
   
   
   
   

2. Add two other Bootstrap 3 components from thislist(Links to an external site.). Examples include:
   
   
   • Styling the "Scrape New Data" button.
   
   
   • Customizing the facts table.
   
   
   • Adding the hemisphere images as thumbnails, like the image below.
   
   
   
   

Deliverable 3 Requirements

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

• The webpage is mobile-responsive(10 pt)
  


• Two additional Bootstrap 3 components are used to style the webpage(10 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 final 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: Scrape High-Resolution Mars Hemisphere Images and Titles


• Deliverable 2: Update the Web App with Mars Hemisphere Images and Titles


• Deliverable 3: Add Bootstrap 3 Components

Upload the following to your Mission-to-Mars GitHub repository:

1. TheMission_to_Mars_Challenge.ipynbfile with all the code used for scraping.


2. An updatedscraping.pyfile.


3. Theapp.pyfile.


4. Theindex.htmlfile in the template folder and any CSS stylesheets.


5. A README.md that describes the purpose of the repository. Although there is no graded written analysis for this challenge, it is encouraged and good practice to add a brief description of your project.

To submit your challenge assignment in Canvas, click Submit, then provide the URL of your Mission-to-Mars 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 theRe-Submit Assignmentbutton to upload new links. You may resubmit up to 3 times for a total of 4 submissions.

IMPORTANT

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 certificate. 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.

Rubric

Module-10 RubricModule-10 Rubric

Criteria	Ratings	Pts
This criterion is linked to a learning outcomeDeliverable 1: Scrape Full-Resolution Mars Hemisphere Images	40to >37.0PtsMastery✓Code is written that retrieves ALL full-resolution images and titles of the four hemisphere images. ✓ALL full-resolution images are added to the dictionary. ✓ALL four hemisphere image titles are added to the dictionary. ✓The dictionary that contains full-resolution image URLs and image titles is added to a list. 37to >34.0PtsApproaching Mastery✓Code is written that retrieves THREE of FOUR full-resolution images and all titles of the four hemisphere images. ✓THREE full-resolution images are added to the dictionary. ✓ALL four hemisphere image titles are added to the dictionary. ✓The dictionary that contains the THREE full-resolution image URLs and image titles is added to a list. 34to >30.0PtsProgressing✓Code is written that retrieves TWO of FOUR full-resolution images and all titles of the four hemisphere images. ✓TWO full-resolution images are added to the dictionary. ✓ALL four hemisphere image titles are added to the dictionary. ✓The dictionary that contains at least the TWO full-resolution images and image titles is added to a list. 30to >0.0PtsEmerging✓Code is written that retrieves ONE of FOUR full-resolution images and all titles of the four hemisphere images. ✓ONE full-resolution image is added to the dictionary. ✓ALL four hemisphere image titles are added to the dictionary. ✓The dictionary that contains at least the full-resolution image and image titles is added to a list. 0PtsIncomplete	40pts
This criterion is linked to a learning outcomeDeliverable 2: Update the Web App with Mars Hemisphere Images	40to >36.0PtsMastery✓The scraping.py file is updated and retrieves ALL FOUR of the full-resolution image URLs and titles. ✓The mongo database is updated to contain ALL FOUR of the full-resolution image URLs and titles. ✓The index.html file contains code that will display the full-resolution image URLs and titles. ✓The web app contains all the information from this module and ALL FOUR full-resolution images and titles of the four hemisphere images. 36to >32.0PtsApproaching Mastery✓The scraping.py file is updated and retrieves THREE of FOUR full-resolution image URLs and titles. ✓The mongo database is updated but contains THREE of FOUR full-resolution image URLs and titles. ✓The index.html file contains code that will display the full-resolution image URLs and titles, but there is a minor error. ✓The web app contains all the information from this module but only THREE full-resolution images and titles of the four hemisphere images. 32to >29.0PtsProgressing✓The scraping.py file is updated and retrieves TWO of FOUR full-resolution image URLs and titles. ✓The mongo database is updated but contains TWO of FOUR full-resolution image URLs and titles. ✓The index.html file contains code that will display the full-resolution image URLs and titles, but there are minor errors. ✓The web app contains all the information from this module but only TWO full-resolution images and titles of the four hemisphere images. 29to >0.0PtsEmerging✓The scraping.py file is updated and retrieves ONE of FOUR full-resolution image URLs and titles. ✓The mongo database is updated but contains ONE of FOUR full-resolution image URLs and titles. ✓The index.html file contains code that will display the full-resolution image URLs and titles, but there are errors. ✓The web app contains all the information from this module but only ONE full-resolution image and title of the four hemisphere images. 0PtsIncomplete	40pts
This criterion is linked to a learning outcomeDeliverable 3: Add Bootstrap 3 Components	20to >17.0PtsMastery✓The webpage is mobile responsive. ✓TWO additional Bootstrap 3 components are used to style the webpage. 17to >13.0PtsApproaching Mastery✓The webpage is mobile responsive. ✓TWO additional Bootstrap 3 components are used to style the webpage, but there is an error. 13to >10.0PtsProgressing✓The webpage is mostly mobile responsive with one error. ✓There is ONE of TWO additional Bootstrap 3 components used to style the webpage. 10to >0.0PtsEmerging✓The webpage is not fully mobile responsive. ✓There is ONE of TWO additional Bootstrap 3 components used to style the webpage. 0PtsIncomplete	20pts
Total points:100

10.7.1: Create a Portfolio" style="float: left;">Previous
Module 10 Career Connection" style="float: right;">Next© 2020 - 2022 Trilogy Education Services, a 2U, Inc. brand. All Rights Reserved.