Scribd
Upload
8 views41 pages

WP Manual Complete

The document outlines a practical assignment for a Web Programming course at C. K. Pithawala College of Engineering & Technology, detailing tasks involving HTML, CSS, JavaScript, and PHP-MySQL. Students are required to create a static web page, implement JavaScript functionalities, and develop a mini project with CRUD operations. The document includes a sample HTML structure and CSS styles for a landing page design.

Uploaded by

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

WP Manual Complete

The document outlines a practical assignment for a Web Programming course at C. K. Pithawala College of Engineering & Technology, detailing tasks involving HTML, CSS, JavaScript, and PHP-MySQL. Students are required to create a static web page, implement JavaScript functionalities, and develop a mini project with CRUD operations. The document includes a sample HTML structure and CSS styles for a landing page design.

Uploaded by

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

Web Programming (3160713) 220090107061

COMPUTER ENGINEERING
DEPARTMENT
C. K. PITHAWALA COLLEGE OF ENGINEERING &
TECHNOLOGY, SURAT
GUJARAT TECHNOLOGICAL
UNIVERSITY

Practical Assignment

Name of
Student
Enrollment No.

Subject Name Web Programming

Subject Code 3160713

Student Class BE III, Sem VI

Academic Year 2023-24

Date
:
Plac
e:

Page 1 of 30
Web Programming (3160713) 220090107061

INDE
X

Sectio Problem Statement Date Sign


n
HTML & CSS Create a static web page
using HTML 5 and CSS
3 as per the reference
figure.
1.1 Landing Page - 1

1.2 Plan Selection

1.3 Single Page Website

Javascript Implement using javascript.

2.1 Prompt box and alert box

2.2 Validation

2.3 Regular expression

2.4 CSS manipulation

PHP-MySQL Design and develop a


simple mini project having
CRUD operations using
PHP as a server technology
and MySQL as a database.
3.1 Mini Project

Page 2 of 30
Web Programming (3160713) 220090107061

PRACTICAL 1.1 – Landing Page 1

Index.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" maximum-scale=1.0 user-
scalable=no>
<title>CKPCET College Campus | Landing Page</title>
<link rel="icon" type="image/X-icon" href="/WP/landing page/ckpcet logo.png">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://kit.fontawesome.com/a62fc32c54.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="hed">
<div class="apply">
<a href="https://ckpcet.ac.in/" target="_blank">Apply Now</a>
</div>
</div>
<div class="footer-bottom">
<div class="foot">
<p><i class="fa-solid fa-phone"></i><a href="tel:+917862824298">+91 78628 24298
(BE/ME)</a></p>
<p><i class="fa-solid fa-phone"></i><a href="tel:+919023437774">+91 90234 37774
(BBA/BCA/BCOM)</a></p>

Page 3 of 30
Web Programming (3160713) 220090107061

<p><i class="fa-solid fa-phone"></i><a href="tel:+919879229825">+91 98792 29825


(BPharm)</a></p>
<p><i class="fa-solid fa-envelopes-bulk"></i><a
href="mailto:[email protected]">[email protected]</a></p>
<p><i class="fa-solid fa-envelopes-bulk"></i><a
href="mailto:[email protected]">[email protected]</a></p>
<p><i class="fa-solid fa-map-location-dot"></i><a
href="https://goo.gl/maps/tbJVinE8joDNvqbZ6" target="_blank">Reach Us</a></p>
</div>
</div>
<div class="hed1">
<div class="logo-container">
<img class="logo" type="image" src="/WP/landing page/ckpcet logo.png">
<p>CKPCET</p>
</div>
<div class="navigation">
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">PAGE</a>
<a href="#">EVENT</a>
<a href="#">CONTACT</a>
</div>
<div class="search">
<input id="search" type="search" placeholder="Search here...">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
<div class="bg-container">
<div class="bg-arrow">
<i class="fa-solid fa-arrow-left"></i>
<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<div class="better">
<h1>Better Education For A <br>Better World</h1>
<button>Read More</button>
</div>
<div class="sub-div">
<div class="box-container">
<div class="box1">
<i class="fa-brands fa-leanpub"></i>
<h3>Learn Courses Online/Offline</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, aspernatur maxime
incidunt ducimus placeat neque cupiditate recusandae nobis suscipit.</p>
<button>Read More</button>
</div>
<div class="box2">
<i class="fa-solid fa-people-group"></i>
<h3>Highly Qualified Teachers</h3>

Page 4 of 30
Web Programming (3160713) 220090107061

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel earum odit quia
deserunt voluptas adipisci voluptatem amet repellendus saepe sint.</p>
<button>Read More</button>
</div>
<div class="box3">
<i class="fa-sharp fa-solid fa-book"></i>
<h3>Library & Book Stores</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa omnis corporis dolore,
esse unde nisi explicabo id tempore perferendis animi!</p>
<button>Read More</button>
</div>
</div>
</div>
</body>
</html>

