Scribd
Upload
14 views

JS (Dom)

Uploaded by

kumar5mce
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

JS (Dom)

Uploaded by

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

👾

JavaScript (DOM)
1. What is DOM ?

Ans

DOM stands Document Object Model.

The Document Object Model is a Platform and Language-Neutral-Interface that allows the program to
dynamically Access, Update and Style the content structure of the web page. Whenever a Web Page is loaded,
Browser creates a Document Object Model of the Web page. With the Object Model, JavaScript will gets all the
power to create dynamic HTML.

Document —> HTML file

Object —> Tags, Element, Node

Model —> Layout , Structure

The HTML DOM model is constructed as a tree of object :

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Java</h1>
<h1 id="heading">JS</h1>
<h1>NodeJS</h1>
</body>
</html>

2. What is DOM Manipulation ?

Ans

DOM Manipulation is when we use JavaScript to Add, Remove and Modify the HTML Elements in the web page
is commonly known as DOM Manipulation or Web Development.

2. What are the DOM Selectors ?

Ans

DOM Selectors Selects the HTML Elements within a Document using JavaScript.

We have, 5 Types of DOM Selectors are there:-

JavaScript (DOM) 1
document.getElementById()

getElementById() is a Function which is used to Target and Returns only one particular HTML Element
based on Id value.

Example 1

<body>
<h1 id="heading1">java</h1>
<h1 id="heading2">js</h1>
<h1 id="heading3">node js</h1>
<h1>react hs</h1>
<script>
var ele=document.getElementById("heading3")
console.log(ele)
ele.style.border="2px dotted red"
</script>
</body>
-------------OUTPUT-----------------------
node js

Example 2

<body>
<h1 id="heading">java</h1>
<h1 id="heading">js</h1>
<h1 id="heading">node js</h1>
<h1>react hs</h1>
<script>
var ele=document.getElementById("heading")
console.log(ele)
ele.style.border="2px dotted red"
</script>
</body>
------------------OUTPUT------------------------
java

with respect to above code both heading contains the same id value, so, hence the function targets the first
occurring element with the matching id value.

JavaScript (DOM) 2
Example 3 (Online Aptitude like Web Pag)

<body>
<h2> Select PI value </h2>
<input type="radio" name="r1" id="input1" value="3.78">3.78
<br><br>
<input type="radio" name="r1" id="input2" value="3.14">3.14
<br><br>
<input type="radio" name="r1" id="input3" value="3.19">3.19
<br><br>
<input type="radio" name="r1" id="input4" value="3.71">3.71
<br><br>
<button onclick="sub()">Submit</button>
<script>
function sub()
{
var x1=document.getElementById("input1");
var x2=document.getElementById("input2");
var x3=document.getElementById("input3");
var x4=document.getElementById("input4");
if(x1.checked==true)
{
alert("Anwser Selected id: "+x1.value)
} else if(x2.checked==true)
{
alert("Anwser Selected id: "+x2.value)
}else if(x3.checked==true)
{
alert("Anwser Selected id: "+x3.value)
}
else if(x4.checked==true)
{
alert("Anwser Selected id: "+x4.value)
}else{
alert("no anwser is seleceted")
}
}
</script>
</body>

document.getElementsByClassName()

getElementsByClassName() is a Function which is used to Target and Returns the HTML Elements based
on Class name. It Returns HTMLCollection, for accessing, We will use Index Position.

Example

JavaScript (DOM) 3
<body>
<h1 id="blue">1. Java</h1>
<h1 class="orenge">2. Java Script</h1>
<h1 class="orenge">3. Spring</h1>
<h1 class="orenge">4. React</h1>
<h1 class="blue">5. HTML</h1>
<button onclick="color()">orenge</button>
<script>
function color()
{
var ele=document.getElementsByClassName("orenge");
console.log(ele)
for(i=0; i<=2; i++)
{
ele[i].style.color="orange";
}
}
</script>
</body>

document.getElementsByTagName()

getElementsByTagName() is a Function which is used to Target and Returns the HTML Elements based on
Tag Name. It Returns HTMLCollection of an object. And for accessing, We will use Index Position.

Example 1

