dufuna-codecamp / dufuna-codecamp20 Goto Github PK

As a customer, I want to see a Contact Us page on the website so that I can contact the support team from the website

Acceptance Criteria

1. Implement this UI design for the contact us page using CSS https://zpl.io/adeyYoR

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Contact Us link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/a7A7Q1q

b. It should look like this when viewed on mobile phones. https://zpl.io/bWo7doP

5. Ensure your work is saved in a new folder named CSS. This folder should be in the folder you created for yourself inside your submissions folder

6. Include screenshots to your Pull Request. Your Pull Request should be titled: [69] Style the Contact Us Page using CSS

7. Ensure this is done on a new branch

NB - Your developed UI must follow the designed layout, however, you are free to
i. use your own logo in the header

ii. choose your own colour scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and colour scheme must be the same for all the site pages

PS
DO NOT write another contact us page. Instead, you should UPDATE the contact us page from the HTML task and link your CSS.

As a customer, I want to see a contact form page on the website so that I can send enquires and requires to the Web Admin

Success Criteria

1. Develop a Contact form page for your website

2. Ensure this page has the following fields

• Full Name
• Email
• Subject
• Message input

3. Ensure there is a Submit button on this page

4. Create a Pull Request for this task. Your PR should be named [53] Develop a Contact Form Page using HTML

5. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

6. Ensure your work is saved in a new folder named html-forms. This folder should be in the folder you created for yourself inside your submissions folder

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria

1. Develop a product page for your e-commerce store using HTML Only

2. Ensure this page has the following information

   a. Product name
   b. Two Product images
   c. Product Price
   d. Product description
   e. An ordered list of similar product names

3. Ensure your Pull Request is created with the title [93] Product Page using HTML

4. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

5. Ensure your work is saved in a new folder named HTML. This folder should be in the folder you created for yourself inside your submissions folder
   Please note that your PR will not be merged if the instructions are not followed

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria

1. Develop a product page for your e-commerce store using HTML Only

2. Ensure this page has the following information

   a. Product name
   b. Two Product images
   c. Product Price
   d. Product description
   e. An ordered list of similar product names

3. Ensure your Pull Request is created with the title [44] Product Page using HTML

4. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

5. Ensure your work is saved in a new folder named HTML. This folder should be in the folder you created for yourself inside your submissions folder
   Please note that your PR will not be merged if the instructions are not followed

As a customer, I want to know the shipping cost associated with products on the eCommerce store.

Success Criteria

1. On your product details page, add two (2) additional fields shipping cost and Total cost as shown https://zpl.io/VOOJd91

2. Ensure the total cost and shipping cost fields use the same currency as the product price

3. The product price displayed should be the per-unit price multiplied by the quantity selected. eg. if a product costs $75 and 2 was inputted as the quantity, then the product price displayed should be $150 (ie $75 x 2)

4. Ensure the product quantity input is a number input field (ie it should only accept numbers) and is pre-filled with the value 1, ie, the default value should always be 1.

5. Ensure the product quantity input field does not accept any number less than 1 and can only accept integers.

6. If a value less than 1 or decimals is entered into the field, ensure that an error is displayed “please enter a valid quantity” and the Buy Now button is disabled https://zpl.io/aROKLB0

7. Your shipping cost should be calculated using this logic

• If the product price is less than 1,000, then shipping cost should be a flat fee of 100
• If the product price is between 1,000 - 20,000, then shipping cost should be 15% of the product price
• If the product price is between 20,000-100,000, then shipping cost should be 20% of the product price
• If the product price is greater than 100,000, then shipping cost should be a flat fee of 25,000

8. Ensure that the Total cost is calculated as Shipping cost + Product Price

9. Ensure that the Shipping cost and total cost values are displayed real-time, ie, the values should be seen once the quantity information is entered WITHOUT the need to press the Buy Now button.

10. Ensure the design is mobile responsive - https://zpl.io/2ynLWoK, https://zpl.io/bzmJ7LG, https://zpl.io/a8MOGqX, https://zpl.io/aROyGKN

11. Ensure your PR is created with the task title as seen on the mobile App

Hints: The product price used for the shipping cost calculation should be the one displayed in 3 above (ie Per unit price x Quantity)_

This task tests your understanding of creating arrays and objects.

Using Javascript,

1. Create an array called productList

2. Your productList array should contain 3 objects

3. Each of the objects of the array should have 3 properties (productName, imageUrl and productPrice)

4. Print out the values in this format <productName> with <imageUrl> is sold for <productPrice>

This task tests your understanding of creating arrays and objects.

Using Javascript,

1. Create an array called productList

2. Your productList array should contain 3 objects