style.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: rgb(254, 254, 254);
}
.hed{
position: fixed;
background-color: rgb(11, 40, 94);
top: 0;
width:
100%;
height: 5vh;
display: flex;
justify-content: end;
padding-right:
150px;
}
.apply{ displa
y: flex;
background:
transparent; justify-
content: center; width:
10%;
height: 100%;
align-items:
center;
background-color: #ffff00;
}
.apply:hover{
background-color: #ffff00e9;
color: #000000;
font-weight:
bold; font-size:
18px;
}
.footer-bottom{
display: flex;
position:
absolute; width:
100%; height:
5vh;
background-color: rgb(11, 40, 94);
bottom: 0;
justify-content:
center; align-items:
center;
}
.footer-bottom
.foot{ display:
flex; width: 90%;
height: 90%;
background-color: #ffff00;
justify-content: space-between;
align-items: center;
padding: 0px 10px 0px
10px; background:
transparent;
}
.foot p{
background-color:
black; background:
transparent;
Page 5 of 30
Web Programming (3160713) 220090107061

padding: 4px;
margin-right:
5px;
background-color: #fcfc01;
}
.foot i:hover{
padding:
3px;
}
.foot a{
text-decoration:
none; color:
#ffffffaa;
font-weight: bold;
background:
transparent;
}
.foot a:hover{
color:
#ffffff;

}
.hed1{
position: fixed;
display: flex;
width: 100%;
height: 6vh;
margin-top:
5vh;
background: transparent;
background-color:
#ffffff; color: #000000;
justify-content: space-
between; align-items: center;
}
.hed1 p{
background:
transparent; font-size:
30px;
user-select: none;
}
.logo{
height: 40px;
margin: 5px;
user-select:
none;
border: 1px solid rgb(0, 0,
0); border-radius: 100px;
margin-left: 100px;
}
.logo-
font-size: 35px;
margin-left:
4px;
text-shadow: -1px 1px 0
#ffffff, 1px 1px 0 #efe146,
1px -1px 0 #42afac,
-1px -1px 0 #f5ef44;
}
.navigation{
background:
transparent; font-
weight: bold;
gap: 20px;
}
.search{
background:
transparent; display:
flex;
position: relative;
align-items: center;
justify-content:
right; margin-right:
50px; height: 30px;
width: 20%;
border-radius: 20px;
}
.search i{
color:
black;
border: 2px solid black;
background-color: rgb(189, 198, 195);
border-radius:
100%; padding:
5px; margin-inline:
10px;
}
.search i:hover,.search
input:hover{ font-size: 20px;
}
.search input{
display: flex;
height: 30px;
width:
100%; color:
black;
background: transparent;
background-color: rgb(189, 198,
195); border: none;
border-radius:
20px; padding-left:
20px;
Page 6 of 30
Web Programming (3160713) 220090107061

justify-content: end; font-size: 30px;


align-items: right; padding: 0px 3px 0px 3px;
background: box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transparent; padding- }
right: 10px;
} border-radius: 100%;
.navigation a{
background: transparent;
color: rgb(172, 171,
171); text-decoration:
none; font-size: 15px;
padding-inline:
10px; margin-inline:
5px; border: 1px;
border-radius: 20px;
}
.navigation a:hover{
color: rgb(0, 0, 0);
font-size: 17px;
border-bottom: 3px solid rgb(0, 0, 0);
border-top: 3px solid rgb(0, 0,
0); text-decoration-line:
underline;
}
.bg-container{
display: flex;
position: fixed;
margin-top:
11vh;
background-color: aqua;
width: 100%;
height: 665px;
justify-content: center;
align-items: center;
background-image: url("/WP/landing
page/bg4.jpg");
background-size: 100%
100%; background-repeat:
no-repeat;
}
.bg-arrow{
display: flex;
background-color: rgb(143, 150, 50);
background: transparent;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
}
.bg-arrow i{
background: transparent;
color: #0000008e;
background-color: rgba(255, 255, 255,
0.5);
.bg-arrow i:hover{ .better h1{
background-color: rgba(179, 176, 176, height: 100px;
0.537); border: 2px solid black; width: 100%;
color: #000000; font-size:
} 45px;
.better{ text-align: center;
displa background-color: blueviolet;
y: background: transparent;
flex; word-spacing: 10px;
position: letter-spacing: 1px;
absolute; color: #ffffff;
height: user-select: none;
200px; text-shadow: 3px 0px 7px rgba(0, 0, 0, 0.8), -
width: 3px 0px 7px rgba(0, 0, 0, 0.8), 0px 4px 7px
550px; rgba(0, 0, 0, 0.8);
background- }
color: blue; .better button{
background: word-spacing: 2px;
transparent; top: letter-spacing: 1px;
29vh; padding: 5px 10px 5px
left: 50%; 10px; margin-top: 20px;
transform: border: none;
translate(-50%); border-radius: 8px;
justify-content: background: transparent;
center; align-items: color: #000000;
center; background-color: #fcfc01a5;
flex-direction: column; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
} }

Page 7 of 30
Web Programming (3160713) 220090107061

.better button:hover{
border-radius:
10px;
background-color:
#fcfc01bb; border: 2px solid
black;
font-weight: bold;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.sub-div{
width: 70%
;
height:
40%; top:
55vh; left:
50%;
transform: translateX(-
50%); position: absolute;
background-color: black;
background: transparent;
display: flex;
justify-content:
center; align-items:
center;
}
.sub-div .box-
container{ display:
flex;
width: 90%; height:
90%; top:10vh;
background-color: cadetblue;
background: transparent;
justify-content: center;
align-items: center;
}
.box1, .box2, .box3
{ display: flex;
flex-direction: column;
justify-content: space-
between; align-items: center;
height: 90%; width: 90%;
}
.box1:hover, .box2:hover, .box3:hover
{ background-color: #fefefcec;
border: 0.5px solid black;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px
0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px
inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0,
0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px
4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0,
0, 0.09) 0px 32px 16px;
}
.box1 i,.box2 i,.box3
i{ color: rgb(0, 0, 0);
font-size: 25px;
margin-top: 30px;
background: transparent;
}
.box1 h3,.box2 h3,.box3
h3{ background:
transparent;
}
.box1 p,.box2 p,.box3
p{ text-align:center;
font-size: 15px;
background:
transparent; margin-
inline: 20px;
}
.box1 button,.box2 button,.box3
button{ margin-bottom: 20px;
padding: 5px 10px 5px 10px;
background-color: #fcfc01b0;
border: none;
border-radius: 4px;
}
.sub-div button:hover{
background-color:
#fcfc01; border: 1px solid
black; font-weight: bold;
}

Page 8 of 30
Web Programming (3160713) 220090107061

PRACTICAL 1.2 – Plan Selection

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PremierFlix | Subscription Landing Page</title>
<link rel="icon" type="image/X-icon" href="/WP/landing page Subscription/logo.png">
<link rel="stylesheet" href="/WP/landing page Subscription/style.css">
<script src="https://kit.fontawesome.com/a62fc32c54.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="hed">
<div class="main_hed">
<div class="logo_and_nav">
<div class="image">
<img src="/WP/landing page Subscription/logo.png" alt="PremierFlix Logo" id="image1">
<h1 id="logo_name"><span style="color: white;">PREMIER</span><SPAN style=" color:
red;">FLIX</SPAN></h1>
</div>
<div class="nav">
<a href="#" id="nav1"><i class="fa-solid fa-house"></i>HOME</a>
<a href="#" id="nav2"><i class="fa-solid fa-video"></i>PREMERS</a>
<a href="#" id="nav3"><i class="fa-solid fa-film"></i>MOVIES</a>
<a href="#" id="nav4"><i class="fa-brands fa-youtube"></i>SERIES</a>
<a href="#" id="nav5"><i class="fa-regular fa-money-bill-1"></i>PRICING</a>
<a href="#" id="nav6"><i class="fa-solid fa-ticket"></i>TICKETS</a>

Page 9 of 30
Web Programming (3160713) 220090107061

</div>
</div>
<div class="sign_button">
<h4 id="but1">Sign in</h4>
<button id="but2">Get started free</button>
</div>
</div>
</div>
<div class="container">
<div class="main-container">
<div class="plan-heading">
<div class="plan-heading1">
<h1>Plan for every stage of your <br>watching journey</h1>
<h6>Start watching for free and pay as you more enjoy.</h6>
</div>
<div class="plan-heading2">
<h3>Subscription Plan & Pricing</h3>
<div id="month-year">
<button id="year">Yearly</button>
<button id="month">Monthly</button>
</div>
</div>
</div>
<div class="plan-select">
<div class="plan1">
<div id="plan-type1">
<p>Silver Screen</p>
</div>
<div id="plan-price1">
<div id="plan1">
<p><sup>$</sup>100</p>
</div>
<div id="content1">
<p><span>&#10003</span> 4K video Resolution</p>
<p><span>&#10003</span> Ad Free Viewing</p>
<p><span>&#10003</span> Unlimited Device Access</p>
<p><span>&#10003</span> Offline downloads</p>
</div>
<div id="button1">
<button><i class="fa-solid fa-cart-shopping" style="margin-right:
10px;"></i>PURCHASE</button>
</div>
</div>
</div>
<div class="plan2">
<div id="plan-type2">
<p>Platinum Premier</p>
</div>
<div id="plan-price2">
<div id="plan2">
<p><sup>$</sup>10</p>
</div>

Page 10 of 30
Web Programming (3160713) 220090107061

<div id="content2">
<p><span>&#10003</span> Full HD Video resolution</p>
<p><span>&#10003</span> Ad Free Viewing</p>
<p><span>&#10003</span> Upto 3 Device Access</p>
<p><span>&#10003</span> Offline downloads</p>
</div>
<div id="button2">
<button><i class="fa-solid fa-cart-shopping" style="margin-right:
10px;"></i>PURCHASE</button>
</div>
</div>
</div>
<div class="plan3">
<div id="plan-type3">
<p>Freemium</p>
</div>
<div id="plan-price3">
<div id="plan3">
<p><sup>$</sup>0</p>
</div>
<div id="content3">
<p><span>&#10003</span> 480p video Resolution</p>
<p><span>&#10003</span> Ad Supported Viewing</p>
<p><span>&#10003</span> Single Device Access</p>
<p><span>&#10003</span> Streaming Only</p>
</div>
<div id="button3">
<button><i class="fa-solid fa-cart-shopping" style="margin-right: 10px;"></i> CHOOSE
PLAN</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="foot">
<div class="main_foot">
<div class="main_foot_logo">
<h1 id="foot_logo_name"><span style="color: white;">PREMIER</span><SPAN style=" color:
red;">FLIX</SPAN></h1>
<p>A cinematic experience like no <br>other at the comfort of your home</p>
</div>
<div class="social_link">
<h4>FOLLOW US ON OUR SOCIALS</h4>
<div class="icon">
<a href="#" id="icon1"><i class="fa-brands fa-square-youtube"></i></a>
<a href="#" id="icon2"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" id="icon3"><i class="fa-brands fa-facebook"></i></a>
<a href="#" id="icon4"><i class="fa-brands fa-square-instagram"></i></a>
</div>
</div>
<div class="contact">

Page 11 of 30
Web Programming (3160713) 220090107061

<h4>CONTACT INFORMATION</h4>
<div class="contact-area">
<div id="i_tag">
<i class="fa-solid fa-location-dot"></i>
<i class="fa-solid fa-phone"></i>
<i class="fa-solid fa-envelope"></i>
</div>
<div id="a_tag">
<a href="#">Eastlands, Lane 40</a>
<a href="#">+254 798765433</a>
<a href="#">[email protected]</a>
</div>
</div>
</div>
<div class="imp_link">
<h4>IMPORTANT LINKS</h4>
<div class="link">
<a href="#" id="link1">Privacy Policy</a>
<a href="#" id="link2">Terms & Conditions</a>
<a href="#" id="link3">Help Center</a>
</div>
</div>
</div>
</div>
</body>
</html>

style.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hed{
position:
sticky; height:
3em; width:
100%;
top: 0;
background-color: rgb(0, 0, 0);
}
.foot{
position: fixed;
/* height: 15vh;
*/ height: 7.4em;
width: 100%;
bottom: 0;
background-color:
black; display: flex;
align-items: center;
}
.container{
height: calc(100vh - 7.4em -
3em); width: 100%;
background-color: rgba(0, 0, 0,
0.9); display: flex;
justify-content:
center; align-items:
center;
}
.hed .main_hed
{ height:
100%;
width:
100%;
display: flex;
justify-content: space-
around; align-items: center;
}
.main_hed .logo_and_nav

Page 12 of 30
Web Programming (3160713) 220090107061

align-items: center;
}
.logo_and_nav .image
{ height: 100%;
width: 20%;
display:
flex;
justify-content:
center; align-items:
center;
}
.image
#image1{ heig
ht: 100%;
border-radius: 100%;
}
.image
#logo_name{ font-
weight: bold; font-
size: 100%;
}
.logo_and_nav .nav
{ height: 100%;
width: 80%;
display:
flex;
justify-content:
center; align-items:
center;
}
.nav
#nav1,#nav2,#nav3,#nav4,#nav5,#nav6{ te
xt-decoration: none;
margin-inline:
1%; color: white;
font-weight:
bold; font-size:
80%;
}
.nav
#nav1:hover,#nav2:hover,#nav3:hover,#nav4:ho
ver,#nav5:hover,#nav6:hover{
color: rgba(235, 50, 50,
0.877); text-decoration:
underline;
border-bottom: 2px solid rgba(235, 50, 50,
0.877);
padding-bottom: 2px;
}
#nav1 i,#nav2 i,#nav3 i,#nav4 i,#nav5 i,#nav6
i{ color: white;
margin-right:
width:
25%;
display:flex
;
justify-content:
center; align-items:
center;
}
.sign_button
#but1{ width:
20%;
text-align: center;
margin-inline:
5%; color: white;
font-size: 1.2em;
border: px solid rgb(255, 255,
255); color: white;
background-color: rgba(20, 34, 192,
0.708); border-radius: 15px;
padding: 4px 0px;
}
.sign_button
#but2{ padding:
5px; height: 75%;
width: 50%;
font-size: 100%;
border-radius:
20px;
}
#but1:hover{
color:
black;
background-color: white;
}
#but2:hover{
background-color: rgba(20, 34, 192,
0.708); color: white;
}