<body>
<h1>java</h1>
<h1 id="heading">js</h1>
<h1>node js</h1>
<script>
var tag=document.getElementsByTagName("h1");
console.log(tag);
</script>
</body>
---------OUTPUT----------------
Output: collection of object

with respect to above code we are targeting the heading element based on the tag name.

JavaScript (DOM) 4
Example 2

<body>
<h1>java</h1>
<h1 id="heading">js</h1>
<h1>node js</h1>
<button onclick="x()">change</button>
<script>
function x()
{
var tag=document.getElementsByTagName("h1")
console.log(tag)
tag[0].style.color="orange"
tag[1].style.color="blue"
tag[2].style.color="green"
}
</script>
<body>

with respect to above code we are targeting the heading element using get elements by tag name function.
This function targets the selected elements and stores it in Array like object so, hence to access we have to
use index position.

Example 3

<body>
<h1>java</h1>
<h1 id="heading">js</h1>
<h1>node js</h1>
<button onclick="x()">change</button>
<script>
var ele=document.getElementsByTagName("*");
console.log(ele);
</script>
<body>

the above code target all the elements present inside the DOM tree.

document.querySelector()

querySelector() is a Function which is used to Target and Returns the HTML Element based on Tag name, Id
value or Class value. In which, which ever the input is available first. that is, Tag name, Id value, Class
value. It will Target and Returns only one Particular HTML Element of that value.

Example 1

JavaScript (DOM) 5
<body>

<h1>Document Object Model</h1>


<h1 id="js">JJava script</h1>
<h1 class="fw">Spring</h1>
<h1 class="fw">Hibernet</h1>

<script>
var ele1 = document.querySelector("h1,#js,.fw");
var ele2 = document.querySelector("#js,h1,.fw");
var ele3 = document.querySelector(".fw,h1,#js");

console.log(ele1);
console.log(ele2);
console.log(ele3);

ele1.style.color="red"
ele2.style.color="red"
ele3.style.color="red"
</script>

</body>

Example 2

<body>

<h1>Document Object Model</h1>


<h1 id="js">Java script</h1>
<h1 class="fw">Spring</h1>
<h1 class="fw">Hibernet</h1>

<script>
var ele1=document.querySelector(".fw");
var ele2=document.querySelector("h1");
var ele3=document.querySelector("#js");

console.log(ele1);
console.log(ele2);
console.log(ele3);

ele1.style.color="blue"
ele2.style.color="red"
ele3.style.color="green"
</script>

</body>

JavaScript (DOM) 6
document.querySelectorAll()

querySelectorAll() is a Function which is used to Target and Returns the HTML Elements based Tag name,
Id value or Class value. In which, which ever the input is available first. that is, Tag name, Id value or Class
value. It will Target and Returns all the HTML Elements of that value. It Returns NodeList object. And for
accessing, We will use Index Position.

Example 1

<body>
<h1>Document Object Model</h1>
<h1 id="js">Java script</h1>
<h1 class="fw">Spring</h1>
<h1 class="fw">Hibernet</h1>

<script>
var ele1 = document.querySelectorAll("h1");
console.log(ele1)

var ele2 = document.querySelectorAll("#js");


console.log(ele2)

var ele3 = document.querySelectorAll(".fw");


console.log(ele3)

ele1[0].style.color="red"
ele1[1].style.color="blue"
ele1[2].style.color="yellow"
ele1[3].style.color="purple"
</script>

</body>

3. Difference between querySelector() and querySelectorAll() ?

Ans

querySelector() returns a single object with the first HTML element that matches the 'selectors', but
querySelectorAll() returns an array of objects with all the HTML elements that match the 'selectors'.

4. Difference between getElementsByTagName(), getElementByld() and getElementsByClassName() ?

Ans

getElementByld()

This function targets and returns the elements (Object Collection) based on Tag name. If the element is not found, it
returns null.

getElementsByTagName()

This function targets and returns the elements (Object Collection) based on Tag name

JavaScript (DOM) 7
getElementsByClassName()

This function targets and returns the elements (Object Collection) based on Class name

5. How to Find all the Tags in HTML ?

Ans

