dufuna-codecamp/dufuna-fem

Submissions for Dufuna-Fem 2020

dufuna-fem's Issues

[157] Style the Contact Us Page using CSS - Mobile

Note: 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. You should also use a new branch for this task.

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

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

[223] Contact Form Validation - Frontend

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"

[228] Newsletter Form Validation - Mobile

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)

[261] Database Design For A Transportation Company - Fullstack

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.

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

[159] Create & Style the Customer Signup Page using CSS - Frontend

Note: 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 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 HTML tags file is saved in your html-forms folder

6. Ensure your CSS file is saved in a new folder named css. This folder should be in the folder you created for yourself inside your submissions folder. You should also use a new branch for this task

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

[222] Sign-Up Form Validation - Mobile

As a new customer signing up, I want to be able to signup on the e-commerce website so that I can have access to various promos

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 [phone])

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

13. 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."

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

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

16. Ensure that the input in the confirms password field matches that in the password field.

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

[160] Create & Style the Customer Signup Page using CSS - Mobile

Note: 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 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 HTML tags file is saved in your html-forms folder

6. Ensure your CSS file is saved in a new folder named css. This folder should be in the folder you created for yourself inside your submissions folder. You should also use a new branch for this task

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

[258] Develop an E-commerce Store Database - Fullstack

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.

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.

[190] Research Programming Languages - Frontend

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

[230] Calculate Product Shipping Cost - Fullstack

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

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

[138] Product Page using HTML - Frontend

As a customer, I want to see a product page for the product I am 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 [138] 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

6. Ensure your task is done on a new branch
   Please note that your PR will not be merged if the instructions are not followed

[148] Add Page Navigation to your Pages- Fullstack

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 [148] 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

[196] The Software Developer Conditionals - Frontend

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)

Ensure this is done on a new branch

[200] - Printing Product Price with JavaScript - Mobile

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 this is done on a new branch

[195] The Software Developer Conditionals - Fullstack

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)

Ensure this is done on a new branch

[225] Contact Form Validation - Mobile

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"

[191] Research Programming Languages - Fullstack

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

[153] Style the Product Details Page using CSS - Fullstack

NOTE: 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 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. You should also use a new branch for this task.

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

[152] Style the Product Details Page using CSS - Frontend

NOTE: 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 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. You should also use a new branch for this task.

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

[227] Newsletter Form Validation - Fullstack

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)

[198] - Printing Product Price with JavaScript - Fullstack

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 this is done on a new branch

[137] Product Page using HTML - FullStack

As a customer, I want to see a product page for the product I am 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 [137] 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

6. Ensure your task is done on a new branch
   Please note that your PR will not be merged if the instructions are not followed

[199] - Printing Product Price with JavaScript - Frontend

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 this is done on a new branch

[229] Calculate Product Shipping Cost - Frontend

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

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

[158] Create & Style the Customer Signup Page using CSS - Fullstack

Note: 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 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 HTML tags file is saved in your html-forms folder

6. Ensure your CSS file is saved in a new folder named css. This folder should be in the folder you created for yourself inside your submissions folder. You should also use a new branch for this task

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

[150] Add Page Navigation to your Pages- Mobile

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 [150] 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

[231] Calculate Product Shipping Cost - Mobile

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

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

[154] Style the Product Details Page using CSS - Mobile

NOTE: 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 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. You should also use a new branch for this task.

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

[221] Sign-Up Form Validation - Fullstack

As a new customer signing up, I want to be able to signup on the e-commerce website so that I can have access to various promos

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 [phone])

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

13. 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."

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

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

16. Ensure that the input in the confirms password field matches that in the password field.

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

[144] Develop a Contact Form Page using HTML- Mobile

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 [144] 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

[149] Add Page Navigation to your Pages- Frontend

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 [149] 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

[143] Develop a Contact Form Page using HTML- Frontend

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 [143] 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

[259] Develop an E-commerce Store Database - Mobile

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.

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.

[264] Querying the Transportation Database - Fullstack

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 or 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?

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

[139] Product Page using HTML - Mobile

As a customer, I want to see a product page for the product I am 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 [139] 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

6. Ensure your task is done on a new branch
   Please note that your PR will not be merged if the instructions are not followed

[197] The Software Developer Conditionals - Mobile

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)

Ensure this is done on a new branch

[224] Contact Form Validation - Fullstack

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"

[220] Sign-Up Form Validation - Frontend

As a new customer signing up, I want to be able to signup on the e-commerce website so that I can have access to various promos

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 [phone])

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

13. 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."

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

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

16. Ensure that the input in the confirms password field matches that in the password field.

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

[262] Database Design For A Transportation Company - Mobile

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.

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

[226] Newsletter Form Validation - Frontend

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)

[260] Database Design For A Transportation Company - Frontend

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.

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

[265] Querying the Transportation Database - Mobile

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 or 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?

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

I cannot find my first file on the submission folder

Hello,

Kindly assist as the folder with my name doesn't exist on the submission folder. I created another one to submit the recent task but the last task is not there.

Thanks

[189] Research Programming Languages - Mobile

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

[263] Querying the Transportation Database - Frontend

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 or 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?

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

[156] Style the Contact Us Page using CSS - Frontend

Note: 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. You should also use a new branch for this task.

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

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

[257] Develop an E-commerce Store Database - Frontend

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.

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.

[142] Develop a Contact Form Page using HTML- Fullstack

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 [142] 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

[155] Style the Contact Us Page using CSS - Fullstack

Note: 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. You should also use a new branch for this task.

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

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