WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II.
MBCL
1. WAP to take two values from textbox and find sum using HTML and JS.
<html>
<head>
<title> add two numbers </title>
<script>
var numOne = 10;
var numTwo = 20;
var sum = numOne+numTwo;
document.write("Sum = " + sum);
</script>
</head>
<body>
</body>
</html>
:OUTPUT:
2. WAP to take value from textbox and find whether it is even or odd using
HTML and JS.
<html>
<head>
</head>
MBCL 1
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<body>
<script>
var num=6;
if(num%2==0)
document.write(num + " is an even number");
else
document.write(num = " is an odd number");
</script>
</body>
</html>
:OUTPUT:
3. WAP to value from textbox and find factorial using HTML and JS.
<html>
<head>
</head>
<body>
<script>
function factorial()
{
var fact=1,i;
var a=prompt("enter a number :");
for (i=1;i<=a;i++)
{
fact=fact*i;
}
document.write("factorial of number "+a+" is : ", fact);
}
</script>
<form>
<input type ="button" value="factorial" onclick="factorial();">
</form>
</body>
MBCL 2
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
</html>
:OUTPUT:
4. WAP to value from textbox and find whether it is prime number or not using
HTML and JS.
<html>
<head>
</head>
<body>
<script>
var num, i, chk=0;
num=19 ;
for(i=2; i<num; i++)
{
if(num%2==0)
{
chk++;
break;
}
}
if (chk==0)
document.write(num + " is a prime number");
else
document.write(num + " is not prime number ");
MBCL 3
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
</script>
</body>
</html>
:OUTPUT:
5. WAP to demonstrate onclick and ondblclick event using HTML and JS.
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The ondblclick Event</h2>
<p ondblclick="myFunction()">Double-click this paragraph to trigger a function.</p>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML += "Hello World ";
}
</script>
</body>
</html>
:OUTPUT:
MBCL 4
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
6. WAP to demonstrate onblur and onchange event using HTML and JS.
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The blur Event</h2>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input
text to upper case.</p>
<script>
function myFunction() {
let x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
:OUTPUT:
MBCL 5
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
7. WAP to demonstrate onMouseOver and onMouseOut event using HTML and
JS.
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onmouseover Event</h2>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0"
src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves the mouse pointer over the
image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the
image.</p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
MBCL 6
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
</body>
</html>
:OUTPUT:
8. WAP to demonstrate onKeyUp and onKeyDown event using HTML and JS.
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The keyup Event</h2>
<p>A function is triggered when the user releases a key in the input field.</p>
<p>The function transforms the input field to upper case:</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
let x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
MBCL 7
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
</body>
</html>
9. WAP to demonstrate onSubmit event using HTML and JS.
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</body>
</html>
MBCL 8
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
10. WAP to validate textbox value for Required Field Validation.
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
MBCL 9
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<input type="submit" value="Submit">
</form>
</body>
</html>
11.WAP to validate textbox value for email validation.
<html>
<body>
<h1>Show Email Fields</h1>
<h3>Show an email field (allows only one email address):</h3>
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
<h3>Show an email field (allows multiple email addresses). Separate each email address with a
comma:</h3>
<form action="/action_page.php">
MBCL 10
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<label for="emails">Enter email addresses:</label>
<input type="email" id="emails" name="emails" multiple>
<input type="submit">
</form>
</body>
</html>
12. WAP to validate textbox value for range validation.
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
</script>
MBCL 11
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
13. WAP to demonstrate hover selectors in CSS and HTML
<html>
<head>
<style>
a:hover {
background-color: yellow;
MBCL 12
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
</style>
</head>
<body>
<h1>Demo of the :hover selector</h1>
<p>The :hover selector style links on mouse-over:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="https://www.wikipedia.org">wikipedia.org</a>
</body>
</html>
14. WAP to demonstrate id and class selectors in CSS and HTML.
<html>
<head>
<style>
p{
text-align: center;
MBCL 13
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
color: red;
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
15. WAP to demonstrate nth-child selectors in CSS and HTML.
<html>
<head>
<style>
/* Selects the second element of div siblings */
div:nth-child(2) {
background: red;
/* Selects the second li element in a list */
li:nth-child(2) {
MBCL 14
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
background: lightgreen;
/* Selects every third element among any group of siblings */
:nth-child(3) {
background: yellow;
</style>
</head>
<body>
<div>
<p>This is some text.</p>
</div>
<div>
<p>This is some text.</p>
</div>
<div>
<p>This is some text.</p>
</div>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
MBCL 15
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<li>Fifth list item</li>
</ul>
</body>
</html>
16. WAP to demonstrate universal selectors in CSS and HTML.
<html>
<head>
<style>
*{
background-color: yellow;
</style>
</head>
<body>
<h1>Demo of the * selector</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
MBCL 16
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<p>My best friend is Mickey.</p>
</body>
</html>
17. WAP to demonstrate Box Sizing Properties in CSS and HTML
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
MBCL 17
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
</style>
</head>
<body>
<h1>With box-sizing</h1>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
</body>
</html>
MBCL 18
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
18. WAP to demonstrate BootStrap container in HTML
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
MBCL 19
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that its width (max-width) will change at different
breakpoints.</p>
</div>
</body>
</html>
19.WAP to demonstrate Bootstrap classes row and column in HTML.
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
MBCL 20
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Large Grid</h1>
<p>The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium
devices, and a 33%/66% split on large devices. On extra small devices, it will automatically stack
(100%).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</div>
</div>
</div>
</body>
</html>
MBCL 21
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
20. WAP to demonstrate BootStrap navbar and nav in HTML.
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
MBCL 22
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
21. WAP to demonstrate BootStrap Cards in HTML.
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
MBCL 23
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
22. WAP to demonstrate BootStrap alerts in HTML.
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
MBCL 24
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
</body>
</html>
MBCL 25
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
23. WAP to demonstrate BootStrap progressbar in HTML.
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-
valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
MBCL 26
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
</div>
</div>
</div>
</body>
</html>
24. WAP to demonstrate BootStrap Accordian in HTML.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
.active, .accordion:hover {
MBCL 27
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
background-color: #ccc;
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
</style>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
MBCL 28
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
});
</script>
</body>
</html>
MBCL 29
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
25. WAP to demonstrate BootStrap Modals in HTML.
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-
target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
MBCL 30
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
MBCL 31
WEB DESIGNING USING CSS, XML AND JAVASCRIPT-II. MBCL
MBCL 32
