Cse3002: Internet and Web Programming: Lab Assignment - 2

CSE3002: INTERNET AND WEB
PROGRAMMING
LAB ASSIGNMENT - 2
SLOT: L27+L28
FACULTY: SRIDHAR RAJ S
Submitted By
Sri Shreya Volety: 19BCB0036
Write a program to demonstrate the concept of HTML, CSS and JavaScript for any
application of your choice. Create a homepage (add details about the application/your
personal details) containing the tabs to toggle between the other pages (registration,
login pages).
a. Add more customized HTML elements including media, files, etc.,
b. Apply CSS styles including selectors, box models, customized background - borders-
text effects, multiple columns layout, etc.,
c. Use JavaScript to validate the fields like name, e-mail, mobile number, etc., in the
registration and login pages.
Homepage: The homepage allows the user to toggle between login and registration
pages, and the registration form will be in the following pages. The validation done for
the form, is based on the javascript validation, and the regular expression variables
passed for the same. The CSS for the index page uses grid displays, box models and
sizing, imported fonts, and hover effects, for the buttons and links.
Output:
Code ( all the comments are in bold):
HTML:
<!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>PlacementStudio</title>


<link rel="stylesheet" href="index.css" />
</head>
<body>

<header class="container header">

<nav class="nav">
<div class="logo">
<h2>PlacementStudio</h2>
</div>
<div class="nav_menu" id="nav_menu">

<button class="close_btn" id="close_btn">
<i class="ri-close-fill"></i>
</button>
<ul class="nav_menu_list">
<li class="nav_menu_item">
<a href="#" class="nav_menu_link">Login</a>
</li>
<a href="form.html" class="nav_menu_link">Registration</a>
</li>
</ul>
</div>
<button class="toggle_btn" id="toggle_btn">

<i class="ri-menu-line"></i>
</button>
</nav>
</header>

<section class="wrapper">

<div class="container">

<div class="grid-cols-2">

<div class="grid-item-1">
<h1 class="main-heading">
Welcome to <span>Placement Studio.</span>
<br />
Get placed at your dream company!
</h1>
<p class="info-text">
Here you can find interview experiences for all the companies and build a fantastic
resume.
</p>
<div class="btn_wrapper">
<button class="btn view_more_btn">
Login <i class="ri-arrow-right-line"></i>
</button>
<button class="btn documentation_btn">Registration</button>

</div>
</div>

<div class="grid-item-2">
<div class="team_img_wrapper">
<img src="./team.jpg" alt="team-img" />
</div>
</div>
</div>
</div>
</section>
<footer></footer>
</body>
</html>
CSS:
@import /* styling for container */