3. Each of the objects of the array should have 3 properties (productName, imageUrl and productPrice)

4. Print out the values in this format <productName> with <imageUrl> is sold for <productPrice>

With your knowledge of conditionals/loops, Write a program that prints the numbers from 1 and the positive difference between 7 and 123 and satisfies the following;

• For numbers that are multiples of three (3), print Software instead of the number.
• For numbers that are multiples of five (5), print Developer instead of the number.
• For numbers which are both multiples of three (3) and five (5), print Software Developer.

NB: Numbers from 1 and the positive difference between 7&123 (ie find the positive difference and print the numbers between 1 and that number while fulfilling other criteria)

With your knowledge of conditionals/loops, Write a program that prints the numbers from 1 and the positive difference between 7 and 123 and satisfies the following;

• For numbers that are multiples of three (3), print Software instead of the number.
• For numbers that are multiples of five (5), print Developer instead of the number.
• For numbers which are both multiples of three (3) and five (5), print Software Developer.

NB: Numbers from 1 and the positive difference between 7&123 (ie find the positive difference and print the numbers between 1 and that number while fulfilling other criteria)

As a new customer signing up, I want to be able to signup on to the e-commerce website so that I can have access to various promos. I also want to be able to fill a contact form so I can reach out to the e-commerce store Admin.

Success Criteria

1. Validate the sign-up form

2. Ensure that all fields are mandatory except the Other names field.

3. The first name and last name fields should be validated to NOT accept special characters

4. If the First name field is empty and the user clicks signup, the error message should be "Please enter your First Name"

5. If the Last name field is empty and the user clicks signup, the error message should be "Please enter your Last Name"

6. The Phone Number field should only receive the + sign and Numbers (ie, it should be validated to support this format 0022134 and +233042548)

7. If the Phone Number field is empty and the user clicks signup, the error message should be "Please enter your Phone Number"

8. If an invalid phone number is entered, the error message should be "Please enter a valid phone number"

9. Ensure the email address field only accepts valid emails (ie [email protected])

10. If an invalid email address is entered, ensure a message is displayed to the user - " Please enter a valid email".

11. If the Email Address field is empty and the user clicks signup, the error message should be "Please enter your Email Address"
    12.Ensure that the Password field only accepts a

    a. Minimum of 6 characters.
    b. At least 1 capital letter.
    c. At least 1 special character eg @
    d. At least 1 number
    

12. If an invalid password is entered, the message shown should be "Your password should have a minimum of 6 characters, 1 capital letter, 1 special character eg @ and 1 number."

13. If the Password field is empty and the user clicks signup, the error message should be"Please enter your Password"

14. If the Confirm Password field is empty and the user clicks signup, the error message should be "Please confirm your Password".

15. Ensure that the input in the confirmed password field matches that in the password field.

16. If the values in 15 above don't match, the message displayed should be "Your passwords don't match"

CONTACT FORM Success Criteria

1. Validate the Contact form
2. Ensure all fields are made mandatory
3. The full name field should be validated to NOT accept special characters
4. If the Full name field is empty and the user clicks send, the error message should be "Please enter your Name"
5. Ensure the email address field only accepts valid emails (ie [email protected])
6. If an invalid email address is entered, ensure a message is displayed to the user - "Please enter a valid email".
7. If the Email Address field is empty and the user clicks send, the error message should be "Please enter your Email Address"
8. If the Subject field is empty and the user clicks send, the error message should be "Please enter a message subject"
9. If the Message field is empty and the user clicks send, the error message should be "Please enter your Message"

NEWSLETTER FORM Validation

1. Validate the newsletter field in the footer.
2. Ensure the field only accepts valid emails ie [email protected]
3. If an invalid email address is entered, ensure a message is displayed to the user - "Please enter a valid email".
4. If the Email Address field is empty and the user clicks submit, the error message should be "Please enter your Email Address"
5. Ensure this validated newsletter form is linked to all 3 pages (ie, the contact form, product page, and signup pages should have the validation)

NOTE: Ensure your PR is created with the task title as seen on the mobile App

As a customer, I want to see a Signup page on the website so that I can create a customer account on the website

Acceptance Criteria

1. Create the HTML Tags and style this UI design for the customer signup page using CSS. Use the mockup here as a guide: https://zpl.io/beqyOGp.

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Signup link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/VKRBQ3P

b. It should look like this when viewed on mobile phones. https://zpl.io/bJmdWJn

5. Ensure your work is saved in a new folder named css. This folder should be in the folder you created for yourself inside your submissions folder

6. Include screenshots to your Pull Request. Your Pull Request should be titled: [65] Create & Style the Customer Signup Page using CSS

7. Ensure this is done on a new branch

