Sample Report

CSS Micro-Project Proposal
Indian tourism website
1. Aims of the Micro-Project:

To develop a website for Indian tourism using HTML and Javascript.
 Benefits of project are:

 To make a user friendly website.
 Helps to find location for holiday trips in just one click.
2. Course Outcomes Addressed:

a. Create interactive web pages using program flow control structure.
b. Implement arrays and functions in Java script.
c. Create event based web forms using Java script.
d. Use Java script for handling cookies.
e. Create interactive webpage using regular expressions for validations.
f. Create menus and navigations in web pages
3. Proposed Methodology:
1) Finalizing the topic and preparing proposal.
2) Collecting information about topic
3) Building Site map (arrangement of webpages)
4) Designing of pages on paper
5) Writing HTML code and JavaScript for creating web site.
6) Testing of validations.
4. Action Plan:
Sr. Details of activity Planned Planned Name of Responsible
No. Start date Finish date Team Member
1) Topic Finalization. 06/07/20 10/07/20 Sampada Deshpande

2) Proposal planning. 13/07/20 17/07/20 Sampada Deshpande
3) Collecting information. 20/07/20 24/07/20 Sampada Deshpande
4) Preparing site map. 27/07/20 07/08/20 Sampada Deshpande
5) Designing webpages structure. 10/08/20 21/08/20 Sampada Deshpande
6) Implementation & testing. 24/08/20 18/09/20 Sampada Deshpande
7) Preparing report. 21/09/20 09/10/20 Sampada Deshpande
8) Submission. 09/10/20 14/10/20 Sampada Deshpande
5. Resources Required:
S. No. Name of Resource/material Specifications Qty Remarks

1) Text editor Note pad - -
2) Web browser Google chrome, Internet Explorer - -
6. Names of team members:
Roll No. Name

32 Sampada deshpande
Client Side Scripting (22519)
REPORT ON INDIAN TOURISM WEBSITE
https://drive.google.com/drive/folders/1zY5cILuTs2jNrNK9aMaN6m17jQCz_C5S?usp=shar
ing
1.0 Rationale: -
To develop a website for Indian tourism using HTML, Javascript, CSS.
2.0 Aims/Benefits of the Micro-Project: -

Our main aim of the project is to create the front end using HTML, CSS and apply
validations using Javascript.
Benefits of micro-project:-
1. To make a user friendly website.
2. Helps to find location for holiday trips in just one click.
3.0 Course Outcome Addressed: -

1. Create interactive web pages using program flow control structure.
2. Implement arrays and functions in Java script.
3. Create event based web forms using Java script.
4. Create interactive webpage using regular expressions for validations.
5. Create menus and navigations in web pages.
4.0 Literature Review: -

 Reference site:- https://www.incredibleindia.org/
 For security of the source code right mouse button is disabled.
 It avoids paper work and easy to use and it is also portable.
5.0 Actual Methodology followed: -
1. Finalizing the topic and preparing proposal.
2. Collecting information: -
Referred various websites of Indian tourism and observed how they manage
Tourism process.
3. Building Site map (arrangement of webpages):-
4. Designing of pages on paper:-
Home Page Login Page

Sign-up page State page
Destination page Booking form
5. Validations used: -
Webpage Validation
Home Event handling(mouse), Browser location, Disabling right click
Login Event handling(mouse), Browser location, Disabling right click, Form

validation
Sign-up Event handling(mouse), Browser location, Disabling right click, Form

validation(e-mail, password)
State Event handling(mouse), Browser location, Disabling right click
Destination Event handling(mouse), Browser location, Disabling right click
Booking Form Event handling(mouse), Browser location, Disabling right click, Form
validation(name[regular expression], mobile number[regular expression],
e-mail)
6. Writing HTML code and JavaScript for creating web site:-
I. Home Page code: </head>