Use the getElementsByTagName() functon and pass asterisk symbol * as an argument

6. What are Advance Selectors ?

Ans

appendChild()

appendChild() is a function which is used to insert an Element inside another Element as last child.

Example

<body>
<script>
var tag=document.createElement("h1")
tag.textContent="HTML"
tag.id="js"
tag.className="jw"
tag.style.border="3px solid red"
tag.style.textAlign="center"
console.log(tag)
document.body.appendChild(tag)

var tag2=document.createElement("div")
tag2.textContent="Div tag"
console.log(tag2)
document.body.appendChild(tag2)
</script>
</body>

7. How to write HTML tags in JavaScript ?

Ans

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button onclick="x()">Add tags</button>
<script>
function x(){
var tag=document.createElement("h1")
tag.textContent="document object model"
document.body.appendChild(tag)
tag.style.textAlign="center"
tag.style.backgroundColor="aqua"

var div=document.createElement("div")
div.innerHTML="this is java script div tag"
document.body.appendChild(div)
div.style.border="2px solid black"
div.style.fontStyle="italic"
div.style.textAlign="center"
div.style.backgroundColor="orange"
}
</script>

JavaScript (DOM) 8
</body>
</html>

Example 2

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ul>
<li>js</li>
<li>node</li>
<li>react</li>
<li>java</li>
</ul>
<script>
var ul=document.createElement("ul")

var li1=document.createElement("li")
var li2=document.createElement("li")
var li3=document.createElement("li")
var li4=document.createElement("li")
li1.textContent="js"
li2.textContent="node"
li3.innerHTML="react"
li4.innerHTML="java"
ul.appendChild(li1)
ul.appendChild(li2)
ul.appendChild(li3)
ul.appendChild(li4)

console.log(ul)
document.body.appendChild(ul)
</script>
</body>
</html>

8. What is Events ?

Ans

The change in the state of an object is known as Events. In html, Events represents the activity performed by
the User on Browser. When JavaScript code is included in HTML, JavaScript Reacts over these Events and
allows the Execution. This process of reacting over the Events is called Event Handling. So that JavaScript
handles the HTML Events via Event Handlers.

Example 1

<body>
<h1>HTML</h1>
<h3>DOM</h3>
<h1>JavaScript</h1>
<button id="btn">click me</button>
<script>
var button=document.getElementById("btn")
button.onclick=fn //no need to write function notation
function fn()
{
alert("function call")
}

JavaScript (DOM) 9
</script>
</body>

Example 2 (Using Anonymous function)

<body>
<h1>HTML</h1>
<h3>DOM</h3>
<h1>JavaScript</h1>
<button id="btn">click me</button>
<script>
var button=document.getElementById("btn")
button.onclick=function()
{
alert("function call")
}
</script>
</body>

Example 3 (Using Arrow function)

<body>
<h1>HTML</h1>
<h3>DOM</h3>
<h1>JavaScript</h1>
<button id="btn">click me</button>
<script>
var button=document.getElementById("btn")
button.onclick= ()=>alert("function call")
</script>
</body>

Overriding the Event Handler Function

Whenever, We attach more then one Event Handler per one particular Event, then the latestly attached
Event Handler will be consider

Example

<body>
<h1>HTML</h1>
<h3>DOM</h3>
<h1>JavaScript</h1>
<button id="btn">click me</button>
<script>
var button=document.getElementById("btn")
button.onclick=fn
button.onclick=fn1
button.onclick=fn2
//drawback of event
//override is going to be heppen so it will execute last function
function fn()
{
alert("function call")
}
function fn1()
{
alert("function call1")
}
function fn2()
{
alert("function call2")
}
</script>
</body>

To overcome overriding, We are going to use inbuilt event i.e addEventListener

How to use addEventListener

JavaScript (DOM) 10
<body>
<h1>HTML</h1>
<h3>DOM</h3>
<h1>JavaScript</h1>
<button id="btn">click me</button>
<script>
var button=document.getElementById("btn")
button.addEventListener("click",function fn()
{
alert("Button is Clicked")
}
)
</script>
</body>

Example 1