NB - Your developed UI must follow the designed layout, however, you are free to
i. use your own logo in the header

ii. choose your own colour scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and colour scheme must be the same for all the site pages

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria
"1. Implement this UI design for the Product page using CSS https://zpl.io/bLzJGoD

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Product Page link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/aNgY539

b. It should look like this when viewed on mobile phones. https://zpl.io/amkR7me

5. Ensure that the quantity field is a text input field type

6. For this product page, you are free to use your own currency type, product description text, product name, product images.

7. Include screenshots to your Pull Request. Your Pull Request should be titled: [67] Style the Product Details Page using CSS

8. Ensure this is done on a new branch

NB - Your developed UI must follow the designed layout, and use the font style shown, however, you are free to
i. use your own Logo in the header

ii. choose your own color scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and colour scheme must be the same for all the site pages"

PS
DO NOT write another Product Details page. Instead, you should UPDATE the Product Details page from the HTML task and link your CSS.

As a customer, I want to see a Signup page on the website so that I can create a customer account on the website

Acceptance Criteria

1. Create the HTML Tags and style this UI design for the customer signup page using CSS https://zpl.io/beqyOGp.

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Signup link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/VKRBQ3P

b. It should look like this when viewed on mobile phones. https://zpl.io/bJmdWJn

5. Ensure your work is saved in a new folder named css. This folder should be in the folder you created for yourself inside your submissions folder

6. Include screenshots to your Pull Request

7. Ensure your PR is created with the task title as seen on the mobile App

NB - Your developed UI must follow the designed layout, however, you are free to
i. use your own Logo in the header

ii. choose your own color scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and color scheme must be the same for all the site pages

As a customer, I want to see a Signup page on the website so that I can create a customer account on the website

Acceptance Criteria

1. Create the HTML Tags and style this UI design for the customer signup page using CSS. Use the mockup here as a guide: https://zpl.io/beqyOGp.

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Signup link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/VKRBQ3P

b. It should look like this when viewed on mobile phones. https://zpl.io/bJmdWJn

5. Ensure your work is saved in a new folder named css. This folder should be in the folder you created for yourself inside your submissions folder

6. Include screenshots to your Pull Request. Your Pull Request should be titled: [62] Create & Style the Customer Signup Page using CSS

7. Ensure this is done on a new branch

NB - Your developed UI must follow the designed layout, however, you are free to
i. use your own logo in the header

ii. choose your own colour scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and colour scheme must be the same for all the site pages

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria

1. Develop a product page for your e-commerce store using HTML Only
2. Ensure this page has the following information

• Product name

• 2 Product images (NB; You should only have 2 images)

• Product Price

• Product description

• Ordered list of similar product names

3. Ensure your PR is created with the task title as seen on the mobile App

4. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

5. Ensure your work is saved in a new folder named html. This folder should be in the folder you created for yourself inside your submissions folder
6. Please note that your PR will not be merged if the instructions are not followed

As a customer, I want to be able to navigate around the contact form and product pages so I can perform actions on the pages

Success Criteria

1. Add the links to all pages at the top of the two created pages (Contact form, Product)

2. Ensure that clicking the links takes the user to the appropriate pages ie

• Clicking on Contact Form should take the user to the Contact form page
• Clicking Product should take the user to the product description page

3. Create a Pull Request for this task. Ensure your PR is created with the task title as seen on the mobile App

4. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

To do this task, you must have accepted the Zeplin invite and must already be logged into your Zeplin account

As a customer, I want to see a Contact Us page on the website so that I can contact the support team from the website

Acceptance Criteria

1. Style your contact us page to look like the shared mockup https://zpl.io/adeyYoR

2. Ensure that this page is seen when the user clicks on the Contact Us link on the header

3. Ensure the page is mobile responsive ie

   a. It should look like this when viewed on a tablet https://zpl.io/a7A7Q1q

   b. It should look like this when viewed on mobile phones. https://zpl.io/bWo7doP

4. Your CSS should be saved in a folder named css. This folder should be in the folder you created for yourself inside your submissions folder

5. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

6. Ensure your PR is created with the task title as seen on the mobile App

NB - Your developed UI must follow the designed layout, however, you are free to
i. use your own Logo in the header

ii. choose your own color scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and color scheme must be the same for all the site pages

Research the programming languages listed and complete the grid with common technology uses, languages they were built on, Some companies that use them, products that these companies have built with them and whether they are compiled, interpreted or both.

Acceptance Criteria