/* footer */
.foot .main_foot
{ height:
100%;
width:
100%;
display: flex;
justify-content:
center; align-items:
center;
}
.main_foot_logo
{ height: 90%;
Page 13 of 30
Web Programming (3160713) 220090107061

width: 90%;
/* font-size: 1.5em; */
}
.main_foot_logo
p{ height: 50%;
width: 90%;
text-align: left;
color: white;
font-size:
70%;
}
.social_link{
height:
90%;
width: 25%;
}
.social_link h4{
text-align:
center; margin:
1%;
font-size: 60%;
color: rgb(8, 0, 255);
}
.social_link .icon
{ height: 40%;
width:
100%;
display: flex;
justify-content:
center; align-items:
center;
}
.icon #icon1,.icon #icon2,.icon #icon3,.icon
#icon4{ colo
r: white;
margin-inline: 2%;
font-size: 100%;
}
.contact{ hei
ght: 90%;
width: 25%;
}
.contact h4{
text-align:
center; margin:
1%;
font-size: 60%;
color: rgb(8, 0, 255);
}
.contact .contact-
area{ height: 80%;
width:
width:70% ;
display:
flex;
flex-direction:
column; padding-top:
1%;
}
.contact-area
#a_tag{ height:
100%;
width:
100%;
display: flex;
flex-direction:
column; padding-top:
1%;
}
#i_tag i{
text-align: end;
margin: 1%
5%;
padding: 1% 5%;
font-size: 80%;
color:rgb(8, 0, 255) ;
}
#a_tag a{
text-align: start;
margin: 1%
0%;
font-size: 80%;
text-decoration:
none; color: white;
}
.imp_link{ h
eight: 90%;
width: 25%;
}
.imp_link h4{
text-align:
start;
margin: 1% 0% 0% 30%;
font-size: 60%;
color: rgb(8, 0, 255);
}
.imp_link .link
{ height:
80%;
width:
100%;
display: flex;
flex-direction: column;
}

