Scribd
Upload
41 views12 pages

ASSESSMENT2WEBLAB

The document contains code for a trucking insurance quote request form with various input fields like company name, owner details, email, date of birth, DOT number, CDL license status, and loss payees. It also contains JavaScript code to validate the date of birth input. The second question contains code for two HTML pages with the first page containing colored circular div elements linked to the second page, and simple text on the second page.

Uploaded by

raghavkejriwal199
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views12 pages

ASSESSMENT2WEBLAB

The document contains code for a trucking insurance quote request form with various input fields like company name, owner details, email, date of birth, DOT number, CDL license status, and loss payees. It also contains JavaScript code to validate the date of birth input. The second question contains code for two HTML pages with the first page containing colored circular div elements linked to the second page, and simple text on the second page.

Uploaded by

raghavkejriwal199
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

ASSESMENT-2

SUBMITTED BY: Raghav Kejriwal


22BCE3353

Q1:

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>TRUCKING INSURANCE QUOTE REQUEST
FORM</h3>
<form>
<div>
<label for="company name">Company Name</label>
<input type="name" required></input>
</div>
<br>
<div>
<label for="owner">Owner</label>
<input type="name" required></input> First Name
<input type="name" required></input> Middle Name
<input type="name" required></input> Last Name
</div>
<br>
<div>
<label for="email">E-mail</label>
<input type="email" required></input>
</div>
<br>
<div>
<label for="dob">D.O.B</label>
<input type="date" id="val">
</div>
<br>
<div>
<label for="dot">DOT</label>
<input type="number">
</div>
<br>
<div>
<label for="cdl">Does owner have CDL
License?</label>
<input type="checkbox"> Yes <br>
<input type="checkbox"> No
</div>
<br>
<div>
<label for="loss">Loss Payees/Lease</label>
<input type="checkbox"> Yes <br>
<input type="checkbox"> No
</div>
<br>
<div>
<button type="button"
onclick="validate()">Submit</button>
</div>
<br>
</form>

<script>
function validate(){
const user = document.getElementById("val").value;
const uservalue = new Date(user);
let days = 31 - uservalue.getDay();
let months = 12 - uservalue.getMonth();
let year = 2015 - uservalue.getFullYear();
if(year>0){
alert("Invalid Date");
}
else{
if(months>0){
alert("Invalid Date");
}
else{
if(days>0){
alert("Invalid Date");
}
}
}
}
</script>
</body>
</html>

SCREENSHOT:
Q2:

CODE:
Index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<style>
html{
background-color: lightgray;
}
.dis{
display: flex;
flex-direction: row;
}
.green{
background-color: green;
border-radius: 50%;
height: 100px;
width: 100px;
position: absolute;
left: 100px;
z-index: 1;
top: 50px;
opacity: 60%;
}
.yellow{
background-color: orange;
border-radius: 50%;
height: 160px;
width: 160px;
position: absolute;
left: 180px;
z-index: 2;
top: 20px;
opacity: 60%;
}
.white{
background-color: antiquewhite;
border-radius: 50%;
height: 140px;
width: 140px;
position: absolute;
left: 300px;
z-index: 3;
top: 30px;
opacity: 60%;
}
.red{
background-color: red;
border-radius: 50%;
height: 200px;
width: 200px;
position: absolute;
left: 390px;
z-index: 4;
opacity: 60%;
}
.lightblue{
background-color: aqua;
border-radius: 50%;
height: 160px;
width: 160px;
position: absolute;
left: 510px;
z-index: 3;
top: 20px;
opacity: 60%;
}
.pink{
background-color: pink;
border-radius: 50%;
height: 100px;
width: 100px;
position: absolute;
left: 630px;
z-index: 2;
top: 50px;
opacity: 60%;
}
.darkblue{
background-color: blue;
border-radius: 50%;
height: 120px;
width: 120px;
position: absolute;
left: 760px;
z-index: 1;
top: 40px;
opacity: 60%;
}
</style>
</head>
<body>
<div class="dis">
<a href="index2.html"><div class="green"></div></a>
<div class="yellow"></div>
<div class="white"></div>
<a href="index2.html"><div class="red"></div></a>
<div class="lightblue"></div>
<div class="pink"></div>
<a href="index2.html"><div class="darkblue"></div></a>
</div>
</body>
</html>
Index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
SCREENSHOTS:

You might also like