WD Lab 5

// 1
<!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>Form Using Validation</title>
<style>

#div1{
display: flex;
width: fit-content;
margin: auto;
border: 25px ridge rgb(0, 255, 38);
padding: 50px;
background-color: lightgrey;
}
label{
font-size: 20px;
font-family: cursive;
font-weight: bold;
}
input{
padding: 3px;
}
button{
background-color: rgb(218, 24, 173);
}
</style>
<script>

function validation() {
var a = document.getElementById("age").value;
if (a < 1 || a > 100) {
alert("Please enter the age in correct format!!! i.e. in
between 1 and 100");
}
var b = document.getElementById("phone").value;
if (b<0 || b>9999999999) {
alert("please enter correct mobile number");
}
else
{
var c = document.getElementById("form1").action =
"backend.php";
}
}
</script>
</head>
<body>
<div id="div1">
<form id="form1">
<label for="name">Name : </label>
<input type="text" id="name" name="nm"><br><br>
<label for="age">Age : </label>
<input type="number" id="age" name="ag"><br><br>
<label for="phone">Phone number : </label>
<input type="number" id="phone" name="ph"><br><br>
<button type="submit" name="sb" onclick="validation();"
placeholder = " submit">Submit
</form>
</div>
</body>
</html>
// 1 – output
// 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Time Table</title>
<style>
h1{
text-align: center;
}
th,tr{
/* height: 70px;
width: 70px; */
}

table,th,tr{

border: 2px solid red;
padding: 10px 10px;
border-collapse: collapse;
color: aqua;
background-color:black ;
}
.days{

margin-left: 500px;
}
</style>
<script>
alert("Alert before page loading appears here ");
</script>
</head>
<body>
<h1>TIME TABLE OF CS-B</h1>
<table>
<thead>
<th>PERIOD</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<tr>
<th>BEGINNING TIME</th>
<th>8:30</th>
<th>9:25</th>
<th>10:20/10:40</th>
<th>11:35</th>
<th>12:30</th>
<th>1:45</th>
<th>2:40</th>
<th>3:35</th>
<th>4:30</th>
<th>5:25</th>
</tr>
</thead>

<tbody>
<th colspan="11">MONDAY</th>
<tr>
<th >5</th>
<th rowspan="4">PH-L E202</th>
<th rowspan="4">CH-L E202</th>
<th rowspan="4">DC3-L E202</th>
<th rowspan="4">EE-L E202</th>
<th rowspan="4"> </th>
<th rowspan="2" colspan="2">DC3-P</th>

<th >PH-T E201</th>
<th >DC-T E201</th>
</tr>
<tr>
<th >6</th>

<th>DC-T E201</th>
<th>DC-T E202</th>
</tr>
<tr>
<th >7</th>
<th colspan="2" rowspan="2">DC2-P</th>


</tr>
<tr>
<th >8</th>


</tr>
<tr>
<th colspan="11">TUESDAY</th>
</tr>
<tr>
<th >5</th>
<th rowspan="4">MA-L E302</th>
<th> </th>
<th rowspan="4">WD-L E201</th>
<th rowspan="4">CH-L E201</th>
<th ></th>
</tr>
<tr>
<th >6</th>
<th> </th>
<th> </th>
</tr>
<tr>
<th >7</th>
<th>EE-T E304 </th>
<th>CH-T E301</th>
</tr>
<tr>
<th >8</th>
<th>CH-T EHFF</th>
<th>PH-T E302</th>
</tr>
<tr>
<th colspan="11">WEDNESDAY</th>
</tr>
<tr>
<th >5</th>
<th rowspan="4" colspan="2" >CH-P</th>
<th colspan="2" >DC2-P</th>
<th colspan="3" rowspan="4">WD-P</th>
</tr>

<tr>
<th >6</th>
<th colspan="2">DC2-P </th>
</tr>
<tr>
<th >7</th>
<th colspan="2">DC3-P </th>
</tr>
<tr>
<th >8</th>
<th cpolspan="2">DC3-P </th>
<th>DC3-P</th>
</tr>

<tr>
<th colspan="11">THURSDAY</th>
</tr>
<tr>
<th >5</th>
<th>EE-T E303</th>
<th>CH-T E303</th>
<th>MA-T E303</th>
<th rowspan="4">WD-L</th>
<th rowspan="4">DC1-L A210 </th>
<th rowspan="4">MA-L A210 </th>
<th rowspan="4">DC2-L A210 </th>
</tr>
<tr>
<th >6</th>
<th>CH-T E306</th>
<th>MA-T E306</th>
<th>PH-T E306</th>
</tr>
<tr>
<th >7</th>
<th>MA-T E306</th>
<th>PH-T E306</th>
<th>DC-T E306</th>
</tr>
<tr>
<th >8</th>
<th>DC-T E306</th>
<th>MA-T E306</th>
<th>EE-T E306</th>
</tr>
<tr>
<th colspan="11">FRIDAY</th>
</tr>
<tr>
<th >CS-B</th>
<th >PH-L E201</th>
<th >DC3-L E201</th>
<th >DC2-L E201</th>
<th >MA-L E102</th>
<th > </th>
<th >EE-L E302</th>
<th colspan="2">PH-P</th>
<th > </th>
<th > </th>
</tr>
<tr >
<th colspan="11">SATURDAY</th>
</tr>
<tr>
<th >CS-B</th>
<th >PH-L LHC105</th>
<th ></th>
<th >EE-L LHC105</th>
<th >MA-L LHC105</th>
<th >DC1-L LHC105 </th>
<th > </th>
<th >DC2-L LHC105</th>
<th >DC3-L LHC105</th>
<th >CH-L LHC105</th>
<th > </th>
</tr>
</tbody>
</table>
</body>
</html>
// 2 OUTPUT
// 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS PROPERTIES</title>
<link rel="stylesheet" href="lab2.css">
<style>
h1{
text-align: center;
background-color: aqua;
}
.firstp{
color: red;
background-color: bisque;
}
strong,i{
color: blue;
}

#submit:hover{
background-color: black;
color: chartreuse;

}