Page 14 of 30
Web Programming (3160713) 220090107061

background: transparent; #plan-price1, #plan-price2, #plan-price3{


display: flex; height: 85%;
flex-direction: column; width: 90%;
justify-content: center; background-color: rgba(0, 0, 0,
align-items: center; 0.237); border-bottom-left-radius:
} 80px; border-bottom-right-radius:
15px;
.plan-heading{ display: flex;
height: 30%; flex-direction: column;
width: 95%; justify-content: center;
background-color: rgba(0, 0, 0, align-items: center;
0.475); border-radius: 20px; }
display: flex; #plan-type1:hover,#plan-type2:hover, #plan-
align-items: type3:hover {
top; background-color: rgba(235, 50, 50, 0.313);
} }
.plan-select{ #plan-price1:hover,#plan-price2:hover,#plan-
height: 70%; price3:hover{
width: 70%; background-color: rgba(20, 34, 192, 0.708);
background-color: rgb(202, 241, 118); }
background: transparent; #plan1, #plan2 ,#plan3{
display: flex; height: 20%;
justify-content: space-around; width: 90%;
align-items: center; display: flex;
} justify-content: center;
.plan-select align-items: center;
sup{ font-size: }
60%; #plan1 p, #plan2 p,#plan3
} p{ font-size: 250%;
.plan1, .plan2 ,.plan3{ font-weight: bold;
height: 90%; color: rgba(235, 50, 50, 0.877);
width: calc(100%/3 - 1%); /*1% is for }
padding, 3 is eqal plan 1-to-3*/ #content1, #content2 ,#content3{
background-color: cadetblue; height: 60%;
background: transparent; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: left;
} }
#plan-type1, #plan-type2, #plan-type3{ #content1 p, #content2 p,#content3 p{
height: 15%; margin: 3% 8% 2% 15%;
width: 90%; color: white;
background-color: rgba(235, 50, 50, }
0.877); display: flex; #content1 p span, #content2 p span,#content3 p
justify-content: center; span{
align-items: center; color: rgba(235, 50, 50, 0.877);
border-top-right-radius: 80px; border: 1px solid rgba(235, 50, 50, 0.877);
border-top-left-radius: 15px; border-radius: 100%;
} padding: 0px 3px;
#plan-type1 p, #plan-type2 p, #plan-type3 margin: 0px 3px;
p{ font-size: 150%; }
font-weight: bold; #button1, #button2 ,#button3{
color: white;
}
Page 15 of 30
Web Programming (3160713) 220090107061