1. Make a copy of this spreadsheet https://docs.google.com/spreadsheets/d/1tXJE75x4iPho11S-8dFyS20iCngBPE5mfIS0pPfFStk/edit#gid=0 by selecting File>>Make a copy on the sheet
2. Ensure you are logged in to your gmail account to make a copy
3. Answer the questions in the new copy of the sheet made
4. Share the spreadsheet with [email protected] and [email protected] or you can make the sheet open for comments
5. Copy the link to your spreadsheet and put it in a txt file. Feel free to name the file
6. Create a folder named Programming Languages 1 inside the submissions folder you created for yourself
7. Add the txt file to the folder in (6) above
8. Push this change using the process followed in creating a pull request
9. Ensure the task in done on a new branch and your PR is named after the task title ie. [104] Research Programming Languages

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria
"1. Implement this UI design for the Product page using CSS https://zpl.io/bLzJGoD

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Product Page link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/aNgY539

b. It should look like this when viewed on mobile phones. https://zpl.io/amkR7me

5. Ensure that the quantity field is a text input field type

6. For this product page, you are free to use your own currency type, product description text, product name, product images.

7. Include screenshots to your Pull Request. Your Pull Request should be titled: [64] Style the Product Details Page using CSS

8. Ensure this is done on a new branch

NB - Your developed UI must follow the designed layout, and use the font style shown, however, you are free to
i. use your own logo in the header

ii. choose your own colour scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and colour scheme must be the same for all the site pages"

PS
DO NOT write another Product Details page. Instead, you should UPDATE the Product Details page from the HTML task and link your CSS.

As a customer, I want to see a contact form page on the website so that I can send enquires and requires to the Web Admin

Success Criteria

1. Develop a Contact form page for your website

2. Ensure this page has the following fields

• Full Name
• Email
• Subject
• Message input

3. Ensure there is a Submit button on this page

4. Create a Pull Request for this task. Your PR should be named [51] Develop a Contact Form Page using HTML

5. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

6. Ensure your work is saved in a new folder named html-forms. This folder should be in the folder you created for yourself inside your submissions folder

This task tests your understanding of creating arrays and objects.

Using Javascript,

1. Create an array called productList
2. Your productList array should contain 3 objects
3. Each of the objects of the array should have 3 properties (productName, imageUrl and productPrice)
4. Print out the values in this format <productName> with <imageUrl> is sold for <productPrice>
5. Ensure your PR is created with the task title as seen on the mobile App

As a customer, I want to be able to navigate around the contact form and product pages so I can perform actions on the pages

Success Criteria

1. Add the links to all pages at the top of the two created pages (Contact form, Product)

2. Ensure that clicking the links takes the user to the appropriate pages ie

• Clicking on Contact Form should take the user to the Contact form page
• Clicking Product should take the user to the product description page

3. Create a Pull Request for this task. Your PR should be named [112] Add Page Navigation to your Pages

4. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

5. Ensure your work is saved in a new folder named html-forms. This folder should be in the folder you created for yourself inside your submissions folder
6. Ensure the work is done on a new branch

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria

1. Develop a product page for your e-commerce store using HTML Only

2. Ensure this page has the following information

   a. Product name
   b. Two Product images
   c. Product Price
   d. Product description
   e. An ordered list of similar product names

3. Ensure your Pull Request is created with the title [45] Product Page using HTML

4. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

5. Ensure your work is saved in a new folder named HTML. This folder should be in the folder you created for yourself inside your submissions folder
   Please note that your PR will not be merged if the instructions are not followed

• Ensure you have set up the code review tool on your machine. Follow the steps here if you haven't

• Visit your program repository on your System. The link is added to the additional resource section

• Fork the repository.

• Clone your fork to your local machine.

• Create and checkout into a new branch called about-me

• In the submissions folder, add a new folder with your full name (naming should be in camelCase).

• In this new folder, create another folder and name it aboutMe.

• In the folder named aboutMe, create a .txt file. Inside the txt file tell us what you hope to achieve at the end of this program.

• Add your newly added file(s) to git.

• Commit your changes and Push to your forked repository.

• From your forked repository create a Pull request with the task title as seen on the App to the main repository.

• Note that your PR will not get merged if your tests does not run successfully.

In a recent trip, one of the trains was involved in an accident which led to some loss of lives. A dataset has been provided with the details of the passengers and the trip.

1. Import the data provided here to your database. (Check the Definition sheet for the definition of columns.)

Here is a guide to importing data to your DB from a .csv file.

Run your queries to answer the following...

1. What is the total number of passengers who survived?

2. What is the total number of passengers who did not survive?

3. Get the name and sex of passengers under the age of 27 that embarked at Queenstown and Cherbourg?

4. How many of the passengers that embarked at Southampton survived?

5. Get the id, name and the total number of passengers who paid a fare greater than $100 and above the age of 35 had siblings or spouses on board?

6. Ensure your PR is created with the task title as seen on the mobile App

