dufuna-codecamp/dufuna-codecamp-21

This is the repository for Dufuna-CodeCamp 2021 cohort. All submissions related to tasks per scholar can be found in this repository.

dufuna-codecamp-21's Issues

Printing Product Price with Javascript

This task tests your understanding of creating arrays and objects.

Success Criteria

Using Javascript,

• Create an array called productList
• Your productList array should contain 3 objects
• Each of the objects of the array should have 3 properties (productName, imageUrl and productPrice)
• Using document.write(), Print out the values in this format < productName > with < imageUrl > is sold for < productPrice >
• Ensure your PR is created with the task title as seen on the mobile App
• On your terminal, ensure you are in the tests/product_price_printing directory when you run ./test.sh command.

Create And Style The Landing Page using CSS

As a customer, I want to see a landing page for an eCommerce food ordering website so that I can see details about categories of food items available and select my interest.

Create a new CSS folder and create an HTML folder and CSS folder inside the created folder.

1. Ensure your work is saved in a folder named css. This folder should be in the folder you created for yourself inside your submissions folder
2. Create the HTML Tags and style this UI design for the landing page using CSS. Ensure the developed UI looks exactly like the shared mockup https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=13%3A0
3. Ensure that the user can select a location from where you are dropdown
4. Add screenshots of the food ordering website 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 PR is created with the task title as seen on the mobile App
6. On your terminal, ensure you are in the landing_page directory when you run ./test.sh command.

• The Image Assets for the designs can be found here

Please note that your PR will not be merged if the instructions are not followed

Create & Style the Cart Page using CSS

As a customer, I want to see a cart page so that I can edit my order and checkout.

1. Ensure your work is saved in a folder named CSS. This folder should be in the folder you created for yourself inside your submissions folder
2. Create the HTML Tags and style this UI design for the Cart page using CSS
   https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=50%3A4
3. Ensure the developed UI looks exactly like the shared mockup
4. Ensure that when the user clicks on the checkout navigation button, the user is redirected to the verification page
5. Ensure the page is mobile responsive ie
   a. It should look like this when viewed on a tablet
   b. It should look like this when viewed on mobile phones.
   https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=114%3A12
6. Add screenshots of the cart page 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
7. Ensure your PR is created with the task title as seen on the mobile App
8. On your terminal, ensure you are in the …….. directory when you run ./test.sh command.

Please note that your PR will not be merged if the instructions are not followed

Create & Style the Verification and Success page using CSS

Create & Style The Vendor Page using Bootstrap

As a customer, I want to see the vendors page of the E-commerce food ordering website so that I can view food items from each vendor to add to the cart.

• Ensure your work is saved in an HTML folder in your Bootstrap folder.
• Make a copy of your previously submitted vendors.html files from your CSS folder.
• Update the CSS classes to Bootstrap.
• Create the HTML Tags and style this UI design for the vendors' page using BOOTSTRAP.
• Ensure the developed UI looks exactly like the shared mockup.
• Ensure that Vendors in the breadcrumb trail are highlighted.
• Ensure your PR is created with the task title as seen on the mobile App.
• 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.
• On your terminal, ensure you are in the vendors_ page directory when you run ./test.sh command.

Please note that your PR will not be merged if the instructions are not followed

Create the Success Page Using REACT

As a customer, I want to see a success page when I am done with payment so that I know the order was successful.

Success Criteria

Clone this react app repo https://github.com/Dufuna-CodeCamp/react-app

1. Ensure your work is in the same project as the cart and verification page. This page is a continuation of the project. This project should be saved in a folder named REACT. This folder should be in the folder you created for yourself inside your submissions folder.
2. Ensure the Order Successful on the page is highlighted
3. Ensure that the user sees this page after clicking on the Pay navigation button on the verification page
4. Ensure the developed UI looks exactly like the shared mockup and the page is mobile responsive i.e
   a. It should look like this when viewed on a large screen or desktop. https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=108%3A453
   b. It should look like this when viewed on mobile phones. https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=114%3A290
5. Add screenshots of the success page 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
7. On your terminal, ensure you are in the react-app directory when you run npm test command.
   Please note that your PR will not be merged if the instructions are not followed