<body>
<h1>HTML</h1>
<h3>DOM</h3>
<h1>JavaScript</h1>
<button id="btn">click me</button>
<script>
var button=document.getElementById("btn")
function fn()
{
alert("Button click")
}
function fn1()
{
alert("Button 1 click")
}
function fn2()
{
alert("Button 2 click")
}
button.addEventListener("click",fn)
button.addEventListener("click",fn1)
button.addEventListener("click",fn2)
</script>
</body>

Example 2

<body>
<fieldset>
<legend>fill the form</legend>
<p>user <input type="text"></p>
<p>name <input type="text"></p>
<p>password <input type="password"></p>
<p>confirm password <input type="password"></p>
<p>
<input type="checkbox" id="agree">
<label for="agree">i agree terms and conditions</label>
</p>
<input type="submit" value="Register" id="register" disabled>

</fieldset>

<script>
var agree=document.getElementById("agree")
agree.addEventListener('change',
function ()
{
let register=document.getElementById("register")
if(agree.checked)
{
register.removeAttribute("disabled")
}
else{
register.setAttribute('disabled','disabled')
}
})

JavaScript (DOM) 11
</script>
</body>

Example 3 (By Using events)

<body>
<fieldset>
<legend>fill the form</legend>
<p>user <input type="text"></p>
<p>name <input type="text"></p>
<p>password <input type="password"></p>
<p>confirm password <input type="password"></p>
<p>
<input type="checkbox" id="agree">
<label for="agree">i agree terms and conditions</label>
</p>
<input type="submit" value="Register" id="register" disabled>

</fieldset>

<script>
var agree=document.getElementById("agree")
agree.onclick=manu
function manu()
{
let register=document.getElementById("register")
if(agree.checked)
{
register.removeAttribute("disabled")
}
else{
register.setAttribute('disabled','disabled')
}
}
</script>
</body>

9. Interview Question 1 → Form Validation ?

Ans

1. Wrie a code to Form Validation using JS condition to follow

a. Empty and null should not be accepted.

b. Password must conain atleast 6 characters

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div{
border: 2px solid black;
width: 300px;

JavaScript (DOM) 12
height: 200px;
margin: auto;
position: absolute;
left: 0;right: 0;top: 0;bottom: 0;
padding: 20px;
}
</style>
</head>
<body>
<div>
<form action="">
<label for="">Name :</label>
<input type="text" name="" id=""><br><br>
<label for="">Gender</label>
<select name="" id="">
<option value="">male</option>
<option value="">female</option>
<option value="">other</option>
</select><br><br>
<label for="">password :</label>
<input type="password" id="pass"><br><br><br>
</form>
<center><button onclick="checkval()">submit</button></center>
</div>
<script>
var x=document.querySelectorAll('input')

function checkval()
{

for(i=0;i<x.length;i++)
{
var y=x[i].value
if(y=="")
{
alert("Enter value")
return false;
}
}
var y=x[1].value
if(y.length<6)
{
alert("Password should be more than 6 character")
return false;
}
if(y!="")
{
alert("Welcome")
}
}
</script>
</body>
</html>

10. Interview Question 2 → Login Validation ?

Ans

Code 1

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.box
{
background-image: url(/https/www.scribd.com/manu.jpg);
background-size: cover;
border: 2px solid black;
width: 300px;
height: 200px;
margin: auto;
position: absolute;
left: 0;right: 0;top: 0;bottom: 0;
padding: 20px;
}
body

JavaScript (DOM) 13
{
background-image: url(/https/www.scribd.com/manu.jpg);
background-size: cover;
}
</style>
</head>
<body>
<div class="box">
<form action="#">
<label>username</label>
<input type="text" id="id"><br><br>
<label>passwoed</label>
<input type="text" id="pass"><br><br>
<center><p id="out"></p></center>
<center><input type="submit" value="submit" onclick="checkvalidity()"></center>
</form>
</div>

</body>
<script>
function checkvalidity()
{

var name=document.getElementById('id')
var pass=document.getElementById('pass')
Name =name.value
password=pass.value
if(Name&&password)
{
if(password.length>=8)
{
if(Name=="manu"&&password=="12345678")
alert("welcome "+Name)
else
alert("incorrect password of username")
}
else
{
alert("password should be 8 character or more")
}
}
else
{
alert("enter the value")
return false
}
}
</script>
</html>

