Project 2 Checkpoint 3:

Project 2 Checkpoint 3:

Completing the User Interface

Happy Friday! Please type your first and last name in the chat for today's attendance.

Please open your Covid Map Project on repl.it and be prepared to share your project link.

Today's Agenda

• Do-Now:

• Submit current project link

  
  

• Hardware

• Input / Output Devices

• Software

• Jeopardy Game

Today's Objectives:

• BTEOC, SWBAT ...

• Add custom styles to project using Bootstrap

• Have a one on one checkin with Mr. Kendall

• Complete Checkpoint 3 for project

• Submit current project link

• 
  

• 
  

Upcoming Events

• Spring Break 4-12 / 4-19-21

• Project Due 4-6-21

• Complete Functionality of App ie. Scheduling appointments and getting confirmation

• 
  

• 
  

Adding Styles with Bootstrap

• Step 1: add class attribute to specific element

• Step 2: add Bootstrap property

• Step 3: add

Project 2 Checkpoint 3:

• Input all Covid Testing and Vaccination Site Locations to your map (16 total locations )

   

• Add steps/ instructions on how a user should use your app to register and schedule an appointment. You should have at least 5 steps for the user to follow.

• Add Signup form to your REGISTRATION page so that users can input their personal information (Name, Email, Address, Phone, Date of Birthday, Appointment Type)

• Add forms to your Covid Testing and Covid Vaccination pages so that users can schedule appoint. These are the fields that you should have on your form (Name, Date of Birth, Address, Phone, Email, Appointment Type, Appointment Date)

• Add hyperlinks to navigation bar so that when clicked they take users to the proper place on your app

• Create an html file for each page on your app

• Add custom styling using Bootstrap to customize the look of your app

Example Changing background Color

• Step 1: Add class attribute to the opening <body> tag.

• After completing this step you tag should look like this <body class = " ">

• Step 2: Use the Bootstrap bg property (which stands for background) to change the background color.

• <body class = " bg-warning">

• Try this line of code. What happened to your background?