[SPBFET-4] Add Page Navigation to your Pages

adding page navigation

Responsive E-commerce Vendor Page

As a customer, I want to be able to view/access the E-commerce Vendor page on any device seamlessly.

Success Criteria

1. Ensure the vendor page of your E-commerce site is mobile responsive;

• It should look like this on a mobile device
• It should also look responsive on tablet devices

2. Your work should be saved in the css folder used in the CSS task.
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. On your terminal, ensure you are in the responsive2 directory when you run ./test.sh command.
   Please note that your PR will not be merged if the instructions are not followed

Create the Cart Page with REACT

As a customer, I want to see a cart page so that I can edit my order and checkout.

Success Criteria

**Clone this react app repo https://github.com/Dufuna-CodeCamp/react-app . ** Do well to include the "dot(.) sign" at the end of the URL.

1. Ensure your work is saved in a folder named REACT. This folder should be in the folder you created for yourself inside your submissions folder.
2. Ensure you create reusable components for the page.
3. Ensure the quantity counter for products in the cart is not less than zero.
   NOTE: If the user makes all the quantity of all the products in the cart zero, the delivery fee should be zero as well.
4. Ensure that the price of the product in the cart changes with the increase or decrease of the quantity of product provided
5. Ensure the total price in the cart increases or decreases as the quantity of the product in the cart is changed
6. Ensure the page is mobile responsive i.e
   a. It should look like this when viewed on a large screen or desktop. https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=50%3A4
   b. It should look like this when viewed on mobile phones. https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=114%3A12
7. Add screenshots of the cart page 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
9. On your terminal, ensure you are in the react-app directory when you run npm test command.
10. Please note that your PR will not be merged if the instructions are not followed.

Create The Verification page using REACT

As a customer, I want to see the verification page so that I can confirm my address and payment method before paying for items.

Sucess Criteria

Clone this react app repo https://github.com/Dufuna-CodeCamp/react-app

1. Ensure your work is in the same project as the cart page. This page is a continuation of the project. This project should be saved in a folder named REACT. This folder should be in the folder you created for yourself inside your submissions folder.
2. Ensure that when the user clicks on the checkout navigation button on the cart page, the user is redirected to the verification page
3. Ensure that Verification in the breadcrumb trail is highlighted
4. Ensure the user can input the following:

• Phone Number
• Card Number
• Card Name
• Expiry Date

5. Ensure the user can select a payment method
6. Ensure all the fields are entered before the user can click the Pay button
7. Ensure the developed UI looks exactly like the shared mockup and the page is mobile responsive i.e
   a. It should look like this when viewed on a large screen or desktop. https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=50%3A246
   b. It should look like this when viewed on mobile phones.
   https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=114%3A159
8. Ensure your PR is created with the task title as seen on the mobile App
9. Add screenshots of the verification page 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
10. On your terminal, ensure you are in the react-app directory when you run npm test command.
    Please note that your PR will not be merged if the instructions are not followed

Create & Style the Vendors Page Using CSS

As a customer, I want to see the vendor's page of the E-commerce food ordering website so that I can view food items from each vendor to add to the cart.

1. Ensure your work is saved in a folder named css. This folder should be in the folder you created for yourself inside your submissions folder
2. Create the HTML Tags and style this UI design for the vendor's page using CSS https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=42%3A53
3. Ensure the developed UI looks exactly like the shared mockup
4. Ensure that Vendors in the breadcrumb trail is highlighted
5. Ensure your PR is created with the task title as seen on the mobile App
6. 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
7. On your terminal, ensure you are in the tests/vendors_page directory when you run ./test.sh command.

• The Image Assets for the designs can be found here

Please note that your PR will not be merged if the instructions are not followed

Develop the FoodBag Store Database

IMPORTANT NOTICE!!!
For scholars on the e-commerce store designs, please see the link to the task Dufuna-CodeCamp/Dufuna-CodeCamp20#656 (comment)
Please use the PR title seen on the app and not GitHub

Scholars working on the FOODBAG eCommerce mockups can proceed with the Database task below.

Design a relational database for the food bag that satisfies the listed needs/criteria.

Success Criteria