</style>
<script>
function change() {
var a = document.getElementById("body");
a.style.backgroundColor = "yellow";
}
setTimeout(change,5000);
</script>
</head>
<body id="body">
<h1>CSS PROPERTIES</h1>
<div class="container">
<p class="firstp">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eum perspiciatis consectetur dignissimos ea <strong>Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Molestiae, dolorum!</strong>aliquid sit placeat
quod voluptate, atque praesentium voluptatem ratione at illo fugit nostrum
possimus cumque quas explicabo. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Distinctio optio odit impedit facere magni ducimus
consectetur labore totam laudantium tenetur cupiditate, corrupti, perspiciatis
ipsam illum cum voluptatem veniam deleniti vel?</p>
<p class="secondp">Lorem, ipsum dolor sit amet consectetur adipisicing

elit. Officia praesentium maiores eius sit illo hic laboriosam voluptatum
recusandae, <i>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nostrum laborum ut distinctio qui id amet!</i>est deleniti fugiat, odio
inventore minima ipsam voluptatem vitae veritatis! Eligendi, eos? Lorem ipsum
dolor sit amet consectetur adipisicing elit. Iure nam obcaecati modi, beatae
alias voluptate? Dignissimos eum dolorum in, repellat doloribus commodi
reiciendis ea neque error exercitationem officia dolorem sapiente.</p>
<p class="thirdp">Lorem ipsum, dolor sit amet consectetur adipisicing

elit. Excepturi et consequuntur totam deleniti odit itaque, consequatur id quo
enim provident unde est officiis facilis recusandae nemo. Impedit minima quo
dolores! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque,
laborum! Assumenda fugiat pariatur repudiandae Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Doloremque eveniet a quos eos voluptate
perferendis quod hic ipsa molestiae alias dicta fuga ipsum quaerat obcaecati
deleniti enim minima, aperiam eligendi!
</p>
<p class="fourthp" style="color: darkorange; background-

