[go: up one dir, main page]
Scribd
Upload
7 views6 pages

exe1_ENG (2)

The document provides instructions for a laboratory task in modern frontend web application development, specifically to create a simple calculator component in React. The task includes implementing basic mathematical operations, handling user input, and ensuring proper validation and error handling. The project must be submitted as a zipped archive, and any plagiarism will result in a failing grade.

Uploaded by

home7.elektronpochta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views6 pages

exe1_ENG (2)

The document provides instructions for a laboratory task in modern frontend web application development, specifically to create a simple calculator component in React. The task includes implementing basic mathematical operations, handling user input, and ensuring proper validation and error handling. The project must be submitted as a zipped archive, and any plagiarism will result in a failing grade.

Uploaded by

home7.elektronpochta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Modern frontend web application development - laboratory

Filip Rynkiewicz Marcin Daszuta


e-mail f.rynkiewicz@vizja.net e-mail m.daszuta@vizja.net
19th December 2024

Instructions
You will have 120 minutes to write code that must pass all the provided tests.

Do not create any new files in this project, and do not


modify anything outside the files in src/components.
Any changes in other files may lead to unsolvable errors.
All you need to do is install npm and Node.js, unpack the archive, and set up the
entire environment from the archive (using the command npm i).

The HTML tags (or JSX.IntrinsicElements), file names, and any other explicitly
specified information must match the instructions exactly; otherwise, the tests will
not be accepted.

Each test that passes equals 1 point. The point-to-grade mapping is listed in the
task description on MS Teams.

Submit your solution (entire project) as a zipped archive. Any other archive
format will not be checked.

Please remove the node modules folder from your submission.

1
Any attempt at plagiarism will result in a grade of 2, with no
option to resubmit tasks.

2
Running Tests
To run tests, use the command npm test in the terminal in the main project folder. This command
will run continuously, and any changes in the project files will automatically trigger the tests.

Figure 1: All tests passed

Figure 2: No tests passed

3
Figure 3: Some tests passed

Tasks
The goal is to implement a simple calculator component that can perform basic mathematical oper-
ations: addition, multiplication, and division. The calculator should accept input for two numbers
and perform the selected operation. The component must also handle errors such as invalid input
(unsupported format, missing numbers) and division by zero.

Step-by-Step Instructions
All code must be placed in the file src/components/Calculator.jsx.

Tasks
Task 1
Create a component named Calculator in the file src/components/Calculator.jsx and export it as
default.

Task 2
Create the following states in the application:
• num1: The first number entered by the user.
• num2: The second number entered by the user.
• result: The result of the operation (addition, multiplication, division).
State Initialization:
• num1 and num2 should initially be empty strings.
• result should initially be set to null to indicate no result yet.

Task 3
• Create two input fields where the user can enter numbers:
– One input field for num1 (first number). Use the placeholder Enter first number.

4
– One input field for num2 (second number). Use the placeholder Enter second number.
• Ensure both input fields accept only numeric data (HTML type number).

Event Handling Functions: Create the following functions:


• handleNum1Change: This function will update the num1 state when the user types in the
first input field.
• handleNum2Change: This function will update the num2 state when the user types in the
second input field.

Task 4
• Add buttons for basic mathematical operations:
– Add
– Multiply
– Divide
• Each button will trigger the corresponding operation when clicked. The buttons must contain
the specified strings.

Event Handling Functions:


• handleAdd: This function will perform addition on num1 and num2.
• handleMultiply: This function will perform multiplication on num1 and num2.
• handleDivide: This function will perform division on num1 and num2 and handle division by
zero.

Task 5
• Addition Operation (handleAdd):
– Convert num1 and num2 to numbers (ensure the input is valid).
– Set result to the sum of num1 and num2.
• Multiplication Operation (handleMultiply):
– Convert num1 and num2 to numbers.
– Set result to the product of num1 and num2.
• Division Operation (handleDivide):
– Convert num1 and num2 to numbers.
– Check if num2 equals 0:
∗ If num2 equals zero, set result to "Cannot divide by zero".
– Otherwise, set result to the quotient of num1 divided by num2.

5
• Validation:
– Ensure both num1 and num2 are valid numbers before performing operations.
– If any input is invalid (empty or non-numeric), set result to "Please enter both
numbers".

Task 6
• Input Validation:
– Before performing any operation, check if both num1 and num2 are valid numbers.
– If not, set result to "Please enter both numbers".
• Division by Zero:

– When the user clicks the Divide button, check if num2 equals zero.
– If num2 equals zero, set result to "Cannot divide by zero".

You might also like