Task 2 b : JS Concepts II

[yogeshtakeo]

JS Concepts II

Objective

The objective of this exercise is to assess the participants' understanding and proficiency in key JavaScript concepts, including variables, functions, arrays, array methods, objects, and destructuring. The exercise should be completed within a Vite React project and pushed to a GitHub repository.

Setup

1. Create a new GitHub repository for this exercise.
2. Clone the repository to your local machine.
3. Create a new Vite React project using your preferred method or tool.

Data Setup

4. Inside the App.js file, define an array named products inside the App component's function. Each element in the array should be an object representing a product, with the following properties:
   • name: A string representing the product's name.
   • price: A number representing the product's price.
   • quantity: A number representing the available quantity of the product.

Functions

5. Write a function named calculateTotalPrice inside the App component's function that takes a product object as a parameter and calculates and returns the total price for that product (price multiplied by quantity).

6. Write a function named printProductInfo inside the App component's function that takes a product object as a parameter and prints the following information to the console:

   • The product's name.
   • The product's price.
   • The product's quantity.
   • The product's total price (calculated using the calculateTotalPrice function).

React Component Development

7. Modify the JSX code in the App component to display the product information (name, price, quantity, and total price) in an appropriate format on the webpage.

8. Customize the styling of the webpage using CSS or a CSS-in-JS solution of your choice.

Git and GitHub

9. Commit and push your changes to the GitHub repository.

10. Take screenshots of the code in your App.js file and the web page displaying the product information.

11. Go to the GitHub repository's issues section and create a new issue.

12. In the issue's comment section, upload the screenshots of your code and the web page.

13. Include the GitHub repository URL in the comment as well.

Testing and Submission

14. Test your code with different scenarios and ensure that the output is correct.

15. Share the screenshots of your code and the web page in the issue's comment section of your GitHub repository. Make sure to include the GitHub repository URL in the comment.

Note: Feel free to use any additional JavaScript or React features or syntax to enhance your solution. Provide comments where necessary to explain your code.

[onsever]

Onurcan Sever Task 2b: JS Concepts II Github Link: https://github.com/onsever/js-concept-b

Grade :10

Code Screenshot:

Output Screenshot:

[bjornbaniya]

Grade :10

bjorn baniya task2b git: https://github.com/bjornbaniya/task2b.git

[GM-Frost]

Grade : 10

Nayan Task: 2b Git Repo: https://github.com/GM-Frost/JSConcept2b.git

[RoneshSingh]

Grade : 10

Annish https://github.com/RoneshSingh/js-2b

[shreeshakhadka]

Grade :10

shreesha khadka task 2 b https://github.com/shreeshakhadka/JSCONCEPT-2/tree/main/JSCONCEPT-2

[poudelg25]

Grade :10

Gopal Poudel

[ngawangsherpa]

Ngawang Sherpa Task 2b: JS Concepts II Github Link: https://github.com/ngawangsherpa/JSconcepts-2

[YashKharel19]

YASH KHAREL Task 2 b : JS Concepts II github: https://github.com/YashKharel19/JSConcepts2