Scribd
Upload
13 views

Assignment 2

Uploaded by

sarimane07
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

Assignment 2

Uploaded by

sarimane07
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Surabhi Mane

Assignment 2

1) 1) Create a project , where you would provide two input boxes in html file, each input box
takes input of a number, and create a '+' button and when you click on it, you must calculate
the sum of the two numbers from the input box and display it using "innerText" .

HTML CODE
1)<!DOCTYPE html>
2) <html>
3) <head>
4) <title>Surabhi's page</title>
5) </head>
6) <body>
7) <h1 id="title">YOUR ANSWER APPEARS HERE</h1>
8)
9) <input id="inputbox1" name="num1" placeholder="enter num1">
10)<input id="inputbox2" name="num2" placeholder="enter num2">
11)
12)<br>
13)<button id="btn">ADD</button>
14)
15) </body>
16) <script src='script.js'> </script>
17)
18)</html>
JS CODE

const header= document.getElementById("title");


const button = document.getElementById("btn");
const in1= document.getElementById("inputbox1");
const in2 = document.getElementById("inputbox2");

const displayUsername=()=>{

header.innerText = parseInt(in1.value) + parseInt(in2.value);

button.addEventListener('click', displayUsername);

Output:

10
Surabhi Mane
5 5

ADD

2)
import React from "react";

function App() {
const handleClick = () => {
const name = prompt("Please enter your name:");
if (name) {
console.log(`Entered name: ${name}`);
}
};

return (
<div>
<h1>Welcome to the Prompt Function Demo in React</h1>
<button onClick={handleClick}>Click here to start</button>
</div>
);
}

export default App;

OUTPUT:

Welcome to the Prompt Function Demo in


React
Click here to start(button)

3) getElementsByClassName():
The getElementsByClassName() method is a built-in function in JavaScript that is available on the document object in
the browser. It allows you to retrieve a collection of elements that have a specific class name. This method returns a
live HTMLCollection of elements that match the specified class name.

querySelector():
The querySelector() method is also available on the document object in the browser, and it allows you to select
elements from the document using a CSS selector. It returns the first element that matches the specified selector.
Surabhi Mane

You might also like