height: 20%;
width: 90%;
display:
flex;
justify-content:
center; align-items:
center;
}
#button1 button, #button2 button
,#button3 button{
height: 60%;
width: 70%;
font-size:
15px;
border-radius:
10px; color: white;
background-color: rgba(235, 50, 50,
0.877); border: none;
}
.plan-
heading1{ hei
ght: 80%;
width: 60%;
font-size:
140%; padding:
8px; display:
flex;
flex-direction:
column; justify-
content: center;
}
.plan-heading1 h1{
line-height: 40px;
color: white;
}
width: 40%;
text-align:
center; padding-
top: 1%;
font-size:
150%; display:
flex;
flex-direction:
column; align-items:
center; color: white;
font-weight: bold;
}
.plan-heading2 #month-
year{ height: 25%;
width: 25%;
background-color: rgb(54, 82,
157); border-radius: 5px;
margin: 4%;
padding:
5px; display:
flex;
}
#month-year:hover,
#year:hover{ border: 1px solid
white;
}
#year,#month{
height:
100%;
width: calc(100%/2);
border: 1px solid
black; color: white;
background-color: rgba(235, 50, 50,
0.877); border-radius: 5px;
}

Page 16 of 30
Web Programming (3160713) 220090107061

PRACTICAL 1.3 – Single Page Website