Code 2

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div{
border: 2px solid black;
width: fit-content;
height: fit-content;
padding: 10px;

JavaScript (DOM) 14
margin: auto;
position: absolute;
left: 0; right: 0 ; top: 0; bottom: 0;
}
</style>
</head>
<body>
<div>
<form action="https://www.amezon.in/" onsubmit="return valid()">
<label for="">Username</label>
<input type="text" name="" id="input1">
<br><br>
<label for="">Password</label>
<input type="password" name="" id="pass">
<br><br>
<button>submit</button>
</form>
</div>
</body>
<script>
function valid()
{

var name=document.getElementById("input1").value
var pass=document.getElementById("pass").value

if(name=="")
{
alert("Please Enter User Name")
return false;
}
else if(pass=="")
{
alert("Please Enter Password")
return false;
}
else if(name!="Manu")
{
alert("UserName is Wrong")
return false;
}
else if(pass!="abcd")
{
alert("Enter Correct Password")
return false;
}
}
</script>
</html>

11. Interview Question 3 → (Create a box with lorem and place the submit button, if we click submit randomly should
change the color of that box)

Ans

<head>
<title>Document</title>
<style>
div{
border: 2px solid black;
}
</style>
</head>
<body>
<center>
<div id="divtag">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam facere molestiae alias officia, laudantium veritatis blandit
</div>
<br>
<button onclick="color()">change</button>
</center>
<script>
function color()
{
var divtag=document.getElementById("divtag");
console.log(divtag);
//generate random number btw 0-10

JavaScript (DOM) 15
var num=Math.random()*10;
console.log(num)
var x=Math.floor(num);
console.log(x)
if(x==0)
{
divtag.style.color="white";
divtag.style.backgroundColor="black";
} else if(x==1)
{
divtag.style.color="blue";
divtag.style.backgroundColor="red";
} else if(x==2)
{
divtag.style.color="red";
divtag.style.backgroundColor="blue";
}else if(x==3)
{
divtag.style.color="black";
divtag.style.backgroundColor="white";
}else if(x==4)
{
divtag.style.color="black";
divtag.style.backgroundColor="green";
}
else if(x==5)
{
divtag.style.color="black";
divtag.style.backgroundColor="pink";
}else if(x==6)
{
divtag.style.color="black";
divtag.style.backgroundColor="purple";
}else if(x==7)
{
divtag.style.color="black";
divtag.style.backgroundColor="browen";
}else if(x==8)
{
divtag.style.color="pink";
divtag.style.backgroundColor="black";
}else if(x==9)
{
divtag.style.color="pink";
divtag.style.backgroundColor="green";
}else
{
divtag.style.color="pink";
divtag.style.backgroundColor="white";
}
}
</script>
</body>

12. Interview Question 4 → (Change the background image randomly if we click Change button)

Ans

<body id="B">
<center>
<div id="A">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
<button onclick="manu()" ondblclick="manu1()"">CHANGE</button>
</div>
</center>
<script>
document.getElementById("A").style.width="600px"
document.getElementById("A").style.height="600px"
document.getElementById("A").style.backgroundSize="600px 600px"