color:cornflowerblue ;">Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Eaque dignissimos at earum cumque vitae, dolore aut eveniet nisi.
Necessitatibus repudiandae minus aspernatur dicta ullam nemo accusamus quae
illum laborum temporibus! Lorem ipsum dolor sit amet consectetur adipisicing
elit. Natus eligendi atque cumque. Voluptatibus, corporis cupiditate. Nisi a
dolorum quia neque voluptates commodi quibusdam accusantium mollitia odit, qui
perspiciatis itaque autem beatae ipsa maiores aliquid ea distinctio porro.
Enim, animi impedit.</p>
</div>
<form action="backend.php">
<div>
ENTER PASSWORD TO LOGIN : <input type="password">
</div>
<br>
<div>
NAME : <input type="text" id="myname">
</div>
<br>
<div>
AGE : <input type="number" id="mynumber">
</div>
<br>
<div>
ADDRESS :<br> <textarea type="text" cols="50"
rows="10"></textarea>
</div>
<br>
<div>
FAVOURITE SUBJECT : <input type="text">
</div>
<br>
<div>
FAVOURITE MOVIE : <input type="text">
</div>
<br>
<div>
FAVOURITE SINGER : <input type="text">
</div>
<br>
<div>
ARE U ELIGIBLE IN JEE : <input type="checkbox">
</div>
<br>
<div>
GENDER : Male <input type="radio" name="mygender"> Female <input
type="radio" name="mygender">
</div>
<br>
<div>
<input type="submit" id="submit">
</div>

</form>
</body>
</html>
// 4
<!DOCTYPE html>
<html lang="en">
<head>
<title>COMPUTER ENGINEERING </title>
<style>
.network{

padding: 100px 600px;

}
.image{
padding: 50px 300px;
}
body{
background-color: yellow;
background-color: #ed6510;
color: aqua;
}
.btn{

padding: 0px 600px;

}
</style>
<script>
function underline() {
var a = document.getElementById("mhead");
a.style.textDecoration = " underline";
}
function none() {
var b = document.getElementById("mhead");
b.style.textDecoration = "none";
var d = document.getElementById("itali");
d.style.textDecoration = "none";
}
function italic() {
var e = document.getElementById("itali");
e.style.fontStyle = "italic";
}
</script>
</head>
<body>

<h1 id="mhead" onmouseover="underline()" onmouseout="none()">COMPUTER
ENGINEERING</h1>
<p id="itali" onmouseover="italic()" onmouseout="none()">The department
started offering B.Tech. Programme in Computer Engineering in 1987 with
initial intake of 30 students and subsequently raised to 92. Department also
started B.Tech programme in Information Technology (IT) in 2006 with present
intake of 92 students. The department is proud to have a record of almost 100%
placement for last 10 years. The department also offers two M.Tech. programs,
one in Computer Engineering and other in Cyber Security. Department started
Ph.D. program in 2002. So far 44 Ph.D.s have been awarded and 28 PhDs are in
progress. Currently there are five sponsored projects undergoing in the
department.</p>
<ul>
<li id="itali" onmouseover="italic()" onmouseout="none()">Faculty of

the department have specialized areas for advanced studies and research in
Distributed Computing, Software Engineering, Computer Networks, Database and
Data Mining, Natural Language Processing, Information and Cyber Security,
Image Processing.</li>

<li>The department is well equipped with state-of-the-art laboratories
of all major domains of Computer Engineering and Information Technology with
excellent intranet, servers, hardware and software support.</li>

<li> Each year, many students of the department get selected for higher
studies in world’s most reputed Universities and Institutes. The department is
equally active in research with many quality publications each year in IEEE,
Sciencedirect, ACM, Springer, Wiley etc. For the overall development we also
cover the other aspects of life like Health management, moral and ethical
development of the students.</li>
</ul>
<ol >
<li>Our faculty has attracted sponsored research projects (by the
Government and the private sector) worth Rs. 50 crores.</li>
<li>Our faculty has been honoured with awards such as the Padma Shri,
ACM and IEEE Fellowship, Shanti Swarup Bhatnagar award, Infosys Prize, and
many other prestigious fellowship</li>
<li> The department has a star-studded alumni body, consisting of
leading researchers around the world, entrepreneurs, experts, successful
engineers and impactful policy makers.</li>
</ol>
<dl>
<dt>This is presented by </dt>
<dd>- Chanukya Maruthi</dd>
</dl>

<a class="network" href="https://en.wikipedia.org/wiki/Wi-Fi"
target="blank">WI-FI</a>
<a class="network" href="https://en.wikipedia.org/wiki/Local_area_network"
target="blank">LAN</a>
<a href="https://en.wikipedia.org/wiki/Computer_engineering"
target="blank">
<img
class="image"src="https://www.csuohio.edu/engineering/sites/csuohio.edu.engine
ering/files/ComputerEngineering.jpg" width="600px" height="400px" alt="ERROR
LOADING IMAGE"><br> </a>