Page 17 of 30
Web Programming (3160713) 220090107061

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Page - Neaty</title>
<link rel="stylesheet" href="/WP/single_page_website/style.css">
</head>
<body>
<div class="main">
<div class="left">
<div class="logo">
<img src="/WP/single_page_website/neaty_logo.png" alt="This is logo of Neaty">
</div>
<div class="nav">
<ul>
<li style="color: yellow;">Welcome</li>
<li>About Us</li>
<li>Gallery One</li>
<li>Second Gallery</li>
<li>Third Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="right">
<div class="main-img">
<img src="/WP/single_page_website/main.png" alt="This is main image">
</div>
<div class="content">
<div class="welcome">
<h1>Welcome to Neaty Design</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam quo vero, neque facilis
cupiditate repellendus tenetur quae architecto minima ab nam libero! Vitae recusandae, possimus at,
maiores exercitationem et sequi tempora cumque impedit veniam nobis, culpa repudiandae architecto
laudantium provident dicta dolores quas. Voluptates, quo minus. Quas natus fuga dignissimos
laboriosam aspernatur consequuntur! Accusantium excepturi sint reprehenderit delectus voluptatibus
dolores!</p>
</div>
<div class="aboutus">
<div class="abimg">
<img src="/WP/single_page_website/about.webp" alt="This is image about us">
</div>
<div class="abcontent">
<h2>About the team</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto unde placeat, similique
maiores ullam earum vero, quaerat, a eos ea repudiandae molestiae recusandae eligendi distinctio?

Page 18 of 30
Web Programming (3160713) 220090107061

Blanditiis consequuntur architecto dolorem. Magnam, vero deserunt laboriosam ea quas veritatis, sed
porro mollitia, cum animi dolor voluptas minima cumque eius autem vel. Voluptatibus, cum?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus tempora cumque
architecto ipsum natus nam perferendis quo, in velit ducimus! Nihil consequatur cumque molestias
amet dignissimos illo, corrupti obcaecati autem aliquam? Odit tempora dignissimos accusamus ipsam
alias, illo eligendi, tenetur beatae facilis voluptate sint officia fuga iusto nisi ullam dolores!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis at incidunt similique
perferendis quam deleniti, velit nemo odio ab fugiat omnis eaque ut, et voluptatem!</p>
<button>Read More</button>
</div>
</div>
<div class="gallery-one">
<h2>Gallery One</h2>
<div class="img-one">
<img src="/WP/single_page_website/1 (1).png" alt="This is picture">
<img src="/WP/single_page_website/1 (2).png" alt="This is picture">
<img src="/WP/single_page_website/1 (1).png" alt="This is picture">
<img src="/WP/single_page_website/1 (3).png" alt="This is picture">
<img src="/WP/single_page_website/1 (4).png" alt="This is picture">
<img src="/WP/single_page_website/1 (2).png" alt="This is picture">
<img src="/WP/single_page_website/1 (4).png" alt="This is picture">
</div>
</div>
<div class="gallery-two">
<h2>Gallery Two</h2>
<div class="img-two">
<img src="/WP/single_page_website/1 (6).png" alt="This is picture">
<img src="/WP/single_page_website/1 (8).png" alt="This is picture">
<img src="/WP/single_page_website/1 (7).png" alt="This is picture">
<img src="/WP/single_page_website/1 (8).png" alt="This is picture">
<img src="/WP/single_page_website/1 (6).png" alt="This is picture">
</div>
</div>
<div class="gallery-third">
<h2>Gallery Third</h2>
<div class="img-third">
<img src="/WP/single_page_website/1 (5).png" alt="This is picture">
<img src="/WP/single_page_website/1 (10).png" alt="This is picture">
<img src="/WP/single_page_website/1 (11).png" alt="This is picture">
<img src="/WP/single_page_website/1 (5).png" alt="This is picture">
<img src="/WP/single_page_website/1 (9).png" alt="This is picture">
<img src="/WP/single_page_website/1 (11).png" alt="This is picture">
<img src="/WP/single_page_website/1 (10).png" alt="This is picture">
</div>
</div>
<div class="contactus">
<h2>Contact Us</h2>
<div class="contact">
<div class="form">
<input type="text" placeholder="Name">

Page 19 of 30
Web Programming (3160713) 220090107061

<input type="email" placeholder="Email">


<textarea cols="30" rows="10" placeholder="Message"></textarea>
<button>Send</button>
</div>
<div class="cont-content">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa, sunt magnam molestias
deserunt numquam dolores vero quidem non laborum excepturi. Facere, voluptatem ea dolorem
laboriosam vel cumque, repellendus magni nobis perspiciatis alias atque adipisci tempore optio
natus, eum non obcaecati!</p>
<p>Lorem, ipsum dolor sit amet consectetur <br>adipisicing elit Perferendis pariatur
<br> repellat quos natus blanditiis <br>deserunt libero nulla!</p>
</div>
</div>
</div>
<footer>Copyright &copy; 2017 Your Company | Design:<span>templatemo</span></footer>
</div>
</div>
</div>
</body>
</html>

style.css