Submission
To submit,
1. create a SQL file in your database folder.
2. Add all your SQL queries to this file.
3. Using comments, specify each section of your query.
4. For question 1, 2, and 4 write the result of what you got using comments below the query you wrote. Hint: your result should be a number

Research the programming languages listed and complete the grid with common technology uses, languages they were built on, Some companies that use them, products that these companies have built with them and whether they are compiled, interpreted or both.

Acceptance Criteria

1. Make a copy of this spreadsheet https://docs.google.com/spreadsheets/d/1tXJE75x4iPho11S-8dFyS20iCngBPE5mfIS0pPfFStk/edit#gid=0 by selecting File>>Make a copy on the sheet
2. Ensure you are logged in to your gmail account to make a copy
3. Answer the questions in the new copy of the sheet made
4. Share the spreadsheet with [email protected] and [email protected].
5. Alternatively, you can make the sheet open for comments
6. Copy the link to your spreadsheet and put it in a txt file. Feel free to name the file
7. Create a folder named Programming Languages 1 inside the submissions folder you created for yourself
8. Add the txt file to the folder in (7) above
9. Push this change using the process followed in creating a pull request
10. Ensure your PR is created with the task title as seen on the mobile App

As a customer, I want to see a Contact Us page on the website so that I can contact the support team from the website

Acceptance Criteria

1. Implement this UI design for the contact us page using CSS https://zpl.io/adeyYoR

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Contact Us link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/a7A7Q1q

b. It should look like this when viewed on mobile phones. https://zpl.io/bWo7doP

5. Ensure your work is saved in a new folder named CSS. This folder should be in the folder you created for yourself inside your submissions folder

6. Include screenshots to your Pull Request. Your Pull Request should be titled: [63] Style the Contact Us Page using CSS

7. Ensure this is done on a new branch

NB - Your developed UI must follow the designed layout, however, you are free to
i. use your own logo in the header

ii. choose your own colour scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and color scheme must be the same for all the site pages

PS
DO NOT write another contact us page. Instead, you should UPDATE the contact us page from the HTML task and link your CSS.

As a customer, I want to see a Signup page on the website so that I can create a customer account on the website

Acceptance Criteria

1. Create the HTML Tags and style this UI design for the customer signup page using CSS https://zpl.io/beqyOGp.

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Signup link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/VKRBQ3P

b. It should look like this when viewed on mobile phones. https://zpl.io/bJmdWJn

5. Ensure your work is saved in a new folder named css. This folder should be in the folder you created for yourself inside your submissions folder

6. Include screenshots to your Pull Request

NB - Your developed UI must follow the designed layout, however, you are free to
i. use your own Logo in the header

ii. choose your own color scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and color scheme must be the same for all the site pages

As a customer, I want to be able to navigate around the contact form and product pages so I can perform actions on the pages

Success Criteria

1. Add the links to all pages at the top of the two created pages (Contact form, Product)

2. Ensure that clicking the links takes the user to the appropriate pages ie

• Clicking on Contact Form should take the user to the Contact form page
• Clicking Product should take the user to the product description page

3. Create a Pull Request for this task. Your PR should be named [54] Add Page Navigation to your Pages

4. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

5. Ensure your work is saved in a new folder named html-forms. This folder should be in the folder you created for yourself inside your submissions folder

Design a relational database for your e-commerce store that satisfies the listed needs/criteria.

1. Your e-commerce store is primarily for selling products. Each product has a name, description, image and unit price. Also, each product belongs to a category (this links the product to categories table) and all products are created by an Admin user (this links the product to the Admin table). Furthermore, each product has a stock level (i.e total quantity of that product that is available) and status (which can be in stock, out of stock or low stock).

2. Only a registered store customer can buy products. A registered customer must have a first name, last name, email address and password.

3. All registered customers must also have contact addresses. A customer will have a street address, city, state, zip code and the country as well as phone number. Zipcodes are always optional fields for customers. The customer should be properly linked to customer addresses.

4. In purchasing a product, the customer makes an order. Orders will consist of the customer making the order (links customers to orders), the order amount and when the order was made.

5. A single order will sometimes contain more than one item, therefore, your e-commerce store shop also stores information about order items such as the order it belongs to (links the order items to the order), products being bought (links products to order items), quantity, unit prices and total amount.

6. Since the store will be managed by Admin users, the admin information such as name, email address, password and phone number needs to be stored.

7. Ensure your PR is created with the task title as seen on the mobile App

NOTE
_1. Your id should be an auto-increment integer
2. Ensure your description is a string with 250 character max value and not null-able.
3. All attributes should be made compulsory unless otherwise specified
4. Ensure your table names are pluralized.
5. Ensure your table names are all in lower cases.