url("https://fonts.googleapis.com/css2?famil .container {
y=Inter:wght@400;500&display=swap"); width: 100%;
/* styling for the full page */ }
*{ @media screen and (min-width: 1040px) {
margin: 0; .container {
padding: 0; width: 1040px;
box-sizing: border-box; margin: 0 auto;
font-family: "Inter", sans-serif; }
} }
/* header */
/* variables used for colors in the code*/ .header {
:root { height: 4.5rem;
--primary-color: #9910e9; padding: 0;
--link-color: #506690; }
--btn-hover-color: #9910e9;
--lg-heading: #161c2d; /* navbar styling with flexbox*/
--text-content: #869ab8; .nav {
width: 100%;
} height: 100%;
display: flex;
/*making sure to reset exisitng html align-items: center;
formatting */ justify-content: space-between;
body { }
width: 100%; /* PlacementStudio Styling */
height: 100vh; .logo h2 {
overflow-x: hidden; font-size: 28px;
background-color: #ffffff; color: var(--primary-color);
} }
ul li { /* Nav menu styling and transitions */
list-style-type: none; .nav_menu_list {
} display: flex;
a{ align-items: center;
text-decoration: none; }
} .nav_menu_list .nav_menu_item {
button { margin: 0 2rem;
background-color: transparent; }
border: none; .nav_menu_item .nav_menu_link {
outline: none; font-size: 16.5px;
cursor: pointer; line-height: 27px;
} color: var(--link-color);
text-transform: capitalize; color: var(--primary-color);
letter-spacing: 0.5px; }
} .info-text {
.nav_menu_link:hover { margin-top: 1.5rem;
color: var(--primary-color); font-size: 19px;
} line-height: 28px;
.toggle_btn { color: #334157;
font-size: 20px; }
font-weight: 600; .btn_wrapper {
color: var(--lg-heading); margin-top: 3.5rem;
z-index: 4; display: flex;
} width: 100%;
.nav_menu, }
.close_btn { .btn {
display: none; width: 110px;
} height: 50px;
.show { background-color: var(--primary-color);
right: 3% !important; display: block;
} font-size: 16px;
/* wrapper class styling */ color: #fff;
.wrapper { text-transform: capitalize;
width: 100%; border-radius: 7px;
padding-left: 0rem; letter-spacing: 1px;
padding-right: 1.7rem; transition: 0.4s;
padding-top: 0rem; }
.btn:hover {
} transform: translateY(-3px);
.grid-cols-2 { background-color: var(--btn-hover-color);
width: 100%; }
height: 100%; .login_btn {
display: grid; width: 180px;
grid-template-columns: repeat(2, 1fr); height: 55px;
gap: 4rem; display: flex;
} align-items: center;
.grid-item-1 { justify-content: center;
padding-top: 5rem; font-size: 16px;
padding-left: 1.5rem; letter-spacing: 0;
} color: #fff;
.main-heading { font-weight: 500;
font-weight: 300; margin-right: 10px;
font-size: 40px; }
line-height: 55px; .login_btn i {
} margin-left: 0.7rem;
.main-heading span { }
display: none;
.reg_btn { }
width: 150px; .nav_menu {
height: 55px; display: block;
font-size: 16px; }
font-weight: 500; }
color: #fff;
letter-spacing: 0; @media screen and (max-width: 768px) {
background-color: #e1e7fc; .logo h2 {
color: #9910e9; font-size: 23px;
} }
.reg_btn:hover { .nav_menu {
background-color: #d7ddf1; position: fixed;
} width: 93%;
.grid-item-2 { height: 100%;
width: 100%; display: block;
height: 100%; top: 2.5%;
} right: -100%;
.team_img_wrapper { background-color: #fff;
width: 500px; padding: 3rem;
max-width: 100%; border-radius: 10px;
height: 440px; box-shadow: 0 0.5rem 1.5rem
} #161c2d1a;
.team_img_wrapper img { z-index: 50;
width: 100%; transition: 0.4s;
height: 100%; }
object-fit: contain; .nav_menu_list {
} flex-direction: column;
align-items: flex-start;
.grid-col-item { margin-top: 4rem;
height: 100%; }
} .nav_menu_list .nav_menu_item {
margin: 1rem 0;
}
footer { .nav_menu_item .nav_menu_link {
width: 100%; font-size: 18px;
background-color: var(--primary-color); }
height: 12px; .close_btn {
margin-top: 8rem; display: block;
} position: absolute;
right: 10%;
/* media queries */ font-size: 25px;
@media screen and (min-width: 768px) { color: #9910e9;
.toggle_btn { }
.close_btn:hover { flex-direction: column;
color: #000; align-items: center;
} justify-content: center;
.wrapper { padding-top: 0;
padding: 0 0.7rem; }
} .main-heading {
.grid-item-1 { font-size: 32px;
padding-left: 0rem; text-align: center;
} line-height: 40px;
.main-heading { }
font-size: 35px; .info-text {
} font-size: 16px;
.login_btn { text-align: center;
width: 140px; padding: 0.7rem;
height: 55px; }
font-size: 13.5px; .btn_wrapper {
margin-right: 1rem; width: 100%;
} display: flex;
align-items: center;
justify-content: center;
} }
.grid-item-2 {
@media screen and (max-width: 991px) { order: 1;
.wrapper { display: flex;
padding-top: 3rem; flex-direction: column;
.grid-cols-2 { justify-content: center;
grid-template-columns: repeat(auto-fit, }
minmax(100%, 1fr)); .team_img_wrapper {
} width: 350px;
.grid-item-1 { height: 350px;
order: 2; }
display: flex; }
Output (Login and Registration)
Registration HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="form.css">
<script src="form.js"></script>
<title>Registration</title>
</head>
<body>

<div class="con-header">

<nav class="nav">
<div class="logo">
</div>
</li>
<a href="#" class="nav_menu_link">Registration</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div id="main">
<div class="h-tag">
<h2>Create Your Account</h2>
</div>

<div class="login">
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr>
<td align="right">Enter First Name :</td>
<td><input type="text" placeholder="Enter First Name here" id="t1" class="tb"
/></td>
</tr>
<tr>
<td align="right">Enter Last Name :</td>
<td><input type="text" placeholder="Enter Last Name here" id="t2" class="tb"
/></td>
</tr>
<tr>
<td align="right">Enter Phone Number :</td>
<td><input type="text" placeholder="Enter Phone Number here" id="t3"
class="tb" /></td>
</tr>
<tr>
<td align="right">Enter Registration Number :</td>
<td><input type="text" placeholder="Enter Registration Number here" id="t4"
class="tb" /></td>
</tr>
<tr>
<td align="right">Enter Year of Graduation :</td>
<td><input type="text" placeholder="Enter Year of Graduation here" id="t5"
class="tb" /></td>
</tr>
<tr>
<td align="right">Upload Resume :</td>
<td><input type="file" id="t6" class="tb" /></td>
</tr>
<tr>
<td align="right">Enter Email ID :</td>
<td><input type="text" placeholder="Enter Email ID here" id="t7" class="tb"
/></td>
</tr>
<tr>
<td align="right">Enter Username :</td>
<td><input type="text" placeholder="Enter Username here" id="t8" class="tb"
/></td>
</tr>
<tr>
<td align="right">Enter Password :</td>
<td><input type="password" placeholder="Enter Password here" id="t9"
class="tb" /></td>
</tr>
<tr>
<td align="right">Enter Confirm Password :</td>
class="tb" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="reset" value="Clear Form" onclick="clearFunc()" id="res"
class="btn" />
<input type="submit" value="Create Account" class="btn" onclick="registration()"
/></td>
</tr>
</table>
</div>
</div>
<footer></footer>
</body>
</html>
CSS:
@import .header {
url("https://fonts.googleapis.com/css2?famil height: var(--fixed-header-height);
y=Inter:wght@400;500&display=swap"); padding: 0 1.7rem;
}
:root {
--primary-color: #9910e9; .nav {
--link-color: #506690; width: 100%;
--btn-hover-color: #9910e9; height: 100%;
--lg-heading: #161c2d; display: flex;
--text-content: #869ab8; align-items: center;
--fixed-header-height: 4.5rem; justify-content: space-between;
} }
/*making sure to reset exisitng html .logo h2 {
formatting */ font-size: 28px;
body { color: #fff;
width: 100%; }
height: 100vh;
overflow-x: hidden; .nav_menu_list {
background-color: #ffffff; display: flex;
ul li { }
list-style-type: none; .nav_menu_list .nav_menu_item {
} margin: 0 2rem;
a{ }
text-decoration: none; .nav_menu_item .nav_menu_link {
} font-size: 16.5px;
button { line-height: 27px;
background-color: transparent; color: #fff;
border: none; text-transform: capitalize;
outline: none; letter-spacing: 0.5px;
cursor: pointer; }
}
/* body css for whole page */
/* header style */ body
.con-header{ {
margin: 0; margin:0px;
padding-left: 50px; background-color:#9910e9;
padding-right: 50px;
box-sizing: border-box; color:#f9fcf5;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
} }
outline:none;
#main{ border-left:5px solid #fff;
width:600px; }
height:auto;
/* css code for button*/
padding-bottom:20px; #main .btn{
margin-left:auto; width:150px;
margin-right:auto; height:32px;
border-radius:5px; outline:none;
padding-left:10px; color:#fff;
margin-top:10px; font-weight:bold;
border-top:3px double #fff; border:0px solid #9910e9;
border-bottom:3px double #fff; text-shadow: 0px 0.5px 0.5px #fff;
padding-top:0px; border-radius: 2px;
} font-weight: 600;
color: #9910e9;
#main table{ letter-spacing: 1px;
font-family: "Inter", sans-serif; font-size:14px;
} background-color:#fff;
/* css code for textbox */ -webkit-transition: 1s;
-moz-transition: 1s;
#main .tb{ transition: 1s;
height:28px; }
width:230px;
border:1px solid #9910e9; #main .btn:hover{
color:#9910e9; background-color:#9910e9;
font-weight:bold; outline:none;
border-left:5px solid #fff; border-radius: 2px;
opacity:0.9; color:#fff;
} border:1px solid #fff;
-webkit-transition: 1s;
#main .tb:focus{ -moz-transition: 1s;
height:28px; transition: 1s;
border:1px solid #9910e9; }
LOGIN FORM HTML (the same CSS styling is used)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="form.css">
<title>Login</title>
</head>
<body>

