CSS code answers
CSS code answers
<script type="text/javascript">
function cubert()
{
var a,Square,Cube;
a = parseInt(document.getElementById ("first").value);
Cube = a*a*a;
document.getElementById ("num1").innerHTML ="Cube of "+a+" is : " +Cube;
}
</script>
</html>
8) Write a JavaScript to find multiplication of a number using function
ANS:
<html>
<head>
</head>
<body>
1st Number : <input type="text" id="firstNumber" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="multiplyBy()" Value="Multiply" /><br>
<p>The Result is : <br>
<span id = "result"></span>
</p>
<script>
function multiplyBy()
{
num1 = document.getElementById(
"firstNumber").value;
num2 = document.getElementById( "secondNumber").value;
document.getElementById( "result").innerHTML = num1 * num2;
}
</script>
</body>
</html>
9) Write a JavaScript to demonstrate use of Switch-case. Perform any 3 cases. Assume suitable Data
ANS:
let a = 2;
switch (a) {
case 1:
a = 'one';
alert(“ONE”);
break;
case 2:
a = 'two';
alert(“TWO”);
break;
default:
a = 'not found';
alert(“not found”);
break;
}
10) Create a webpage to design simple registration form with all major controls.
ANS:
<Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>
<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML DOM onblur event</h2> Email:
<input type="email" id="email" onblur="myFunction()">
<script>
function myFunction() {
alert("Focus lost");
}
</script>
</script>
</body>
</html>
19) Write a JavaScript to find a character is in upper case or not using regular Expression.
ANS:
<html>
<head>
<title>JavaScript Regular expression to check string's first character is uppercase or not</title>
</head>
<body>
function upper_case(str)
{
regexp = /^[A-Z]/;
if (regexp.test(str))
{
console.log("String's first character is uppercase");
}
else
{
console.log("String's first character is not uppercase");
}
}
upper_case('Abcd');
upper_case('abcd');
</body>
</html>
20) Write a JavaScript to find a character is in lower case or not using regular Expression.
ANS:
<html>
<head>
<title>JavaScript Regular expression to check string's first character is lowercase or not</title>
</head>
<body>
function lower_case(str)
{
regexp = /^[a-z]/;
if (regexp.test(str))
{
console.log("String's first character is lowercase");
}
else
{
console.log("String's first character is not lowercase");
}
}
lower_case('Abcd');
lower_case('abcd');
</body>
</html>
<html>
<head>
<script>
MySlides = new Array('img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg');
Slide = 0;
function ShowSlides(SlideNumber)
{
Slide = Slide+SlideNumber;
if (Slide>MySlides.length-1) {
Slide=0;
}
if (Slide<0) {
Slide = MySlides.length-1;
}
document.DisplaySlide.src=MySlides[Slide];
}
</script>
</head>
<body>
<div>
<center>
<h1>Slide Show</h1>
<img src="img1.jpg" name="DisplaySlide" alt="">
<input type="button" value="Back" onclick="ShowSlides(-1)">
<input type="button" value="Forward" click="ShowSlides(1)">
</center>
</div>
</body>
</html>
26) Accept full name of user in single text box and separate first, middle and last name from accepted
name and display it in capitalized form.
<html>
<head>
<style>
p{
text-transform: uppercase;
}
</style>
</head>
<body>
<label>Enter Your Name: <input type="text" id="name" name="name"></label>
<p id="first"></p>
<p id="middle"></p>
<p id="last"></p>
<button onclick="fun()">Try me</button>
<script>
function fun()
{
var fullName = document.getElementById("name").value;
const splitOnSpace = fullName.split(' ');
console.log(splitOnSpace);
var first = splitOnSpace[0];
var middle = splitOnSpace[1];
var last = splitOnSpace[2];
document.getElementById("first").innerHTML = "First Name:"+first;
document.getElementById("middle").innerHTML = "Middle Name:"+middle;
document.getElementById("last").innerHTML = "Last Name:"+last;
}
</script>
</body>
</html>
27) WAP to replace following specified string value with another value in the string
String = “I will fail”Replace = “fail” by “pass”
ANS:
<html>
<head>
<body>
<script>
var myStr = “I will fail”;
var newStr = myStr.replace(fail, "pass");
document.write(newStr);
</script>
</body>
</head>
</html>
28) Create a slideshow with the group of three images, also simulate the next and previous transition
between slides in your JavaScript.
Ans: <html>
<head>
<script>
MySlides = new Array('img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg');
Slide = 0;
function ShowSlides(SlideNumber)
{
Slide = Slide+SlideNumber;
if (Slide>MySlides.length-1) {
Slide=0;
}
if (Slide<0) {
Slide = MySlides.length-1;
}
document.DisplaySlide.src=MySlides[Slide];
}
</script>
</head>
<body>
<div>
<center>
<h1>Slide Show</h1>
<img src="img1.jpg" name="DisplaySlide" alt="">
<input type="button" value="Back" onclick="ShowSlides(-1)">
<input type="button" value="Forward" click="ShowSlides(1)">
</center>
</div>
</body>
</html>
29) Write HTML Script that displays drop-down-list containing options New Delhi, Mumbai, Bangalore.
Write proper JavaScript such that when the user selects any options corresponding description of
about 20 words and image of the city appear in table which appears below on the same page.
Ans: <html>
<head>
</head>
<body>
<h2>Select the city.. </h2>
<form name="dropForm">
<select name="dropSelect" onchange="showDropInfo()">
<option value="P">Select:</option>
<option value="A">New Delhi</option>
<option value="B">Mumbai</option>
<option value="C">Banglore</option>
</select>
</form>
<table>
<tr>
<td>
<p id="info"></p>
</td>
<td>
<span id="img"></span>
</td>
</tr>
</table>
<script>
function showDropInfo() {
var a = dropForm.dropSelect;
var info = document.getElementById('info');
var img = document.getElementById('img');
if (a.selectedIndex == 1) {
info.innerHTML = "New Delhi is India’s capital and is one of the most widely known cities of the
country. It is mostly famous for its rich and unique heritage and culture. The town is growing
continuously over the years. There are several unique and beautiful monuments present in Delhi.Delhi
is considered as one of the most important historical places. The diversity in the religion of the people is
visible across the city along with the influence of the Mughal, the British, and India on its culture"
img.innerHTML = "<img src='delhi.jpg' alt='' >";
}
if (a.selectedIndex == 2) {
info.innerHTML = "Mumbai is a busy city and has a rich history as one of the birthplaces of
Indian independence movement. Mumbai’s culture is diverse, with people speaking various languages
and practising different religions. The food in Mumbai is just as varied, with options ranging from
street food to fine dining. Mumbai is also a gorgeous city during the monsoon season when it gets its
fair share of rain. BYJU’S essay on Mumbai helps us understand the lifestyle and importance of this
city. It is a sprawling, densely populated city that has a population of over 20 million. Mumbai has
grown to become one of the most populated cities in the world. Mumbai is also home to some of the
country’s wealthiest people.Mumbai is also known as the city of dreams.It is a significant tourist
destination, attracting tourists from all over the world to visit this beautiful city.The famous Gateway
of India welcomes visitors, and it may be one of the most iconic structures in Mumbai.The Taj Mahal
Palace Hotel is one of the greatest additions to Mumbai’s skyline and offers stunning views from its
upper floors.Mumbai has several smaller districts that are also worth exploring.Now, let us read the
essay on Mumbai city life."
img.innerHTML = "<img src='mumbai.jpg' alt='' >";
}
if (a.selectedIndex == 3) {
info.innerHTML = "Bangalore is home to various prestigious institutes, colleges and universities.
In addition to this, it is also the hub of many software and aerospace industries. As the city offers many
benefits, the population of the city is growing day by day.Most importantly, the city is very clean and
elegant despite the increasing industrialization. This city was renamed Bengaluru in 2014. If we
consider the southern part of India, Bangalore stands to be the busiest city.It is the industrial city of
Karnataka because it is home to several IT organizations. Nonetheless, the major attraction of the city
has to be the parks and gardens. Thus, it is also known as the garden city.Moreover, the city’s growth
rate is so impressive that it is the second most leading growing cities in India. Even though it is
developing at a faster rate, it still manages to stay green, clean and free of pollution.You can enjoy the
tropical weather in this city. The three prominent seasons are monsoon, winter and summer. The main
religion followed here is Hinduism followed by Islam and then Christianity, Jainism, Sikhism and
more."
img.innerHTML = "<img src='delhi.jpg' alt='' >";
}
}
</script>
</body>
30) Write a JavaScript function that checks whether a passed string is palindrome or not.
ANS:
function check_palindrome( str )
{
let j = str.length -1;
for( let i = 0 ; i < j/2 ;i++)
{
let x = str[i] ;
let y = str[j-i];
if( x != y):
{
return false;
}
}
return true;
31) Write a HTML script which displays 2 radio buttons to the users for fruits and vegetables and 1
option list. When user select fruits radio button option list should present only fruits names to the user
& when user select vegetable radio button option list should present only vegetable names to the user
Ans: <html>
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript">
function updateList(ElementValue)
{
with(document.forms.myform)
{
if(ElementValue == 1)
{
optionList[0].text="Mango";
optionList[0].value=1;
optionList[1].text="Banana";
optionList[1].value=2;
optionList[2].text="Apple";
optionList[2].value=3;
}
if(ElementValue == 2)
{
optionList[0].text="Potato";
optionList[0].value=1;
optionList[1].text="Cabbage";
optionList[1].value=2;
optionList[2].text="Onion";
optionList[2].value=3;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
<p>
<select name="optionList" size="2">
<option value=1>Mango
<option value=2>Banana
<option value=3>Apple
</select>
<br>
<input type="radio" name="grp1" value=1 checked="true"
onclick="updateList(this.value)">Fruits
<input type="radio" name="grp1" value=2
onclick="updateList(this.value)">Vegetables
<br>
<input name="Reset" value="Reset" type="reset">
</p>
</form>
</body>
</html>
32) Write a Java script to modify the status bar using on MouseOver and on MouseOut with links. When
the user moves his mouse over the links, it will display “MSBTE” in the status bar. When the user
moves his mouse away from the link the status bar will display nothing.
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href=" https://msbte.org.in/"
onMouseOver="window.status='MSBTE';return true"
onMouseOut="window.status='';return true">
MSBTE
</a>
</body>
</html>
Ans: </html>Here,The Object.getOwnPropertyNames() method returns an array of all properties found in the
givenobject. We have passed window as an object, hence it returns the properties of window object. A forloop is
used to loop through all the properties of window object and display them
34) Write a function that prompts the user for a color and uses what they select to set the background
color of the new webpage opened.
Ans : <html>
<head></head>
<body>
<button onclick="openWindowWithColor()">try me</button>
<script>
function openWindowWithColor() {
var color = prompt("Enter color of your choice: ");
document.write(color);
console.debug("Open new window with color: " + color);
var myNewWindow = window.open("","","width=200 height=300");
myNewWindow.document.body.style.background = color;
}
</script>
</body>
</html>
35) Write a JavaScript program that create a scrolling text on the status line of a window
Ans: <html>
<head>
<title>Javascript ScrollText</title>
<script language="javascript">
msg="This is an example of scrolling message";
spacer="............ .............";
pos=0;
function ScrollMessage()
{
window.status=msg.substring(pos,msg.length)+spacer+msg.substring(0,pos);
pos++;
if(pos>msg.length)
pos=0;
window.setTimeout("ScrollMessage()",100);
}
ScrollMessage();
</script>
</head>
<body>
<p>Scrolling Message Example</p>
<p>Look at the status line at the bottom of the page</p>
</body>
</html>
36) Develop a JavaScript Program to Create Rotating Banner Ads with URL Links. Create a slideshow
with the group of four images, also simulate the next and previous transition between slides in your
JavaScript
Ans:
<html>
<head>
<script>
MySlides = new Array('google.jpg','yahoo.jpg','facebook.jpg','youtube.jpg');
MyBannerLinks = new Array('www.google.com/', 'www.yahoo.com/', 'www.facebook.com/',
'www.youtube.com/');
Slide = 0;
function ShowLinks(){
document.location.href = "https://"+ MyBannerLinks[Slide];
}
function ShowSlides(SlideNumber)
{
Slide = Slide+SlideNumber;
if (Slide>MySlides.length-1) {
Slide=0;
}
if (Slide<0) {
Slide = MySlides.length-1;
}
document.DisplaySlide.src=MySlides[Slide];
}
</script>
</head>
<body>
<div>
<center>
<a href="javascript: ShowLinks()">
<h1>Slide Show</h1>
<img src="img1.jpg" name="DisplaySlide" alt="">
</a>
<input type="button" value="Back" onclick="ShowSlides(-1)">
<input type="button" value="Forward" onclick="ShowSlides(1)">
</center>
</div>
</body>
</html>
37) Write a webpage that accepts Username and adharcard as input texts. When the user enters
adhaarcard number ,the JavaScript validates card number and diplays whether card number is valid
or not. (Assume valid adhaar card format to be nnnn.nnnn.nnnn or nnnn-nnnn-nnnn)
Ans: <html>
<head></head>
<form action="">
<label>Enter Username: <input type="text" name="" id=""></label>
<label>Enter Aadhar number: <input type="text" id="txtaadhar"></label>
<button onclick="validateaadhar()">Validate</button>
</form>
<body>
<script>
function validateaadhar() {
adhar = document.getElementById("txtaadhar").value;
var adharcard = new RegExp(/^[2-9]{1}[0-9]{3}\s[0-9]{4}\s[0-9]{4}$/);
if (adhar.match(adharcard)) {
alert("valid Aadhar Number");
return true;
}
else {
alert("InValid Aadhar number");
return true;
}
}
</script>
</body>
</html>
38) Write HTML Script that displays textboxes for accepting Name, middlename, Surname of the user
and a Submit button. Write proper JavaScript such that when the user clicks on submit button: i) All
texboxes must get disabled and change the color to “RED” and with respective labels.
Ans:
39) Write a JavaScript program to find the area of a triangle where lengths of the three of its sides are 5,
6, and 7.
<html>
<head>
</head>
<body>
<script>
var side1 = 5;
var side2 = 6;
var side3 = 7;
var s = (side1 + side2 + side3) / 2;
var area = Math.sqrt(s * ((s - side1) * (s - side2) * (s - side3)));
console.log(area);
</script>
</body>
</html>
Frame1
Frame3
Frame2
FRUITS
FLOWERS
CITIES
Fruits, Flowers and Cities are links to the webpage fruits.html, flowers.html, cities.html respectively.
When these links are clicked corresponding data appears in “FRAME3”.
<html>
<head>
<title>Frame Demo</title>
</head>
<body>
<table border="1">
<tr>
<td align="center" colspan="2">
FRAME 1
</td>
</tr>
<tr>
<td>
FRAME 2
<ul>
<li>
<a href="fruits.html" target="mainframe">FRUITS</a>
</li>
<li>
<a href="flowers.html" target="mainframe">FLOWERS</a>
</li>
<li>
<a href="cities.html" target="mainframe">CITIES</a>
</li>
</ul>
</td>
<td>
FRAME 3<BR>
<iframe name="mainframe"></iframe>
</td>
</tr>
</table>
</body>
</html