<a href="#" class="network">Go top</a>
</body>
</html>
// 4 - OUTPUT
// 5
<!DOCTYPE html>
<html lang="en">
<head>
<title>java script</title>
<style>
#container {
display: flex;
width: 500px;
margin: auto;
justify-content: center;
border: 30px solid rgb(59, 39, 59);
flex-direction: column;
border-radius: 10px;
padding: 100px;
}
#div2 {
display: none;
margin: auto;
color: snow;
font-size: 20px;
padding: 10px;
margin-top: 20px;
}
#p1{
color: snow;
font-size: 20px;
text-align: justify;
width: 450px;
padding: 20px;
}
#b1{
align-self: center;
padding: 4px;
font-size:14px;
background-color: lightgreen;
border-radius: 6px;
}

</style>
<script>
function display() {
document.getElementById("div2").style.display = "block";
}
</script>
</head>
<body>
<div id="container">
<div>
<p id="p1">Click on the given button to see the hidden details :
</p>
<button type="button" id="b1" onclick="display()">
click me!
</button>
</div>
<div id="div2">
<ul>
<p>Here are the following properties : </p>
<li>Web developer(interest to develop but doesnt finding
time)</li>
<li>Android developer (having interest)</li>
<li>7-star coder (need to start)</li>
</ul>
</div>
</div>
</body>
</html>
// 5 – output
// 7
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Using Validation</title>
<style>

#div1{
display: flex;
/* width: fit-content; */
margin: auto;
border: 25px ridge rgb(0, 255, 38);
padding: 50px;
background-color: lightgrey;
}
label{
font-size: 20px;
font-weight: bold;
}
input{
padding: 3px;
}
button{
font-size: 30px;
}

</style>
<script>
function disp() {
if (confirm("Do you want to reset")) {
document.getElementById("r1").type ="reset";
}
}
function disp1() {
if (confirm("Do you want to submit")) {
document.getElementById("r2").type ="submit";
}
}
</script>
</head>
<body>
<div id="div1">
<form id="form1">
<label for="name">Name : </label>
<input type="text" id="name" name="nm"><br><br>
<label for="age">Age : </label>
<input type="number" id="age" name="ag"><br><br>
<label for="phone">Phone number : </label>
<input type="number" id="phone" name="ph"><br><br>
<button type="reset" name="re" onclick="disp()" id="r1"
placeholder = " Reset">Reset </button>
<button type="submit" name="sb" onclick="disp1()" id="r2"
action="backend.php" placeholder = " submit">Submit </button>
</form>
</div>
</body>
</html>
// 6 OUTPUT
// 8
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<style>
body {
}
#container {
display: flex;
border: 20px groove rgb(17, 179, 125);
flex-direction: column;
justify-content: center;
align-items: center;
width: 500px;
margin: auto;
}
</style>
<script>
function add() {
let a, b;
a = parseInt(prompt("Enter operand number 1"));
b = parseInt(prompt("Enter the operand number 2"));
let c = a + b;
document.getElementById("addme").innerHTML = c;
}
function sub() {
let a, b;
let c = a - b;
document.getElementById("subme").innerHTML = c;
}
function mul() {
let a, b;
let c = a * b;
document.getElementById("mulme").innerHTML = c;
}
function div() {
let a, b;
let c = a / b;
document.getElementById("divme").innerHTML = c;
}
</script>
</head>
<body>
<div id="container">
<h2>Calculator</h2>
<label for="add">Click to Perform Addition : </label>
<button onclick="add()" id="add">Click!</button>
<span id="addme"></span><br><br>
<label for="sub">Click to Perform Subtraction : </label>
<button onclick="sub()" id="sub">Click!</button>
<span id="subme"></span><br><br>
<label for="mul">Click to Perform Multiplication : </label>
<button onclick="mul()" id="mul">Click!</button>
<span id="mulme"></span><br><br>
<label for="div">Click to Perform Division : </label>
<button onclick="div()" id="div">Click!</button>
<span id="divme"></span><br><br>
</div>
</body>
</html>
// 8 – OUTPUT

WD Lab 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WD Lab 5

Uploaded by

Copyright:

Available Formats

// 1

<p class="secondp">Lorem, ipsum dolor sit amet consectetur adipisicing

<p class="thirdp">Lorem ipsum, dolor sit amet consectetur adipisicing

<p class="fourthp" style="color: darkorange; background-

<li id="itali" onmouseover="italic()" onmouseout="none()">Faculty of

<a href="#" class="network">Go top</a>

You might also like