<div class="con-header">

<nav class="nav">
<div class="logo">
</div>
</li>
<a href="#" class="nav_menu_link">Registration</a>
</li>
</ul>
</div>
</nav>
</div>
</header>

<div id="main">
<div class="h-tag">
<h2>Login</h2>
</div>

<div class="login">
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr>
<td align="right">Enter Username :</td>
<td><input type="text" placeholder="Enter Username here" id="t8" class="tb"
/></td>
</tr>
<tr>
<td align="right">Enter Password :</td>
class="tb" /></td>
</tr>
<tr>
<td align="right">Confirm Password :</td>
class="tb" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" class="btn" onclick="registration()" /></td>

</tr>
</table>
</div>
</div>
<footer></footer>
</body>
</html>
JAVASCRIPT VALIDATION CODE for the REGISTRATION FORM:
Output:
Successful Submission:
Validation for empty fields:
Validation for password characters:
Similarly, all other fields are validated as seen in the code.

CODE:
function registration()
{
var fname= document.getElementById("t1").value;

var lname= document.getElementById("t2").value;
var phone= document.getElementById("t3").value;
var rno= document.getElementById("t4").value;
var year= document.getElementById("t5").value;
var email= document.getElementById("t7").value;
var uname= document.getElementById("t8").value;
var pwd= document.getElementById("t9").value;
var cpwd= document.getElementById("t10").value;
var pwd_expression = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;

var letters = /^[A-Za-z]+$/;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var regno = /^[0-9]{2}[A-Z]{3}[0-9]{4}^/;
var ph = /^[789]\d{9}$^/;
if(fname=='')
{
alert('Please enter your first name');
}
else if(!letters.test(fname))
{
alert('Name field required only alphabet characters');
}
else if(lname=='')
{
alert('Please enter your last name');
}
else if(!letters.test(lname))
{
alert('Name field required only alphabet characters');
}
else if(phone=='')
{
alert('Please enter your phone no.');
}
else if (!ph.test(phone).value)
{
alert('Invalid phone');
}
else if(rno=='')
{
alert('Please enter your registration no.');
}
else if (!regno.test(rno))
{
alert('Invalid registration no.');
}
else if(year=='')
{
alert('Please enter your graduation year');
}
else if (year>2023)
{
alert('Year of Graduation cannot be after 2023');
}
else if(email=='')
{
alert('Please enter your user email id');
}
else if (!filter.test(email))
{
alert('Invalid email');
}
else if(uname=='')
{
alert('Please enter the user name.');
}
else if(!letters.test(uname))
{
alert('User name field required only alphabet characters');
}
else if(pwd=='')
{
alert('Please enter Password');
}
else if(cpwd=='')
{
alert('Enter Confirm Password');
}
else if(!pwd_expression.test(pwd))
{
alert ('Upper case, Lower case, Special character and Numeric letter are
required in Password filed');
}
else if(pwd != cpwd)
{
alert ('Password not Matched');
}
else if(document.getElementById("t9").value.length < 6)
{
alert ('Password minimum length is 6');
}
else if(document.getElementById("t9").value.length > 12)
{
alert ('Password max length is 12');
}
else
{
alert('Thank You for creating an account!');
// Redirecting to other page or webste code.
window.location = "http://www.campuslife.co.in";
}
}
function clearFunc()
{
document.getElementById("t1").value="";
}

Cse3002: Internet and Web Programming: Lab Assignment - 2

Uploaded by

Document Information

Original Description:

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

Cse3002: Internet and Web Programming: Lab Assignment - 2

Uploaded by

Copyright:

Available Formats

CSE3002: INTERNET AND WEB

a. Add more customized HTML elements including media, files, etc.,

<div class="nav_menu" id="nav_menu">

<button class="toggle_btn" id="toggle_btn">

<button class="btn documentation_btn">Registration</button>

@import /* styling for container */

<div class="nav_menu" id="nav_menu">

LOGIN FORM HTML (the same CSS styling is used)

<div class="nav_menu" id="nav_menu">

<input type="submit" value="Login" class="btn" onclick="registration()" /></td>

JAVASCRIPT VALIDATION CODE for the REGISTRATION FORM:

Validation for password characters:

Similarly, all other fields are validated as seen in the code.

var fname= document.getElementById("t1").value;

var pwd_expression = /^(?=.?[A-Z])(?=.?[a-z])(?=.?[0-9])(?=.?[#?!@$%^&*-])/;

You might also like