Submission
To submit,

1. create a database folder.
2. in the folder, create an sql file called init.sql.
3. In the init.sql. file, add all your SQL queries.
4. Using comments, specify each section of your query.

As a customer, I want to be able to navigate around the contact, form and product pages so I can perform actions on the pages

Success Criteria

1. Add the links to all pages at the top of the two created pages (Contact form, Product)

2. Ensure that clicking the links takes the user to the appropriate pages ie

• Clicking on Contact Form should take the user to the Contact form page
• Clicking Product should take the user to the product description page

3. Create a Pull Request for this task. Your PR should be named [56] Add Page Navigation to your Pages

4. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

5. Ensure your work is saved in a new folder named html-forms. This folder should be in the folder you created for yourself inside your submissions folder

To do this task, you must have accepted the Zeplin invite and must already be logged into your Zeplin account

As a customer, I want to see a Contact Us page on the website so that I can contact the support team from the website

Acceptance Criteria

Style your contact us page to look like the shared mockup https://zpl.io/adeyYoR

Ensure that this page is seen when the user clicks on the Contact Us link on the header

Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/a7A7Q1q

b. It should look like this when viewed on mobile phones. https://zpl.io/bWo7doP

Your CSS should be saved in a folder named css. This folder should be in the folder you created for yourself inside your submissions folder

Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

NB - Your developed UI must follow the designed layout, however, you are free to
i. use your own Logo in the header

ii. choose your own color scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and color scheme must be the same for all the site pages

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria

1. Style your product page to look like the shared mockup https://zpl.io/bLzJGoD

2. Ensure that this page is seen when the user clicks on the Product Page link on the header

3. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/aNgY539

b. It should look like this when viewed on mobile phones. https://zpl.io/amkR7me

4. Ensure that the quantity field is a text input field type

5. For this product page, you are free to use your own currency type, product description text, product name, product images.

6. Your CSS should be saved in a folder named css. This folder should be in the folder you created for yourself inside your submissions folder

7. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

NB - Your developed UI must follow the designed layout, and use the font style shown, however, you are free to
i. use your own logo in the header

ii. choose your own colour scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and colour scheme must be the same for all the site pages"

As a customer, I want to see a contact form page on the website so that I can send enquires and requires to the Web Admin

Success Criteria

1. Develop a Contact form page for your website

2. Ensure this page has the following fields

• Full Name
• Email
• Subject
• Message input

3. Ensure there is a Submit button on this page

4. Create a Pull Request for this task. Your PR should be named [52] Develop a Contact Form Page using HTML

5. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

6. Ensure your work is saved in a new folder named html-forms. This folder should be in the folder you created for yourself inside your submissions folder

As a customer user, I want to be able to fill a contact form so I can reach out to the e-commerce store Admin.

Success Criteria

1. Validate the Contact form
2. Ensure all fields are made mandatory
3. The full name field should be validated to NOT accept special characters
4. If the Full name field is empty and user clicks send, the error message should be "Please enter your Name"
5. Ensure the email address field only accepts valid emails (ie [email protected])
6. If an invalid email address is entered, ensure a message is displayed to the user - "Please enter a valid email".
7. If the Email Address field is empty and user clicks send, the error message should be "Please enter your Email Address"
8. If the Subject field is empty and user clicks send, the error message should be "Please enter a message subject"
9. If the Message field is empty and user clicks send, the error message should be "Please enter your Message"
10. Ensure your PR is created with the task title as seen on the mobile App

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria
"1. Implement this UI design for the Product page using CSS https://zpl.io/bLzJGoD

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Product Page link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/aNgY539

b. It should look like this when viewed on mobile phones. https://zpl.io/amkR7me

5. Ensure that the quantity field is a text input field type

6. For this product page, you are free to use your own currency type, product description text, product name, product images.

7. Include screenshots to your Pull Request. Your Pull Request should be titled: [70] Style the Product Details Page using CSS

8. Ensure this is done on a new branch

NB - Your developed UI must follow the designed layout, and use the font style shown, however, you are free to
i. use your own logo in the header

ii. choose your own colour scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and colour scheme must be the same for all the site pages"

PS
DO NOT write another Product Details page. Instead, you should UPDATE the Product Details page from the HTML task and link your CSS.

As a customer, I want to see a contact form page on the website so that I can send enquires and requires to the Web Admin

Success Criteria

1. Develop a Contact form page for your website

2. Ensure this page has the following fields

• Full Name
• Email
• Subject
• Message input

3. Ensure there is a Submit button on this page

4. Create a Pull Request for this task. Your PR should be named [111] Develop a Contact Form Page using HTML

5. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