*{
margin: 0;
padding: 0;
}
.main{ displa
y: flex;
}
.left{
width: 25rem;
background-color: rgb(32, 150,
190); border: 1px solid black;
border-right: none;
}
.left .logo {
margin-top:
50%;
padding: 5%
0; height:
auto; display:
flex;
justify-content: center;
}
.left .logo img{
border-radius:
100px; height: 90px;
width: 200px;
height: auto;
display:
flex;
justify-content: center;
}
.nav ul li{
list-style-type:
none; margin: 5px
80px; padding: 5px;
font-weight: bold;
text-transform:
capitalize; font-size:
1.3em;
}

.right{ height
: auto;
width: 75rem;
background-color: rgb(255, 255,
255); border: 1px solid black;
}
.main-img{
width: calc(100%);
}
.main-img img{
width:
calc(100%);
Page 20 of 30
Web Programming (3160713) 220090107061

height: auto; width: calc(100% -


60px); padding: 30px;
text-align: justify;
}
.welcome{ pa
dding: 5px;
}
.welcome p{
margin-top:
15px;
margin-bottom: 10px;
}
.aboutus{ margi
n: 10px 0;
padding: 5px; display:
flex; padding-bottom:
20px;
}
.abimg{
}
.abimg img{
height:
470px;
}
.abcontent{
width: 70%; padding: 10px 20px;
}
.abcontent h2{
margin-bottom: 20px;
}
.abcontent p{
margin-bottom:
30px; padding: 10px
0;
}
.abcontent
button{ font-
size: 1em;
height: 40px; width: 150px;
background-color: rgb(32, 150,
190);
}
.gallery-one ,.gallery-two, .gallery-
third{ margin: 10px 0; padding: 5px;
}
.gallery-one h2,.gallery-two h2, .gallery-
third h2{
margin-bottom: 20px;
}
.img-one, .img-two, .img-
scrollbar-width: none;
}
.img-one img, .img-two img, .img-third
img{ height: 100%;
}
.contactus{
margin: 10px 0; padding: 5px;
}
.contactus h2{
margin-bottom: 20px;
}
.contact{
height: 350px; display: flex;
}
.form{
width: 50%; display:
flex; flex-direction:
column; padding: 20px;
}
.form input{
height:
30px;
margin-bottom: 8px;
padding-inline-start:
20px;
font-family: 'Times New Roman', Times, serif;
}
textarea{ heigh
t: 150px;
margin-bottom:
8px; padding: 20px;
font-family: 'Times New Roman', Times,
serif; display: fixed;
}
.form button{
width: 150px; height: 40px;
font-size: 1em; margin-top: 20px;
background-color: rgb(32, 150,
190);
}
.cont-content{
width: 50%; padding: 20px;
}
.cont-content p{
margin-bottom:
40px;
}
footer{ paddin
g: 5px;
}

Page 21 of 30
Web Programming (3160713) 220090107061

PRACTICAL 2.1 – Prompt & Alert Box


❖ Write a javascript that will take a number from the user using the Prompt box and
check whether it is prime or not. And display the appropriate message using the Alert
box.