1. First the food table should contain its id and type. There are four different food categories on the homepage that would be added to this table. All these columns are required.
2. The food bag has different vendors selling different kinds of food on the platform. The vendor_food table is the relationship between the vendor itself and the food they sell. This table will contain all they need to know about the food they sell. There will be a relationship between the food table and this table so as to know the type/category the food falls on. The table should contain the following:

• id
• admin_id
• food_id
• name
• amount
  Note: All these columns are required.

3. The admins table will contain both the system admins of the food bag platform and the vendors. They both will be differentiated by type. The admin table should contain the following:

• id
• name
• type
• email_address
• phone_number
• password.
  The system admins can have a type of 0 and vendors a type of 1 when they are saved for differentiation.
  Note: All these columns are required.

4. Needless to say that the customer does not need to have an account on the platform to make an order. But in the case that they register, these would be on the table:

• id
• name
• phone_number
• address
• payment_method, etc as seen on the payment verification page.
  The first four columns mentioned are required and the other columns regarding payment are optional. We’d only want to save the payment details of a registered customer so that whenever they want to make a payment again, we can just fetch out their data.

5. The orders table will contain the details regarding the orders of the customer. The table needs id, vendor_id, customer_id. The vendor_id is to know which type of food the customer ordered, it is easy to know the amount of the food and which vendor they made their order from based on the relationship between the admin table and the vendor_food table.
6. The customer_id is optional because a guest user of the platform would not have an id, not until they pass through the payment verification page.
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. Ensure your table names are all in lower cases.

Submission
To submit,

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

Here is the error i got while running the test

Vendors Page Validation

IMPORTANT NOTICE!!!
For scholars on the old DOM tasks (e-commerce store), please see the link to the task Dufuna-CodeCamp/Dufuna-CodeCamp20#479 (comment)
Please use the PR title seen on the mobile app and not GitHub

For Scholars working on the FOODBAG eCommerce mockups, please proceed with the task below.
VENDORS PAGE Validation
As a customer, I want to be able to see food items on the Vendor page so that I can add food items to the cart or remove food items from Cart.

Success Criteria

1. Ensure your work is saved in a folder named Dom, this folder should be in the folder created for yourself inside the submission folder.
2. Ensure that a customer is taken to the Vendor page after selecting the location and interest https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=42%3A53
3. Ensure that on the Vendor page, customers can add food items to the cart

• Ensure the vendor page look like this when a customer add food items to the cart https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=42%3A140
• Ensure that the cart on the navbar has a notification dot when food items are added to the cart
• Ensure that the color of the add to cart button for the food item selected changed to what we have in the design
• Ensure that the add to cart text is changed to Remove for the food item selected as seen in the design
• Ensure the Remove text color is changed to white.

4. Ensure that a customer can remove a food item that was initially selected by clicking the remove button for that food item.
5. Ensure that when all food items are removed, the notification dot on the cart on the navbar is removed.
6. On your terminal, ensure you are in the tests/Dom directory when you run ./test.sh command.
7. Please note that your PR will not be merged if the instructions are not followed

Add Page Navigation to your 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. 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-forms. This folder should be in the folder you created for yourself inside your submissions folder

The Software Developer Conditionals

With your knowledge of conditionals/loops, Use the document.write() function to 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)
• On your terminal, ensure you are in the tests/conditionals_js directory when you run ./test.sh command.

This is my repo

#3

Issues to push to github

remote: Permission to Dufuna-CodeCamp/Dufuna-CodeCamp-21.git denied to Haywhye12
.
fatal: unable to access 'https://github.com/Dufuna-CodeCamp/Dufuna-CodeCamp-21.g
it/': The requested URL returned error: 403

help!!!

Permission denied

I'm unable to push my first pull request to github. It keeps coming back as access denied to AishaRahaman. Is there a way i can go about it.

ahmed mukhtar

i have done the task

Develop a Product Page Using HTML

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. On your terminal, ensure you are in the tests/'product_page_using_html' directory when you run ./test.sh command.
7. Please note that your PR will not be merged if the instructions are not followed

Permission Denied.

Hello, I'm currently unable to push my work on making my first pull request to git. It says I'm being denied permission to Dufuna-CodeCamp-21 on github as well as not being able to access the URL, Please help.