<html>
<body>
<head>
<ul> 
<link rel="stylesheet" type="text/css" href
<a href="home.html"><img src="lo
="home.css">
go4.png"></a>
<link href='https://fonts.googleapis.com/cs
<li><a href="#about">About</a><
s?family=Poppins' rel='stylesheet'>
/li>
<script type="text/javascript">
<li><a href="signup.html">Sign-U
function redirect(name) p</a></li>
{ <li><a href="login.html">Log-In</
a></li>
value=name;
<li><a href="home.html">Home</
window.location.replace(name+".ht a></li>
ml")
</ul> 
}
<img src="mainimg9.png" width="10
function display3() 0%" height="100%">
{ <br><br><center><h2 style="color:
#343a40;">How To Book</h2></center>
alert('Security Violation');
<br><center><img src="howto1.bm
return false p" width="73%" height="50%"></center>
} <br><br><center><h2 style="color: #
function browser() 343a40;">Explore Destinations</h2></cen
ter>
{
<br>
if(event.button==2)
<div class="row">
{
<div class="column">
display3()
<img src="maha.jpg" onclick="r
return false edirect(name)" name="maharashtra">
} <div class="content"><h3 style=

"margin-left:50px;">Maharashtra</h3></d
} iv>
document.oncontextmenu=new Fu </div>
nction("display3();return false")
</script>
<img src="kar.jpg" onclick="redir <td><h3>Travels:</h3></td>
ect(name)" name="karnataka">
<td style="padding-left: 70px;">
<div class="content"><h3 style=" <h3>Address:</h3>&nbsp</td>
margin-left:70px;">Karnataka</h3></div>
<td style="padding-left: 70px; pa
</div> dding-bottom: 20px;"><h3>Contact Us:</h
3></td>
</tr>
<img src="jk.jpg" onclick="redire
ct(name)" name="jammu_and_kashmir"> <tr>
<div class="content"><h3 style=" <td style="padding-bottom: 35px
margin-left:37px;">Jammu & Kashmir</h ;">
3></div>
Travoyage is a tourism website w
</div> hich will help you
<div class="column"> <br>find affordable and best dest
inations to spend your
<img src="assam.jpg" onclick="re
direct(name)" name="assam"> <br>vacation that will be never f
orgotten by you.
<div class="content"><h3 style="
margin-left:89px;">Assam</h3></div> </td>
</div> <td style="padding-left:70px; pa
dding-bottom: 40px;">shop 2 Maruti Build
<div class="column"> ing,
<img src="tn.jpg" onclick="redire <br>Ram Nagar,Kalwa(W),
ct(name)" name="tamil_nadu">
<br>Thane(W),Maharashtra-40
<div class="content"><h3 style=" 0605
margin-left:70px;">Tamil Nadu</h3></div
> </td>
</div> <td style="padding-left: 70px; pad
ding-bottom: 75px;">
</div>
Mobile No. :- 9967792220
<br><br><br>
<br>Email-ID :- travoyage@gma
<span id="about"> il.com
<div class="container"> </td>
<div class="cont_content"> </tr>
<h2><center><u>About Us</u>< </table></center>
/center></h2><br>
</div>
<center><table>
</div>
<tr>
</span> }
</body> function display3()
</html> {
II. Login Page code: return false

<html>
}
<head>
function browser()
<meta name="viewport" content="wi
dth=device-width, initial-scale=1.0"> {
<link href='https://fonts.googleapis.co if(event.button==2)

m/css?family=Poppins' rel='stylesheet'> {
<script type="text/javascript"> display3()
return false
function validate() }
{ }
with(document.form1) document.oncontextmenu=new Fu
{ nction("display3();return false")
if(n1.value.length==0 || p1.value. </script>

length==0) <link rel="stylesheet" href="logincss.
{ css">
alert("Enter Full Details") </head>
sub.disaabled=true; <body>
} <div class="container">
else <img src="formback12.jpg">

<form name="form1" action="home.h
{
tml" method="POST">
alert("Login Successful")
<br><h2>Login</h2>
sub.disabled=false;
<br><input type="text" name="n1"
window.location.replace("ho maxlength="100" size="30" placeholder="
me.html") Username">
} <br><br><input type="password" n
ame="p1" maxlength="100" size="30" pla
} ceholder="Password">
<center><br><div class="image"> document.getElementById("di
<input type="button" name="sub" value=" v2").innerHTML="<br>*Password doesn't
Login" onclick="validate()"> match";
<br><input type="reset" name="res document.getElementById("di
et" value="Reset"></div></center> v2").style.color="Red";
<center><div class="sign"><br><b document.getElementById("di
r><label>Don't have an account?</label> v2").style.fontWeight="500";
<br><a href="signup.html">Sign U sub.disabled=true;
p</a></div></center>
}
</form>
else{
</div>
sub.disabled=false;
</body>
document.getElementById("di
</html> v2").innerHTML="";
}
III. Sign-up page code: }