promt.js
// Function to check if a number is prime
function isPrime(num) {
// Check if num is less than 2
if (num < 2) {
return false;
}
// Check if num is divisible by any number less than itself
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
// Prompt the user to enter a number
let userInput = prompt("Enter a number prime or not:");
// Convert userInput to a number
let number = parseInt(userInput);
// Check if the number is
prime if (isPrime(number)) {
alert(number + " is a prime number.");
} else {
alert(number + " is not a prime number.");
}

OUTPUT:

Page 22 of 30
Web Programming (3160713) 220090107061

PRACTICAL 2.2 – Validation


❖ Create a simple HTML form containing the various types such as the following.
Implement a Javascript validation to validate all the fields as per the rules mentioned
before submitting the form:

Field Mandatory Validation

Name Yes Firstname Middlename Lastname

Address No Contains alphabets, digits and comma only

Phone No A valid Indian mobile number or landline number

Domain Yes A valid domain name - ckpcet.ac.in or ckpcet.com etc.

Email Yes A valid email address and domain of the same should
match with the domain selected above.

Password Yes Minimum 8 Letters, At least 1 uppercase, 1 digit and 1


special symbols such as @, #, $ etc.

Confirm Yes Same as above, Additionally both password should match


Passwor
d

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<script src="/WP/validate.js"></script>
</head>
<body>
<h2>Form Validation</h2>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="address">Address:</label>
<input type="text" id="address" name="address"><br>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone"><br>
<label for="domain">Domain:</label>
<input type="text" id="domain" name="domain" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="password">Password:</label>

Page 23 of 30
Web Programming (3160713) 210090107023

<input type="password" id="password" name="password" required><br>


<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword"
name="confirmPassword" required><br>
<button type="submit">Submit</button>
</form>
</body>
</html>

validate.js
function validateForm() {
// Get form inputs
var name = document.getElementById("name").value;
var address =
document.getElementById("address").value; var phone =
document.getElementById("phone").value; var domain =
document.getElementById("domain").value; var email =
document.getElementById("email").value;
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;

// Name validation
var namePattern = /^[a-zA-Z]+\s[a-zA-Z]+\s[a-zA-Z]+$/;
if (name.trim() === "" || !name.match(namePattern)) {
alert("Please enter a valid name (Firstname Middlename
Lastname)."); return false;
}
// Address validation
var addressPattern = /^[a-zA-Z0-9, ]*$/;
if (address.trim() !== "" && !address.match(addressPattern)) {
alert("Address can contain alphabets, digits, and commas only.");
return false;
}
// Phone validation
var phonePattern = /^(?:\+?91)?(?:\d{10}|\d{11})$/;
if (phone.trim() !== "" && !phone.match(phonePattern)) {
alert("Please enter a valid Indian mobile number or landline number.");
return false;
}
// Domain validation
var domainPattern = /^ckpcet\.(ac\.in|com)$/;
if (!domain.match(domainPattern)) {
alert("Please enter a valid domain name (e.g., ckpcet.ac.in or
ckpcet.com)."); return false;
}
// Email validation
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!email.match(emailPattern) || !email.endsWith(domain)) {
alert("Please enter a valid email address with the selected domain.");
return false;
Page 24 of 30
Web Programming (3160713) 220090107061

}
// Password validation
var passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$])[A-Za-z\d@#$]
{8,}$/; if (!password.match(passwordPattern)) {
alert("Password must contain minimum 8 characters, at least 1 uppercase letter, 1 digit, and
1 special symbol (@, #, $, etc.).");
return false;
}
// Confirm Password validation
if (password !== confirmPassword)
{ alert("Passwords do not
match."); return false;
}

return true;
}

OUTPUT:

(Form Before Validate)

(Form After Validate)

Page 25 of 30
Web Programming (3160713) 220090107061

PRACTICAL 2.3 – Regular Expression


❖ Write a javascript function using a regular expression to validate email addresses with
specified domain names. Prototype validateEmail(email, domains) where email is
string and domains are an array of strings against which email is to be validated.

regexr.html
<!-- This bellow website use for learn Regular expression - Pattern matching -->
<!-- https://regexr.com/ -->

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regular Expression</title>
</head>

<body>
<label>Enter Mail Id:</label>
<input type="email" id="mail">
<button type="submit" onclick="validate()">Validate Email</button>

<script src="/WP/regexr.js"></script>
</body>
</html>

regexr.js
function validateEmail(email, domains) {
// Regular expression pattern for validating email addresses
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// Check if the email matches the pattern
if (!email.match(emailPattern)) {
return false; // Email format is incorrect
}
// Extract domain from the email address
var domain = email.split('@')[1];
// Check if the domain is in the specified list of domains
return domains.includes(domain);
}

function validate(){
var email = document.getElementById("mail").value;
var domains = ["gmail.com", "googlemail.com", "google.com"];

Page 26 of 30
Web Programming (3160713) 220090107061

if (validateEmail(email, domains))
{ alert("Email is valid.");
}
else {
alert("Email is not valid.");
}
}

OUTPUT:
Invalid Email & Domain:

Valid Email & Domain:

Page 27 of 30
Web Programming (3160713) 220090107061

PRACTICAL 2.4 – CSS Manipulation


❖ Change the background color of the content area from white to yellow when “Get
More” is clicked on the landing page created in Section 1.1

Css_manipulation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color</title>
<style>
.content {
background-color: white;padding: 20px; margin: 20px; width: 30%; border: 1px solid black;
}
</style>
</head>
<body>
<div class="content">
<p>This is the content area.</p>
<button onclick="changeBackgroundColor()">Get More</button>
</div>

<script>
function changeBackgroundColor() {
// Get the content area element
var content = document.querySelector('.content');

// Change the background color to yellow


content.style.backgroundColor = 'yellow';
}
</script>
</body>
</html>

OUTPUT:

(Before clicking Get More button) (After clicking Get More button)

Page 28 of 30
Web Programming (3160713) 220090107061

PRACTICAL 3.1 – Mini Project

TITLE OF THE PROJECT Attendance Management System


MAJOR FUNCTIONS / User Dashboard: User can track attendance
FEATURES User Authentication: Ensures secure login for students,
faculty, and administrators.
Attendance Analytics: Generates attendance reports and
analytics for better insights.
Data Management: Stores attendance data securely and allows
for easy retrieval.
Access Control: Ensures that only authorized users can view
or modify attendance data.

NO OF PAGES DEVELOPED 1. Login & Logout Page


2. Dashboard Page (Home page)
3. Profile Page (Update & View)
4. Attendance Page (Student, Faculty, Admin)
5. User: Add & Remove Page

TECHNOLOGY STACK USED Frontend: HTML, CSS, JavaScript


Backend: Php
Database: MySQL
Request-Response: AJAX
Deployment: Live Server –
localhost UI Framework: -

GROUP MAMBER 1. Chotaliya Rahul H.


2. Baldaniya Utsav S.

E-R Diagram:

Page 29 of 30
Web Programming (3160713) 220090107061

Page 30 of 30

You might also like