Scribd
Upload
35 views6 pages

Assignment React Prescient Technologies Vivek Dhande

Uploaded by

Vivek Dhande
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
35 views6 pages

Assignment React Prescient Technologies Vivek Dhande

Uploaded by

Vivek Dhande
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

1.

Simple calculator which will add two input number and display result on page

Code :

Link of codesandbox : https://codesandbox.io/p/sandbox/program-1-


2g9sj2?file=%2Fsrc%2Findex.mjs

//Index.html

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sandbox</title>
<meta charset="UTF-8" />
</head>

<body>
<div class="calculator" style="display: inline-grid">
<div>
<label for="">Number 1 </label>
<input type="number" id="num1" placeholder="Number 1" />
</div>
<div>
<label for="">Number 2 </label>
<input type="number" id="num2" placeholder="Number 2" />
</div>
<div><button id="addButton">+</button></div>
<div>
<label for="">Result </label>
<input type="number" id="result" disabled />
</div>
<div id="error"></div>
</div>
<script src="./index.mjs" type="module"></script>
</body>
</html>

// index.js

import "./styles.css";
const addButton = document.getElementById("addButton");
const num1Input = document.getElementById("num1");
const num2Input = document.getElementById("num2");

addButton.addEventListener("click", function () {
try {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);

if (isNaN(num1) || isNaN(num2)) {
throw new Error("Invalid input. Please enter valid numbers.");
}
const result = num1 + num2;
const resultDisplay = document.getElementById("result");

resultDisplay.value =
Number.isInteger(num1) && Number.isInteger(num2)
? result
: result.toFixed(2);
} catch (error) {
const resultDisplay = document.getElementById("error");
resultDisplay.textContent = `Error: ${error.message}`;
}
});

function resetErr(params) {
const resultDisplay = document.getElementById("error");
resultDisplay.textContent = ``;
}

num1Input.addEventListener("keyup", resetErr);
num2Input.addEventListener("keyup", resetErr);
2. Create HTML page to Accept First Name and Last Name of user. When the input field
gets focus then change its background color and when focus goes out it should change
to previous color.

Code :

Link of codesandbox : https://codesandbox.io/p/sandbox/program-2-


jd5r9j?file=%2Fsrc%2Findex.html

// Index.html

<!DOCTYPE html>
<html>
<head>
<title>Program 2</title>
<meta charset="UTF-8" />
</head>

<body>
<div class="parentDiv" style="display: inline-grid">
<div>
<label for="">Enter your firstname </label>
<input type="text" id="firstName" class="input-field" />
</div>
<div>
<label for="">Enter your lastname </label>
<input type="tex" id="lastName" class="input-field" />
</div>
</div>
<script src="./index.mjs" type="module"></script>
</body>
</html>
//Index.js

import "./styles.css";
document.querySelectorAll(".input-field").forEach((input) => {
input.addEventListener("focus", (event) => {
event.target.style.backgroundColor = "#pink";
});
input.addEventListener("blur", (event) => {
event.target.style.backgroundColor = "";
});
});

3. Create HTML page to display any image on webpage with some specific weight and
height. When user hover mouse over it then it should scale that image with 1.5X factor.

Code :

Link of codeSandbox : https://codesandbox.io/p/sandbox/program-3-


wkth7v?file=%2Fsrc%2Findex.html

// Index.html

<!DOCTYPE html>
<html>
<head>
<title>Program 3</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="image-container">
<img
src="https://53.fs1.hubspotusercontent-
na1.net/hub/53/hubfs/image8-2.jpg?width=893&height=600&name=image8-
2.jpg"
alt="Sample Image"
/>
</div>
<script src="./index.mjs" type="module"></script>
</body>
</html>
//Style.css

body {
font-family: sans-serif;
}

.image-container {
width: 300px; /* specify desired width */
height: 200px; /* specify desired height */
overflow: hidden; /* hide any overflow */
}
.image-container img {
width: 100%;
height: 100%;
transition: transform 0.3s ease;
}
.image-container img:hover {
transform: scale(1.5);
}

4. Write simple async function which takes two number as input and return addition of
it in promise. This function should validate input argument for number if not then it
should throw error.
Call this function
• With valid number and display result (not promise) on console.
• With invalid argument and display error messages

Code

Link of codeSandbox : https://codesandbox.io/p/sandbox/program-4-


nrthng?file=%2Fsrc%2Findex.mjs

async function addNumbers(a, b) {


return new Promise((resolve, reject) => {
if (typeof a !== "number" || typeof b !== "number") {
reject(new Error("Both arguments must be numbers"));
} else {
resolve(a + b);
}
});
}
// Function to handle and display result
async function handleAddition(a, b) {
try {
const result = await addNumbers(a, b);
console.log(`The sum of ${a} and ${b} is: ${result}`);
} catch (error) {
console.error(`Error: ${error.message}`);
}
}

handleAddition(1, 2);

// Call the function with invalid arguments


handleAddition(3, "Five");

You might also like