6. Ensure your work is saved in a new folder named html-forms. This folder should be in the folder you created for yourself inside your submissions folder
7. Create a new branch for this task

Research the programming languages listed and complete the grid with common technology uses, languages they were built on, Some companies that use them, products that these companies have built with them and whether they are compiled, interpreted or both.

Acceptance Criteria

1. Make a copy of this spreadsheet https://docs.google.com/spreadsheets/d/1tXJE75x4iPho11S-8dFyS20iCngBPE5mfIS0pPfFStk/edit#gid=0 by selecting File>>Make a copy on the sheet
2. Ensure you are logged in to your gmail account to make a copy
3. Answer the questions in the new copy of the sheet made
4. Share the spreadsheet with [email protected] and [email protected] or you can make the sheet open for comments
5. Copy the link to your spreadsheet and put it in a txt file. Feel free to name the file
6. Create a folder named Programming Languages 1 inside the submissions folder you created for yourself
7. Add the txt file to the folder in (6) above
8. Push this change using the process followed in creating a pull request
9. Ensure the task in done on a new branch and your PR is named after the task title ie. [103] Research Programming Languages

This task tests your understanding of creating arrays and objects.

Using Javascript,

1. Create an array called productList

2. Your productList array should contain 3 objects

3. Each of the objects of the array should have 3 properties (productName, imageUrl and productPrice)

4. Print out the values in this format <productName> with <imageUrl> is sold for <productPrice>

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria

1. Develop a product page for your e-commerce store using HTML Only

2. Ensure this page has the following information

   a. Product name
   b. 2 Product images
   c. Product Price
   d. Product description
   e. An ordered list of similar product names

3. Ensure your Pull Request is created with the title [46] Product Page using HTML

4. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

5. Ensure your work is saved in a new folder named HTML. This folder should be in the folder you created for yourself inside your submissions folder
   Please note that your PR will not be merged if the instructions are not followed

A transportation company needs a database to track all their travel details, passenger details and flight statuses. You have been tasked to design this database for them while satisfying the stated criteria

1. The company needs to maintain details of their registered passengers. All passengers will have a full name, sex and age. Some passengers, however, do not like sharing their age information.

2. For each trip, the company keeps a record of the passenger class, passenger ticket number, trip fare, assigned cabin, number of parents/children aboard, number of siblings/spouses aboard, and the point of embarkation,
   (Some passengers do not have any cabin assigned to them).

3. In the event of an accident during the trip, the company also needs to keep a record to show whether a passenger survived or not.

4. Ensure your PR is created with the task title as seen on the mobile App

NOTE

1. Your id should be an auto-increment integer
2. Your tables should be properly linked
3. All attributes, unless hinted, should be made compulsory
4. Ensure your table names are pluralized.
5. Ensure your table names are all in lower cases.
6. A ticket can contain numbers only or a combination of numbers and alphabets (e.g. A/5 21171, PC 17599, STON/O2. 3101282, 113803)
7. A cabin class is a combination of numbers and an alphabet eg. C102, D24
8. There are three levels of passenger class (1,2,3).
9. Don't INSERT record(s) into the tables you created

With your knowledge of conditionals/loops, Write a program that prints the numbers from 1 and the positive difference between 7 and 123 and satisfies the following;

• For numbers that are multiples of three (3), print Software instead of the number.
• For numbers that are multiples of five (5), print Developer instead of the number.
• For numbers which are both multiples of three (3) and five (5), print Software Developer.
• Ensure your PR is created with the task title as seen on the mobile App

NB: Numbers from 1 and the positive difference between 7&123 (ie find the positive difference and print the numbers between 1 and that number while fulfilling other criteria)

As a customer user, I want to subscribe to the store's newsletter so I can get emails from the store.

Success Criteria

1. Validate the newsletter field in the footer.
2. Ensure the field only accepts valid emails ie [email protected]
3. If an invalid email address is entered, ensure a message is displayed to the user - "Please enter a valid email".
4. If the Email Address field is empty and user clicks submit, the error message should be "Please enter your Email Address"
5. Ensure this validated newsletter form is linked to all 3 pages (ie, the contact form, product page and signup pages should have the validation)
6. Ensure your PR is created with the task title as seen on the mobile App

With your knowledge of conditionals/loops, Write a program that prints the numbers from 1 and the positive difference between 7 and 123 and satisfies the following;

• For numbers that are multiples of three (3), print Software instead of the number.
• For numbers that are multiples of five (5), print Developer instead of the number.
• For numbers which are both multiples of three (3) and five (5), print Software Developer.

NB: Numbers from 1 and the positive difference between 7&123 (ie find the positive difference and print the numbers between 1 and that number while fulfilling other criteria)

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria

1. Style your product page to look like the shared mockup https://zpl.io/bLzJGoD

2. Ensure that this page is seen when the user clicks on the Product Page link on the header

3. Ensure the page is mobile responsive ie

   a. It should look like this when viewed on a tablet https://zpl.io/aNgY539

   b. It should look like this when viewed on mobile phones. https://zpl.io/amkR7me

4. Ensure that the quantity field is a text input field type

5. For this product page, you are free to use your own currency type, product description text, product name, product images.

6. Your CSS should be saved in a folder named css. This folder should be in the folder you created for yourself inside your submissions folder

7. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

8. Ensure your PR is created with the task title as seen on the mobile App

NB - Your developed UI must follow the designed layout, and use the font style shown, however, you are free to
i. use your own logo in the header

ii. choose your own colour scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and colour scheme must be the same for all the site pages"

As a customer, I want to see a contact form page on the website so that I can send enquires and requires to the Web Admin

Success Criteria

1. Develop a Contact form page for your website

2. Ensure this page has the following fields

• Full Name
• Email
• Subject
• Message

3. Ensure there is a Submit button on this page

4. Create a Pull Request for this task. Ensure your PR is created with the task title as seen on the mobile App

5. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

6. Ensure your work is saved in a new folder named html-forms. This folder should be in the folder you created for yourself inside your submissions folder

As a customer, I want to see a Signup page on the website so that I can create a customer account on the website

Acceptance Criteria

1. Create the HTML Tags and style this UI design for the customer signup page using CSS. Use the mockup here as a guide: https://zpl.io/beqyOGp.

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Signup link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/VKRBQ3P

b. It should look like this when viewed on mobile phones. https://zpl.io/bJmdWJn

5. Ensure your work is saved in a new folder named css. This folder should be in the folder you created for yourself inside your submissions folder

6. Include screenshots to your Pull Request. Your Pull Request should be titled: [68] Create & Style the Customer Signup Page using CSS

7. Ensure this is done on a new branch

NB - Your developed UI must follow the designed layout, however, you are free to
i. use your own Logo in the header

ii. choose your own color scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and color scheme must be the same for all the site pages

Research the programming languages listed and complete the grid with common technology uses, languages they were built on, Some companies that use them, products that these companies have built with them and whether they are compiled, interpreted or both.

Acceptance Criteria

1. Make a copy of this spreadsheet https://docs.google.com/spreadsheets/d/1tXJE75x4iPho11S-8dFyS20iCngBPE5mfIS0pPfFStk/edit#gid=0 by selecting File>>Make a copy on the sheet
2. Ensure you are logged in to your gmail account to make a copy
3. Answer the questions in the new copy of the sheet made
4. Share the spreadsheet with [email protected] and [email protected] or you can make the sheet open for comments
5. Copy the link to your spreadsheet and put it in a txt file. Feel free to name the file
6. Create a folder named Programming Languages 1 inside the submissions folder you created for yourself
7. Add the txt file to the folder in (6) above
8. Push this change using the process followed in creating a pull request
9. Ensure the task in done on a new branch and your PR is named after the task title ie. [102] Research Programming Languages

As a customer, I want to see a Contact Us page on the website so that I can contact the support team from the website

Acceptance Criteria

1. Implement this UI design for the contact us page using CSS https://zpl.io/adeyYoR

2. Ensure that the developed UI looks exactly like the shared mockup.

3. Ensure that this page is seen when the user clicks on the Contact Us link on the header

4. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/a7A7Q1q

b. It should look like this when viewed on mobile phones. https://zpl.io/bWo7doP

5. Ensure your work is saved in a new folder named CSS. This folder should be in the folder you created for yourself inside your submissions folder

6. Include screenshots to your Pull Request. Your Pull Request should be titled: [66] Style the Contact Us Page using CSS

7. Ensure this is done on a new branch

NB - Your developed UI must follow the designed layout, however, you are free to
i. use your own logo in the header

ii. choose your own colour scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and colour scheme must be the same for all the site pages

PS
DO NOT write another contact us page. Instead, you should UPDATE the contact us page from the HTML task and link your CSS.

As a customer, I want to be able to navigate around the contact form and product pages so I can perform actions on the pages

Success Criteria

1. Add the links to all pages at the top of the two created pages (Contact form, Product)

2. Ensure that clicking the links takes the user to the appropriate pages ie

• Clicking on Contact Form should take the user to the Contact form page
• Clicking Product should take the user to the product description page

3. Create a Pull Request for this task. Your PR should be named [55] Add Page Navigation to your Pages

4. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

5. Ensure your work is saved in a new folder named html-forms. This folder should be in the folder you created for yourself inside your submissions folder