403 error

I already ran my test successfully but when I tried to push the file I got a 403 error and the screen showed "permission to dufuna-codecamp/dufuna-codecamp-21.git denied to tomiwataiwo"
@ToluEnny24 Please how do I resolve this error

Responsive E-commerce Landing Page

As a customer, I want to be able to view/access the E-commerce Landing page on any device seamlessly.

Success Criteria

1. Ensure the landing page is mobile responsive;

• It should look like this on a mobile device
• It should also look responsive on a tablet

2. Your work should be saved in the css folder used in the CSS task.
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. On your terminal, ensure you are in the responsive1 directory when you run ./test.sh command.

Please note that your PR will not be merged if the instructions are not followed

[DCSFET-160] My First Pull Request.

I have successfully submitted a pull request and it has been merged, but I’m unable to access the next course module, HTML, because my task still shows pending, please help.

Develop a Contact Form Page Using HTML Forms

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. 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. This folder should be in the folder you created for yourself inside your submissions folder

Hello @bayooba, replace line 55 entirely with: survivals BOOLEAN NOT NULL,

    Hello @bayooba, replace line 55 entirely with:  survivals BOOLEAN NOT NULL,

OR survived BOOLEAN NOT NULL. So, remove the entire statement and replace with the stated.

Please note that Boolean values are nothing but 0 and 1 i.e. either true or false. if the condition satisfies, it is true else it is false

Originally posted by @Mayowa2020 in #2273 (comment)

Create & Style The Landing Page using Bootstrap

As a customer, I want to see a landing page for an E-Commerce food ordering website so that I can see details about categories of food items available

Create a new Bootstrap folder and create an HTML folder inside the created folder.

• Ensure your work is saved in a folder named Bootstrap. This folder should be in the folder you created for yourself inside your submissions folder.
• Make a copy of your previously submitted index.html files from your CSS folder.
• Update the CSS classes to Bootstrap.
• Ensure the developed UI looks exactly like the shared mockup.
• Add screenshots of the food ordering website 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.
• Ensure your PR is created with the task title as seen on the mobile App.
• On your terminal, ensure you are in the landing_page directory when you run ./test.sh command.

Please note that your PR will not be merged if the instructions are not followed

[NDFFET-163] Create & Style the Vendor Page for a food Orderin

Landing Page Validation

IMPORTANT NOTICE!!!
For scholars on the old DOM tasks (e-commerce store), please see link to the task (Dufuna-CodeCamp/Dufuna-CodeCamp20#377 (comment))
Please use the PR title seen on the app and not GitHub

Scholars working on the FOODBAG ecommerce mockups can proceed with the task below.
Landing Page Validation
As a customer, I want to be able to select my location and food interest on the food E-commerce Landing page so that I can proceed to the Vendor page.

Success Criteria

1. Ensure your work is saved in a folder named Dom, this folder should be in the folder created for yourself inside the submission folder. https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=13%3A0
2. Ensure customer can select a location from the location dropdown
3. Ensure that when the customer selects a location, items under pick interest are highlighted and clickable i.e When a customer selects a location, the landing page should look like this: (https://www.figma.com/file/qDRZt0susSQ5k4wEgB09hU/FoodBag-beginner?node-id=32%3A368)
4. Ensure that when a customer selects an interest, the customer should be redirected to the Vendor page.
5. Ensure your PR is created with the task title as seen on the mobile App
6. 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
7. On your terminal, ensure you are in the tests/Dom directory when you run ./test.sh command.
8. Please note that your PR will not be merged if the instructions are not followed

[DNPFET-160]My First Pull Request

• Visit your program repository from your System. The link is added to the additional resource section
• Clone the repository to your local machine.
• Create and checkout into a new branch. Suppose your name is James, your branch name would be about-james
• In the submissions folder, add a new folder with your full name (i.e first name and last 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.
• Run your tests - It should be found in this path Dufuna-CodeCamp-21/tests/my_first_pull_request
• Add these new changes to git also.
• Commit your changes and push to the cloned repository.
• Go to the Dufuna-CodeCamp-21 repository on GitHub and create a Pull request with the task title as seen on the App to the master branch.