Internet and Web Programming: Mid-Term LAB

Internet and Web Programming
Mid-Term LAB
Name: Chandan Thakur

Reg No.: 19BCE2640
HTML and JavaScript Code

<!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>Mid Term</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,3
00;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,9
00&display=swap"
rel="stylesheet">
</head>
<body>
<form>
<div class="title1">
<h1>Journey Details</h1>
</div>
<div class="journey">
<div class="left">
<div class="first">
<p class="label">Train No./ Name:</p>
<p class='value_data'>12606 / PALLAVAN EXP</p>
</div>
<div class="second">
<p class="label">From Station:</p>
<p class='value_data'>TIRUCHCHIRAPALI-TPJ</p>
</div>
<div class="third">
<p class="label">Boarding Station:</p>
<select class="value_data station_select" name='boarding' id='boarding'>
<option value="TPJ" class="aaa">TIRUCHCHIRAPALI-TPJ</option>
</select><span>Schedule</span>
</div>
</div>
<div class="middle">
<div class="first">
<p class="label">Journey Date:</p>
<p class='value_data'>26-Mar-2017</p>
</div>
<p class="label">To Station:</p>
<p class='value_data'>CHENNAI EGMORE-MS</p>
</div>
<div class="third">
<p class="label">Reservation Upto:</p>
<p class='value_data'>CHENNAI EGMORE-MS</p>
</div>
</div>
<div class="right">
<div class="first">
<p class="label">Class:</p>
<p class='value_data'>CHAIR CAR</p>
</div>
<p class="label">Quota</p>
<p class='value_data'>GENERAL</p>
</div>
</div>
</div>
<div class="journey_list">
<button>Show Avaliability and Fare</button>
<p>Save Journey List</p>
</div>
<div class="title1 title2">
<p>
<span>
<h6 class="subTitle">Select Your Travel List</h6>
</span>
<span>
<h6 class="subTitle">Select Passenger From Your Master List</h6>
</span>
</p>
</div>
<h1 class="title1 title">Passenger Details</h1>
<table class="tbl">
<tr class="table_head">
<th>S.No</th>
<th>Name</th>
<th class="age">Age</th>
<th>Gender</th>
<th>Berth Preference</th>
<th>Senior Citizen</th>
<th>Opt Berth</th>
<th>Nationality</th>
<th>ID Card Type</th>
<th>ID Card No</th>
</tr>
<tr class="table_data">
<td class="table_indi">1</td>
<td class="table_indi"><input type="text"></td>
<td class="table_indi"><select>
<option>Select</option>
</select></td>
<option>No Preference</option>
</select></td>
<td class="table_indi"><input type="checkbox" name="" id=""

class="checkbox"></td>
<td class="table_indi"><input type="checkbox" class="checkbox"
checked></td>
<option>India</option>
</select></td>
<option>ID Card Type</option>
</select></td>
</tr>
</select></td>
</select></td>
checked></td>
</select></td>
</select></td>
</tr>
</select></td>
</select></td>

checked></td>
</select></td>
</select></td>
</tr>
</select></td>
</select></td>

checked></td>
</select></td>
</select></td>
</tr>
</select></td>
</select></td>

checked></td>
</select></td>
</select></td>
</tr>
</select></td>
</select></td>

checked></td>
</select></td>
</select></td>
</tr>
</table>
<div class="submit_btn">
<div class="bbtn">
<button class="submit_btns" type="submit"

onclick="validateForm()">Next</button>
<button class="submit_btns">Replan</button>
</div>
</div>
</form>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
var age = document.getElementById('age1').value;
if (age === "") {
return true;
}
age = parseInt(age, 10);
if (isNaN(age) || age < 1 || age > 100) {

alert("The age must be a number between 1 and 100");
return false;
}
}
</script>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
/* font-family: 'Poppins', sans-serif; */
font-family: Arial, Helvetica, sans-serif;
}
.title1, .title{
background-color: #3568c3;
width: 100%;
display: flex;
align-items: center;
color: white;
padding: 10px 10px;
font-weight: 300;
}
.journey{
display: flex;
flex-direction: row;
justify-content: space-between;
color: grey;
padding: 15px;
}
.left,.middle,.right{
width: 33%;
}
.first,.second,.third{
display: flex;
margin: 10px 0;
}
.label{
width: 140px;
color: rgb(78, 78, 78);
}
.value_data{
padding-left: 25px;
width: 250px;
}
.station_select{
margin-left: 26px;
width: 200px;
height: 30px;
}
.aaa{
margin-left: -25px;
}
.journey_list{
display: flex;
flex-direction: row-reverse;
margin: 20px 250px 20px 0;
align-items: center;
}
.journey_list p{
margin: 0 50px;
}
.journey_list button{
padding: 10px;
color: white;
background-color: #5381cf;
border: none;
border-radius: 5px;
font-weight: bold;
}
.third span{
margin-top: 7px;
margin-left: 5px;
color: #2355ac;
}
.title2{
display: flex;
width: 92%;
text-align: center;
justify-content: center;
}
.subTitle{
margin: 0 20px;
font-size: 16px;
}
.title{
font-weight: bold;
color: white;
}
.tbl{
width: 90%;
}
table{
width: 100%;
padding: 10px;
text-align: center;
border-collapse: collapse;
}
.table_data{
border: 1px solid grey;
}
.table_head{
height: 35px;
background-image: linear-gradient(white, #dbe7f3);
}
table input, table select{
border: none;
height: 30px;
border: 0.5px solid grey;
}
.checkbox{
background-color: white;
width: 20px;
}
table tr{
margin: 10px 0;
}
.table_indi{
padding: 10px;
border-right: 1px solid grey;
}
.age{
width: 20px;
}
.submit_btn{
display: flex;
justify-content: center;
background-color: grey;
padding-top: 10px;
}
.submit_btns{
border: none;
height: 30px;
border: 0.5px solid grey;
margin: 10px;
width: 150px;
height: 40px;
}
.bbtn{
background-color: white;
margin-left: -100px;
}
Result

Internet and Web Programming: Mid-Term LAB

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

Internet and Web Programming: Mid-Term LAB

Uploaded by

Copyright:

Available Formats

Internet and Web Programming

Name: Chandan Thakur

HTML and JavaScript Code

<td class="table_indi"><input type="checkbox" name="" id=""

<td class="table_indi"><input type="checkbox" name="" id=""

<td class="table_indi"><input type="checkbox" name="" id=""

<td class="table_indi"><input type="checkbox" name="" id=""

<td class="table_indi"><input type="checkbox" name="" id=""

<button class="submit_btns" type="submit"

if (isNaN(age) || age < 1 || age > 100) {

You might also like