Task 1: Budget allocation Validation accepts only number value.

Provide screenshot
budget_allocation.png.

1. Input Validation: When users submit budget allocation data, ensure that the input field only accepts numerical
values. You can achieve this by using input masks, regular expressions, or built-in validation functions depending on
the programming language or framework you're using.

2. Client-Side Validation: Implement client-side validation using JavaScript to validate the input before submitting it to
the server. This will provide immediate feedback to users if they enter non-numeric characters.

3. Server-Side Validation: Even though client-side validation is important for user experience, always perform server-
side validation as well. This adds an extra layer of security and ensures that no malicious data is submitted to the
server.

4. Error Handling: If the validation fails, provide clear error messages to the user indicating that only numerical values
are allowed for budget allocation. This helps users understand why their input was rejected and how to correct it.

5. Testing: Thoroughly test the validation mechanism with various scenarios including valid and invalid inputs to
ensure its robustness and accuracy.

By implementing these steps, you can ensure that only numerical values are accepted for budget allocation,
improving data integrity and user experience.

Task 2: Budget allocation validation does not allow more than remaining
budget. Provide screenshot budget_allocation_error message.png.

To implement budget allocation validation in a React application, preventing allocations exceeding the remaining
budget, you can follow these steps:

1. **State Management**: Set up state variables to track the total budget, allocated budget, proposed allocation,
and remaining budget.

```javascript

import React, { useState } from 'react';

function BudgetAllocation() {
const [totalBudget, setTotalBudget] = useState(1000);

const [allocatedBudget, setAllocatedBudget] = useState(600);

const [proposedAllocation, setProposedAllocation] = useState(0);

const remainingBudget = totalBudget - allocatedBudget;

// Function to handle proposed allocation change

const handleAllocationChange = (event) => {

const newValue = parseInt(event.target.value);

if (!isNaN(newValue)) {

setProposedAllocation(newValue);

};

// Function to handle budget allocation submission

const handleAllocationSubmit = () => {

if (proposedAllocation <= remainingBudget) {

// Update allocated budget if proposed allocation is valid

setAllocatedBudget(allocatedBudget + proposedAllocation);

// Clear proposed allocation input

setProposedAllocation(0);

} else {

alert("Error: Proposed allocation exceeds remaining budget.");

};

return (

<div>

<p>Total Budget: ${totalBudget}</p>

<p>Allocated Budget: ${allocatedBudget}</p>

<p>Remaining Budget: ${remainingBudget}</p>

<input

type="number"

value={proposedAllocation}

onChange={handleAllocationChange}
 />

<button onClick={handleAllocationSubmit}>Allocate Budget</button>

</div>

);

export default BudgetAllocation;

```

In this example, the `BudgetAllocation` component maintains state variables for the total budget, allocated budget,
and proposed allocation. It calculates the remaining budget dynamically. The `handleAllocationChange` function
updates the proposed allocation as the user types, ensuring it's a valid integer value. The `handleAllocationSubmit`
function checks if the proposed allocation is within the remaining budget before updating the allocated budget.

2. **Rendering**: Render the component where you want to display the budget allocation functionality.

```javascript

import React from 'react';

import BudgetAllocation from './BudgetAllocation';

function App() {

return (

<div>

<h1>Budget Allocation Management</h1>

<BudgetAllocation />

</div>

);

export default App;

```

By following these steps, you can implement budget allocation validation in a React application, ensuring that
allocations do not exceed the remaining budget.
Task 3: Editable budget value shows increment and decrement button. Provide
screenshot budget_value.png.

1. **HTML Structure**: Create an input field for the budget value and two buttons for increment and decrement.

```html

<label for="budget">Budget:</label>

<input type="number" id="budget" value="0">

<button id="increment">+</button>

<button id="decrement">-</button>

```

2. **JavaScript Functionality**: Write JavaScript functions to handle the increment and decrement actions.

