Scribd
Upload
8 views

lab4

The document outlines a final project for creating an enhanced budget allocation application using React. It includes detailed instructions for cloning a Git repository, launching the app, and implementing various features such as budget validation, editable budget values, currency dropdown, and event handling. The project requires taking screenshots of specific functionalities as proof of completion.

Uploaded by

Adonay Yirga
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
8 views

lab4

The document outlines a final project for creating an enhanced budget allocation application using React. It includes detailed instructions for cloning a Git repository, launching the app, and implementing various features such as budget validation, editable budget values, currency dropdown, and event handling. The project requires taking screenshots of specific functionalities as proof of completion.

Uploaded by

Adonay Yirga
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/ 7

Final Project: Enhanced Budget Allocation

Application

Estimated Time: 120 minutes


Note: Though this lab is split into multiple parts, it is highly recommended it is all completed in
one sitting as the project environment may not be persisted. If for any reason that is not
possible, please push your changes to git so that the changes are copied to your remote
repository and you can start where you left.

Pre-requisite:
You need to complete Practice project before you start with the final project. That will be the
base code on which you will buid this React application.

Part A: Git clone the Git repository to have the react code
you need to start
1. Open a terminal window by using the menu in the editor: Terminal > New Terminal.

2. Clone the repository you cloned, edited and git pushed in the practice project with all the
components added by running the command given below:
1. 1

1. git clone <your_repo_name>


Copied!

3. This will clone the repository with budget allocation app files in your home directory in
the lab environment. Check the same with the following command.
1. 1

1. ls

Copied!

4. Change to the project directory and check its contents.


1. 1

1. cd ejtos-react_budget_app && ls

Copied!

Note: Remove the ‘node_modules’ folder in the main project and directories before
running npm install command to install the packages. This is necessary to ensure
that all package installation commands run correctly.

5. All packages are needed to be installed are listed in package.json. Run npm install -s, to
install and save those packages.
1. 1

1. npm install -s

Copied!

Part B: Launch and view your react app on the browser


1. Make sure you are in the ejtos-react_budget_app directory and run the server using the
following command.
1. 1

1. npm start

Copied!

2. Click on the Skills Network button on the left, it will open the “Skills Network Toolbox”.
Then click the Other then Launch Application. From there you should be able to enter the
port 3000.
Part C: Enhancement of the Budget Allocation Application
Task 1: Budget allocation Validation

Add validation to the existing budget allocation component.

It should accept only number value. Take a screenshot and save it as


budget_allocation.png.

The value should not exceed the remaining budget. Take a screenshot and save it as
budget_allocation_error message.png.
Task 2: Editable budget value

Update the code to make Budget editable with option to increase and decrease its value by 10.
Take a screenshot and save it as budget_value.png.

Set the upper limit value to 20,000. Take a screenshot of error message when it is more than
20000 and save it as budget_not_exceeding.png.

It should not allow for the budget to be lower than the spending, as that is already allocated.
Take a screenshot of error message when it is lower than spending and save it as
budget_morethan_spending.png.
Task 3: Dropdown to change currency

Update the code to change the currency along with the drop-down option. Add these four
currencies: $ Dollar,£ Pound,€ Euro,₹ Ruppee. Take a screenshot and save it as
curreny_dropdown.png.

Add a Currency label in the appropriate place.


Stylize the dropdown (Use image provided for refernce).

Task 4: Currency prefix to the Change allocation textbox.

Add a currency prefix to the Change allocation textbox. Take a screenshot and save it as
budget_allocation_with_currency.png.

Task 5: Currency prefix to the Budget value textbox.

Add a currency prefix to the Budget Value textbox. Take a screenshot and save it as
budget_value_with_currency.png.

Task 6: Change event of the currency dropdown

Add event handler to the dropdown for Currency component change event. On change of the
dropdown value, all the currency representation on the screen changes, in the following
places.

Budget
Remaining
Spent so far
Allocated Budget
Change Allocation
Change the currecy in the dropdown from £ to another symbol and take a screenshot of the
whole page reflecting the changes and save it as currency_change.png.

Task 7: Decrease and Increase Buttons

Add a decrease button, like the increase button you added in the practice project, to all the
departments in the allocation, beside increase by 10 as shown in the screenshot. Stylize the
button using these images. Styling of buttong should be done according to the reference
provided.

Click the plus button next to Marketing department and show that the the value
increases by 10. Take a screenshot and save it as mktgplus10.png

Click the minus button next to IT and show that the the value decreases by 10. Take a
screenshot and save it as itminus10.png
Your final React budget allocation application page should look like this:

Congratulations! You have completed this Final Project lab and know how to create a budget
allocation application.

Change Log

Date Version Changed by Change Description


2022-08-31 1.0 Pallavi Rai Initial version created

© IBM Corporation 2022. All rights reserved.

You might also like