JavaScript (DOM) 16
function manu1()
{
var x=Math.random()*10;
x=Math.floor(x);
if(x==0)
{
document.body.style.backgroundColor="black"
}else if(x==1)
{
document.body.style.backgroundColor="red"
}else if(x==2)
{
document.body.style.backgroundColor="pink"
}else if(x==3)
{
document.body.style.backgroundColor="purple"
}else if(x==4)
{
document.body.style.backgroundColor="yellow"
}else if(x==5)
{
document.body.style.backgroundColor="blue"
}else if(x==6)
{
document.body.style.backgroundColor="orenge"
}else if(x==7)
{
document.body.style.backgroundColor="Brown"
}else if(x==8)
{
document.body.style.backgroundColor="HotPink"
}else if(x==9)
{
document.body.style.backgroundColor="Magenta"
}else if(x==10)
{
document.body.style.backgroundColor="RebeccaPurple"
}
}
function manu()
{
var x=Math.random()*10;
x=Math.floor(x);
if(x==0)
{
document.getElementById("A").style.backgroundImage="url('IMG_2955.jpg')"
}else if(x==1)
{
document.getElementById("A").style.backgroundImage="url('IMG_2957.jpg')"
}else if(x==2)
{
document.getElementById("A").style.backgroundImage="url('IMG_3284.jpg')"
}else if(x==3)
{
document.getElementById("A").style.backgroundImage="url('IMG_3296.jpg')"
}else if(x==4)
{
document.getElementById("A").style.backgroundImage="url('IMG_3297.jpg')"
}else if(x==5)
{
document.getElementById("A").style.backgroundImage="url('InShot_20211024_141234608.jpg')"
}else if(x==6)
{
document.getElementById("A").style.backgroundImage="url('InShot_20220703_214536616.jpg')"
}else if(x==7)
{
document.getElementById("A").style.backgroundImage="url('wallpaperflare.com_wallpaper (2).jpg')"
}else if(x==8)
{
document.getElementById("A").style.backgroundImage="url('wallpaperflare.com_wallpaper (3).jpg')"
}else if(x==9)
{
document.getElementById("A").style.backgroundImage="url('wallpaperflare.com_wallpaper (6).jpg')"
}else if(x==10)
{
document.getElementById("A").style.backgroundImage="url('wallpaperflare.com_wallpaper (8).jpg')"
}
}
</script>

JavaScript (DOM) 17
22. Interview Question 5 → OTP Generation Project ?

Ans

Math.random();

random is function which is present inside Math object.

random() function capable of generating random numbers between the range 0 to 1 floating value.

Math.floor();

floor() is function which is capable of removing floating value from the given data.

---------------HTML Code-----------------------------
<body>
<div>
<label for="">Username</label>
<input type="text" id="input1">
<br><br>
<label for="">PhoneNumber</label>
<input type="text" id="ph">
<br><br>
<button onclick="sendotp()">send otp</button>
<h2 id="output"></h2>
</div>
<script src="./app.js"></script> //Linking to JS page
</body>
---------------------JavaScript Code-----------------
function sendotp()
{
var x=Math.random()*(9999-1000)+1000
var otp=Math.floor(x)
console.log(otp)
document.getElementById("output").innerHTML="Dear customer yoyr OTP is "+otp
}

23. Interview Question 6 → How to Increments and Decrement values using JS ?

Ans