<!DOCTYPE html>
}
<html lang="en">
function validate()
<head>
{
<meta charset="UTF-8">
with(document.form1)
<meta name="viewport" content="width
=device-width, initial-scale=1.0"> {
<title>Sign Up</title> var j=n2.value.indexOf('@')
<link href='https://fonts.googleapis.com/ var k=n2.value.indexOf('.')

css?family=Poppins' rel='stylesheet'> if(n1.value.length==0||n2.value.l
ength==0||p1.value.length==0||p2.value.le
<script type="text/javascript">
ngth==0||j==-1||k==-1)
function validatepass()
{
{
alert("Please enter complete de
with(document.form1) tails")
{ }
if(p1.value != p2.value) else
{ {
alert("Signed Up Successfully
")
window.location.replace("ho <br><input type="text" name="n1" m
me.html") axlength="100" size="30" placeholder="Se
t Username">
}
<br><br><input type="email" name=
} "n2" maxlength="100" size="30" placehold
er="Enter E-mail ID">
}
<br><br><input type="text" name="p
function display3()
1" maxlength="100" size="30" placeholder
{ ="Set Password" onchange="validatepass()
"><br>
<br><input type="text" name="p2" m
return false axlength="100" size="30" placeholder="C
onfirm Password" onkeyup="validatepass()
} "><div id="div2" class="div2"></div>
function browser() <center><br><input type="button" na
{ me="sub" value="Sign Up" onclick="valid
ate()">
if(event.button==2)
<br><label style="margin-left: 45px;"
{ >Already have an account?</label>
display3() <br><a href="login.html" style="mar

gin-left: 45px;">Log In</a></center>
return false
</form>
}
</div>
}
</body>
document.oncontextmenu=new Fu
nction("display3();return false") </html>
</script>
<link rel="stylesheet" href="signup.cs IV. State page(maharashtra.html) cod
s"> e:
<html>
</head>
<head>
<body>
<link rel="stylesheet" type="text/css"
<div class="container">
href="state.css">
<img src="formback12.jpg">
<link href='https://fonts.googleapis.co
<form name="form1" method="POST"> m/css?family=Poppins' rel='stylesheet'>
<br><h2>Sign-Up</h2> <script type="text/javascript">

function redirect(name)
{
value=name; <li><a href="home.html">Home</
a></li>
window.location.replace(name+".ht
ml") </ul> 
} <div class="container">
function display3() <h2>Maharashtra</h2>
{ <br><br><h4>The spirit of Maharash
tra is cosmopolitan, forward-thinking,
<br>tolerant and vibrant.There is
return false enough to keep connoisseurs of
} <br>temples, forts, old monumen
ts and art- gainfully preoccupied
function browser()
<br>here. Forts have played a vit
{
al role in the history of the
if(event.button==2)
<br>state, given the rocky terrain
{ of the Sahyadris. Each fort
display3() <br>marks a military triumph,an

d each tells a story of strategy,
return false
<br>warfare, intrigue and planni
} ng. All of them reconstruct the
} <br>tale of an enterprising leader
, Chhatrapati Shivaji-in the
nction("display3();return false") <br>Deccan arena, who with fort
itude went onto become one of
</script>
<br>the tallest kings of Indian hi
</head> story.</h4>
<body> <a href="#destination"><input ty
<ul>  pe="button" name="explore" value="Click
To View Popular Destinations"></a>
<a href="home.html"><img src="lo
go4.png"></a> <center><img src="maha3.jpg" wid
th="90%" height="90%"></center>
<li><a href="home.html#about">A
bout</a></li> </div>
<li><a href="signup.html">Sign-U <span id="destination">

p</a></li> <div class="row" style="padding-left:
<li><a href="login.html">Log-In</ 140px; background-color:rgb(46, 46, 46);"
a></li> >
<br><h1 style="margin-left:350px; <link href="https://fonts.googleapis.c
color:aliceblue">Popular Destinations</h1 om/css2?family=Roboto:wght@400;700&
> display=swap" rel="stylesheet">
<div class="column"> <link href="https://fonts.googleapis.c
om/css2?family=Poppins:wght@200&fam
<img src="mumbai.jpg" onclick ily=Roboto:wght@100&display=swap" rel
="redirect(name)" name="mumbai"> ="stylesheet">
<h3>Mumbai</h3> <script type="text/javascript">
<h4>Per Person=Rs.5,000</h4> function display()
</div> {
<div class="column"> window.location.replace("mahar
ashtra.html")
<img src="aurangabad.jpg" onclic
k="redirect(name)" name="aurangabad"> }
<h3>Aurangabad</h3> function display1()
<h4>Per Person=Rs.6,000</h4> {
</div> var r= confirm("Note: The pick-u
p point of this tour will be Mumbai Airport
");
<img src="mahabaleshwar.jpg" on
if(r==true)
click="redirect(name)" name="mahabalesh
war"> {
<h3>Mahabaleshwar</h3> window.location.replace("form_
mumbai.html")
<h4>Per Person=Rs.8,000</h4>
}
</div>
else
</div>
{
</span>
window.location.replace("mumb
</body>
ai.html")
</html>
}
}
V. Destination page(mumbai.html) co
function display3()
de:
<html> {
<head> alert('Security Violation');

<link rel="stylesheet" type="text/css" return false
href="destination.css">
} <br>sky-high ambitions from ev
ery corner of the country.
function browser()
<br>It is a unique place where th
{ e past is mixed with the future
if(event.button==2) <br>and history meets modernity
, a city that lies at the cross
{
<br>section of business and ente
display3()
rtainment and beats to a
return false
<br>pulsating rhythm of its own.
} Located by the Arabian Sea,
} <br>Mumbai is an amalgamation
of heritage and culture and glitz
nction("display3();return false") <br>and glamour. So from histor
ic art deco buildings, which are
</script>
<br>recognised by the UNESCO
</head> , to plush new-age homes of the
<body> <br>super rich, Mumbai has it al
l! </h3>
<ul> 
<img src="maha.jpg" width="50
<a href="home.html"><img src="lo %" height="100%">
go4.png"></a>
</div>
<li><a href="home.html#about">A
bout</a></li> <div class="container1">
<li><a href="signup.html">Sign-U <center><h1 style="margin-left: 18
p</a></li> %; margin-top:20px;">About Tour</h1></
center>
<li><a href="login.html">Log-In</
a></li> <br><h3 style="color: aliceblue; m
argin-top: 100px; margin-left: 30px; positi
<li><a href="home.html">Home</ on: absolute;">Day 1:
a></li>
<br>Gateway Of India
</ul> 
<br>Taj Mahal Tower
<div class="container">
<br>Chhatrapati Shivaji Maharaj
<center><h1 style="margin-left:70 Vastu Sangrahalaya
%; margin-top:40px;">Mumbai</h1></cen
ter> <br>Marine Lines
<br><h3 style="margin-left:54%; <br>Taraporewala Aquarium
margin-top:130px;">Mumbai, the capital o
f Maharashtra, attracts dreamers with <br><br><br>Day 2:
<br>Nehru Science Centre
<br>Worli ose state"||d5.value.length==0||mob_no.val
ue.length==0||mail.value.length==0 )
<br>Shree Siddhivinayak Ganap
ati Temple {
<br>Juhu Beach i=1;
</h3> }
<br><input type="button" name="b else if(n2.value.length>0||n3.valu
ack" value="Previous Page" onclick="displ e.length>0||n4.value.length>0)
ay()">
{
<button name="register" value="Re
gister" onclick="display1()"> Register Tou i=validate();
r</button>
}
<iframe src="https://www.google.c
if(i==0)
om/maps/d/embed?mid=1L01oB-2OOD2
TYuJRc27zKofj9D0ub1Rm" width="50% {
" height="590"></iframe>
alert("Yahoo! Your tour is almos
</div> t booked Please check your mail for payme
nt details");
</body>
window.location.replace("mumb
</html>
ai.html");
}
VI. Destination page form(form_mum else
bai.html) code:
<html> alert("Enter complete details")
<head> }
<title> }
Mumbai tour booking form function validate()
</title> {
<script type="text/javascript"> with(document.form1)
function display() {
{ var j=0;
with(document.form1) if(n2.value.length>0)
{ {
var i=0; if(r2.value==""||d2.value.length=

=0)
if(n1.value.length==0 || r1.value=
=""||d1.value.length==0||state.value=="cho j=1;
} sub.disabled=true;
if(n3.value.length>0) }
{ else
if(r3.value==""||d3.value.length= {
=0)
document.getElementById("div1
j=1; ").innerHTML="";
} sub.disabled=false;
if(n4.value.length>0) }
{ if(mail.value=="")
if(r4.value==""||d4.value.length= {
=0)
j=1; ").innerHTML="";
} sub.disabled=false;
return j; }
} }
} }
function valmail() function valmob()
{ {
with(document.form1) with(document.form1)
{ {
var j=mail.value.indexOf('@') var i=/^[0-9]+$/;
var k=mail.value.indexOf('.') if(mob_no.value.length<10||!mo
b_no.value.match(i))
if(j==-1||k==-1)
{
{
document.getElementById("di v2").innerHTML="<br>*Enter valid Mobi
v1").innerHTML="<br>*Enter valid E-mai le number";
l";
document.getElementById("di v2").style.color="Orange";
v1").style.color="Orange";
document.getElementById("di v2").style.fontWeight="700";
v1").style.fontWeight="700";
mob_no.focus();
mail.focus();
sub.disabled=true; if(!n1.value.match(i))
} {
else document.getElementById("di
v3").innerHTML="<br>*Enter Valid Nam
{ e";
document.getElementById("div2 document.getElementById("di
").innerHTML=""; v3").style.color="Orange";
sub.disabled=false; document.getElementById("di
v3").style.fontWeight="700";
}
sub.disabled=true;
if(mob_no.value=="")
}
{
else
").innerHTML=""; {
sub.disabled=false; document.getElementById("div3
").innerHTML="";
}
sub.disabled=false;
}
}
}
if(n1.value=="")
function redirect()
{
{
window.location.replace("mumbai.
").innerHTML="";
html")
sub.disabled=false;
}
}
function redirect1()
}
{
}
window.location.replace("home.ht
ml") function namecheck1()
} {
function namecheck() with(document.form1)
{ {
with(document.form1) var i=/^[A-Za-z\s]+$/;
{ if(!n2.value.match(i))
var i=/^[A-Za-z\s]+$/; {
document.getElementById("di document.getElementById("di
v4").innerHTML="<br>*Enter Valid Nam v5").style.color="Orange";
e";
document.getElementById("di v5").style.fontWeight="700";
v4").style.color="Orange";
sub.disabled=true;
v4").style.fontWeight="700"; }
sub.disabled=true; else
} {
else document.getElementById("div5
").innerHTML="";
{
sub.disabled=false;
").innerHTML=""; }
sub.disabled=false; if(n3.value=="")
} {
if(n2.value=="") document.getElementById("div5
").innerHTML="";
{
sub.disabled=false;
").innerHTML=""; }
sub.disabled=false; }
} }
} function namecheck3()
} {
function namecheck2() with(document.form1)
{ {
with(document.form1) var i=/^[A-Za-z\s]+$/;
{ if(!n4.value.match(i))
var i=/^[A-Za-z\s]+$/; {
if(!n3.value.match(i)) document.getElementById("di
v6").innerHTML="<br>*Enter Valid Nam
{ e";
document.getElementById("di document.getElementById("di
v5").innerHTML="<br>*Enter Valid Nam v6").style.color="Orange";
e";
document.getElementById("di document.oncontextmenu=new Fu
v6").style.fontWeight="700"; nction("display3();return false")
sub.disabled=true; </script>
} <link rel="stylesheet" type="text/css" hr
ef="formcss.css">
else
</head>
{
<body>
").innerHTML=""; <div class="regform">
sub.disabled=false; <h2><u>Mumbai Tour Booking</u
></h2><br>
}
</div>
if(n4.value=="")
<div class="main">
{
<form method="POST" name="for
document.getElementById("div6 m1">
").innerHTML="";
<b>Full Name:</b> <input type="t
sub.disabled=false; ext" name="n1" size="35" maxlength="10
0" onkeyup="namecheck()"><div id="div3
}
"></div><br><br>
}
<b>Gender:</b> <input type="radi
} o" name="r1" value="male"> Male
function display3() <input type="radio" name="r1" val

ue="female"> Female
{
<input type="radio" name="r1" val
alert('Security Violation'); ue="others"> Others<br><br>
return false <b>Birth date:</b> <input type="d
ate" name="d1"><br><br><hr><br>
}
<h3>Other Group Member Names (
function browser() Optional):</h3><br>
{ <h4>Group Member 1:</h4><br>
if(event.button==2) <b>Full Name:</b> <input type="t
{ ext" name="n2" size="35" maxlength="10
0" onkeyup="namecheck1()"><div id="div
display3() 4"></div><br><br>
return false <b>Gender:</b> <input type="radi

o" name="r2"> Male
}
}
<input type="radio" name="r2"> Fe <option value="choose state">
male ---Choose State---</option>
<input type="radio" name="r2"> O <option value="Andhra Prades
thers<br><br> h">Andhra Pradesh</option>
<b>Birth date:</b> <input type="d <option value="Arunachal Pra
ate" name="d2"><br><br><br><br> desh">Arunachal Pradesh</option>
<h4>Group Member2:</h4><br> <option value="Assam">Assa
m</option>
<b>Full Name:</b> <input type="t
ext" name="n3" size="35" maxlength="10 <option value="Andaman and
0" onkeyup="namecheck2()"><div id="div Nicobar Islands">Andaman and Nicobar Is
5"></div><br><br> lands</option>
<b>Gender:</b> <input type="radi <option value="Bihar">Bihar
o" name="r3"> Male </option>
<input type="radio" name="r3"> Fe <option value="Chhattisgarh"
male >Chhattisgarh</option>
<input type="radio" name="r3"> O <option value="Chandigarh">
thers<br><br> Chandigarh</option>
<b>Birth date:</b> <input type="d <option value="Dadra & Naga
ate" name="d3"><br><br><br><br> r Haveli and Daman & Diu">Dadra & Nag
ar Haveli and Daman & Diu</option>
<h4>Group Member3:</h4><br>
<option value="Delhi">Delhi
<b>Full Name:</b> <input type="t </option>
ext" name="n4" size="35" maxlength="10
0" onkeyup="namecheck3()"><div id="div <option value="Goa">Goa</o
6"></div><br><br> ption>
<b>Gender:</b> <input type="radi <option value="Gujarat">Guj
o" name="r4"> Male arat</option>
<input type="radio" name="r4"> Fe <option value="Haryana">Har
male yana</option>
<input type="radio" name="r4"> O <option value="Himachal Pra
thers<br><br> desh">Himachal Pradesh</option>
<b>Birth date:</b> <input type="d <option value="Jharkhand">J
ate" name="d4"><br><br><hr><br> harkhand</option>
<b>State/Union Territory you live i <option value="Karnataka">K
n:</b> arnataka</option>
<select name="state" size="1"> <option value="Kerala">Keral
a</option>
<optgroup>
<option value="Lakshadweep
">Lakshadweep</option>
<option value="Ladakh">Lad </select><br><br>
akh</option>
<b>Tour Name:</b>
<option value="Madhya Prade
sh">Madhya Pradesh</option> <textarea name="txt1" rows="01" c
ols="45" readonly>
<option value="Maharashtra"
>Maharashtra</option> Mumbai Tour
<option value="Manipur">Ma </textarea><br><br>

nipur</option>
<b>Date Of Tour:</b><input type=
<option value="Meghalaya"> "date" name="d5"><br><br>
Meghalaya</option>
<b>Mobile/Telephone Number:</b
<option value="Mizoram">Mi ><input type="text" name="mob_no" maxl
zoram</option> ength="11" size="11" onkeyup="valmob()
"><div id="div2"></div><br><br>
<option value="Nagaland">N
agaland</option> <b>E-Mail ID:</b><input type="te
xt" name="mail" maxlength="50" size="35
<option value="Odisha">Odis " onkeyup="valmail()"><div id="div1"></
ha</option> div>
<option value="Punjab">Punj <br><br><br>
ab</option>
<option value="Puducherry">
Puducherry</option> <input type="button" value="subm
it" name="sub" onclick="display()">
<option value="Rajasthan">R
ajasthan</option>
<option value="Sikkim">Sikk <input type="button" value="Cancle
im</option> " onclick="redirect()">
<option value="Tamil Nadu"> <input type="button" value="Home

Tamil Nadu</option> " onclick="redirect1()">
<option value="Telangana">T </div>

elangana</option>
</form>
<option value="Tripura">Trip
</body>
ura</option>
</html>
<option value="Uttar Pradesh"
>Uttar Pradesh</option>
<option value="Uttarakhand"
>Uttarakhand</option>
<option value="West Bengal"
>West Bengal</option>
</optgroup>
4. Testing of validations
5. Preparing Micro-Project Report
6.0 Actual Resources used: -
S. no Name of Specifications Qty Remarks

resources
1. Visual Studio - - -
Code
2. Internet - - -
Browser
3. Notes JavaScript Demystified - -
-Keogh, Jim
4. Reference https://www.incredibleindia.org/
Website
7.0 Output of the Micro-project :-
Home page
Login page
Sign-up page
State page
Destination page
Booking form
8.0 Skill Develop /Learning Outcome of this Micro-project: -

We learned to develop Webpages and how to implement validations in forms using
Javascript.
9.0 Application of Library Management System

Used for booking tours using tourism website.
10.0 Names of Team Members with Roll No: -

Sr. No. Roll no Name
1. 32 Sampada Deshpande

Sample Report

Uploaded by

Document Information

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

Sample Report

Uploaded by

Copyright:

Available Formats

CSS Micro-Project Proposal

Indian tourism website

1. Aims of the Micro-Project:

 Benefits of project are:

2. Course Outcomes Addressed:

1) Topic Finalization. 06/07/20 10/07/20 Sampada Deshpande

S. No. Name of Resource/material Specifications Qty Remarks

6. Names of team members:

Roll No. Name

REPORT ON INDIAN TOURISM WEBSITE

2.0 Aims/Benefits of the Micro-Project: -

2. Helps to find location for holiday trips in just one click.

3.0 Course Outcome Addressed: -

2. Implement arrays and functions in Java script.

3. Create event based web forms using Java script.

4. Create interactive webpage using regular expressions for validations.

5. Create menus and navigations in web pages.

4.0 Literature Review: -

5.0 Actual Methodology followed: -

1. Finalizing the topic and preparing proposal.

4. Designing of pages on paper:-

Home Page Login Page

Destination page Booking form

Home Event handling(mouse), Browser location, Disabling right click

Login Event handling(mouse), Browser location, Disabling right click, Form

Sign-up Event handling(mouse), Browser location, Disabling right click, Form

State Event handling(mouse), Browser location, Disabling right click

Destination Event handling(mouse), Browser location, Disabling right click

I. Home Page code: </head>

} <div class="content"><h3 style=

II. Login Page code: return false

<link href='https://fonts.googleapis.co if(event.button==2)

if(n1.value.length==0 || p1.value. </script>

alert("Enter Full Details") </head>

else <img src="formback12.jpg">

III. Sign-up page code: }

<title>Sign Up</title> var j=n2.value.indexOf('@')

<link href='https://fonts.googleapis.com/ var k=n2.value.indexOf('.')

if(p1.value != p2.value) else

display3() <br><a href="login.html" style="mar

<br><h2>Sign-Up</h2> <script type="text/javascript">

display3() <br>marks a military triumph,an

<li><a href="signup.html">Sign-U <span id="destination">

<head> alert('Security Violation');

Mumbai tour booking form function validate()

<script type="text/javascript"> with(document.form1)

var i=0; if(r2.value==""||d2.value.length=

function namecheck2() with(document.form1)

with(document.form1) var i=/^[A-Za-z\s]+$/;

function display3() <input type="radio" name="r1" val

return false <b>Gender:</b> <input type="radi

<option value="Manipur">Ma </textarea><br><br>

<option value="Tamil Nadu"> <input type="button" value="Home

<option value="Telangana">T </div>

5. Preparing Micro-Project Report

6.0 Actual Resources used: -

S. no Name of Specifications Qty Remarks

3. Notes JavaScript Demystified - -

8.0 Skill Develop /Learning Outcome of this Micro-project: -

9.0 Application of Library Management System

10.0 Names of Team Members with Roll No: -

You might also like