```javascript

// Get references to HTML elements

const budgetInput = document.getElementById('budget');

const incrementButton = document.getElementById('increment');

const decrementButton = document.getElementById('decrement');

// Add event listeners to buttons

incrementButton.addEventListener('click', () => {

// Increment budget value

budgetInput.value = parseInt(budgetInput.value) + 1;

});

decrementButton.addEventListener('click', () => {

// Decrement budget value only if greater than 0

if (parseInt(budgetInput.value) > 0) {

budgetInput.value = parseInt(budgetInput.value) - 1;

});

```

3. **Styling (Optional)**: Apply CSS to style the buttons and input field as needed to match your design preferences.
```css

button {

padding: 5px 10px;

cursor: pointer;

background-color: #007bff;

color: #fff;

border: none;

border-radius: 3px;

margin-left: 5px;

input[type="number"] {

width: 100px;

padding: 5px;

margin-right: 5px;

```

4. **Testing**: Test the functionality to ensure that clicking the increment button increases the budget value and
clicking the decrement button decreases it (if it's greater than 0).

By following these steps, you can create an editable budget value with increment and decrement buttons for easy
adjustment by users.

Task 4: Editable budget value shows value cannot exceed 20000. Provide screenshot
budget_not_exceeding.png.

To ensure that the editable budget value in a React application does not exceed $20,000, you can implement the
following steps:

1. **State Management**: Set up state variables to manage the budget value and any error message related to
exceeding the limit.
```jsx

import React, { useState } from 'react';

function BudgetLimit() {

const [budget, setBudget] = useState(0);

const [error, setError] = useState('');

// Function to handle budget value change

const handleBudgetChange = (event) => {

const newValue = parseInt(event.target.value);

if (!isNaN(newValue) && newValue <= 20000) {

setBudget(newValue);

setError('');

} else {

setBudget(0); // Reset budget to 0 if exceeded the limit

setError('Budget cannot exceed $20,000.');

};

return (

<div>

<label htmlFor="budget">Budget:</label>

<input

type="number"

id="budget"

value={budget}

onChange={handleBudgetChange}

/>

{error && <p style={{ color: 'red' }}>{error}</p>}

</div>

);

export default BudgetLimit;

In this code:

- The `BudgetLimit` component manages the budget value state and any error message related to exceeding the
limit.

- The `handleBudgetChange` function updates the budget value as the user types. If the value exceeds $20,000, it
resets the budget to 0 and sets an error message.

2. **Rendering**: Render the component where you want to display the editable budget value.

```jsx

import React from 'react';

import BudgetLimit from './BudgetLimit';

function App() {

return (

<div>

<h1>Budget Management</h1>

<BudgetLimit />

</div>

);

export default App;

```

By implementing these steps, you ensure that the editable budget value in your React application cannot exceed
$20,000. If the user attempts to enter a value higher than the limit, it resets to 0 and displays an error message.
Task 5: Editable budget value shows value cannot be lower than the spending. Provide
screenshot budget_morethan_spending.png.

To ensure that the editable budget value in a React application cannot be lower than the spending, you can
implement the following steps:

1. **State Management**: Set up state variables to manage the budget value, spending, and any error message
related to the budget being lower than the spending.

```jsx

import React, { useState } from 'react';

function BudgetSpending() {

const [budget, setBudget] = useState(0);

const [spending, setSpending] = useState(0);

const [error, setError] = useState('');

// Function to handle budget value change

const handleBudgetChange = (event) => {

const newValue = parseInt(event.target.value);

if (!isNaN(newValue) && newValue >= spending) {

setBudget(newValue);

setError('');

} else {

setError('Budget cannot be lower than spending.');

};

// Function to handle spending value change

const handleSpendingChange = (event) => {

const newValue = parseInt(event.target.value);

setSpending(newValue);

};

return (

<div>
 <label htmlFor="budget">Budget:</label>

<input

type="number"

id="budget"

value={budget}

onChange={handleBudgetChange}

/>

<br />

<label htmlFor="spending">Spending:</label>

<input

type="number"

id="spending"

value={spending}

onChange={handleSpendingChange}

/>

{error && <p style={{ color: 'red' }}>{error}</p>}

</div>

);

export default BudgetSpending;

```

In this code:

- The `BudgetSpending` component manages the budget value, spending value, and any error message related to the
budget being lower than the spending.

- The `handleBudgetChange` function updates the budget value as the user types. If the value is lower than the
spending, it sets an error message.

- The `handleSpendingChange` function updates the spending value.

2. **Rendering**: Render the component where you want to display the editable budget and spending values.

```jsx

import React from 'react';

function App() {

return (

<div>

<h1>Budget and Spending Management</h1>

<BudgetSpending />

</div>

);

export default App;

```

By implementing these steps, you ensure that the editable budget value in your React application cannot be lower
than the spending. If the user attempts to enter a value lower than the spending, it displays an error message.

Task 6: Dropdown to change currency Provide screenshot curreny_dropdown.png.

To create a dropdown to change currency in a React application, you can follow these steps:

1. **State Management**: Set up state variables to manage the selected currency value.

2. **Dropdown Options**: Define an array of currency options to populate the dropdown.

3. **Event Handling**: Implement a function to handle changes in the selected currency.

Here's how you can implement this:

```jsx

import React, { useState } from 'react';

// State variable to manage selected currency

const [selectedCurrency, setSelectedCurrency] = useState('USD');

// Array of currency options

const currencies = ['USD', 'EUR', 'GBP', 'JPY', 'AUD'];

// Function to handle currency change

const handleCurrencyChange = (event) => {

setSelectedCurrency(event.target.value);

};

return (

<div>

<label htmlFor="currency">Select Currency:</label>

<select id="currency" value={selectedCurrency} onChange={handleCurrencyChange}>

{currencies.map(currency => (

<option key={currency} value={currency}>{currency}</option>

))}

</select>

<p>Selected Currency: {selectedCurrency}</p>

</div>

);

export default CurrencyDropdown;

```

In this code:

- The `CurrencyDropdown` component manages the selected currency state.

- The `currencies` array contains the available currency options.

- The `handleCurrencyChange` function updates the selected currency when the user selects a different option from
the dropdown.
You can then use this `CurrencyDropdown` component in your application wherever you need to allow users to
change the currency.

Task 7: Currency prefix to the Change Allocation textbox is added. Provide screenshot
budget_allocation_with_currency.png.

To add a currency prefix to the "Change Allocation" textbox in a React application, you can modify the input field to
include the currency symbol as a prefix. Here's how you can implement this:

```jsx

import React, { useState } from 'react';

function ChangeAllocation() {

// State variable to manage the allocation amount

const [allocation, setAllocation] = useState('');

// Function to handle allocation change

const handleAllocationChange = (event) => {

const newValue = event.target.value;

// Ensure only numeric values are entered

if (!isNaN(newValue) || newValue === '') {

setAllocation(newValue);

};

return (

<div>

<label htmlFor="allocation">Change Allocation:</label>

<input

type="text"

id="allocation"

value={allocation}
 onChange={handleAllocationChange}

placeholder="$"

/>

</div>

);

export default ChangeAllocation;

```

In this code:

- The `ChangeAllocation` component manages the allocation amount state.

- The `handleAllocationChange` function updates the allocation amount as the user types. It ensures only numeric
values are entered, and it doesn't prevent the user from typing non-numeric characters, allowing the currency
symbol to be displayed as a prefix.

You can then use this `ChangeAllocation` component in your application wherever you need a textbox with a
currency prefix for allocation changes.

Task 8: Currency prefix to the Budget Value textbox is added. Provide screenshot
budget_value_with_currency.png.

To add a currency prefix to the "Budget Value" textbox in a React application, you can modify the input field to
include the currency symbol as a prefix. Here's how you can implement this:

```jsx

import React, { useState } from 'react';

function BudgetValue() {

// State variable to manage the budget value

const [budget, setBudget] = useState('');

// Function to handle budget value change

const newValue = event.target.value;

// Ensure only numeric values are entered

if (!isNaN(newValue) || newValue === '') {

setBudget(newValue);

};

return (

<div>

<label htmlFor="budget">Budget Value:</label>

<input

type="text"

id="budget"

value={budget}

onChange={handleBudgetChange}

placeholder="$"

/>

</div>

);

export default BudgetValue;

```

In this code:

- The `BudgetValue` component manages the budget value state.

- The `handleBudgetChange` function updates the budget value as the user types. It ensures only numeric values are
entered, and it doesn't prevent the user from typing non-numeric characters, allowing the currency symbol to be
displayed as a prefix.

You can then use this `BudgetValue` component in your application wherever you need a textbox with a currency
prefix for entering the budget value.
Task 9: Change event of the currency has been implemented. dropdown. Provide
screenshot currency_change.png.

To implement the change event of the currency dropdown in a React application, you need to modify the component
to handle the selection change. Here's how you can achieve this:

```jsx

import React, { useState } from 'react';

function CurrencyDropdown() {

// State variable to manage selected currency

const [selectedCurrency, setSelectedCurrency] = useState('USD');

// Array of currency options

const currencies = ['USD', 'EUR', 'GBP', 'JPY', 'AUD'];

// Function to handle currency change

const handleCurrencyChange = (event) => {

setSelectedCurrency(event.target.value);

// Perform any actions you want to execute when currency changes

console.log(`Selected currency: ${event.target.value}`);

};

return (

<div>

<label htmlFor="currency">Select Currency:</label>

<select id="currency" value={selectedCurrency} onChange={handleCurrencyChange}>

{currencies.map(currency => (

<option key={currency} value={currency}>{currency}</option>

))}

</select>
 </div>

);

export default CurrencyDropdown;

```

In this code:

- The `CurrencyDropdown` component manages the selected currency state.

- The `handleCurrencyChange` function updates the selected currency when the user selects a different option from
the dropdown.

- Inside the `handleCurrencyChange` function, you can perform any additional actions you want to execute when the
currency changes. In this example, it logs the selected currency to the console, but you can replace it with any
desired logic.

You can then use this `CurrencyDropdown` component in your application wherever you need a dropdown to change
the currency, and the change event will be handled accordingly.

Task 10: Decrease button showing the working of the decrease button. Provide
screenshot mktgplus10.png.

To demonstrate the working of a decrease button in a React application, you can create a component with a button
that decrements a value when clicked. Here's how you can implement this:

```jsx

import React, { useState } from 'react';

function DecreaseButton() {

// State variable to manage the value

const [value, setValue] = useState(0);

// Function to handle the decrease button click

setValue(prevValue => prevValue - 1);

};

return (

<div>

<p>Value: {value}</p>

<button onClick={handleDecrease}>Decrease</button>

</div>

);

export default DecreaseButton;

```

In this code:

- The `DecreaseButton` component manages the value state.

- The `handleDecrease` function decrements the value by 1 when the "Decrease" button is clicked.

- The current value is displayed in a paragraph element (`<p>`).

Task 11: Increase button showing the working of the increase button. Provide
screenshot itminus10.png.

To demonstrate the working of an increase button in a React application, you can create a component with a button
that increments a value when clicked. Here's how you can implement this:

```jsx

import React, { useState } from 'react';

function IncreaseButton() {
 // State variable to manage the value

const [value, setValue] = useState(0);

// Function to handle the increase button click

const handleIncrease = () => {

setValue(prevValue => prevValue + 1);

};

return (

<div>

<p>Value: {value}</p>

<button onClick={handleIncrease}>Increase</button>

</div>

);

export default IncreaseButton;

```

In this code:

- The `IncreaseButton` component manages the value state.

- The `handleIncrease` function increments the value by 1 when the "Increase" button is clicked.

- The current value is displayed in a paragraph element (`<p>`).