Program 1

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div{
border: 2px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1 id="heading">0</h1>
<button onclick="inc()">inc</button>
<button onclick="dec()">dec</button>
<button onclick="reset ()">reset</button>
</div>

JavaScript (DOM) 18
<script>
count=0;
function inc()
{
count++;
document.getElementById("heading").innerHTML=count;
}
function dec()
{
count--;
document.getElementById("heading").innerHTML=count;
}
function reset()
{
count=0;
document.getElementById("heading").innerHTML=count;
}

</script>
</body>
</html>

Program 2

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div{
border: 2px solid red;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<h1 id="heading">0</h1>
<button onclick="inc()" ondblclick="ch()">inc</button>
<button onclick="dec()">dec</button>
<button onclick="reset ()">reset</button>
</div>
<script>
count=0;
function inc()
{
count++;
document.getElementById("heading").innerHTML=count;

}
function dec()
{
count--;
document.getElementById("heading").innerHTML=count;
}
function reset()
{
count=0;
document.getElementById("heading").innerHTML=count;
}
function ch()
{
var x=document.getElementById("box")
x.style.background="orange"
}

</script>
</body>
</html>

25. Interview Question 7 → How to make calculator using HTML, CSS, JavaScript ?

Ans

HTML

JavaScript (DOM) 19
<!DOCTYPE html>
<html lang="en">
<head>
<title>Caluculator</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<h2>Caluculator</h2>
<label for="">number1</label>
<input type="number" name="" id="input1">
<button onclick="add()">+</button>
<button onclick="sub()">-</button>

<br><br>

<label for="">number2</label>
<input type="number" name="" id="input2">
<button onclick="div()">/</button>
<button onclick="multi()">*</button>

<br><br>

<label for="">result</label>
<input type="number" name="" id="output">
<button>clear</button>
</div>
<script src="./app.js"></script>
</body>
</html>

CSS

div{
border: 2px solid black;
background-color: blueviolet;
text-align: center;
padding: 3%;
}
h2{
border: 2px dotted greenyellow;
background-color: coral;
text-align: center;
font-style: italic;
}

JavaScript

function add()
{
var x=document.getElementById("input1").value
var y=document.getElementById("input2").value
var z=parseInt(x)+parseInt(y)
document.getElementById("output").value=z
}
function sub()
{
var x=document.getElementById("input1").value
var y=document.getElementById("input2").value
var z=parseInt(x)-parseInt(y)
document.getElementById("output").value=z
}
function multi()
{
var x=document.getElementById("input1").value
var y=document.getElementById("input2").value
var z=parseInt(x)*parseInt(y)
document.getElementById("output").value=z
}
function div()
{
var x=document.getElementById("input1").value
var y=document.getElementById("input2").value
var z=parseInt(x)/parseInt(y)

JavaScript (DOM) 20
document.getElementById("output").value=z
}

document.getElementById("input1")

26. Interview Question 8 → How to Track Location using JS ?

Ans

Program

<!DOCTYPE html>
<html lang="en">
<head>
<title>manu</title>
</head>
<body>
<script>
var successCallback=(position)=>{console.log(position)}
var errorCallback=(position)=>{console.log(position)}
navigator.geolocation.getCurrentPosition(successCallback,errorCallback)
</script>
</body>
</html>

27. Interview Question 9 → Scrollbar Project ?

Ans

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="./ScrollbarCSS.css">
</head>
<body>
<input type="text" id="myinput" placeholder="names..." onkeyup="display()">
<br><br>
<table id="mytable">
<tr class="header">
<th>Name</th>
<th>Degree</th>
<th>Profession</th>
</tr>
<tr>
<td>Dashwath</td>
<td>BE</td>
<td>Front end developer</td>
</tr>
<tr>
<td>Abhi</td>
<td>BE</td>
<td>Back end developer</td>
</tr>
<tr>
<td>Ramya</td>
<td>MCA</td>
<td>Test Engineer</td>
</tr>
<tr>
<td>Harsha</td>
<td>BE</td>
<td>SQL developer</td>
</tr>
</table>
<script src="./Scrollbar.js"></script>
</body>
</html>

CSS

JavaScript (DOM) 21
*{
background-color: whitesmoke
}
#myinput{
width: 100%;
}
#mytable{
width: 100%;
background-color: azure;
border: 2px solid red;
}
.header th{
width: 500px;
background-color: brown;
text-align: center;
}
tr{
width: 500px;
border: 1px solid aqua;
text-align: center;
}
td{
width: 500px;
border: 1px solid rebeccapurple;
text-align: center;
}

JS

function display()
{
filter=document.getElementById("myinput").value.toUpperCase()
table=document.getElementById("mytable")
tablerow=table.getElementsByTagName('tr')
for(i=1; i<tablerow.length; i++)
{
tabledata=tablerow[i].getElementsByTagName('td')[0]
if(tabledata) //(tabledata!='')
{
data=tabledata.textContent||table.innerHTML
if(data.toUpperCase().indexOf(filter)>-1)
{
tablerow[i].style.display=""
}
else
{
tablerow[i].style.display="none"
}
}
}
}

28. Interview Question 10 → CRED operation project using Local Storage in Web Page ?

Ans

Code 1

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>

JavaScript (DOM) 22
input,button{
padding: 10px;
height: 30px;
}
fieldset{
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>Local Storage</h2>

<fieldset>
<legend>Insert the Data</legend>
<input type="text" placeholder="enter key" id="inputkey">
<input type="text" placeholder="enter value" id="inputvalue">
<button type="button" onclick="x()"> Submmit </button>
</fieldset>

<fieldset>
<legend>Local Storage</legend>
<div id="output"></div>
</fieldset>
<script>
function x()
{
const inputkey=document.getElementById("inputkey");
const intputvalue=document.getElementById("inputvalue");
const output=document.getElementById("output");

const key=inputkey.value;
const value=intputvalue.value;

if(key && value)


{
localStorage.setItem(key,value)
location.reload()
}///end of function
}
for(i=0; i<localStorage.length; i++)
{
const k=localStorage.key(i);
const v=localStorage.getItem(k);
output.innerHTML+=`${k}:${v} <br>`
}
</script>
</body>
</html>

29. Interview Coding Question 11 → (Signiwis Company). Separate the given Array into Array new based on Datatypes. If it
is String value Store it in String Array, If it is number value store it in number Array.

Ans

JavaScript (DOM) 23
30. Interview Coding Question 12 → (Signiwis Company). Create 2 input fields as First Name, Last Name and Submit
button. If we click submit button, case:1. It should calculate Vowels in First Name and Last Name. case:2. If both
vowels are equal in First Name and Last Name then convert Last Name to Uppercase.

Ans

31. Interview Coding Question 13 → (Signiwis Company). Create 3 box using div tag and give background color. case:1. If
we click on first box, then second box color should change. case:2. If we click on second box, then third box color
should change. case:3. If we click on third box, then first box color should change.

Ans

20. Interview Coding Question 14 → Write a JavaScript program Reverse given string ?

Ans

-----------------Program 1--------------------------------------------
<script>
var str="bangalore"
console.log(str)

var arraystr=str.split("")
console.log(arraystr)

var rev=arraystr.reverse();
console.log(rev)

var result=rev.join("")
console.log(result)

</script>
----console OUTPUT--------
['b', 'a', 'n', 'g', 'a', 'l', 'o', 'r', 'e']
['e', 'r', 'o', 'l', 'a', 'g', 'n', 'a', 'b']
erolagnab

-----------------Program 2--------------------------------------------
<script>
console.log("bangolre".split("").reverse().join(""))
</script>
----console OUTPUT-----------
erolagnab

21. Interview Coding Question 15 → Guess My Number Game (Project) ?

Ans

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
}
.A{
height: 500px;
width: 500px;
border: 2px solid black;
padding: 50px;
}
</style>
</head>

JavaScript (DOM) 24
<body>
<div class="A">
<h1>Guess the Number Between 0 to 20</h1>
<h1>?</h1>
<input type="number" class="guess">
<button class="check">Check</button>
<h1>Message : <span class="message"></span></h1>
<h1>Score : <span class="score">5</span></h1>
<h1>highscore : <span class="highscor">0</span></h1>
<button class="again">Again</button>
</div>
<script>
let RandomNum = Math.trunc(Math.random()*20)+1;
console.log(RandomNum);
let score = 5;
let highscore = 0;
document.querySelector('.check').addEventListener('click',function()
{
const guess = Number(document.querySelector('.guess').value);
if(!guess)
{
document.querySelector('.message').textContent = "Please Enteer the Value"
}
else if(guess === RandomNum)
{
document.querySelector('.message').textContent = "You Entered Correct Value"
document.querySelector('body').style.background = 'green'
if(score > highscore)
{
highscore = score
document.querySelector('.highscor').textContent = highscore
}
}
else if(guess > RandomNum)
{
if(score > 0)
{
document.querySelector('.message').textContent = "You Entered too highvalue"
score--;
document.querySelector('.score').textContent = score
}
else
{
document.querySelector('.message').textContent = "You Entered too highvalue"
document.querySelector('body').style.background = 'red'
}
}
else if(guess < RandomNum)
{
if(score > 0)
{
document.querySelector('.message').textContent = "You Entered too Lowvalue"
score--;
document.querySelector('.score').textContent = score;
}
else
{
document.querySelector('.message').textContent = "You Entered too highvalue"
document.querySelector('body').style.background = 'red'
}
}
})
document.querySelector('.again').addEventListener('click',function()
{
score = 5;
highscore = 0;
document.querySelector('.message').textContent = ""
document.querySelector('.score').textContent = score
document.querySelector('.highscor').textContent = highscore
document.querySelector('body').style.background = 'white'
})
</script>
</body>
</html>

JavaScript (DOM) 25

You might also like