0% found this document useful (0 votes)

25 views540 pages

HTML and Java Script Total

Uploaded by

5049 preethi Baskaran

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

0% found this document useful (0 votes)

25 views540 pages

HTML and Java Script Total

Uploaded by

5049 preethi Baskaran

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/ 540

Sof

twar
eLi
censeDet
ail
s
i
ndex.
html
<!
--
Donotmakeanychangei
nthi
scodet
empl
ate-
->
<ht
ml>
<head>
<scr
iptsr
c="
scr
ipt
.j
s"t
ype="
text
/j
avascr
ipt
"></
scr
ipt
>
</
head>
<body
>
<h2>Soft
wareLi censeDet ai
l
s</ h2>
<t
able>
<tr>
<td>SoftwareName</ t
d>
<t
d><inputtype=" t
ext"i
d="soft
wareName"placehol
der
="Ent
erthe
soft
warename"r equired></td>
</tr>
<tr>
<td>SerialKey</td>
<t
d><i nputtype="text
"id="
seri
alKey"pl
acehol
der="
Ent
er12digit
al
phanumer i
cser ialkey"requir
ed></ td>
</tr>

<t
r>
<t
d></t
d>
<td><butt
oni
d="v
ali
dat
e"oncl
i
ck=v
ali
dat
e()
>Val
i
dat
e</
but
ton></
td>
</
tr>
</table>
<divid="r
esul
t"
></
div
>
</
body >
</
html>
scr
ipt
.j
s
/
/Fi
l
lthecodewher
evernecessar
y
f
unct
ionv
ali
dat
e()
{
v
arsoftwar eName=document .
getElementById(
"soft
wareName").
v al
ue;
v
arserialKey=document .
get El
ement ById(
"seri
alKey"
).
val
ue;
/
/varserial
Key =//
Fil
lyourcodeher et ogetthevalueofelementbyusingi
d
"
ser
ial
Key"andst oreitinavari
abl
e" serial
Key"
/
/HINT: usetheabove"softwar eName"asasampl etoget"seri
alKey"

if
(sof
twar
eName&&ser i
alKey)
{
i
f(
v al
idat
eSer
ial
Key(ser
ialKey))
document.
getEl
ement ById(
"resul
t"
).
inner
HTML="
Theser
ial
key"
+ser
ial
Key
+"i
s
val
idatedsuccessful
lyforthesoft
war e"+softwareName;
else
document.get
ElementById(
"result
").
innerHTML="Please,
provi
deaval
idseri
alkey
wit
h12al phanumer i
ccharacter
s";
}
el
se
document.
getElementById("
result"
).
inner
HTML=" Soft
warename(or)ser
ialkey
missing";
}

f
unct
ionv
ali
dat
eSer
ial
Key
(ser
ial
Key
)
{
v
arpat t
ern=/ ^
[0-
9a- z
A-Z]{
12}$/
;
v
arisSerial
Key=ser i
alKey.
match(
patt
ern)
;
r
eturnBool ean(i
sSerial
Key);
/
/Fi l
lyourcodeher e
/
/findiftheser i
alKeyisvali
dbychecki
ngifi
tmat
chest
hegi
venpat
ter
n
/
/returntrueorf alse

Fi
ndHi
ghestEnr
oll
mentofPol
ici
es
i
ndex.
html
<!
--
Donotmakeanychangei
nthi
scodet
empl
ate-
->
<ht
ml>
<head>
<scr
iptsr
c="
scr
ipt
.j
s"t
ype="
text
/j
avascr
ipt
"></
scr
ipt
>
</
head>
<body
>
<h2>FindHighestEnr ollmentofPoli
cies</h2>
<tabl
e>
<tr
>
<td>Pol
icyNumber </t
d>
<td><inputtype="t
ext
"id="poli
cyNumber"pl
aceholder
="Ent
erthe7digi
t
poli
cynumber "requi
r ed></ t
d>
</t
r>
<tr
>
<td>Enrol
ledAmount</ td>
<td><i nputty
pe="number "i
d="amount
"placehol
der="
Entertheamount
"
requi
red></td>
</t
r>

<t
r>
<t
d></t
d>
<td><butt
oni
d="submi
t"oncl
i
ck=v
ali
dat
e()
>Submi
t</
but
ton></
td>
</
tr>
</table>
<divid="r
esul
t"
></
div
>
</
body >
</
html>
scr
ipt
.j
s
/
/Fi
l
lthecodewher
evernecessar
y
f
unct
ionv
ali
dat
e()
{
varpoli
cyNumber =document.get
ElementByI
d("
policy
Number "
).
val
ue;
amount =document.get
ElementByI
d("amount"
).
value;
//varamount=//Fil
lyourcodeheretogetthevalueofelementbyusi
ngi
d"amount
"
andst
orei ti
nav ari
abl
e"amount "
//HINT:usetheabov e"pol
icy
Number "asasampl etoget"amount
"

if
(poli
cyNumber&&amount )
{
i
f(val
idatePol
icyNumber(
pol
icyNumber ))
document .
getEl
ementByI
d("
result
").
innerHTML="Thepol
icynumber
"+pol
icyNumber +"isenr
oll
edsuccessful
lywithRs"+amount
;
else
document .
getEl
ementByI
d("
result
").
innerHTML="Pl
ease,pr
ovideav
ali
d7di
gitpol
icy
number ";
}
else
document .
get
Element
ById("
result"
).
inner
HTML="Poli
cyNumber(or
)Amountis
missing";
}

f
unct
ionv
ali
dat
ePol
i
cyNumber
(pol
i
cyNumber
)
{
varpattern=/^
[0-
9]{
7}$/;
i
f(!(pol
i
cy Number.
mat ch(
pat
ter
n))
)
returnfalse
else
returntrue;

/
/Fil
lyourcodehere
/
/fi
ndift
hepolicyNumberisv
ali
dbychecki
ngi
fitmat
chest
hegi
venpat
ter
n
/
/ret
urnt
rueorf al
se

}
Emai
lVal
idat
ion
i
ndex.
html
<!
--
Donotmakeanychangei
nthi
scodet
empl
ate-
->
<ht
ml>
<head>
<scr
iptsr
c="
scr
ipt
.j
s"t
ype="
text
/j
avascr
ipt
"></
scr
ipt
>
</
head>
<body
>
<h2>Registr
ati
onform</h2>
<tabl
e>
<t
r>
<td>Tr
aineeName</ td>
<t
d><i
nputtype="
text
"id="
trai
neeName"placehol
der
="Ent
ert
hetr
ainee
name"r equir
ed></t
d>
</t
r>
<t
r>
<td>EmailI
D</td>
<t
d><inputt
ype="t
ext"i
d="email
Id"pl
acehol
der="
Ent
ertheemai
li
d"
requi
red></td>
</t
r>

<t
r>
<t
d></t
d>
<td><butt
oni
d="r
egi
ster
"oncl
i
ck=v
ali
dat
e()
>Regi
ster
</but
ton></
td>
</
tr>
</table>
<divid="r
esul
t"
></
div
>
</
body >
</
html>
scr
ipt
.j
s
/
/Fi
l
lthecodewher
evernecessar
y
f
unct
ionv
ali
dat
e()
{
vart r
aineeName=document .get
ElementById("t
raineeName")
.val
ue;
//varemai l
Id=//Fil
lyourcodeher etogett hevalueofelementbyusingid"emai
l
Id"
andstor
ei tinav ar
iabl
e" emailI
d"
//HINT: usetheabov e"trai
neeName"asasampl et oget"
emailI
d"
v
aremai lI
d=document .
getEl
ement ByI
d("
emai l
Id").
value;
if
(trai
neeName&&emai l
Id)
{
if
(val
idateEmai l
Id(
emai lI
d))
document .
getEl
ement ById("
resul
t"
).i
nner
HTML=" Theemaili
d: "
+email
Id+"i
s
val
idatedsuccessful
l
yf orthet
rainee"+trai
neeName;
else
document.get
ElementByI
d( "
result
").
innerHTML="Pl
ease,
provi
deav
ali
demaili
d";
}
el
se
document.
getElementById("
result"
).
inner
HTML="Trai
neename(
or)emai
li
d
missing";
}

f
unct
ionv
ali
dat
eEmai
l
Id(
emai
l
Id)
{

/
/Fillyourcodeher etocheckwhetherthe'email
'has'
@'symbol
and'
.'sy
mbol
/
/HI NT: emai l
Id.
incl
udes(
"@")wil
lret
urntrue,i
ftheemai
lI
dhas'
@'sy
mbol .
/
/findwhet heremai lhasbot
h'@'and' .
'
/
/Ret urntrueorfalse
i
f(
emai lI
d.i
ncludes('
@')&&emailI
d.i
ncludes('
.
')
){
returntrue;
}
r
eturnfalse;

NumberOfDay
s
i
ndex.
html
<!
--
Donotmakeanychangei
nthi
scodet
empl
ate-
->
<ht
ml>
<head>
<scr
iptsr
c="
scr
ipt
.j
s"t
ype="
text
/j
avascr
ipt
"></
scr
ipt
>
</
head>
<body
>
<h2>RechargePackVal i
dit
y</h2>
<t
able>
<t
r>
<td>RechargePackName</ t
d>
<td><inputty
pe="tex
t"i
d="
rechar
gePackName"pl
acehol
der
="Ent
ert
he
r
echargepackname"r equir
ed></td>
</
tr>
<t
r>
<td>Val
idi
ty(inday
s)</t
d>
<t
d><inputt
ype="number"i
d="
val
idi
ty"mi
n="
1"pl
acehol
der
="Ent
ert
he
v
ali
dit
yinday
s"r
equir
ed></t
d>
</t
r>

<t
r>
<t
d></t
d>
<td><butt
oni
d="v
ali
dat
e"oncl
i
ck=v
ali
dat
e()
>Submi
t</
but
ton></
td>
</
tr>
</table>
<divid="r
esul
t"
></
div
>
</
body >
</
html>
scr
ipt
.j
s
/
/Fi
l
lthecodewher
evernecessar
y
f
unct
ionv
ali
dat
e()
{
varr
echar gePackName=document .
getElementById(
"r
echargePackName").v
alue;
varval
idit
y=document.
getElement ById(
"vali
dit
y")
.val
ue;/
/Fi
llyourcodeheretoget
t
hev
alueofelementbyusi ngi
d" val
idi
ty"andst oreiti
nav ari
able"
validi
ty"
//HI
NT: usetheabove"rechargePackName"asasampl etoget" val
i
dit
y"

if(
rechar
gePackName&&v alidi
ty)
{
i
f(vali
dateRechargePackName( rechargePackName))
document .
getElement By
Id(
"result"
).
innerHTML=" Therechargepackname
"+r
echar gePackName+"wi t
hav al
i
di t
yof" +val
idit
y+"day
sisvalidatedsuccessfull
y";
el
se
document .
getElement By
Id(
"result"
).
innerHTML=" Pl
ease, pr
ovideav al
i
dr echarge
packname" ;
}
else
document .
getElementByI
d( "r
esult"
).
innerHTML="Rechar gepackname( or)
val
idit
yinday smi ssi
ng";
}

f
unct
ionv
ali
dat
eRechar
gePackName(
rechar
gePackName)
{
v
arpat t
ern=/^ [
A-Z]
{2}
[0-
9]{
3}$/;
/
/Fillyourcodehere
/
/findifther echar
gePackNamei sval
i
dbychecki
ngi
fitmat
chest
hegi
venpat
ter
n
/
/returntrueorf al
se
i
f(
rechargePackName. match(pat
ter
n))
{
returntrue;
}
el
se
{
ret
urnf
alse;
}

Fr
equencyCal
cul
ati
on
i
ndex.
html
<!
--
Donotmakeanychangei
nthi
scodet
empl
ate-
->
<ht
ml>
<head>
<scr
iptsr
c="
scr
ipt
.j
s"t
ype="
text
/j
avascr
ipt
"></
scr
ipt
>

</
head>
<body
>
<h2>FrequencyCalcul
ator
</h2>
<tabl
e>
<t
r>
<td>FrequencyBand</ t
d>
<t
d><i
nputtype=" t
ext"i
d="
band"placehol
der="Enterthefr
equencyband"
r
equired></td>
</t
r>
<t
r>
<td>Wav elengt
hinmm </ t
d>
<t
d><inputtype="number"i
d="wavelengt
h"placeholder="
0.1-
1000"
min="0.
1"max ="1000"st
ep="0.1"requir
ed></t
d>
</t
r>

<t
r>
<td></td>
<td><buttonid="submi
t"oncl
i
ck=v
ali
date(
)>Submit
</but
ton></
td>
</
tr>
<t
r>
<t
dcolspan="2">
*Acceptabl
efrequencybandsareH,M,L,
U,S, C,
X,K.
</
td>
</
tr>
</t
able>
<di
vid="r
esul
t"
></
div
>

</
body
>
</
html
>

scr
ipt
.j
s
/
/Fi
l
lthecodewher
evernecessar
y
f
unct
ionv
ali
dat
e()
{
varband=document .
getEl
ementByI
d("band")
.val
ue;
varwav el
ength=document.
getEl
ementById("
wavelength").
value//Fi
ll
yourcodeher
e
t
ogett
hev alueofel
ementbyusi ngid"wav
elength"andstoreitinav ari
able"wavel
engt
h"
//HINT:usetheabov e"
band"asasampl etoget"wav elength"

if
(band&&wav el
ength)
{
i
f(val
idateFr
equency Band(
band) )
document .
getEl
ement ById(
"result
").
innerHTML="Thefr
equencyband"+band+"with
wavelength"+wav el
ength+"isvali
datedsuccessf ul
ly"
;
else
document .
getEl
ement ById(
"result
").
innerHTML="Pl
ease,provi
deaval
i
df r
equency
band";
}
else
document.getElementByI
d( "
result"
).
inner
HTML="Frequencyband(
or)wav el
ength
missing";
}

f
unct
ionv
ali
dat
eFr
equency
Band(
band)
{
varpat t
ern=/^[H|M|L|
U|S|C|
X|K]
$/;
/
/Fillyourcodeher e
//findifthebandi sv al
idbychecki
ngi
fitmat
chest
hegi
venpat
ter
n
//returntrueorf al
se
i
f(band.mat ch(patt
ern))
{
returntrue;
}
else

{
r
etur
nfal
se;
}

}
ACMai
ntenanceSer
vice-
V1
AcMai
ntenanceSer
vice.
html
<!
DOCTYPEht
ml>
<ht
ml>
<head>

<scri
ptsrc=" scr i
pt.js"lang="
text/
javascr
ipt
"></
scr
ipt
>
<ti
tl
e>ACMai ntenanceSer vi
ce</ti
tl
e>
<sty
letype=" text/css" >
body{
/*Fillattribut esandv alues*/
backgr ound- col or
:#0CA2B9;
width: 80%;
mar gin-left:10%;
}
h1{
/*Fillattribut esandv alues*/
color: #FFFFFF;
font-fami ly:
Cal ibri;
font-style: i
talic;
backgr ound- col or
:#900043;
text-
al i
gn: cent er;
}
#result{
/*Fillattribut esandv alues*/
font-wei ght: bol d;
font-fami ly:Ar ial;
font-size:18px ;
color:#782E07;
}

#submi t
,#reset{
/*Fil
lattr
ibutesandv al
ues*
/
font-
weight:bold;
font-
family:Candara;
background-color
:#556B2F;
width:
10em;
height:
35px ;
border-
radius:10px;
}

i
nput{
wi
dth:
13.
6em;
}
#appoi
ntment{
font-
famil
y:sans-ser
if
;
width:
80%;
border-
col
lapse:coll
apse;
text
-ali
gn:
l
ef t
;
}
#acTy pe, t
ex t
area{
width: 13.6em;
}
select{
width: 14em;
}
td{
paddi ng: 3px;
}
#mal e, #femal e,#y ear
lyMai
ntenance{
width: 10pt ;
}
.
checkbox esl abel{
display :inli
ne-bl
ock;
paddi ng- ri
ght:10px ;
white-space: nowr ap;
}
.checkbox esinput{
verti
cal -ali
gn: middle;
}
.checkbox eslabel span{
verti
cal -ali
gn: middle;
}
</styl
e>
</
head>
<body
>

<h1>ACMai
ntenanceSer
vice</
h1>

<tabl
ei d="
appointment "
>
<tr
>
<td><label
f or='customer
Name'>CustomerName</l
abel
></
td>
<td><i
nputty pe='
text
'id='
cust
omer Name'pl
acehol
der="
Ent
eryourname"r
equi
red>
</
td>
</t
r>

<t
r>
<td><l
abelf
or='mobileNumber '
>Mobil
eNumber </l
abel
></ t
d>
<td><i
nputt
ype='t
el'i
d='mobi l
eNumber'name=' Mobil
eNumber 'pl
aceholder
="Ent
er
y
ourmobil
enumber"pat
tern="^[
7-9]
[0-
9]{9}
$"maxlengt
h="10"minLengt
h='10'requir
ed>
</
td>
</t
r>

<t
r>
<t
d><labelfor='
address'>Address</l
abel></
td>
<t
d><textareai
d='address'name=' address'pl
acehol
der
="Ent
ery
ouraddr
ess"r
ows=
'
5'cols='25'
requir
ed></t
extar
ea></ td>
</t
r>

<selectid="
acType">
<opti
onid="Spl
it
"v al
ue=" Spl
i
t">Spl
it</opt
ion>
<opti
on i
d="Window"v alue=" Wi
ndow" >Window</opt
ion>
<opti
on i
d=" Central
ized"value=" Cent
rali
zed"
>Centr
ali
zed</
opt
ion>
<opti
onid='
Portable'
value ='Por
table'
>Portabl
e</
opti
on>
</select
>

</td>
</
tr>

<tr
>
<td><l abelfor='servi
ceType'>ServiceType</l
abel
></ td>
<td>
<i
nputt y
pe="checkbox "name=" servi
ceType"i
d="Cleaning"v alue=" Cleaning"><label
f
or='Cleaning'>Cl eaning</
label>
<i
nputt y
pe="checkbox "name=" servi
ceType"i
d="Repair"v alue="Repai r"><labelfor=
'
Repai
r'
>Repai r</l
abel>
<i
nputt y
pe="checkbox "name=" servi
ceType"i
d="GasRef ill"value=" GasRef il
l"
><l
abel f
or=' GasRef i
ll'
>GasRef i
ll
</label>
<i
nputt y
pe="checkbox "name=" servi
ceType"i
d="Relocation"v alue=" Relocati
on"
><l
abel f
or=' Relocation'>Relocat
ion</label>
<i
nputt y
pe="checkbox "name=" servi
ceType"i
d="Fi
lter"value=" Fi
lter"><label f
or=
'
Fi
lt
er'
>Fi l
ter</l
abel >

</
td>

</
tr>

<t
r>
<td><l
abelf
or='
dateForAppointment'
>Dat
ef orAppoi
ntment</
label
></
td>
<td><i
nputt
ype='
date'i
d ='dateForAppoi
ntment'r
equi
red></t
d>
</
tr>

<t
r>
<td><l
abel
for='
year
lyMai
ntenance'
>Year
lyMai
ntenance</
label
></
td>
<t
d><inputtype='checkbox 'i
d=' y
early
Mai nt
enance'name='
year
lyMai
ntenance'
>
<l
abel
for='yearl
yMaintenance'>Sel
ectifrequi
red</l
abel
></td>
</t
r>
<t
r>
<t
d><!--emptycell--
></td>
<t
d>
<i
nputtype='submi t
'v al
ue='Submi t
'id='submit'
>
<i
nputtype='
reset'val
ue='Clear'id=' r
eset'
>
</t
d>
</t
r>

</t
abl
e>
</
for
m>

</
body
>
</
html
>
scr
ipt
.j
s
f
unct
ionget
Tot
alSer
vice(
){
v
artotalServi
ces=document .
getEl
ementsBy
Name(
"ser
viceTy
pe"
);
v
arcount=0;
f
or(v
ari =0;i
<total
Servi
ces.l
ength;i
++){
if(
totalSer
vices[
i]
.checked){
count ++
}
}
r
etur
ncount ;
}

f
unct
ionget
Ser
viceCost
(){
v
artotalServ i
ces=document .
getEl
ementsBy
Name(
"ser
viceTy
pe"
);
v
artotalCost=0;
f
or(
vari =0;i<total
Servi
ces.l
ength;i
++){
if
(totalServ i
ces[i
].
checked){
swi tch(total
Servi
ces[i
].
val
ue){
case" Cleani
ng":
totalCost+=500;
break;
case" Repair"
:
totalCost+=2500;
break;
case" GasRef i
ll
":
totalCost+=750;
break;
case" Relocati
on":
totalCost+=1500;
break;
case" Fil
ter"
:
totalCost+=250;
break;
default:
break;
}
}
}
r
etur
ntot
alCost
;
}

f
unct
ioncal
cul
ateDi
scount
(ser
viceCost
){
serv
iceCost=serv
iceCost
*0.
85;
ret
urnservi
ceCost
;
}

f
unct
ionget
Year
lyMai
ntenanceCost
(){
varyearl
yMaint
enance=document .
get
Element
sBy
Name(
"year
lyMai
ntenance"
);
i
f(yearl
yMai
ntenance[
0].
checked)
retur
n1500;
else
retur
n0;
}

f
unct
ionbookAppoi
ntment
(){
vartotal
NumberOfServi
ces=getTotal
Ser
vice(
);
varservi
ceCost=0;
i
f(tot
alNumberOfServi
ces>2){
servi
ceCost=calcul
ateDi
scount(
get
Servi
ceCost
())
;
}else{
servi
ceCost=getServi
ceCost
();
}

v
ary
earl
yMaint
enanceCost=getYear
lyMaint
enanceCost
();
v
art
otal
Cost=serv
iceCost+yearl
yMaint
enanceCost;
v
aracTy
pe=document
.get
Element
ByI
d("
acTy
pe"
).
val
ue;

if
(yearl
yMaintenanceCost){
document .
getElementByI
d("
resul
t"
).
inner
HTML=" Yourbooki
ngfor"+acType+
"ACser vi
ceissuccessful
!<br
>Theesti
matedservi
cecostwit
hmaintenancei
sRs.
"+
Mat
h.round(
totalCost)
;
}else{
document .
getElementByI
d("
resul
t"
).
inner
HTML=" Yourbooki
ngfor"+acType+
"ACser vi
ceissuccessful
!<br
>Theesti
matedservi
cecosti
sRs."+
Mat
h.round(
totalCost)
;
}

We-
HostSer
verResel
ler
s-Pur
chaseEnt
ry-
V1
WEHOST.
html
<!
DOCTYPEht
ml>
<ht
ml>
<head>
<scr
iptsr
c="
scr
ipt
.j
s"l
ang="
text
/j
avascr
ipt
"></
scr
ipt
>
<t
it
le>We-HostSer
verResel
l
ers-Pur
chaseEnt
ry</
ti
tl
e>
<st
yle>

i
nput[
type="
text
"]{
wi
dth:97%;}

i
nput[
type="
number
"]{
wi
dth:97%;}

i
nput[
type="
tel
"]{
wi
dth:97%;}

body{
backgr
ound-i
mage:ur
l(
'WEHOST.
jpg'
);
backgr
ound-si
ze:
100%;
font
-wei
ght:
bold;
}

di v{
font-size: 20px;
text-
align: center;
color:#FFFFFF;
mar gin-left:auto;
mar gin-right:auto;
}

h3{
width:50%;
color:#FFFFFF;
background- color:#000080;
mar gi
n-left:25%;
mar gi
n-right:auto;
text-
ali
gn: center;
font-f
ami ly
: Verdana;
padding: 5px ;
border-r
adi us:6px;
}

t
able, t
d,tr{
border: solid1px ;
width:50%;
mar gi
n-left:auto;
mar gi
n-right:auto;
border-spacing: 1px;
border-radius:6px ;
color:#000080;
background- color:#FFFFFF;
padding: 1px ;
}

:
:
-webki
t-
input
-pl
acehol
der{
col
or:#808080;
}

#submi t{
width: 50%;
color:#FFFFFF;
backgr ound-color:#000080;
mar gin-l
eft:25%;
mar gin-r
ight:auto;
paddi ng:5px ;
font-f
ami ly
: Verdana;
font-weight:bold;
border -
radius:6px;
}

</st
yle>
</
head>
<body
>

<h3>We-
HostSer
verResel
l
ers-Pur
chaseEnt
ry</
h3>
<!
--
<for
m onsubmi
t="
ret
urncal
cul
atePur
chaseCost
()">-
->
<t
abl
e>
<tr>
<td>Pur chaseDat e</ td>
<td><inputt ype=" tex t"id=" pdat e"onf ocus=" today ()
"requi red/></td>
</tr>
<tr>
<td>Cust omerName</ td>
<td><inputt ype=" tex t"id=" cname"pl aceholder ="Entert hecust omername"pat tern=" [
a-
zA-Z\ s]+"requi r
ed></ t
d>
</tr>
<tr>
<td>Addr ess</td>
<td><t extareapl acehol der ="Ent ert headdr ess"r ows=" 4"col s="50"id="addr ess"
required></ textarea></ td>
</tr>
<tr>
<td>PhoneNumber </td>
<td><inputt ype=" t el"id=" phno"pl acehol der="Phonenumber "pattern="[
7|8|9]+[0-
9]{9}"requi r
ed></ td>
</tr>
<tr
>
<td>Ser verTy pe</ td>
<td><sel ecti d=" stype"r equi red>
<opt ionv alue=" Sel ectSer verTy pe. .
">SelectSer verTy pe..
</opt i
on>
<opt i
oni d=" Dedi cat edSer ver"v alue=" Dedicat edSer ver"
>Dedicat edSer ver</option>
<opt i
oni d="VPS"v al ue=" VPS" >VPS</ option>
<opt ioni d=" Stor ageSer ver"value=" StorageSer ver">Storage
Ser v
er </option>
<opt i
oni d="Dat abaseSer v er"v alue=" DatabaseSer v er">DatabaseSer ver</opti
on>
</select >
</td>
</tr>
<tr>
<td>CPU( Core)</ t
d>
<td><sel ectid=" cor e"r equi red>
<opt ionv alue=" Sel ectnoofcor es..">Selectnoofcor es..</opt i
on>
<opt i
oni d="2cor es"v alue=" 2cor es" >2cor es</ option>
<opt i
oni d="4cor es"v alue=" 4cor es" >4cor es</ option>
<opt ioni d="6cor es"v alue=" 6cor es">6cor es</opt i
on>
<opt ioni d="8cor es"v alue=" 8cor es">8cor es</opt i
on>
</ select >
</td>
</tr>
<tr>
<td>Conf i
guration</ td>
<td><sel ectid="conf i
gur at i
on"r equi red>
<opt ionv alue=" Selectconf iguration.."
>Sel ectconf i
gur ati
on..</opti
on>
<opt i
oni d="4GBRAM , 300GBSSD- boost edDi skSt orage"value=" 4GBRAM , 300GB
SSD- boost edDi skSt or age" >4GBRAM , 300GBSSD- boost edDi skSt orage</ opti
on>
<opt i
onid="8GBRAM , 700GBSSD-boost
edDiskStorage"value="8GBRAM , 700GB
SSD- boost edDiskSt orage"
>8GBRAM , 700GBSSD-boost
edDi skStor age</opt
ion>
<optionid="12GBRAM ,1TBSSD-boostedDiskSt orage"val
ue="12GB
RAM , 1TBSSD- boostedDi skStor
age"
>12GBRAM ,1TBSSD- boostedDi sk
Storage</ option>
</select
>
</td>
</tr
>

<t
r>
<td>PaymentTy
pe</t
d>
<td><sel
ecti
d="
pty
pe"r equired>
<optionid="Card"v
alue="
Car
d">Debitcard/Credi
tcar
d</
opt
ion>
<optionid="Cash"val
ue="
Cash">Cash</opt
ion>
</select
>
</td>
</tr
>
</
tabl
e>

<!
--
</f
orm>-
->
</
body
>
</
html
>

scr
ipt
.j
s
f
unct
ionget
Cor
eCost
(cor
e)
{

i
f(
cor
e.st
art
sWith(
"2"
))
{
ret
urn20000;
}
i
f(
cor
e.st
art
sWith(
"4"
))
{
ret
urn25000;
}
i
f(
cor
e.st
art
sWith(
"6"
))
{
ret
urn30000;
}
i
f(
cor
e.st
art
sWith(
"8"
))
{
ret
urn40000;
}
}

f
unct
ionget
Conf
igur
ati
onCost
(conf
ig)
{
i
f(
confi
g.st
art
sWit
h("
4")
)
{
ret
urn5000;
}
i
f(
confi
g.st
art
sWit
h("
8")
)
{
ret
urn10000;
}
i
f(
confi
g.st
art
sWit
h("
1")
)
{
ret
urn15000;
}

}
f
unct
ioncal
cul
ateTax(
tot
alcost
,pt
ype)
{
l
ett ax,
ex =0;
totalcost =par seI
nt(totalcost)
;
t
ax =totalcost *12/100;
i
f(ptype.st art
sWi t
h( "
Car d"))
{
ex =(
total cost+tax)*2/100;
}
r
etur nMat h.round(totalcost+tax+ex)
;

f
unct
ioncal
cul
atePur
chaseCost
()
{
varcore=document .getEl
ement ById('
core'
).
value;
varconf=document .getEl
ement ById('
confi
guration')
.val
ue;
varcorecost=getCoreCost (
cor e);
varconfcost=getConfigurationCost (
conf);
vartot
alcost=corecost+conf cost;
varptype=document .
getElement By I
d('
ptype'
).value;
vartax=calculat
eTax( t
otalcost ,
ptype);
varserver=document .getElement ById('
sty
pe').
value;
document .getEl
ement ById('resul
t'
).i
nnerHTML=" Purchaseofa"+ser
ver+"wit
h"+conf+"
hasbeenl ogged!<br>AnamountofRs. "
+tax+",
inclusiveoftaxhasbeenreceiv
edby" +pt
ype;
}

BoatRi
deBi
llAut
omat
ion-
V1
i
ndex.
html
<!
DOCTYPEht
ml>
<ht
ml>
<head>
<t
it
le>BoatRi
deBi
l
lAut
omat
ion</
ti
tl
e>
<st
yle>

i
nput [
type="
number "
]{
width:98%;
}
i
nput [
type="
tex
t "
]{
width:98%;
}
i
nput [
type="
date"]{
width:98%;
}
i
nput [
type="
emai l
"]{
width:98%;
}
i
nput [
type="
tel
"]{
width:98%;
}
select{
width:98%;
}
body {
margin-l
eft:
aut o;
margin-r
ight:auto;
width:60%;
background-size:
60%;
}
f
orm{
margi
n-l
eft:
aut o;
margi
n-r
ight:auto;
t
ext
-al
ign:center;
wi
dth:50%;
}
h1{
background- color
:#00cc66;
color:#FFFFFF;
font-
fami l
y:Cour i
erNew;
font-
style:it
ali
c;
text-
ali
gn: center;
}
t
d,t
h{
border:1pxsol
id#ddd;
padding:8px;
}
#main{
background- color:#9999f
f;
padding-top: 12px;
padding-bottom: 12px;
text-
ali
gn: center;
color:#FFFFFF;
font-
weight :bold;
padding-l
ef t
:10px ;
padding-ri
ght :10px;
}
#resul
t{
font-
size:
20px ;
font-
weight :
bol d;
}
</
sty
le>
</
head>
<body
>
<di
vid="
mai
n">
<h1>BoatRi
deBi
l
lAut
omat
ion</
h1>
<f
orm onsubmi
t="
ret
urnbookRi
de(
)">
<t
abl
e>
<t
r>
<t
d>Cust
omerName</td>
<t
d><i
nputt
ype="
tex
t"i
d="cname"name="
cname"pl
acehol
der
="Cust
omer
Name"/
></
td>
</
tr>
<t
r>
<td>PhoneNumber </td>
<td><inputt ype="tel"id="phno"name=" phno"placehol
der="
Phone
Number "/></t
d>
</
tr>
<t
r>
<td>Emai l
</td>
<td><inputt ype="emai l
"id="emai l
"name=" email"
pl
aceholder="
Emai l"/ ></td>
</
tr>
<t
r>
<td>NumberofPer sons</ td>
<td><inputt ype="tex t
"id="noOf Persons"name=" noOfPer
sons"
pl
aceholder="
NumberofPer sons"r equired/ ></ td>
</
tr>
<t
r>
<td>BoatTy pe</ t
d>
<td><selecti d="btype"name=" btype">
<optionid=" 2seater "value="2Seat erBoat">2SeaterPedalBoat</
opti
on>
<optionid=" 4seater "value="4Seat erBoat">4SeaterPedalBoat</
opti
on>
<optionid=" 8seater "value="8Seat erBoat">8SeaterMotorBoat</opt
ion>
<optionid=" 15seat er"value=" 15Seat erBoat">15SeaterMotor
Boat</opt
ion>
</select></td>
</
tr>
<t
r>
<td>Tr avelDur ati
oni nHour s</td>
<td><inputt ype="number "id=" durati
on"name=" durati
on"/></
td>
</
tr>
</t
able>
<br
>
<p><i
nputt
ype="
submi
t"i
d="
submi
t"name="
submi
t"v
alue="
BookRi
de"
/></
p>
<di
vid="
resul
t"
></
div
>

</
for
m>
</
div
>
<scr
iptsr
c="
scr
ipt
.j
s"></
scr
ipt
>
</
body
>
</
html
>
scr
ipt
.j
s
f
unct
ionbookRi
de(
){
v
arbty
pe=document.
getEl
ementByI
d("
btype"
).
val
ue;
v
arnoOfPer
sons=document.
get
ElementByI
d("
noOfPer
sons"
).
val
ue;
vardurati
on=document .getElement ById(
"dur
ati
on").
val
ue;
varboatCount=getBoatCount (btype,
noOf Per
sons);
varboatPri
ce=getBoatPrice(btype,boatCount)
;
varcal
=calcul
ateBill
(boatPrice,durat
ion);
document .
getEl
ement By I
d("result
").
inner
HTML=" YouneedtopayRs.
"+cal
;
}
f
unct
ioncal
cul
ateBi
l
l(boat
Pri
ce,
dur
ati
on)
{
ret
urnboat
Pri
ce*
dur
ati
on;
}
f
unct
ionget
Boat
Pri
ce(
bty
pe,
boat
Count
){
i
f(
bty
pe=="2SeaterBoat"
){
ret
urn(boat
Count*240);
}
i
f(
bty
pe=="4SeaterBoat"
){
ret
urn(boat
Count*260);
}
i
f(
bty
pe=="8SeaterBoat"
){
ret
urn(boat
Count*560);
}
i
f(
bty
pe=="15SeaterBoat"
){
ret
urn(boat
Count*990);
}
}
f
unct
ionget
Boat
Count
(bt
ype,
noOf
Per
sons)
{
i
f(
btype=="2SeaterBoat"
){
if(noOfPersons%2===0){
retur
n(parseInt
(noOf
Persons/
2));
}
else{
retur
n(parseInt
(noOf
Persons/
2)+1);
}
}
i
f(
btype=="4SeaterBoat"
){
if(noOfPersons%4===0){
retur
n(parseInt
(noOf
Persons/
4));
}
else{
retur
n(parseInt
(noOf
Persons/
4)+1);
}
}
i
f(
btype=="8SeaterBoat"
){
if(noOfPersons%8===0){
retur
n(parseInt
(noOf
Persons/
8));
}
else{
retur
n(parseInt
(noOf
Persons/
8)+1);
}
}
i
f(
btype=="15Seat erMot
orBoat")
{
if(noOfPersons%15===0)
{
retur
n(parseInt(
noOf
Persons/15)
);
}
else{
retur
n(parseInt(
noOf
Persons/15)
+1);
}
}
}

Si
ngapor
eTour
ism-
V1
i
ndex.
html
<!
DOCTYPEht
ml>
<ht
ml>
<head>
<ti
tl
e>SingaporeTour ism</ ti
tle>
<styl
e>
i
nput[ty
pe="number " ]
,i
nput [
type="text
"]
,i
nput
[t
ype="
dat
e"]
,
input
[t
ype="
emai
l
"],
i
nput
[t
yp
e="t
el"]
,
select{
width:95%;
}
body {
background-color:#993366;
font-
wei ght:bol d;
}
div{
mar gin-left:auto;
mar gin-right:auto;
tex t-
align: center;
col or:#FFFFFF;
font -size: 20px;
}

h3{
font-f
ami ly
: Verdana;
text-
ali
gn: center;
border-r
adi us:6px;
mar gi
n-left:auto;
mar gi
n-right:auto;
background- color:#00ccf
f;
color:#FFFFFF;
width:50%;
padding: 5px ;
}

t
abl
e,t
d,tr
{
margin-l
eft:auto;
margin-r
ight:auto;
text
-al
ign:left
;
border:sol
id2pxbl ack;
border-
spacing: 1px;
border-
radi
us: 6px;
width:50%;
padding:1px;
color:
#009900;
background-color:#f2f
2f2;
}

:
:
-webki
t-
input
-pl
acehol
der{
color:
#696969;
font-
weight
:bol
d;
}

#submi t
{
color: #FFFFFF;
font-weight :bold;
font-fami ly:Verdana;
backgr ound- color:#00ccf
f;
border -r
adi us:6px;
paddi ng: 5px;
width: 50%;
mar gin-right:auto;
mar gin-left:auto;
}
#result
{
color: #000000;
font-size: 20px;
}
</sty
le>

</
head>
<body
>
<di
v>
<h3>Si
ngapor
eTour
ism</
h3>
<f
orm onsubmi
t="
ret
urncal
cul
ateCost
()"
>
<t
abl
ebor der="
1">
<tr
>
<td>Name</ td>
<td><inputtype="tex
t"id="name"requi
red></t
d>
</t
r>
<tr
>
<td>Phoneno </ td>
<td><inputtype="tel
"id="phno"r
equir
ed></td>
</t
r>
<tr
>
<td>Emai lI
D</ t
d>
<td><inputtype="email"i
d="email
"requir
ed></t
d>
</t
r>
<tr>
<t d>NumberofPer sons</ td>
<t d><i nputt y pe="number "i
d=" noOf Persons"r equired></ td>
</tr>
<tr>
<t d>Pr eferSt ay</td>
<t d><inputt y pe=" r
adio"id="y es"name=" preferStay"val ue="Yes"requir
ed
onchange=" disableNoOf DaysSt ay()
" >Yes
<inputt ype=" radio"id="no"name=" preferStay"value=" No"r equir
ed
onchange=" disableNoOf DaysSt ay()
" >No</ t
d>
</tr>
<tr>
<t d>NumberofDay sSt ay</ td>
<t d><i nputt y pe="number "i
d=" noOf Day sStay"required></ td>
</tr>
<tr>
<t d>Placesy ouwoul dli
ket ov i
sit
</td>
<td>
<inputt y pe=" checkbox "name=" placesOf Choice"i d="Pilgri
mage"
value="Pilgri
mage" >PlacesOfPi l
grimage<br >
<inputt y
pe="checkbox"name=" placesOf Choi ce"id="Herit
age"
value="Her it
age" >Pl acesOfHer it
age<br >
<inputt y
pe="checkbox"name=" placesOf Choi ce"id="Hil
ls"
value="Hi l
ls"
>Hi ll
s<br >
<inputt y
pe="checkbox"name=" placesOf Choi ce"id="Fall
s"
value="Fal l
s">Fal l
s<br >
<inputt y
pe="checkbox"name=" placesOf Choi ce"id="Beach"
value="Beach" >Beach<br >
<inputt y
pe="checkbox"name=" placesOf Choi ce"id="Adventures"
value="Adv ent ures" >PlacesOfAdv ent ur
es
</ td>
</tr>
</table>

scr
ipt
.j
s
f
unct
ionget
Count
()
{
v
arcount
=0;
i
f(
document
.get
Element
ByI
d("
Pil
gr i
mage" ).
checked===true)
{
count
+=1;
}
i
f(
document
.get
Element
ByI
d("
Heritage").
checked===t r
ue)
{
count
+=1;
}
i
f(
document
.get
Element
ByI
d("
Hil
ls").
checked===t rue)
{
count
+=1;
}
i
f(
document
.get
Element
ByI
d("
Fal
ls").checked===true)
{
count
+=1;
}
i
f(
document
.get
Element
ByI
d("
Beach" ).
checked===t r
ue)
{
count
+=1;
}
i
f(
document
.get
Element
ByI
d("
Adv entures"
).checked===true)
{
count
+=1;
}
r
etur
ncount
;
}
f
unct
ionget
Tot
alCost
(noOf
per
sons)
{
v
arinit
cost
=0;
i
f(
document.get
Element
ByI
d("
Pil
gri
mage" )
.checked===true)
{
ini
tcost
+=350;
}
i
f(
document.get
Element
ByI
d("
Herit
age" )
.checked===true)
{
ini
tcost
+=430;
}
i
f(
document.get
Element
ByI
d("
Hil
ls"
).checked===true)
{
ini
tcost
+=780;
}
i
f(
document.get
Element
ByI
d("
Fal
ls")
.checked===t r
ue)
{
ini
tcost
+=1200;
}
i
f(
document.get
Element
ByI
d("
Beach").checked===true)
{
ini
tcost
+=270;
}
i
f(
document.getEl
ementByI
d("
Adv
ent
ures"
).
checked===t
rue)
{
ini
tcost
+=4500;
}
r
etur
ninit
cost*noOfper
sons;
}
f
unct
ioncal
cul
ateDi
scount
(cost
)
{
i
f(
get
Count(
)>=2)
{
ret
urn(
cost*(
85/100)
);

}
r
etur
n0;
}
f
unct
ionget
Stay
Cost
(noOf
Per
sons)
{
i
f(
document
.get
Element
ByI
d("
yes"
).
checked===t
rue)
{
v
arnoOfDays=document.
getEl
ementByI
d("
noOf
Day
sSt
ay"
).
val
ue;
r
etur
nnoOfPersons*noOfDays*150;
}
r
etur
n0;
}
f
unct
iondi
sabl
eNoOf
Day
sSt
ay(
)
{
i
f(
document
.get
Element
ById("
no")
.checked===true)
{
document.
getEl
ementBy
Id("
noOfDaysStay")
.setAt
tri
but
e("
disabl
ed"
,t
rue)
;
}
/
*if
(document
.get
Element
ById(
"yes"
).
checked===true)
{
document
.get
Element
ByI
d("
noOf
Day
sSt
ay"
).
set
Att
ri
but
e("
disabl
ed"
,f
alse)
;

}
*/

}
f
unct
ioncal
cul
ateCost
()
{
varnoOf Persons=document .getElement ByI
d("
noOfPer
sons")
.val
ue;
vartotalcost=getTot alCost(noOfPer sons);
vardiscount=cal culateDiscount(totalcost)
;
varstaycost=get Stay Cost(noOfPer sons);
varpackagecost =discount +staycost;
varres=packagecost +936;
document .
getElement ByI
d( "
result
").i
nnerHTML="Yourpref
err
edpackagecost"
+res+"
$";
ret
urnf alse;
}

Mont
hlyI
nst
almentEst
imat
or-
V1
i
ndex.
html
<!
DOCTYPEht
ml>
<ht
ml>
<head>
<t
it
le>Mont
hlyI
nst
almentEst
imat
or</
ti
tl
e>
<st
yle>

body
{
backgr
ound-
col
or:
#FFAACC;
}

di
v{
mar gin-left:auto;
mar gin-right:auto;
text-
align: center;
color:#FFFFFF;
font-size: 20px;
}

h3{
font-f
ami ly
: Verdana;
text-
ali
gn: center;
border-r
adi us:6px;
mar gi
n-left:auto;
mar gi
n-right:auto;
background- color:#770080;
color:#FFFFFF;
width:50%;
padding: 5px ;
}
t
abl
e,t
d,tr{
mar gi
n-l
eft:auto;
mar gi
n-ri
ght:auto;
border:sol
id2pxbl ack;
border-
spacing: 1px;
border-
radius:6px ;
width:50%;
padding:1px ;
color:
#000099;
background-color:#F2F2F2;
}

:
:
-webki
t-
input-
placeholder{
color
:#696969;
font-
weight:bold;
}

#submi
t{
mar gin-r
ight:auto;
mar gin-l
eft:auto;
color:#FFFFFF;
font-weight:bold;
font-f
ami ly:Verdana;
backgr ound-color:#770080;
text-
al i
gn:center;
border -
radius:6px;
paddi ng:5px ;
width: 50%;
}

#r
esul
t{
color
:#770080;
font-
siz
e:20px;
f
ont
-wei
ght
:bol
d;
}

</
sty
le>
</
head>
<body
>
<di
v>
<h3>Mont
hlyI
nst
almentEst
imat
or</
h3>
<f
orm onsubmi
t="
ret
urnav
ail
Loan(
)">
<t
abl
e>
<t
r>
<td>Appl i
cantName</ td>
<td><inputt ype="text"id="aname"name=" aname"pl aceholder="Appl
icant
Name"required/ ></td>
</ tr
>
<tr>
<td>PhoneNumber </td>
<td><inputt ype="tel
"id=" phno"name=" phno"placeholder="PhoneNumber "
r
equi
red/></ td>
</ tr
>
<tr>
<td>Emai l</td>
<td><inputt ype="emai l"id="email
"name=" emai l
"pl
acehol der="Email
"
r
equi
red/></ td>
</ tr
>
<tr>
<td>AadharNumber </td>
<td><inputt ype="text"id="aadhar"name=" aadhar"placeholder="Aadhar
Number"required/ ></td>
</ tr
>
<tr>
<td>PanNumber </t
d>
<td><inputt ype="text"id="pan"name=" pan"placeholder="PanNumber "
r
equi
red/></ td>
</ tr
>
<tr>
<td>Mont hlyI ncome</ td>
<td><inputt ype="text"id="income"name=" income"pl aceholder="Monthly
I
ncome"requi red/></ t
d>
</ tr
>
<tr>
<td>LoanTy pe</ td>
<td><selectname=" loanTy pe"id="l
oanType" >
<opt i
oni d="home"v alue="HomeLoan" >HomeLoan</ option>
<opt i
oni d="personal "value="PersonalLoan">PersonalLoan</ opti
on>
<opt i
oni d="vehicl
e"v al
ue="VehicleLoan">Vehicl
eLoan</ opti
on>
</select></td>
</
tr>
<t
r>
<t
d>Expect
edLoanAmount </
td>
<t
d><i
nputtype="
number
"id="expect
edAmt
"name="
expect
edAmt
"requi
red
/
></
td>
</
tr>
<t
r>
<t
d>Tenur
eInMonths</
td>
<t
d><i
nputty
pe="
number"i
d="
tenur
e"name="
tenur
e"r
equi
red/
></
td>
</
tr>
</
tabl
e>
<br
>
<p><i
nputt
ype="
submi
t"i
d="
submi
t"name="
submi
t"v
alue="
Avai
lLoan"
/></
p>
<di
vid="
resul
t"
></
div
>
</
for
m>
</
div
>
<scr
iptsr
c="
scr
ipt
.j
s"t
ype="
text
/j
avascr
ipt
"></
scr
ipt
>
</
body
>
</
html
>
scr
ipt
.j
s
f
unct
ioncal
cul
ateEMI(
income,
expect
edAmt
,tenur
e,i
nter
est
Rat
ePer
Annum)
{
varEMI,R,N;
R=(i
nter
estRatePer
Annum/100)/
12;
N=tenur
e;
EMI=(expectedAmt*R*
(Math.
pow((
1+R)
,N)
)/(
Mat
h.pow(
(1+R)
,N)
-1)
).
toFi
xed(
2);
ret
urnMath.round(
EMI);
}

f
unct
ionget
Int
erest
Rat
e(l
oanTy
pe)
{
varintr
e;
i
f(loanType=="HomeLoan")
{
intr
e=7;
}
elseif(
loanType=="
Personal
Loan"
)
{
intr
e=7.8;
}
elseif(
loanType=="
Vehicl
eLoan"
)
{
int
re=15;
}
r
etur
nintr
e;
}

f
unct
ioncheckEl
i
gibi
l
ity
(income,
emi
)
{
vartmp;
tmp=income* 60/
100;
i
f(emi<=tmp)
{
ret
urntrue;
}
else
{
ret
urnfalse;
}
}

f
unct
ionav
ail
Loan(
)
{
v
arl t
,l
tt
;
l
tt=document.getEl
ement
ById(
"l
oanType"
);
//
l
t=lt
t.
options[
lt
t.sel
ect
edI
ndex]
.val
ue;
//

v
arirpa;
i
rpa=par
seFl
oat
(get
Int
erest
Rat
e(l
t)
);

varexpectedLoanAmount ,income, tenure,emival

;
i
ncome=par seFloat(document .getElement By
Id("i
ncome")
.val
ue);
expectedLoanAmount =parseFloat(document .
getElement
By I
d("
expect
edAmt "
).
val
ue)
;
tenur
e=parseFl oat(document .
getElement ByI
d("
tenure"
).
val
ue);
emival=parseInt(calculat
eEMI (i
ncome, expectedLoanAmount ,t
enure,
irpa)
);
vareli
g=checkEl igi
bi l
i
ty(i
ncome, emi val)
;

i
f(eli
g===true)
{
document .get
ElementBy
Id(
"resul
t"
).
inner
Text
="Youar
eel
igi
blet
ogetal
oanamountas
"
+ex pectedLoanAmount +"
andemi permonthis"
+emival
;
}
else
{
document .get
ElementBy
Id(
"resul
t"
).
inner
Text
="Youar
enotel
igi
ble"
;
}
retur
nf al
se;
}
1.Bookform

<html>

<head>

function test(){

alert("You have successfully submitted the Book Form");

return false;

</script>

</head>

<body>

<h1>A Simple Form</h1>

<h2>Form Fundamentals</h2>

<form name="form" autocomplete="on" onsubmit="return test()">

<legend>Customer Info</legend>

<input type="text" id="cusname" name="cusname" placeholder="Enter your

name" autofocus required><br><br>

<label for="telephone">Telephone:</label>

<input type="tel" name="telephone" id="telephone" placeholder="Pattern:

234-567-8910" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<br><br>

<label for="mail" >Email address:</label>

<input type="email" id="mail" name="mail" placeholder="Enter your email

address" required>

</fieldset>

<legend>Books</legend>

<input name="quantity" type="number" max="5" min="1">

<label for="quantity">Quantity: {Maximum

5}</label>

<input list="books" id="book" name="book">

<option value="HTML5 - Bruce Lawson and Remy Sharp">

<option value="HTML5 - Up and Running - Mark Pilgrim">

<option value="Head First HTML5 Programming - Eric Freeman">

<option value="Mastering HTML, CSS and JavaScript - Laura

Lemay">

</datalist>

</fieldset>

<input type="submit" id="submit" name="submit">

</form>

</body>

</form>
</body>

</html>

2.Palindrom Check

<html>

<head>

function CheckPalindrome()

var str=document.getElementById("Palin").value;

str=str.toLowerCase();

str=str.replace(/\s/g,'');

var rev=str.split('').reverse().join('');

if(str==rev)

alert("The entry is a palindrome.");

else

alert("The entry is not a palindrome.");

</script>

</head>

<body>

<form>

<table>

<tr>

<td>Enter word/sentence to check for palindrome:</td>

</tr>

<tr>

<td>

<Input type="button" name="palinbtn" value="CheckPalindrome"

onclick="CheckPalindrome()">

</td>

</tr>

</table>

</form>

</body>

</html>

3.Book A Show

<!DOCTYPE HTML>

<html>

<head>

<title>

BOOK A SHOW- TICKET </title>

<style>

body{

background-color: #00CED1;

color: #0C1584;

h1{

color: #0000FF;
font-family: Monospace;

text-align: center;

form{

display: grid;

place-items: center;

table{

font-weight: bold;

font-family: Monospace;

</style>

</head>

<body>

<h1> BOOK A SHOW - TICKET BOOKING</h1>

<form onsubmit="alert('Booking Successful');

return false; " >

<table>

<label for="name"> Name </label </td>

<td>

<input type="text" id="name" name="name" pattern="^[a-zA-Z]+$" placeholder="Enter the name"

required>

</td>

</tr>

<tr> <td>
<label >Movie Name</label></td>

<td>

<input list="movies" name="moviename" id="moviename" placeholder="Movie Name" required>

<datalist id="movies" name="movies">

<option value="Iranda">Iranda</option>

<option value="Logan">Logan</option>

<option value="Fist Fight">Fist Fight</option>

</datalist>

</td>

</tr>

<tr>

<td>

<label> circle</label>

</td>

<td>

<input list="circles" name="circle" id="circle" required>

<datalist id="circles" name="circles">

<option value="Silver" > Silver</option>

<option value="Gold" > Gold</option>

<option value="Plantinium" > Plantinium</option>

</datalist>

</td>

</tr>

<tr>

<td>
<label>Phone no </label>

</td>

<td>

<input type="number" name="phone" id="phone" pattern="^\d{}$"

placeholder="Enter Mobile Number" required>

</td>

</tr>

<td>
<label for="children" >No of children</label>

</td>

<td>

<input type="number" id="children" name="children" min="1" max="5" required>

</td>

</tr>

<tr>

<td>

<input type="submit" name="submit" id="submit" value="Book My Show">

</td>

<td>

<input type="reset" name="reset" id="reset" value="reset"

</td>

</tr>

</table>

</form>

</body>

</html>

4.Royal Wedding Planners

<!DOCTYPE html>

<html>

<head>

<title>Royal Wedding Planners</title>

<style>

input[type="number"] {

width:98%;

input[type="range"] {

width:95%;

input[type="text"] {

width:98%;

input[type="date"] {

width: 98%;

input[type="email"] {

width:98%;

input[type="tel"] {

width: 98%;

textarea {

width: 98%;

select {

width: 98%;
}

.split {

height: 100%;

width: 50%;

position: fixed;

overflow: scroll;

z-index: 1;

top: 0;

.left {

left: 0;

.right {

/* Fill the attributes and values */

right: 0;

background-color: #CA9499;

width:60%;

padding: 10px;

#image{

/* Fill the attributes and values */

width: 90%;

height: 90%;

h3{

/* Fill the attributes and values */

text-align: center;

font-size: 20px;

font-family: Georgia;

border-radius: 6px;

padding: 2px;

table, h3{

/* Fill the attribute and value */

border-spacing: 2px;

width: 97%;

border: 3px solid #FFFFFF;

td{

/* Fill the attributes and values */

color: #FFFFFF ;

background-color: #A9A9A9;

border-spacing: 5px;
border: 1px solid #FFFFFF;

#submit,h3{

/* Fill the attributes and values */

color: #C21807;

font-weight: bold;

background-color: #FFFFFF;

table,td,#submit{

/* Fill the attributes and values */

font-size: 15px;

font-family: Georgia;

border-radius: 6px;

padding: 5px;

#submit:hover {

background-color: #C21807;

color:#FFFFFF;

#offers:hover {

color: #C21807;
}

.b{

/* Fill the attribute and value */

color: #FFFFFF;

#condition:hover {

color: #C21807;

.c{

/* Fill the attributes and values */

color: #C21807;

font-size: 15px;

font-family: Georgia;

font-weight: bold;

.d{

border: 0px;

</style>

</head>
<body>

function show_value(x)

document.getElementById("demo").innerHTML=x;

</script>

<div class="split left"><img src="ROYAL.png" id="image"></div>

<div class="split right">

<h3>ROYAL WEDDING PLANNERS </h3>

<table>

<td class="d"><a id ="wedding_info" href="#wedding" class="b">Wedding-info</a></td>

<td class="d"><a id ="contact_info" href="#contact" class="b">Contact-info</a></td>

<td class="d"><a id ="services_info" href="#services" class="b">Services required</a></td>

</tr>

<tr>

<td colspan="3" class="c" id="wedding">Wedding Information</td>

</tr>

<tr>

<td>Select your city : <br/><select id="city" required="required">

<option>Select..</option>

<option>Chennai</option>

<option>Bangalore</option>

<option>Hyderabad</option>

<option>Mumbai</option>

</select></td>

<td>Wedding date : <br/><input type="date" id="date" required></td>

<td>No of guests <br/> <input type="number" id="guests" required></td>

</tr>

<tr>

<td>Venue</td>

<td colspan="2"><textarea id="venue" placeholder="Wedding venue" rows="4"

cols="50" required></textarea></td>

</tr>

<tr>

<td>Budget (approx)</td>

<td colspan="2"><input id="budget" value="0" type="range"min="200000"

max="5000000" required onchange="show_value(this.value)">

</tr>
<tr>

required></td>

</tr>

<tr>

<td colspan="3" class="c" id="services">Services Required</td>

</tr>
<tr class="d">

<td class="d"><input type="checkbox" id="invitation" name="charges">Invitation</td>

<td class="d"><input type="checkbox" id="decorators" name="charges">Decorators

</td>

<td class="d"><input type="checkbox" id="makeupArtists" name="charges">Makeup

artists</td>

</tr>

<tr>

<td class="d"><input type="checkbox" id="photo_video"

name="charges">Photographers & Videographers</td>

<td class="d"><input type="checkbox" id="ls_support" name="charges">Live streaming

support</td>

<td class="d"><input type="checkbox" id="caterers" name="charges">Caterers</td>

</tr>

<tr>

<td class="d"><input type="checkbox" id="transportation"

name="charges">Transportation</td>

<td class="d"><input type="checkbox" id="accomodation"

name="charges">Accomodation</td>

<td class="d"><input type="checkbox" id="theme"

name="charges">Theme-based</td>

</tr>

<tr>

<td colspan="3" id="condition">**Quote you receive will include service tax of

5.0%</td>
</tr>

</table>

<br/>

<p><input id="submit" type="button" value="GET A QUOTE"</p>

</div>

</body>

</html>

5.PlatinumProperties

<!DOCTYPE html>

<html>

<head>

<title>Platinum Properties</title>

<style>

input[type="number"] {

width:98%;

}
input[type="text"] {

width:98%;

input[type="date"] {

width: 98%;

input[type="email"] {

width:98%;

input[type="tel"] {

width: 98%;

select {

width: 98%;

.split {

height: 100%;

width: 50%;

position: fixed;

overflow: scroll;

z-index: 1;

top: 0;

}
.left {

/* Fill the attribute and value */

left: 0;

.right {

/* Fill the attribute and value */

right: 0;

background-color: #74B14E;

width: 60%;

padding: 10px;

#image{

/* Fill the attribute and value */

width: 170%;

height: 100%;

h3{

/* Fill the attribute and value */

text-align: center;

font-size: 20px;

font-family: Georgia;

border-radius: 6px;

padding: 5px;
}

table, h3{

/* Fill the attribute and value */

border: 3px solid #ffffff;

border-spacing: 2px;

width: 97%;

td{

/* Fill the attribute and value */

border: 1px solid #ffffff;

color: #6600FF;

background-color: #DFBF9F;

border-spacing: 5px;

#submit,h3{

/* Fill the attribute and value */

color: #C21807;

font-weight: bold;

background-color: #FFFFFF;

table,td,#submit{
/* Fill the attribute and value */

font-size: 15px;

font-family: Georgia;

border-radius: 6px;

padding: 5px;

#submit:hover {

background-color: #C21807;

color:#FFFFFF;

#offers:hover {

color: #C21807;

.b{

/* Fill the attribute and value */

color: #6600FF;

.c{

/* Fill the attribute and value */

color: #C21807;

font-size: 15px;
font-family: Georgia;

font-weight: bold;

.d{

border: 0px;;

</style>

</head>

<body>

function show_value(x)

document.getElementById("demo").innerHTML=x;

</script>

<div class="split left"><img src="PLATINUM.png" id="image"></div>

<div class="split right">

<h3>Platinum Properties</h3>

<table>

<td class="d"><a id="property_info" class="b" href="#property">Property-info</a></td>

<td class="d"><a id="personal_info" class="b" href="#personal">Personal-info</a></td>

<td class="d"><a id="features_info" class="b" href="#features">Extra Features</a></td>

</tr>

<tr>

<td colspan="3" class="c" id="property">Property Information</td>

</tr>

<tr>

<td>Select property Type: <br/>

<select id="ptype" required>

<option value="Select..">Select..</option>

<option value="Apartment">Apartment</option>

<option value="Independent House">Independent House</option>

<option value="Compact Home">Compact Home</option>

</select></td>

<td>BHK Type <br/>

<select id="bhk" required>

<option value="Select..">Select..</option>

</select></td>
<td>Select the possession status <br/>

<select id="status" required>

<option value="Select..">Select..</option>

<option value="Under Construction">Under Construction</option>

<option value="Semi Furnished">Semi Furnished</option>

<option value="Ready To Move">Ready To Move</option>

</select></td>

</tr>

<tr>

<td>Price Range:</td>

<td class="d"><input type="number" id="from" placeholder="From" required><!-- Fill the

code for price range from --></td>

<td class="d"><input type="number" id="to" placeholder="To" required><!-- Fill the code

for price range to --></td>

</tr>

<tr>

<td>Location:</td>

<td class="d" colspan="2"><input type="text" id="location" placeholder="Enter the

location" required></td>

</tr>

required></td>

</tr>

<tr>

<td colspan="3" ><a id="offers" class="b" href="#submit">**Click here to unlock

exclusive offers</a></td>

</tr>

</table>

<br/>

</div>

</body>

</html>
6.Health Care Center Appointmet

<!DOCTYPE html>

<html>

<head>

<title>Health Care Center</title>

::placeholder {

color: #40E0D0;

opacity: 2;

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],

input[type="date"], textarea, select, #services {

width: 85%;

color: #40E0D0;

font-weight: bold;

background: transparent;

border-radius: 6px;

border-style: solid;

border-width: 2px;
border-color: #FFA07A;

input[type="button"] {

background-color: #08088A;

input[type="checkbox"]#terms:checked+a {

color: #FFFF00;

body {

/* Fill the attribute and value */

background-color: #191970;

h3 {

/* Fill the attributes and values */

color: #FFFFFF;

background-color: #696969;

margin-left: auto;

margin-right: auto;

text-align: center;

width: 40%;
font-family: Verdana;

border-style: 1px solid;

border-radius: 6px;

label span{

color: #F0F8FF;

table {

/* Fill the attributes and values */

width: 30%;

border-style: 3px groove;

margin-left: auto;

margin-right: auto;

border-spacing: 5px;

border-radius: 6px;

#appointment td {

/* Fill the attributes and values */

border-width: 1px;

border-style: solid;

border-color: #F4A460;

font-size: 15px;

padding: 8px;
}

#terms_ref {

color: #9ACD32;

#submit {

/* Fill the attributes and values */

color: #FFEFD5;

font-weight: bold;

background-color: transparent;

border-radius: 6px;

#submit:hover {

background-color: #8B4513;

color: #FFFFFF;

.b {

/* Fill the attributes and values */

width: 50%;

margin-left: auto;

margin-right: 14em;
}

</style>

</head>

<body>

<h3>Health Care Center-Appointment</h3>

<tr>

<th id="details" colspan="2"></th>

</tr>

<tr>

<td>

</td>

<td>

<input type="text" name="name" id="name" placeholder="Enter your

name" required />

</td>

</tr>

<tr>

<td>

<label><span><b>Gender*</b></span>:</label>

</td>
<td>

<input type="radio" id="male " name="gender" value="Male" required

><label><span><b>Male</b></span></label>

<input type="radio" id="female " name="gender" value="Female"

required ><label><span><b>Female</b></span></label>

<input type="radio" id="others " name="gender" value="Others"

required ><label><span><b>Others</b></span></label>

</select>

</td>

</tr>

<tr>

<td>

<label><span><b>Address</b></span>:</label>

</td>

<td>

<textarea name="address" id=address rows="5" cols="25"

placeholder="Enter your address" required ></textarea>

</td>

</tr>

</table>

<p class="b"><input type="checkbox" name="terms" id="terms" /><a href="#submit"

id="terms_ref">I agree to the terms of service and privacy policy</a></p>

<p class="b"><input type="button" name="submit" id="submit" value="Submit" /></p>

</body>

</html>

7.Atlas Package and movers

<!DOCTYPE html>

<html>

<head>

<title>Atlas Packers and Movers</title>

<style>

.left:0:

.right

right:0;

background-color:#548AE3;

width:60%;

padding:10px;

.b{

color:#21807;

font-size:15px;

font-family:"georgia";

#image{

width:80%;

height:90%;
}

h3{

margin-right:auto;

margin-left:auto;

text-align:center;

width:50%;

font-family:"Georgia";

border-radius:6px;

table th,td{

border-spacing:2px;

font-size:15px;

font family:"Georgia";

border-radius:6px;

padding:3px;

border: 1px solid white;

td{

color:#FFFFFF;

background-color:#548EA3;

border-spacing: 5px;

#submit{

color:#c21807;

font-weight:bold;
background-color:#ffffff;

font-size:15px;

font-family:"Georgia";

border-radius:6px;

padding:3px;

#submit:hover{

background-color:FFOOOO;

color:#ffffff;

h3{

color:#c21807;

font-weight:bold;

background-color:#ffffff;

font-size:15px;

font-family:"Georgia";

border-radius:6px;

padding:3px;

</stle>

</head>

<body>

<div>

<table>

<tr>
<td><div>img src="packers.jpg"

id="image"/></div></td>

<td>

<div>

<center><h3>ATLAS PACKERS AND MOVERS</h3>/center>

<form>

<table>

<a href="#reloc" id="reloc_info"

class="b">Relocation-info</a><br/>

<a href="#personal"

id="personal_info"

class="b">personal-info</a></br>

<a href="#quote"id="quote_info"

class="b">get a quote!</a><br/>

</td>

</tr>

<tr><td colspan=2><label

id="reloc" class="c">Relocation

Information</label></td></tr>

<tr>

<td>

<option value="select your current city">select your current city option>

<option value="Chennai">Chennai</option>
<option value="Bngalore">Bngalore</option>

<option value="Hyderabad">Hyderabad</option>

<option value="Mumbai">Mumbai</option>

</list>

<td>

<td>input type="date" id="date"required></td>

</tr>

<tr>

<td>label>select category</label></td><td>

<label for="home">home relocation</label>

<input type="radio" name="category"id="factory"required>

<label for="factory">factory/office relocation</label>

</td>

</tr>

<tr>

<td>

<td> <textarea id="faddress"

placeholder="from address"

rows="4" cols="50" required>

</text textarea> </td>

</td>

</tr>

<td><label distance in km>

</td>
<td> <input id="distance"

type=range min=0 max=2000 required><td>

</tr>

<tr><td>colspan=2>

<label id="personal"

class="c">personal

information</label>

</td>

</tr>

<tr>

<td><label>customer name</label>

</td>input type ="text"

id="cname"pattern=[A-Za=z\\s]*'placeholder="enter the customer name" required>

</td>

</tr>

<tr>

<td><label>phone number</label>

</td><td><input type="tel"

pattern=[7,8,9]{1}[0-9]{9}"

id="phno"placeholder="enter the phone number"required></td>

</tr>

<tr>

<td> <input type="email"

id="email"placeholder="enter the emailid required"></td>

</tr>
<tr>

<label id="quote"class="c">get a quote:</label>

</td>

</tr>

<tr>

<td><label>possible charges involves</label></td>

<td>

value="GET A QUOTE">GET A QUOTE</button>

</form>

</div>

</td></tr>

</table>

</div>

</body>

</html>

8.Agape food delivery

<!DOCTYPE html>

<html>

<head>

width: 100%;

input[type="email"] {

/* Fill the attributes and values */

background: transparent;

width: 100%;

}
input[type="tel"] {

/* Fill the attributes and values */

background: transparent;

width: 100%;

input[type="url"] {

/* Fill the attributes and values */

background: transparent;

width: 100%;

input[type="checkbox"] {

/* Fill the attribute and value */

background: transparent;

input[type="button"] {

/* Fill the attribute and value */

background: transparent;

input[type="checkbox"]#terms:checked + a {
/* Fill the attribute and value */

color: #00800A;

body{

h3{

border:1px solid;

/* Fill the attributes and values */

color: #E6ADAD;

background-color: #08088A;

margin-left: auto;

margin-right: auto;

text-align: center;

width: 60%;

font-family: Verdana;

border-radius: 6px;

table{

border:3px solid;

/* Fill the attributes and values */

width: 60%;
margin-right: auto;

margin-left: auto;

border-spacing: 5px;

border-radius: 6px;

td{

font-size: 15px;

#submit{

/* Fill the attributes and values */

color: #08088A;

font-weight: bold;

background: transparent;

border-radius: 6px;

#submit:hover {

/* Fill the attributes and values */

background-color: #CD5C5C;

color: #ffffff;

}
.a{

/* Fill the attribute and value */

width:50%;

.b{

/* Fill the attributes and values */

width: 60%;

margin-right: auto;

margin-left: auto;

::-webkit-input-placeholder {

color: #CD5C5C;

</style>

</head>

<body>

<h3> Agape Food Delivery Service - Partner Invite</h3>

<table>

<tr>

<td colspan=" " ><input type="text" id="restaurantName" placeholder="Restaurant

<tr>

<td colspan=" ">Cusine type :

<input type="checkbox" name="cusineType" required id="indianVeg"><label

for="indianVeg">Indian-veg</label>

<input type="checkbox" name="cusineType" id="indianVegNonVeg"><label

for="indianVegNonVeg">Indian-veg & Non-veg</label>

<input type="checkbox" name="cusineType" id="chinese"><label

for="chinese">Chinese</label>

<input type="checkbox" name="cusineType" id="continental"><label

for="continental">Continental</label>

</td>

</tr>
<tr>

<td><label>Licence(Jpeg/PDF)*</label><input type="file" id="license"

accept="image/jpeg,application/pdf" required></td>

<td><label>GSTIN/PAN*</label><input type="file" id="pan"

accept="image/jpeg,application/pdf" required></td>

</tr>

<tr>

<td><label>FSSAI(Jpeg/PDF)*</label><input type="file" id="fssai"

accept="image/jpeg,application/pdf" required></td>

<td><label>Facade/Kitchen/Dining-Packaging/Locality(Jpeg)*</label><input type="file"
multiple id="others" accept="image/jpeg" required></td>

</tr>

</table>

<p class="b"><input type="checkbox" id="terms"><a id="terms_ref" href="#submit">I agree to

terms of services</a></p>

<p class="b"><input type="button" id="submit" value="SUBMIT"></p>

</body>

</html>

9.Discount Price calculation

<html>

<head>

<title>

discount price
</title>

function CalculateDiscount(){

var discount,discountPrice;

var price = Number(document.getElementById("price").value);

"+discountPrice;

return false;

</script>

<style>

body{

background-color: #99FFFF;

}
h1{

font-style: italic;

text-align: center;

color: #b03060;

table{

margin-left: 35%;

border-style: 5px solid;

border-width: 30%;

border-collapse: collapse;

td{

border-style: solid;

padding: 10px;

div{

text-align: center;

font-weight: bold;

#discount{

font-size: 25px;

#result{

font-style: italic;

color: #FF0000;
font-size: 40px;

</style>

</head>

<body>

<h1>Discount Price</h1>

<form onsubmit="return CalculateDiscount()">

<table>

<tr>

<td><label for="name">Product Name</label></td>

<td><input type="text" id="name" name="name" required

pattern="[a-zA-Z][a-zA-Z\s]+"/></td>

</tr>

<tr>

<td><label for="price">Product Price</label></td>

<td><input type="number" id="price" name="price" min="15001"

required/></td>

</tr>

<tr>

<td><label for="season">Season</label></td>

<td><select id="season" name="season" required>

<option value="summer">SUMMER SALE</option>

<option value="newyear">NEW YEAR SALE</option>

<option value="clearance">CLEARANCE SALE</option>

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

</table>

<input type="submit" id="submit" name="submit" value="GET DISCOUNT PRICE"/>

</form>

</body>

</html>

10.KASA IT finishing school

<!DOCTYPE html>

<html>

<head>

body{

background-color: #FFAACC;

color: #770080;

font-family: Courier New;

font-style: italic;

text-align: center;
}

form

margin :0 auto;

width:300px;

#result

color: #770080;

font-weight: bold;

</style>

<title>Infotech College</title>

function calculateFeedbackRating()

var r=document.getElementById('cat').value;

var rate;

if(r=="Excellent") rate=5;
else if(r=="Very Good") rate=4;

else if(r=="Good") rate=3;

else if(r=="Average") rate=2;

else if(r=="Below Average") rate=1;

var trainer=document.getElementById('trainerName').value;

document.getElementById('result').innerHTML="Feedback rating of "+trainer+" is "+rate;

return false;

</script>

</head>

<body>

<h1>College Training Feedback Form </h1>

<form onsubmit="return calculateFeedbackRating()" >

<table>

<tr>

<td>Participant Name</td>

<td><input type="text" name="participantName" placeholder="Enter your name" required></td>

</tr>

<tr>
<td>College Name</td>

</tr>

<tr>

<td>Trainer’s Name</td>

<td><input type="text" name="trainerName" id="trainerName" required></td>

</tr>

<tr>

<td>Course Name</td>

<td><input type="text" name="courseName" required></td>

</tr>

<tr>

<td>Course Completion date</td>

<td><input type="date" name="dateofcompletion" required></td>

</tr>

<tr>

<td>Trainer's Feedback</td>

<td><input name="trainerFeedback" id="cat" list="feedback">

<option value="Excellent">Excellent</option>

<option value="Very Good">Very Good</option>

<option value="Average">Average</option>
<option value="Below Average">Below Average</option>

</datalist>

</td>

</tr>

<tr>

<td><input type="submit" name="submit" value="Submit Feedback"

onclick="calculateFeedbackRating()"></td>

<td><input type="reset" name="reset" value="Clear"></td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

11.BroadBand Payment portal

<style>

h1{

color:#660066;

text-align: center;

font-family:verdana;

body

background-color: #ff9999;

</style>

</head>

<body>

<h1>Broadband Payment Portal</h1>

<form onsubmit="return costCalculation();">

<table>

<tr>

<td><label>Customer Name</label></td>

<td><input type="text" name="customerName" id="customerName"

placeholder="Customer Name" required></td>

</tr>

<tr>

<td>

<label>Subscription Number</label></td>
<td><input type="number" name="subscription" id="subscription"
placeholder="Subscription Number" required></td>

</tr>

<tr>

<td><label>Email ID</label></td>

<td><input type="email" name="email" id="email"

placeholder="[email protected]" required></td>

</tr>

<tr>

<td> <label>Type of Broadband</label></td>

<td><select name="bandType" id="bandType">

<option value="Normal">Normal</option>

</select>

</td>

</tr>

<tr>

<td> <label>Plan Name</label></td>

<td>

<input type="radio" id="type1" name="plan"

value="Sprint 200 GB" required>

<label for="type1">Sprint 200 GB</label>

<input type="radio" id="type2" name="plan" value="Bolt

200 GB" required>

<label for="type2">Bolt 200 GB</label>

<input type="radio" id="type3" name="plan" value="Rush

500 GB" required>

<label for="type3">Rush 500 GB</label>

<input type="radio" id="type4" name="plan"

value="Speed 500 GB" required>

<label for="type4">Speed 500 GB</label>

</td>

</tr>

<tr>

<td><label>Payment for</label></td>

<td><input type="number" name="payment" id="payment"

min="3" max="12" required></td>

</tr>

<tr>

<td><button type="submit" name="submit" id="submit"

value="submit" >Calculate Bill Amount</button></td>

<td><input type="reset" id="clear" name="clear" value="Reset"

></td>

</tr>

<tr>

<td colspan="2"><div type="number" name="result"

id="result"></div></td>

</tr>

</table>

</form>

function costCalculation()
{

var payment=document.getElementById("payment").value;

var MR=document.getElementById("bandType").value;

var CTC=0;

var montrent=0;

var total=0;

if(MR=="Normal")

montrent=150;

if(MR=="ADSL")

montrent=200;

if(MR=="DSL")

montrent=300;

if(document.getElementById("type1").checked)

CTC=349;

if(document.getElementById("type2").checked)

CTC=499;
}

if(document.getElementById("type3").checked)

CTC=949;

if(document.getElementById("type4").checked)

CTC=1299;

total=( montrent * payment)+CTC;

document.getElementById("result").innerHTML="The bill amount is Rs "+total;

return false;

</script>

</body>

</html>

12.Piggy bank deposite Automation

<!Doctype html>

<html>

<head>

background-color:#F0E68C;

#discounttable{

border-style:solid;

float:right;

h1{

color:#800080;

font-family:cursive;

text-align:center;

header{

float:right;

</style>

function calculateTotalSavings(){

var amt =document.getElementsByName('amount')[0].value;

var tenur=document.getElementsByName('tenure')[0].value;

var saving_bank=document.getElementsByName('savingType')[0].value;

var totalSavings;

if(document.getElementById("NormalCitizen").checked && saving_bank=='FD' && tenur <= 2){

</script>

</head>

<body>

<h1>PIGGY BANK SAVINGS CALCULATOR</h1>

<form onsubmit="return false">

<table>

<tr><td>Customer Name</td>

<td><input type="text" placeholder="Enter the Customer Name" name="customerName"

pattern="[a-zA-Z ]+" required > </td>

</tr>

<tr>

<td>Customer Type</td>

<td><input type="radio" id="NormalCitizen" value="Normal Citizen" name="customerType"

required>Normal Citizen

<input type="radio" id="SeniorCitizen" value="Senior Citizen" name="customerType" required>Senior

Citizen</td>

</tr>

<tr>

<td>Address & ID Proof</td>

<td><input type="checkbox" id="Address & ID Proof" name="addressProof" value="addressProof">

<label for="Address & ID Proof"> Aadhar Card</label>

<input type="checkbox" id="vehicle1" name="addressProof" value="addressProof">

<label for="Address & ID Proof"> Pan Card</label>

<input type="checkbox" id="vehicle1" name="addressProof" value="addressProof">

<label for="Address & ID Proof"> Driving License</label>

<input type="checkbox" id="vehicle1" name="addressProof" value="addressProof">

<label for="Address & ID Proof">Passport</label>

</td>

</tr>

<input type="submit" onclick="calculateTotalSavings()" name="submit" value="Calculate Savings">

</td><td><input type="reset" name="reset" value="Reset"></td></tr>

</table>

</form>

<table id="discounttable" border="1">

<caption>Interest Rate Chart</caption>

<thead>

<tr>

<th>Deposit Type</th>

<th>Tenure</th>

<th>Interst Rate</th>

</tr>

</thead>

<tbody>

<tr>

<td>1 to 2 years</td>

</tr>

<tr>
<td>Above 2 years to 4 years</td>

</tr>

<tr>

<td>Above 4 years to 5 years</td>

</tr>

<tr>

<td>1 to 2 years</td>

</tr>

<tr>

<td>Above 2 years to 4 years</td>

</tr>

<tr>

<td>Above 4 years to 5 years</td>

</tr>

</tbody>

</table>

</body>

</html>

13.DREAM Theme Park Ticket Booking Automation

<!DOCTYPE html>

<html>

<head>

body{

background-color: #FFAACC;

color:#770080;

font-family:courier new;

font-style:italic;

text-align:center;

form

margin :0 auto;

width:300px;

#result
{

color:#770080;

font-weight:bold;

</style>

<title>DREAM Theme Park</title>

function calculateCharges()

var customerName=document.getElementById("customerName").value;

var bookingType=document.getElementById("bookingType").value;

var adult=document.getElementById("adults").value;

var children=document.getElementById("children").value;

var ticketCost=0;

var discount=0;

var result = 0;

ticketCost=adult*1500 + children*1200;

if(bookingType == "School"){

discount = ticketCost*0.5;

result = ticketCost-discount;

}
else if(bookingType == "Corporate"){

discount = ticketCost*0.25;

result = ticketCost-discount;

else if(bookingType=="Normal"){

result = ticketCost;

//alert(bookingType);

document.getElementById("result").innerHTML = "Thank you "+customerName+". Total cost to be paid

is "+result;

return false;

</script>

</head>

<body >

<h1>Book Your Tickets</h1>

<form onsubmit="return calculateCharges()" >

<table>

<tr>

<td>Customer Name</td>

<td><input type="text" name="customerName" id="customerName" required/> </td>

</tr>
<tr>

<td>Address</td>

<td><textarea rows="5" cols="20" name="address" id="address" required></textarea></td>

</tr>

<tr>

<td>Email ID</td>

<td><input type="email" name="customerEmail" id="customerEmail" required/> </td>

</tr>

<tr>

<td>Mobile Number</td>

<td><input type="tel" name="customerMobileNumber" id="customerMobileNumber" required/> </td>

</tr>

<tr>

<td>Park Location</td>

<td><input type="radio" name="location" id="locationDelhi" value="Delhi" required>Delhi

<input type="radio" name="location" id="locationMumbai" value="Mumbai" required>Mumbai

</td>

</tr>

<tr>

<td>Date of Visit</td>
<td><input type="date" name="dateOfVisit" id="dateOfVisit" required/> </td>

</tr>

<tr>

<td>Booking Type</td>

<td><input name="bookingType" id="bookingType" list="bookType" required>

</datalist>

</td>

</tr>

<tr>

<td>Adult</td>

<td><input type="number" name="adults" id="adults" min="0" max="500" required/> </td>

</tr>

<tr>

<td>Children</td>

<td><input type="number" name="children" id="children" required/> </td>

</tr>
<tr>

<td><input type="submit" value="Book Now" name="submit"> </td>

<td><input type="reset" value="Clear"> </td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

14.DAC Bank Loan Automation

<html>

<head>

<style>

body {

background-color: #FFAACC;

h1 {

color: #770080;

font-family: cursive;
text-align: center;

#result{

font-weight: bold;

color: #770080;

</style>

function display(){

var name=document.getElementsByName("customerName")[0].value;

var amount=document.getElementsByName("loanamount")[0].value;

document.getElementById("result").innerHTML="Thank You"+name+".Your Loan

Amount is"+amount;

</script>

</head>

<body>

<h1>DAC BANK - AVAIL LOAN</h1>

<form>

<table>

<tr>

<td>Customer Name</td>

</td>

</tr>

<tr>

<td>Address</td>

<td>

<textarea rows="5" cols="20" name="customerAddress"

id="addr"></textarea>

</td>

<option value="Education">Education</option>

</datalist>

</td>

</tr>

<tr>

<td>Loan Amount</td>

<td>

<input type="text" name="loanamount" id="loanamount"

placeholder="Enter the amount" required>

</td>

</tr>

<tr>

<td>Tenure</td>

<td>

<input type="number" name="loanTenure" id="loan" min="1"

max="5">

</td>

</tr>

<tr>

<td>

<input type="button" name="submit" value="Avail Loan"

onclick="display()">

</td>

<td>

<input type="reset" name="reset" value="reset" >

</td>

</tr>

</table>

</center>

</form>

</body>
</html>

15.E-BOOK Portal

<html>

<style>

body{

background-color:#E6E6FA;

#discounttable{

border-style:solid;

float:right;

h1{

color:#800080;

font-family:cursive;

text-align:center;

h2{

text-align:center;

</style>

function validate()

var bcats=document.getElementsByName("bookCategory");

var bcat;
var price;

var disc;

for(var i=0;i<bcats.length;i++)

if(bcats[i].checked)

bcat=bcats[i].value;

var bcount=document.getElementById("bookval").value;

bcount=parseInt(bcount);

if(bcat=="Science")

price=400;

if(bcount<=250)

disc=5;

else{

disc=7;

else{

price=300;

if(bcount<=250)
{

disc=3;

else{

disc=4;

var tot=bcount*price-((bcount*price*disc)/100);

document.getElementById("result").innerHTML="Total Price is:"+tot;

</script>

</head>

<body>

<h1>E-BOOK GRAND SALE</h1>

<table>

<tr>

<td>Customer Name</td>

<td><input type="text" name="customerName" placeholder="Enter the

Customer Name" pattern="[a-zA-Z\s]+" required></td>

</tr>

<tr>

<td>Email ID</td>

<td><input type="email" name="email" required></td>

</tr>
<tr>

<td>Mobile Number</td>

<td><input type="tel" name="customerMobileNumber" placeholder="Enter

the Mobile Number" pattern="[89][0-9]{9}" required></td>

</tr>

<tr>

<td>Book Category</td>

<td>

<input type="radio" name="bookCategory" value="Science"

required>Science

<input type="radio" name="bookCategory" value="Comics"

required>Comics

</td>

</tr>

<tr>

<td>

<input list="bookTypes" name="bookType" required auto-complete >

<datalist id="bookTypes" >

<option value="Weekly">Weekly</option>

<option value="Monthly">Monthly</option>

<option value="Fortnightly">Fortnightly</option>

</datalist>

</td>

</tr>

<tr>

<td>No of Books Required</td>

<output name="markOutputName" id="markOutputId"></output></td>

</tr>

<tr>

<td><input type="button" name="submit" value="Calculate Total Price"

onclick="validate()"></td>

<td><input type="reset" name="reset" ></td>

</tr>

</table>

</form>

<table id="discounttable" border="1px">

<caption>Discount Rate Chart</caption>

</table>

</body>

</html>

16.York Admission

<!DOCTYPE html>

<html>

<head>

<title>York Admission</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function display()

var name = document.getElementById("sname").value;

var dept = document.getElementById("deptname");

var deptname = dept.options[dept.selectedIndex].text;

var yes = document.getElementById("yes").checked;

var firstGraduate = document.getElementById("firstGraduate").checked;

var fs = 0;

if(firstGraduate){

fs = 20000;

var af = 30000;

var tf = 0;

var hf = 0;

if(yes){

if(deptname == 'EEE' || deptname == 'CSE' || deptname == 'IT'){

tf = 45000;

hf = 75000;

}else if(deptname == 'ECE' || deptname == 'CIVIL'){

tf = 50000;

hf = 75000;
}else{

tf = 55000;

hf = 75000;

}else{

if(deptname == 'EEE' || deptname == 'CSE' || deptname == 'IT'){

tf = 45000;

}else if(deptname == 'ECE' || deptname == 'CIVIL'){

tf = 50000;

}else{

tf = 55000;

var total = parseInt(af) + parseInt(tf) + parseInt(hf) - parseInt(fs);

var display_text = "<p>Hi " + name +",<br>" +

"Your Admission Fee is Rs."+ af +"<br>" +

"Tution Fee is Rs."+ tf +"<br>"+

"Hostel Fee is Rs."+ hf +"<br>"+

"Total College Fee is Rs."+ total+"</p>";

document.getElementById("result").innerHTML = display_text;

return false;

</script>

<style>

input[type="number"] {

width:98%;

input[type="text"] {

width:98%;

input[type="date"] {

width: 98%;

input[type="email"] {

width:98%;

input[type="tel"] {

width: 98%;

select {

width: 98%;
}

body{

background-size: 70%;

font-weight: bold;

background-position: center;

background-repeat: no-repeat;

/* Fill the attributes and values */

div{

font-size: 20px;

text-align: center;

margin-left: auto;

margin-right: auto;

/* Fill the attributes and values */

h3{

color: #ffffff;

background-color: #00ccff;

margin-left: auto;

margin-right: auto;

text-align: center;

width: 50%;
font-family: Verdana;

padding: 5px;

border-radius: 6px;

/* Fill the attributes and values */

table, td, tr{

width: 50%;

border-style: solid 1px;

margin-right: auto;

margin-left: auto;

border-spacing: 1px;

border-radius: 6px;

color: #009900;

background-color: #f2f2f2;

padding: 1px;

/* Fill the attributes and values */

::-webkit-input-placeholder {

color: #696969;

font-weight: bold;

}
#submit{

color:#ffffff;

background-color: #00CCFF;

margin-left: auto;

margin-right: auto;

padding: 5px;

width:50%;

font-family: Verdana;

font-weight: bold;

border-radius: 6px;

/* Fill the attributes and values */

#result{

color: #00cc66;

background-color: #ffffff;

margin-left: auto;

margin-right: auto;

padding: 5px;

width: 50%;

font-size: 20px;

/* Fill the attributes and values */

</style>
</head>

<body>

<div>

<h3>York Admission</h3>

</tr>

<tr>
<td>Department Name</td>

<td>

<select id="deptname" required="required">

<option>Select Department..</option>

<option>CIVIL</option>

</select>

</td>

</tr>

<tr>

<td>Prefer College Hostel</td>

<td><input type="radio" id="yes" name="preferHostel" required="required">Yes

<input type="radio" id="no" name="preferHostel" required="required">No</td>

</tr>

<tr>

<td>First Graduate</td>

<td><input type="checkbox" id="firstGraduate" name="firstGraduate">Click if you are first

graduate</td>

</tr>

</table>

<p><input id="submit" type="submit" value="CONFIRM ADMISSION"></p>

</form>

</div>

</body>

</html>

17.Outlook Fan Market

<!DOCTYPE html>

<html>

<head>

<title>Outlook Fan Market</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function billCalculation() {

var uprice = document.getElementById("usha").value;

var bprice = document.getElementById("bajaj").value;

var oprice = document.getElementById("orient").value;

var hprice = document.getElementById("havells").value;

var cprice = document.getElementById("crompton").value;

var lprice = document.getElementById("luminous").value;

var mprice = document.getElementById("maharaja").value;

var total = uprice*1999 + 1500*bprice + 2100 * oprice + 1785 * hprice + 1960 * cprice +
1655 * lprice + 2249 * mprice;

if(total>5500){

total -= total * 0.15;

total = Math.round(total);

var text = "Hi, You have to pay Rs."+total+". Thanks for selecting us!!!";

document.getElementById("result").innerHTML = text;

return false;

</script>

::placeholder {

color: #6A5ACD;

opacity: 2;

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],input[type="date"],

textarea, select {

width: 85%;

color: #808B96;

font-weight: bold;

border-radius: 6px;

border-style: solid;
border-width: 2px;

border-color: #FFA07A;

input[type="submit"] {

background-color: #08088A;

label span {

color: #F0F8FF;

body {

background-color: #2E4053;

h1 {

/* Fill the attributes and values */

color: #FFFFFF;

font-family: Verdana;

border-style: 1px solid;

border-radius: 6px;

width: 50%;

margin-left: auto;

margin-right: auto;

background-color: #1A5276;

text-align: center;

}
#result {

/* Fill the attributes and values */

font-weight: bold;

font-family: Bahnschrift;

font-size: 24px;

margin-left: 18em;

margin-right: auto;

color: #B3B6B7;

#submit {

/* Fill the attributes and values */

font-weight: bold;

color: #FFEFD5;

font-family: Bahnschrift;

background-color: transparent;

margin-right: auto;

height: 35px;

width: 13em;

margin-left: 35em;

#reset {

/* Fill the attributes and values */

font-weight: bold;

color: #FFEFD5;
font-family: Bahnschrift;

background-color: transparent;

margin-right: auto;

height: 35px;

width: 13em;

margin-left: 18em;

table {

width: 50%;

margin-right: auto;

margin-left: auto;

border-style: 3px groove;

border-spacing: 5px;

border-radius: 6px;

#billing td {

border-width: 1px;

border-style: solid;

border-color: #F4A460;

padding: 5px;

.b {

width: 50%;

margin-left: auto;
margin-right: 14em;

#brandName td {

margin-left: auto;

margin-right: auto;

width: 50%;

border-width: 1px;

border-style: solid;

border-spacing: 5px;

border-radius: 6px;

#submit:hover, #reset:hover {

background-color: #2E8B57;

color: #FFFFFF;

</style>

</head>

<body>

<h1> Outlook Fan Market </h1>

<form onsubmit="return billCalculation()" >

<th id="details" colspan="2"></th>

</tr>

<tr>

<td>

</td>

<td>

<input type="text" name="name" id="name"

pattern="[a-zA-Z\s]+" value="" placeholder="Enter the name" required />

</td>

</tr>

<tr>

<td>

<label for="contactNo"><span><b>Contact
No*</b></span></label>

</td>

<td>

<input type="number" name="contactNo" id="contactNo"

pattern="^[7-9]\d{9}$" placeholder="Enter the contact no" value="" required />

</td>

</tr>
<tr>

<label
for="orient"><span><b>Orient</b></span></label>

</td>

</td>

</tr>

<tr>

<td>

<label
for="havells"><span><b>Havells</b></span></label>

</td>

<td>

<input type="number" name="havells"

id="havells" value="" min="0" required />

</td>

</tr>

<tr>

<td>

<label
for="crompton"><span><b>Crompton</b></span></label>

</td>

<input type="number" name="crompton"

id="crompton" value="" min="0" required />

</td>

</tr>

<tr>

<td>

<label
for="luminous"><span><b>Luminous</b></span></label>

</td>

<td>

<input type="number" name="luminous"

id="luminous" value="" min="0" required />

</td>

</tr>

<tr>

<td>

<label
for="maharaja"><span><b>Maharaja</b></span></label>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<td>

<input type="submit" name="submit" id="submit" value="Submit" />

</td>

<td>

<input type="reset" name="reset" id="reset" value="Clear" />

</td>

</tr>

</div>
</p>

</form>

</body>

</html>

18.AC Maintenance Service

<!DOCTYPE html>

<html>

<head>

<title>AC Maintenance Service</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function bookAppointment() {

/* Fill the Javascript code calculating the service charge and display the required
appiontment details */

var customerName=document.getElementById("customerName").value;

var acType=document.getElementById("acType").value;

var serviceType=document.getElementById("serviceType").value;
var email=document.getElementById("email").value;

var serviceCharge=0;

if(serviceType=="Cleaning")

serviceCharge=500;

if(serviceType=="Repair")

serviceCharge=1000;

if(serviceType=="Gas Refill")

serviceCharge=1500;

if(document.getElementById("yearlyMaintenance").checked)

serviceCharge+=1000;

document.getElementById("result").innerHTML="Hello "+customerName+", your

service appointment for "+acType+" AC "+serviceType+" with yearly maintenance will be send to your
email ID "+email+" and the estimated service charge will be Rs "+serviceCharge;

else

document.getElementById("result").innerHTML="Hello "+customerName+", your

service appointment for "+acType+" AC "+serviceType+" without yearly maintenance will be send to
your email ID "+email+" and the estimated service charge will be Rs "+serviceCharge;;

return false;

</script>

/* Fill attributes and values */

background-color: #0ca2b9;

width: 80%;

margin-left: 10%;

h1 {

/* Fill attributes and values */

color: #FFFFFF;

font-family: Calibri;

font-style: italic;

background-color: #900043;

text-align: center;

#result {

/* Fill attributes and values */

font-weight: bold;

font-family: Arial;

font-size: 24px;

color: #782e07;

#submit, #reset {

/* Fill attributes and values */

font-weight: bold;
font-family: Candara;

background-color: #556b2f;

width: 10em;

height: 35px;

border-radius: 10px;

input {

width:13.6em;

#appointment {

font-family:sans-serif;

width:80%;

border-collapse:collapse;

text-align:left;

#acType, textarea{

width:13.6em;

select {

width:14em;

td{

padding:3px;
}

#male, #female, #yearlyMaintenance {

width:10pt;

</style>

</head>

<body>

<h1> AC Maintenance Service</h1>

<form onsubmit="return bookAppointment()" >

<tr>

<td> <label>Customer Name</label> </td>

</tr>

<tr>

<td> <label>Gender</label> </td>

<td>

<input type="radio" id="male" name="gender" value="Male" >Male

<input type="radio" id="female" name="gender" value="Female" >Female </td>

</tr>
<tr>

<td> <label>Mobile Number</label> </td>

</tr>

<tr>

<td>  <label>Email ID</label></td>

</tr>

<tr>

<td> <label>Address</label> </td>

</tr>

<tr>

<td> <label>AC Type</label></td>

</tr>

<tr>

<td>  <label>Service Type</label></td>

<option value="Cleaning">Cleaning</option>

<option value="Repair">Repair</option>

<option value="Gas Refill">Gas Refill</option>

</select> </td>

</tr>

<tr>

<td> <label>Date for Appointment</label>
</td>

</tr>

<tr>

<td> <label>Yearly Maintenance</label>
</td>

<td> <input type="checkbox"
id="yearlyMaintenance" value="Select if required">Select if required </td>

</tr>

<tr>
<td> <label>Duration in months from the previous service</label> </td>

</tr>

<tr>

<td> </td>

<td>

<input type="submit" id="submit"

value="Submit">

<input type="reset" value="Clear" id="reset">

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>
19.Good Harvest Rice Store

<!DOCTYPE html>

<html>

<head>

<title>Good Harvest Rice Store</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function billCalculation() {

var result=document.getElementById("result");

var a =parseInt(document.getElementById("arborioRice").value);

var bas=parseInt(document.getElementById("basmatiRice").value);

var bl =parseInt(document.getElementById("blackRice").value);

var j =parseInt(document.getElementById("jasmineRice").value);

var br =parseInt(document.getElementById("brownRice").value);

var r =parseInt(document.getElementById("redRice").value);

var c =parseInt(document.getElementById("calroseRice").value);

var d =parseInt(document.getElementById("distance").value);

var amount=(600*a)+(200*bas)+(275*bl)+(260*j)+(135*br)+(100*r)+(300*c)+(22*d);

var name=document.getElementById("customerName").value;
result.innerHTML="Hi "+name+", You have to pay Rs."+amount.toFixed(2)+".Thanks for
visiting us!!!";

return false;

</script>

body{

background-color: #9ACD32;

h1 {

color: #FFFFFF;

font-family: Arial;

font-style: italic;

background-color: #FF8C00;

text-align: center;

#result {

font-size: 24px;

color: #800000;

display: block;

width: 90%;

font-family: calibri;

position: absolute;
font-weight: bold;

#submit, #reset {

font-weight: bold;

font-family: Times New Roman;

background-color: #FFA07A;

width: 13em;

height: 35px;

input[type="text"],input[type="tel"] {

width:13em;

input[type="number"]{

width:2cm;

#billing {

font-family:sans-serif;

width:80%;

border-collapse:collapse;

#types, #types td {

border-color: rgba(255, 255, 255, 1);

border-style: solid;

border-width: 1px;

padding: 5px;

background-color: #F4A460;

border-collapse: collapse;

td{

padding: 5px;

</style>

</head>

<body>

<h1>Good Harvest Rice Store</h1>

<form id="form_1" onsubmit="return billCalculation()" name="riceForm">

<tr>

<td><label for="customer name">Customer Name</label></td>

<td><input type="text" name="customer name" id="customerName"

placeholder="Enter your name" required> </td>

</tr>
<tr>

<td><label for="contact number">Contact No</label></td>

<td><input type="tel" name="contact number" id="contactNo" placeholder="Enter your

mobile number" required></td>

required></td>

</tr>

</table>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

20.We-Host Server Resellers - Purchase Entry

<!DOCTYPE html>

<html>

<head>

<title>We-Host Server Resellers - Purchase Entry</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function show_value(x)

document.getElementById("demo").innerHTML=x;

function display()

/* Fill the Javascript code to display the purchase entry inclusive of tax */

var server = document.getElementById("stype").value;

var config = document.getElementById("configuration").value;

var payment = document.getElementById("ptype").value;

var tax = document.getElementById("tax").value;

var cost = document.getElementById("cost").value;

var total = parseFloat(cost) *(1 + (parseFloat(tax)/100));

total = Math.round(total);

document.getElementById("result1").innerHTML = "Purchase of a "+server+"

with "+config+" has been logged ! ";

document.getElementById("result2").innerHTML = "An amount of Rs. "+total+",

inclusive of tax has been received by "+payment;
return false;

function today()

var x = new Date();

document.getElementById("pdate").value =
x.getFullYear()+'-'+("0"+(x.getMonth()+1)).slice(-2)+'-'+("0"+x.getDate()).slice(-2);

function disableCardDetailsOnCash()

if (document.getElementById("ptype").value == "Cash")

document.getElementById("cardno").disabled=true;

document.getElementById("edate").disabled=true;

else

/* Fill the Javascript code to set disable on cardno and edate fields as
false when ptype is Card */

document.getElementById("cardno").disabled=false;

document.getElementById("edate").disabled=false;

</script>
<style>

input[type="text"] {

width: 97%;}

input[type="number"] {

width: 97%;}

input[type="tel"] {

width: 97%;}

body{

background-size: 100%;

font-weight: bold;

div{

font-size: 20px;

color: #FFFFFF;

text-align: center;

margin-left: auto;

margin-right: auto;

}
h3{

color: #FFFFFF;

background-color: #000080;

margin-left: 25%;

margin-right: auto;

text-align: center;

width: 50%;

font-family: Verdana;

padding: 5px;

border-radius: 6px;

table, td, tr{

border : solid 1px;

width: 50%;

margin-left: auto;

margin-right: auto;

border-spacing: 1px;

border-radius: 6px;

color: #000080;

background-color: #FFFFFF;

padding: 1px;

::-webkit-input-placeholder {
color: #808080; }

#submit{

color: #FFFFFF;

background-color: #000080;

margin-left: 25%;

margin-right: auto;

padding: 5px;

width: 50%;

font-family: Verdana;

font-weight: bold;

border-radius: 6px;

</style>

</head>

<body>

<h3>We-Host Server Resellers - Purchase Entry</h3>

<form onsubmit="return display()" >

<table>

<tr>

<td>Purchase Date</td>

<option value="Select Server Type..">Select Server Type..</option>

<option value="Dedicated Server">Dedicated Server</option>

<option value="Storage Server">Storage Server</option>

<option value="Database Server">Database Server</option>

</select>

</td>

</tr>
<tr>

<td><select name="model" id="model" required>

<option value="Select no of cores..">Select no of cores..</option>

<option value="2 cores">2 cores</option>

<option value="4 cores">4 cores</option>

<option value="6 cores">6 cores</option>

<option value="8 cores">8 cores</option>

</select>

</td>

</tr>

<tr>

<td>Configuration</td>

<td><select name="configuration" id="configuration" required>

<option value="Select configuration..">Select configuration..</option>

<option value="4 GB RAM & 300 GB SSD-boosted Disk Storage">4 GB RAM & 300 GB
SSD-boosted Disk Storage</option>

<option value="10 GB RAM & 700 GB SSD-boosted Disk Storage">10 GB RAM & 700 GB
SSD-boosted Disk Storage</option>

<option value="20 GB RAM & 1400 GB SSD-boosted Disk Storage">20 GB RAM &
1400 GB SSD-boosted Disk Storage</option>

</select>

</td>

</tr>

<tr>

<td>Prepayment Period (in months)</td>

<td><select name="period" id="period" required>

<option value="Select prepayment period..">Select prepayment period..</option>

<option value="1 month">1 month</option>

<option value="3 months">3 months</option>

<option value="6 months">6 months</option>

<option value="12 months">12 months</option>

</select>

</td>

</tr>

<tr>

<td>Purchase Cost</td>

<td><input type="range" name="cost" id="cost" value="" min="900" max="5000"

onchange="show_value(this.value);" required/>

</tr>

<tr>

<td><input type="number" name="tax" id="tax" placeholder="“Enter the tax %"

required/></td>

</tr>

</table>

<input type="submit" name="submit" id="submit" value="CONFIRM PURCHASE" />

<div id="result1"> </div>

<div id="result2"> </div>

</form>

</body>

</html>
1. ATLAS PACKERS AND MOVERS:----
<!DOCTYPE html>
<html>
<head>
<title>ATLAS PACKERS AND MOVERS</title>
<style>
.left{
left:0; }
.right{
right:0;
background-color:#548AE3;
width:60%;
padding:10px; }
.b{
color:#FFFFFF; }
.c{
color:#C21807;
font-size:15px;
font-family:"Georgia"; }
#image{
width:80%;
height:90%; }
h3{
margin-right:auto;
margin-left:auto;
text-align:center;
width:50%;
font-family:"Georgia";
border-radius:6px; }
table,th,td{
border-spacing:2px;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px;
border: 1px solid white; }
td{
color:#FFFFFF;
background-color:#548EA3;
border-spacing:5px; }
#submit{
color:#c21807;
font-weight:bold;
background-color:#ffffff;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px; }
#submit:hover{
background-color:#FF0000;
color:#ffffff; }
h3{
color:#c21807;
font-weight:bold;
background-color:#ffffff;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px; }
</style>
</head>
<body>
<div>
<table>
<tr>
<td><div><img src="packers.jpg" id="image"/></div></td>
<td>
<div>
<center><h3>ATLAS PACKERS AND MOVERS</h3></center>
<form>
<table>
<tr><td colspan="2">
<a href="#reloc" id="reloc_info" class="b">Relocation-info</a><br/>
<a href="#personal" id="personal_info" class="b">Personal-info</a><br/>
<a href="#quote" id="quote_info" class="b">Get a quote!</a><br/></td>
</tr>
<tr><td colspan="2"><label id="reloc" class="c">Relocation Information</label></td></tr>
<tr>
<td>
<select id="city" required>
<option value="Select your current city">Select your current city</option>
<option value="Chennai">Chennai</option>
<option value="Bangalore">Bangalore</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Mumbai">Mumbai</option>
</select>
</td>
<td><input type="date" id="date" required></td>
</tr>
<tr>
<td><label >Select Category</label></td><td>
<input type="radio" name ="category" id="home" required><label for="home">Home
Relocation</label>
<input type="radio" name ="category" id="factory" required><label
for="factory">Factory/Office Relocation</label>
</td>
</tr>
<tr>
<td> <textarea id="faddress" placeholder="From address" rows="4" cols="50"
required></textarea> </td>
<td><textarea id="taddress" placeholder="To address" rows="4" cols="50"
required></textarea></td>
</tr>
<tr>
<td> <label>Distance in km(approx)</label></td>
<td> <input id="distance" type="range" min="0" max="2000" required></td>
</tr>
<tr><td colspan="2">
<label id="personal" class="c">Personal Information</label>
</td>
</tr>
<tr>
<td><label >Customer Name</label></td><td> <input type="text" id="cname"
pattern="[A-Za-z\\s]*" placeholder="Enter the customer name" required> </td>
</tr>
<tr>
<td><label >Phone Number</label></td><td> <input type="tel" pattern="[7,8,9]{1}[0-9]{9}"
id="phno" placeholder="Enter the phone number" required> </td>
</tr>
<tr>
<td><label >Email ID</label></td><td> <input type="email" id="email" placeholder="Enter
the email id" required> </td>
</tr>
<tr>
<td colspan="2">
<label id="quote" class="c"> Get a quote:</label>
</td>
</tr>
<tr>
<td><label>Possible charges involved</label></td>
<td>
<input type="checkbox" name="category" id="packing"><label for="packing">Packing
Charges</label>
<input type="checkbox" name="category" id="loading"><label for="loading">Loading
Charges</label>
<input type="checkbox" name="category" id="transportation"><label
for="transportation">Transportation Charges</label>
<input type="checkbox" name="category" id="unloading"><label for="unloadig">Unloading
Charges</label>
<input type="checkbox" name="category" id="unpacking"><label
for="unpacking">Unpacking Charges</label>
<input type="checkbox" name="category" id="escort"><label for="escort">Escort
Charges</label>
<input type="checkbox" name="category" id="octroi"><label for="octroi">Octroi
Charges</label>
</td>
</tr>
<tr>
<td colspan="2"><label>**Quote you recieve will include service tax of 12.3%</label></td>
</tr>
</table>
<button type="submit" id="submit" value="GET A QUOTE">GET A QUOTE</button>
</form>
</div>
</td></tr>
</table>
</div>
</body>
</html>

2.DREAM THEME PARK CODE:---

<!DOCTYPE html>
<html>
<head>
<title>DREAM Theme Park</title>

h1 {
color: #770080;
font-family: Courier New;
font-style: italic;
text-align: center;
}

form {
margin: auto;
width: 300px;
}

#result {
color: #770080;
font-weight: bold;
}
</style>

var discount = 0;
var amount = 0;
var totalcost = 0;
var name = document.getElementById("customerName").value;
var adult = document.getElementById("adults").value;
var children = document.getElementById("children").value;

amount = (adult * 1500) + (children * 1200);

var type = document.getElementById("bookingType").value;

if (type == "Normal")
discount = 0;
else if (type == "School")
discount = (0.50 * amount);
else if (type == "Corporate")
discount = (0.25 * amount);

totalcost = (amount - discount);

document.getElementById("result").innerHTML = ("Thank you " + name + ". Total
cost to be paid is " + totalcost);
return false;
}
</script>

</head>

<body>

<h1>Book Your Tickets</h1>

<tr>
<td>Customer Name</td>
<td><input type="text" name="customerName" id="customerName" required
pattern="[a-zA-Z\s]+" placeholder="Enter your name" /> </td>
</tr>

<tr>
<td>Address</td>
<td><textarea name="address" id="Address" required rows="5"
cols="20"></textarea></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type="email" name="customerEmail" id="customerEmail" required> </td>
</tr>

<tr>
<td>Mobile Number</td>
<td><input type="tel" name="customerMobileNumber" id="customerMobileNumber"
required> </td>
</tr>

<tr>
<td>Park Location</td>
<td><input type="radio" name="location" id="Dlocation" value="Delhi" required>Delhi
<input type="radio" name="location" id="Mlocation" value="Mumbai"
required>Mumbai
</td>
</tr>

<tr>
<td>Date of Visit</td>
<td><input type="date" name="dateOfVisit" id="dateOfVisit" required> </td>
</tr>

<tr>
<td>Booking Type</td>
<td><input name="bookingType" id="bookingType" list="bookType" required>
<datalist id="bookType">
<option value="Normal"> </option>
<option value="School"> </option>
<option value="Corporate"> </option>
</datalist>
</td>
</tr>

<tr>
<td>Adult</td>
<td><input type="number" name="adults" id="adults" max="500" min="0" required>
</td>
</tr>

<tr>
<td>Children</td>
<td><input type="number" name="children" id="children" required> </td>
</tr>

<td><button type="reset" id="clear" name="clear">Reset</button></td>

</tr>

</table>
</form>
<div id="result" align="center"></div>

</body></html>

3. OUTLOOK FAN MARKET:----

<!DOCTYPE html>
<html>
<head>

<title>Outlook Fan Market</title>

<table id="billing">
<tr>
<th id="details" colspan="2"></th>
</tr>
<tr>
<td>

<label><span><b>Name*</b></span></label>
</td>
<td>
<input type="text" id="name" placeholder="Enter the name">
</td>
</tr>
<tr>
<td>

<label><span><b>Contact No*</b></span></label>
</td>
<td>
<input type="tel" id="contactNo" placeholder="Enter the contact no">
</td>
</tr>

<tr>
<td>

<label><span><b>E-mail address</b></span></label>
</td>
<td>
<input type="email" id="email" placeholder="Example:[email protected]">
</td>
</tr>
<tr>
<td>

<label><span><b>Brand Name</b></span></label>
</td>
<td>
<table id="brandName">
<tr>
<td>

<label><span><b>Usha</b></span></label>
</td>
<td>
<input type="number" id="usha" name="usha" min="0" >

</td>
</tr>

<tr>
<td>

<label><span><b>Bajaj</b></span></label>
</td>
<td>
<input type="number" id="bajaj" min="0" >

</td>
</tr>

<tr>
<td>

<label><span><b>Orient</b></span></label>
</td>
<td>
<input type="number" id="orient" min="0">

</td>
</tr>

<tr>
<td>

<label><span><b>Havells</b></span></label>
</td>
<td>
<input type="number" id="havells" min="0">
</td>
</tr>

<tr>
<td>

<label><span><b>Crompton</b></span></label>
</td>
<td>
<input type="number" id="crompton" min="0">

</td>
</tr>

<tr>
<td>

<label><span><b>Luminous</b></span></label>
</td>
<td>
<input type="number" id="luminous" min="0" >

</td>
</tr>

<tr>
<td>

<label><span><b>Maharaja</b></span></label>
</td>
<td>
<input type="number" id="maharaja" min="0">

</td>
</tr>

</table>
</td>
</tr>

<tr>
<td>

<label><span><b>Date of Booking*</b></span></label>
</td>
<td>
<input type="date" id="date" placeholder="mm/dd/yyyy">
</td>
</tr>

<tr>
<td>

<label><span><b>Address</b></span></label>
</td>
<td>
<input type="textarea" id="address" placeholder="Enter the address">

</td>
</tr>
<tr>
<td>
<input type="submit" id="submit" value="Submit">
</td>
<td>
<input type="reset" id="reset" onclick="cleardata()" value="Clear">
</td>
</tr>
</table>
<p class="b"><div id="result"> </div></p>
</form>
</body>
</html>

4.DISCOUNT PRICE:------
Line wrap

<!DOCTYPE html>
<html>

<head>
<style>
h1 {
font-style: italic;
font-weight: bold;
text-align: center;
color: #b03060;

table {
float: left;
margin-left: 35%;
border-style: solid 5px;
border-spacing: 10px;
border-collapse: collapse;
border-width: 30%;

tr,
td {
border-style: solid 5px;
border-width: 30%;
border-collapse: collapse;
padding: 10px;
border: 5px solid black;

#submit {
margin-left: 45%;

div {
text-align: center;
font-weight: bold;

#result {
font-style: italic;
color: #FF0000;
font-size: 40px;
text-align: center;
font-weight: bold;

#discount {
font-size: 25px;
text-align: center;
font-weight: bold;

}
</style>

</head>
<body style="background-color:#99FFFF;">
<h1>DISCOUNT PRICE</h1>
<form>
<table>
<tr>
<td>Product Name</td>
<td><input type="text" name="name" pattern="[a-zA-Z\s]+" required=""></td>
</tr>
<tr>
<td>Product Price</td>
<td><input type="number" id="price" name="price" min="15001" required></td>
</tr>
<tr>
<td>Season</td>
<td><select name="season" id="season">
<option value="summer">SUMMER SALE</option>
<option value="newyear">NEW YEAR SALE</option>
<option value="clearance">CLEARANCE SALE</option>
</select></td>
</tr>
</table><br>
<input type="button" name="submit" value="GET DISCOUNT PRICE" id="submit"
onclick="discountamount()">
</form>
<div id="discount"></div>
<div id="result"></div>
<script>
function discountamount() {

var p = document.getElementById("price").value;

var newamount;

var d;

var s = document.getElementById("season").value;

if (s == 'summer') {
d = 10;
newamount = p - (p * (0.1));

} else if (s == 'newyear') {
d = 5;
newamount = p - (p * (0.05));

} else {
d = 15;
newamount = p - (p * (0.15));

document.getElementById("discount").innerHTML = "The discount is " + d + "%";

document.getElementById("result").innerHTML = "The discount price : Rs " +
newamount;

}
</script>
</body>

</html>

5.HEALTH CARE CENTRE:-----

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

::placeholder {
color: #40E0D0;
opacity: 2;
}

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],

input[type="date"], textarea, select, #services #address {
width: 85%;
color: #40E0D0;
font-weight: bold;
background: transparent;
border-radius: 6px;
border-style: solid;
border-width: 2px;
border-color: #FFA07A;
}

input[type="button"] {
background-color: #08088A;
}

input[type="checkbox"]#terms:checked+a {
color: #FFFF00;
}
body {
/* Fill the attribute and value */
background-color: #191970;

h3 {
/* Fill the attributes and values */
color: #FFFFFF;
background-color: #696969;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 40%;
font-family: Verdana;
border-radius: 6px;
border-style: 1px solid;
}

label span{
color: #F0F8FF;
}
table {
/* Fill the attributes and values */
width: 30%;
border-style: 3px groove;
margin-left: auto;
margin-right: auto;
border-radius: 6px;
border-spacing: 5px;
}

#appointment td {
/* Fill the attributes and values */
border-width: 1px;
border-color: #f4a460;
border-style: solid;
font: 15px;
padding: 8px;
}

#terms_ref {
color: #9ACD32;
}

#submit {
/* Fill the attributes and values */
color: #ffefd5;
font-weight: bold;
background: transparent;
border-radius: 6px;
}

#submit:hover {
background-color: #8B4513;
color: #FFFFFF;
}

#services{
border-radius: 25px;
}

#serviceList{
border-radius: 25px;
}

p.b {
width: 50%;
margin-left: auto;
margin-right: 14em;
color: #90EE90;
box-sizing: border box;

}
</style>

</head>

<body>

<h3>Health Care Center</h3>

<table id="appointment" border="5" width="100%" height="150">
<tr>
<th id="details" colspan="2"></th>
</tr>
<tr>
<td>
<label><span><b>Name*</b></span>:</label>
</td>
<td>
<input type="text" id="name" placeholder="Enter your name"
name="Name">
</td>
</tr>
<tr>
<td>
<label><span><b>Gender*</b></span>:</label>
</td>
<td>

<input type="radio" id="male" name="gender" value="male"
><label><span><b> Male </b></span></label>
<input type="radio" id="female" name="gender"
value="female" ><label><span><b> Female</b></span></label>
<input type="radio" id="others" name="gender" value="others"
> <label><span><b> Others</b></span></label>
</td>
</tr>

<tr>
<td>
<label><span><b>E-mail address</b></span>:</label>
</td>
<td>

<input type = "text" id="email"
placeholder="example:[email protected]" name="email">
</td>
</tr>
<tr>
<td>
<label><span><b>Mobile No*</b></span>:</label>
</td>
<td>
<input type = "number" id="mobileNo" placeholder="Enter your
mobileNo" name="phone">
</td>
</tr>

<tr>
<td>
<label><span><b>Services*</b></span>:</label>
</td>
<td>
<input type="text" name="service" id="services">
<datalist id ="serviceList">
<option value="Dentistry">
<option value="Midwifery">
<option value="Nursing">
<option value="Medicine">
<option value="Optometry">
<option value="Psychology">
<option value="Physical">
<option value="Others">
</datalist>
</td>
</tr>

<tr>
<td>
<label><span><b>Time*</b></span>:</label>
</td>
<td>

<select name="time" id="time" placeholder="Select one-">
<option value="-Select one-"> - Select one</option>
<option value="10.00AM">10.00AM</option>
<option value="10.30AM">10.30AM</option>
<option value="11.00AM">11.00AM</option>
<option value="11.30AM">11.30AM</option>
<option value="12.00PM">12.00PM</option>
<option value="12.30PM">12.30PM</option>
<option value="1.00PM">1.00PM</option>
<option value="1.30PM">1.30PM</option>
<option value="2.00PM">2.00PM</option>
</select>

</td>
</tr>

<tr>
<td>
<label><span><b>Address</b></span>:</label>
</td>
<td>

<textarea id="address" rows="5" cols="25" placeholder="Enter
your address"></textarea>
</td>
</tr>

</table>
<p class="b"> <label for="checkbox1" class="checkboxes"> <input type="checkbox"
id="terms_ref" name="checked" value="yes" class="checkboxes"><a href="#submit"> I
agree to terms of service and privacy policy. </a></label></p>
<p class="b"><input type="button" id="submit" value="submit"></p>
</body>
</html>

6.DAC BANK AVAIL LOAN:----

<!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>DAC BANK - AVAIL LOAN</title>
<style>
body {
background-color: #FFAACC;
}

h1 {
color: #770080;
font-family: cursive;
text-align: center;
}

#result {
font-weight: bold;
color: #770080;
}
</style>
<script>
function displayMessage() {
var customerName = document.getElementById("customerName").value;
var loanAmount = document.getElementById("loanAmount").value;
document.getElementById("result").innerHTML = "Thank You " + customerName + ".
Your Loan Amount is " + loanAmount;
}
</script>
</head>

<body>
<h1>DAC BANK - AVAIL LOAN</h1>
<center>
<table>
<tr>
<td>
Customer Name
</td>
<td>
<input type="text" id="customerName" name="customerName" required>
</td>
</tr>
<tr>
<td>Address</td>
<td><textarea name="customerAddress" id="customerAddress" rows="5"
cols="20"></textarea></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</td>
</tr>
<tr>
<td>Email ID</td>
<td><input type="email" id="customerEmail" name="customerEmail"></td>
</tr>
<tr>
<td>Mobile Number</td>
<td><input type="text" id="customerMobileNumber"
name="customerMobileNumber" pattern="[7-9]{1}[0-9]{9}"
maxlength="10"></td>
</tr>
<tr>
<td>Date of Birth</td>
<td><input type="date" id="dob" name="dob"></td>
</tr>
<tr>
<td>Loan Type</td>
<td><input autocomplete="on" list="loan" id="loanType" name="loanType">
<datalist id="loan">
<option value="Vehicle">Vehicle</option>
<option value="Home">Home</option>
<option value="Education">Education</option>
</datalist>
</td>
</tr>
<tr>
<td>Loan Amount</td>
<td><input type="text" name="loanAmount" id="loanAmount" placeholder="Enter
the Amount" required>
</td>
</tr>
<tr>
<td>Tenure</td>
<td><input type="number" id="loanTenure" name="loanTenure" min="1"
max="5"></td>
</tr>
<tr>
<td><input type="button" name="submit" value="Avail Loan"
onclick="displayMessage();"></td>
<td><input type="reset" name="reset" value="reset"></td>
</tr>
</table>
<div id="result"></div>
</center>

</body>

</html>
-------------------------SAME PROGRAM WRITTEN BELOW------------------------------------
<html>
<head>
<style>
body {
background-color: #FFAACC;
}

h1 {
color: #770080;
font-family: cursive;
text-align: center;
}

#result {
font-weight: bold;
color: #770080;
}
</style>

document.getElementById("result").innerHTML = "Thank you " + name + ". Your

Loan Amount is " + amount;
}
</script>
</head>

<body>
<h1>DAC BANK - AVAIL LOAN</h1>
<form>
<center>
<table>
<tr>
<td>Customer Name</td>
<td>
<input type="text" name="customerName" id="nam" pattern="[A-Z a-z]+" required>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<textarea rows="5" cols="20" name="customerAddress" id="addr"></textarea>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</td>
</tr>
<tr>
<td>Email ID</td>
<td>
<input type="email" name="customerEmail" id="email">
</td>
</tr>
<tr>
<td>Mobile Number</td>
<td>
<input type="text" name="customerMobileNumber" id="mob"
pattern="[7-9]{1}[0-9]{9}" maxlength="10">
</td>
</tr>
<tr>
<td>Date of Birth</td>
<td>
<input type="date" name="dob" id="dob">
</td>
</tr>
<tr>
<td>Loan Type</td>
<td>
<input list="loan" name="loanType" autocomplete="on">
<datalist id="loan">
<option value="Vehicle">Vehicle</option>
<option value="Home">Home</option>
<option value="Education">Education</option>
</datalist>
</td>
</tr>
<tr>
<td>Loan Amount</td>
<td>
<input type="text" name="loanAmount" id="loanAmount" placeholder="Enter the
Amount" required>
</td>
</tr>
<tr>
<td>Tenure</td>
<td>
<input type="number" name="loanTenure" id="loan" min="1" max="5">
</td>
</tr>
<tr>
<td>
<input type="button" name="submit" value="Avail Loan" onclick="display()">
</td>
<td>
<input type="reset" name="reset" value="reset">
</td>
</tr>
</table>
</center>
</form>
<div id="result"></div>
</body></html>

7. PALINDROME CHECK:-----------------------------------------
<html>
<head>
<script type="text/javascript">
function CheckPalindrome()
{
var str=document.getElementById("Palin").value;
str=str.toLowerCase();
str=str.replace(/\s/g,'');
var rev=str.split('').reverse().join('');
if(str==rev)
alert("The entry is a palindrome.");
else
alert("The entry is not a palindrome.");
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Enter word/sentence to check for palindrome:</td>
<td><input type="text" id="Palin" name="Palin"></td>
</tr>
<tr>
<td>
<Input type="button" name="palinbtn" value="CheckPalindrome"
onclick="CheckPalindrome()">
</td>
</tr>
</table>
</form>
</body>
</html>

8.PIGGY BANK:----
Line wrap

<!DOCTYPE html>
<html>

<head>
<title>PIGGY BANK SAVINGS CALCULATOR</title>

h1 {
color: #800080;
font-family: cursive;
text-align: center;
}

</style>
<script type="text/javascript">
function calculateTotalSavings() {

var customerType;
var savingType = document.getElementById("savingType").value;
var amount = parseInt(document.getElementById("amount").value);
var tenure = document.getElementById("tenure").value;

var interest = 0;
var totalSavings = 0;

//taking value from radio button

if (document.getElementById("NC").checked) {
customerType = "Normal Citizen";
} else if (document.getElementById("SC").checked) {
customerType = "Senior Citizen";
}

if (savingType == "FD") {
if (tenure <= 2) {
interest = 7;
} else if (tenure <= 4) {
interest = 7.5;
} else if (tenure <= 5) {
interest = 8;
}
}

if (savingType == "RD") {
if (tenure <= 2) {
interest = 6.5;
} else if (tenure <= 4) {
interest = 6;
} else if (tenure <= 5) {
interest = 5.5;
}
}

if (customerType == "Senior Citizen") {

interest = interest + 0.5;
}
alert(customerType + " " + savingType + " " + amount + " " + tenure + " " + interest);

totalSavings = (amount + (amount * tenure * interest) / 100);

alert(totalSavings);
document.getElementById("result").innerHTML = "Total Saving done " + totalSavings;
return false;
}

</script>

</head>

<body>
<form name="myform" onsubmit="return calculateTotalSavings()">
<h1>PIGGY BANK SAVINGS CALCULATOR</h1>
<table>

<tr>
<td>Customer Name</td>
<td><input type="text" name="customerName" id="customerName" required></td>
</tr>

<tr>
<td>Customer Type</td>
<td><input type="radio" name="customerType" id="NC" value="Normal Citizen"
required>Normal Citizen</td>
<td><input type="radio" name="customerType" id="SC" value="Senior Citizen"
required>Senior Citizen</td>
</tr>

<tr>
<td>Address & ID Proof</td>
<td><input type="checkbox" id="addressProof1" name="addressProof" value="Adhar
Card">Adhar Card</td>
<td><input type="checkbox" id="addressProof2" name="addressProof" value="Pan
Card">Pan Card</td>
<td><input type="checkbox" id="addressProof3" name="addressProof"
value="Driving License">Driving License</td>
<td><input type="checkbox" id="addressProof4" name="addressProof"
value="Passport">Passport</td>
<td><input type="checkbox" id="addressProof5" name="addressProof" value="Voter
Id">Voter Id</td>
</tr>

<tr>
<td>Mobile Number</td>
<td><input type="number" name="customerMobileNumber"
id="customerMobileNumber" pattern="[789]{1}[0-9]{9}" required></td>
</tr>

<tr>
<td>Type of Savings</td>
<td><input list="savings" name="savingType" id="savingType" autocomplete="on"
required>
<datalist id="savings">
<option value="FD">
<option value="RD">
</datalist>
</td>
</tr>

<tr>
<td>Amount</td>
<td><input type="number" name="amount" id="amount" min="500" required></td>
</tr>

<tr>
<td>Tenure</td>
<td>
<input type="range" name="tenure" id="tenure" min="1" max="5" value="1" required
oninput="document.getElementById('tenurerange').innerHTML = this.value" />
<label id="tenurerange"></label>
</td>
</tr>

</html>

9.FOOTBALL LEAGUE PERFORMANCE:-------------------------------------------

<!DOCTYPE html>
<html>

<head>
<title>Football League Performance</title>
<style type="text/css">
body {
background-color: #FFFFFF;
}

h1 {
color: #FF0000;
font-style: italic;
font-family: Bookman Old Style;
}

#result {
font-style: bold;
color: #0000FF;
}

#playerName {
margin-left: 65px;
}

#teamName {
margin-left: 70px;
}

#clubAddress,
#coachName {
margin-left: 60px;
}

#email {
margin-left: 85px;
}

#mobileNumber {
margin-left: 40px;
}

#leagueName,
#coachRating {
margin-left: 55px;
}

</style>
</head>

<body>
<header>
<center>
<h1>Football League Performance Rating Form</h1>
</center>
</header>

<form onsubmit="return calculatePerformanceRating()">

<label for="playerNameTxt">Player Name</label>
<input type="text" id="playerName" name="playerName" required />
<br />
<label for="teamNameTxt">Team Name</label>
<input type="text" id="teamName" name="teamName" required />
<br />
<label for="address">Club Address</label>
<textarea id="clubAddress" name="clubAddress" rows="5"
columns="25"></textarea>
<br />
<label
for="genderRadio">Gender</label>        
Male: <input type="radio" id="male" name="Gender" value="Male"
required>   
Female: <input type="radio" id="female" name="Gender" value="Female">
<br />
<label for="emailTxt">Email ID</label>
<input type="text" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required />
<br />
<label for="mobiletxt">Mobile Number</label>
<input type="text" id="mobileNumber" name="mobiletxt" required
pattern="[987]{1}[0-9]{9}" />
<br />
<label for="coachNameTxt">Coach Name</label>
<input type="text" id="coachName" name="coachName" required />
<br />
<label for="leagueNameTxt">League Name</label>
<input type="text" id="leagueName" name="leagueName" required />
<br />
<label for="leagueCompletionDate">League Completion Date</label>
<input type="text" id="leagueCompletionDate" name="leagueCompletionDate"
pattern="(0?[1-9]|1[012])/(0?[1-9]|[12][0-9]|3[01])/\d{4}" required />
<br />
<label for="coach Rating">Coach Rating</label>
<select id="coachRating" name="coachRating">
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Average">Average</option>
<option value="Need improvement">Need improvement</option>
<option value="Poor">Poor</option>
</select>
<br /><br />
<br /><br />
<input type="submit" value="Rate Performance" />
<input type="reset" value="Clear">

</form>
<div name="result" id="result"></div>

var name = document.getElementById("playerName").value;

var actualName;
var rating;
if (document.getElementById('male').checked) {
actualName = "Mr." + name;
} else {
actualName = "Mrs." + name;
}
var coachrate = document.getElementById("coachRating").value;
switch (coachrate) {
case "Excellent":
rating = 5;
break;
case "Good":
rating = 4;
break;
case "Average":
rating = 3;
break;
case "Need improvement":
rating = 2;
break;
case "Poor":
rating = 1;
break;
}
document.getElementById("result").innerHTML = "Performance Rating of " +
actualName + " is " + rating + "-" + coachrate;
return false;
}

</script>

</body>

</html>
10.BROADBAND AND PAYMENT PORTAL:-----
<!DOCTYPE html>
<html>
<head>
<style >
body{
color: #ff9999;
}
h1{
color:#660066;
font-family: Verdana;
text-align: center;
}
</style>
<script >

function costCalculation()
{

var dur=document.getElementById("payment").value;

var contype=document.getElementById("bandType").value;
// alert(contype);
var plan=document.getElementsByName("plan");

var ptype,ans;

for(var i=0;i<plan.length;i++)
{
if(plan[i].checked)
{
ptype=plan[i].value;
break;
}
}

if(ptype=="Sprint 200 GB" && contype=="Normal")

{
ans= (349/3)*dur+150;
}
else if(ptype=="Bolt 200 GB" && contype=="Normal")
{
ans=(499/3)*dur+150;
}
else if(ptype=="Rush 500 GB" && contype=="Normal")
{
ans=(949/3)*dur+150;
}
else if(ptype=="Speed 500 GB" && contype=="Normal")
{
ans=(1299/3)*dur+150;
}

//
else if(ptype=="Sprint 200 GB" && contype=="ADSL")
{
ans= (349/3)*dur+200;
}
else if(ptype=="Bolt 200 GB" && contype=="ADSL")
{
ans=(499/3)*dur+200;
}
else if(ptype=="Rush 500 GB" && contype=="ADSL")
{
ans=(949/3)*dur+200;
}
else if(ptype=="Speed 500 GB" && contype=="ADSL")
{
ans=(1299/3)*dur+200;
}
//
else if(ptype=="Sprint 200 GB" && contype=="DSL")
{
ans= (349/3)*dur+300;
}
else if(ptype=="Bolt 200 GB" && contype=="DSL")
{
ans=(499/3)*dur+300;
}
else if(ptype=="Rush 500 GB" && contype=="DSL")
{
ans=(949/3)*dur+300;
}
else if(ptype=="Speed 500 GB" && contype=="DSL")
{
ans=(1299/3)*dur+300;
}
//alert(ans);
ans=parseInt(ans);
document.getElementById("result").innerHTML="The bill amount is Rs
"+ans.toFixed(2);
return false;
}
</script>
</head>
<body>
<h1> Broadband Payment Portal</h1>
<form id="form1" onsubmit="return costCalculation()" >
<table >
<tr>
<td>Customer Name</td>
<td><input type="text" name="customerName" id="customerName"
pattern="[a-zA-Z ]+" required ></td>
</tr>
<tr>
<td>Subscription Number</td>
<td><input type="number" name="Subscription" id="Subscription" min="0"
required ></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type="email" name="Email" id="Email" required=""></td>
</tr>
<tr>
<td>Type of Broadband</td>
<td><select name="bandType" id="bandType" required>
<option value="Normal">Normal</option>
<option value="ADSL">ADSL</option>
<option value="DSL">DSL</option>
</select>
</td>
</tr>
<tr>
<td>Plan Name</td>
<td><input type="radio" name="plan" id="plan1"
value="Sprint 200 GB">Sprint 200 GB</td>
<td><input type="radio" name="plan" id="plan2" value="Bolt 200 GB" >Bolt
200 GB</td>
<td><input type="radio" name="plan" id="plan3" value="Rush 500 GB">Rush
500 GB</td>
<td><input type="radio" name="plan" id="plan4" value="Speed 500
GB">Speed 500 GB</td>

</tr>
<tr>
<td>Payment for</td>
<td><input type="number" name="payment" id="payment" min="3" max="12"
required ></td>
</tr>
<tr>
<td><input type="submit" id="submit" name="submit" value="Calculate Bill
Amount" ></td>
<td><input type="reset" name="clear" id="clear" value="Reset" ></td>
</tr>

</table>
<div id="result">

</div>
<table float=right >
<caption>Package Chart Table</caption>
<thead>
<tr>
<td>Connection Type</td>
<td>Monthly Rental</td>

</tr>
<tr>
<td>Normal</td>
<td>150</td>

</tr>
<tr>
<td>ADSL</td>
<td>200</td>

</tr>
<tr>
<td>DSL</td>
<td>300</td>

</tr>

</thead>
</table>
</form>

</body>
</html>

11.E-BOOK GRAND SALE:------

Line wrap

<html>
<head>
<style>
body {
background-color: #e6e6fa;
}

#discounttable {
border-style: solid;
float: right;
}

h1 {
color: #800080;
font-family: cursive;
text-align: center;
}

h2 {
text-align: center;
}
</style>
<script>
function displayfun() {
var n = document.getElementById("bookval").value;
var bookType = document.getElementsByName("bookCategory");
var d;
var sub;
var amount;
var perbookprice;
for (var i = 0; i < bookType.length; i++) {
if (bookType[i].checked) {
sub = bookType[i].value;
}
}
if (sub == "Science") {
perbookprice = 400;
if (n <= 250) {
amount = perbookprice * 0.95 * n;
} else if (n > 250) {
amount = perbookprice * 0.93 * n;
}
} else if (sub == "Comics") {
perbookprice = 300;
if (n <= 250) {
amount = perbookprice * 0.97 * n;
} else if (n > 250) {
amount = perbookprice * 0.96 * n;
}
}

document.getElementById("result").innerHTML = "Total Price is:" + amount;

return false;
}
</script>

<body>
<h1>E-BOOK GRAND SALE</h1>
<form onsubmit="return displayfun()">
<table>
<tr>
<td>Customer Name</td>
<td><input type="text" name="customerName" placeholder="Enter the Customer
Name" required pattern="[a-zA-Z\s]+"></td>
</tr>

<tr>
<td>Mobile Number</td>
<td><input type="tel" name="customerMobileNumber" placeholder="Enter the Mobile
Number" pattern="[8-9]{1}[0-9]{9}" required></td>
</tr>
<tr>
<td>
Book Category
</td>
<td>
<input type="radio" name="bookCategory" value="Science" id="sci"
required>Science
<input type="radio" name="bookCategory" value="Comics" id="com">Comics
</td>
</tr>
<tr>
<td>Type</td>
<td>
<input type="text" name="bookType" required list="bookTypes" autocomplete="on">
<datalist id="bookTypes" name="bookTypes">
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Fortnightly">Fortnightly</option>
</datalist>
</td>
</tr>
<tr>
<td>No of Books Required</td>
<td><input type="range" name="bookCount" required id="bookval" min="1"
max="500" value=1 oninput="markOutputId.value=bookval.value">
<output name="markOutputName" id="markOutputId"></output>
</td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Calculate Total Price"
onclick="displayfun()"></td>
<td><input type="reset" name="reset" value="Reset"></td>
</tr>
<tr>
<td>
<div id="result"></div>
</td>
</tr>
</table>
</form>
<div id="result"></div>
<table border="1" id="discounttable">
<caption>Discount Rate Chart</caption>
<tr>
<th>Book Type</th>
<th>
per Book Cost
</th>
<th>
Discount Rate(in percentage)
</th>
</tr>
<tr>
<td>Science</td>
<td>400</td>
<td>5% if total book count <= 250</td>
</tr>
<tr>
<td>Science</td>
<td>400</td>
<td>7% if total book count > 250</td>
</tr>
<tr>
<td>Comics</td>
<td>300</td>
<td>3% if total book count <= 250</td>
</tr>
<tr>
<td>Comics</td>
<td>300</td>
<td>4% if total book count > 250</td>
</tr>
</table>
</body></html>

12.BOOK FORM:------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BookForm</title>
</head>

<body>
<form autocomplete="on">
<fieldset>
<legend>Customer Info </legend>
<label for="Name">Name:</label>
<input type="text" id="cusname" name="cusname" autofocus="on"
placeholder="Enter your name" required="required">
<br><br><label for="Telephone">Telephone:</label>
<input type="tel" id="telephone" name="telephone" placeholder="Pattern:
234-567-8910" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required="required">
<br><br><label for="Email address">Email address:</label>
<input type="email" name="mail" placeholder="Enter your email address"
required="required">
</fieldset>
</form>
<form>
<fieldset>
<legend>Books</legend>
<input type="text" name="book" list="books" autocomplete="on" required="required">
<datalist id="books" name="books">
<option>HTML5 - Bruce Lawson and Remy Sharp</option>
<option>HTML5 - Up and Running - Mark Pilgrim</option>
<option>Head First HTML5 Programming - Eric Freeman</option>
<option>Mastering HTML, CSS and JavaScript - Laura Lemay</option>
</datalist>
<label for="Quantity">Quantity(Maximum 5):</label>
<input type="number" name="quantity" min="1" max="5">
</fieldset>
</form>
<input type="submit" name="submit" onclick="test()">
<script>
function test() {
alert("You have successfully submitted the Book Form");
return false;
}
</script>
</body></html>

13.BOOK A SHOW-TICKET BOOKING------------

<!Doctype html>
<html>
<head>
<title>Ticket Booking</title>
<style>
table {
font-family: monospace;
font-weight: bold;
}

h1 {
color: #0000FF;
font-family: monospace;
text-align: center;
}

body {
background-color: #00CED1;
color: #0C1584;
}
</style>
<script>
function display() {
alert("Booking Successful");
}
</script>
</head>

<body>
<h1>BOOK A SHOW - TICKET BOOKING</h1>
<center>
<form onsubmit="display()" target="_blank">
<table>
<tr>
<td>
<label>Name</label>
</td>
<td>
<input type="text" name="name" placeholder="Enter the Name" pattern="[A-Z a-z]+"
required>
</td>
</tr>
<tr>
<td>
<label>Movie Name</label>
</td>
<td>
<input list="movies" name="moviename" placeholder="Movie Name"
autocomplete="on" required>
<datalist id="movies" name="moviename">
<option value="Irada">Irada</option>
<option value="Rangoon">Rangoon</option>
<option value="Logan">Logan</option>
<option value="Fist Fight">Fist Fight</option>
</datalist>
</td>
</tr>
<tr>
<td>
<label>Circle</label>
</td>
<td>
<input list="circles" name="circle" autocomplete="on" required>
<datalist id="circles">
<option value="Silver">Silver</option>
<option value="Gold">Gold</option>
<option value="Platinum">Platinum</option>
</datalist>
</td>
</tr>
<tr>
<td>
<label>Phone no</label>
</td>
<td>
<input type="number" name="phone" placeholder="Enter Mobile Number"
pattern="[0-9]{10}" required>
</td>
</tr>
<tr>
<td>
<label>Show date and time</label>
</td>
<td>
<input type="datetime-local" name="showdate" required>
</td>
</tr>
<tr>
<td>
<label>No of Adults</label>
</td>
<td>
<input type="number" name="tickets" min="1" max="10" required>
</td>
</tr>
<tr>
<td>
<label>No of Childrens</label>
</td>
<td>
<input type="number" name="children" min="1" max="5" required>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Book My Show">
</td>
<td>
<input type="reset" name="reset" value="reset">
</td>
</tr>
</table>
</form>
</center>
</body></html>

14.PLATINUM MATERIAL------------------
<!DOCTYPE html>
<html>
<head>



<title>Platinum Properties</title>
<style>

input[type="number"] {
width:98%;
}
input[type="text"] {
width:98%;
}
input[type="date"] {
width: 98%;
}
input[type="email"] {
width:98%;
}
input[type="tel"] {
width: 98%;
}
select {
width: 98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}

.left {
/* Fill the attribute and value */
left: 0;
}

.right {
/* Fill the attribute and value */
right: 0;
background-color: #74B14E;
width: 60%;
padding: 10px;
}

#image{
/* Fill the attribute and value */
width: 170%;
height: 100%;
}
h3{
/* Fill the attribute and value */
text-align: center;
font-size: 20px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
}

table, h3{
/* Fill the attribute and value */
border: 3px solid #ffffff;
border-spacing: 2px;
width: 97%;
}

td{
/* Fill the attribute and value */
border: 1px solid #ffffff;
color: #6600FF;
background-color: #DFBF9F;
border-spacing: 5px;
}

#submit,h3{
/* Fill the attribute and value */
color: #C21807;
font-weight: bold;
background-color: #FFFFFF;
}

table,td,#submit{
/* Fill the attribute and value */
font-size: 15px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

#offers:hover {
color: #C21807;
}

.b{
/* Fill the attribute and value */
color: #6600FF;
}
.c{
/* Fill the attribute and value */
color: #C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
}

.d{
border: 0px;;
}
</style>
</head>

function show_value(x)
{
document.getElementById("demo").innerHTML=x;
}
</script>

<div class="split left"><img src="PLATINUM.png" id="image"></div>

<div class="split right">
<h3>Platinum Properties</h3>
<table>
<tr class="d">
<td class="d"><a id="property_info" class="b"
href="#property">Property-info</a></td>
<td class="d"><a id="personal_info" class="b"
href="#personal">Personal-info</a></td>
<td class="d"><a id="features_info" class="b" href="#features">Extra
Features</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="property">Property Information</td>
</tr>

<tr>
<td>Select property Type: <br/>
<select id="ptype" required>
<option value="Select..">Select..</option>
<option value="Apartment">Apartment</option>
<option value="Independent House">Independent House</option>
<option value="Vila">Vila</option>
<option value="Compact Home">Compact Home</option>
</select></td>
<td>BHK Type <br/>
<select id="bhk" required>
<option value="Select..">Select..</option>
<option value="1BHK">1BHK</option>
<option value="2BHK">2BHK</option>
<option value="3BHK">3BHK</option>
<option value="4BHK">4BHK</option>
</select></td>
<td>Select the possession status <br/>
<select id="status" required>
<option value="Select..">Select..</option>
<option value="Plot">Plot</option>
<option value="Under Construction">Under Construction</option>
<option value="Semi Furnished">Semi Furnished</option>
<option value="Ready To Move">Ready To Move</option>
</select></td>
</tr>

<tr>
<td>Price Range:</td>
<td class="d"><input type="number" id="from" placeholder="From" required></td>
<td class="d"><input type="number" id="to" placeholder="To" required></td>
</tr>

<tr>
<td>Location:</td>
<td class="d" colspan="2"><input type="text" id="location" placeholder="Enter the
location" required></td>
</tr>

<tr>
<td colspan="3" class="c" id="personal">Personal Information</td>
</tr>

<tr>
<td>Customer Name</td>
<td colspan="2"><input type="text" id="cname" pattern="[A-Za-z ]{1,100}"
placeholder="Enter the customer name" required></td>
</tr>

<tr>
<td>Phone Number</td>
<td colspan="2"><input type="tel" id="phno" pattern="[987]{1}[0-9]{9}"
placeholder="Enter the phone number" required></td>
</tr>

<tr>
<td>Email ID</td>
<td colspan="2"><input type="email" id="email" placeholder="Enter the email id"
required></td>
</tr>

<tr>
<td colspan="3" class="c" id="features">Extra Features</td>
</tr>

<tr class="d">
<td class="d"><input type="checkbox" id="parking" name="optional">Parking</td>
<td class="d"><input type="checkbox" id="swimming pool"
name="optional">Swimming Pool</td>
<td class="d"><input type="checkbox" id="super market"
name="optional">Super Market</td>
</tr>

<tr>
<td class="d"><input type="checkbox" id="park" name="optional">Park</td>
<td class="d"><input type="checkbox" id="library" name="optional">Library</td>
<td class="d"><input type="checkbox" id="playground" name="optional">Play Ground</td>
</tr>

<tr>
<td colspan="3" ><a id="offers" class="b" href="#submit">**Click here to
unlock exclusive offers</a></td>
</tr>

</table>
<br/>
<p><input type="button" id="submit" value="CHECK
AVAILABILITY"></p>
</div>

</body>
</html>

15.ROYAL WEDDING PLANNERS CODE:-------------------

<!DOCTYPE html>
<html>
<head>



<title>Royal Wedding Planners</title>
<style>

input[type="number"] {
width:98%;
}
input[type="range"] {
width:95%;
}
input[type="text"] {
width:98%;
}
input[type="date"] {
width: 98%;
}
input[type="email"] {
width:98%;
}
input[type="tel"] {
width: 98%;
}
textarea {
width: 98%;
}
select {
width: 98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}

.left {
Left:0;
/* Fill the attribute and value */
}
.right {
Right :0;
background-color: #CA9499;
width: 60%;
padding: 10px;
/* Fill the attributes and values */
}

#image{
width: 90%;
height: 90%;
/* Fill the attributes and values */
}

h3{
text-align: center;
font-size:20px;
font-family: Georgia;
border-radius: 6px;
padding: 2px;

/* Fill the attributes and values */

}

table, h3{
/* Fill the attribute and value */
border-spacing: 2px;
width: 97%;

border: 3px solid #FFFFFF;

}

td{
/* Fill the attributes and values */
color:#ffffff;
background-color: #A9A9A9;
border-spacing: 5px;
border: 1px solid #FFFFFF;
}

#submit,h3{
color:#C21807;
background-color: #ffffff;
font-weight:bold;
/* Fill the attributes and values */
}
table,td,#submit{
font-size: 15px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
/* Fill the attributes and values */
}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

#offers:hover {
color: #C21807;
}

.b{
color: #FFFFFF;
/* Fill the attribute and value */
}

#condition:hover {
color: #C21807;
}

.c{
color: #C21807;
Font-size:15px;
font-family: Georgia;
font-weight: bold;
}

.d{
border: 0px;;
}
</style>
</head>

function show_value(x)
{
document.getElementById("demo").innerHTML=x;
}
</script>
<div class="split left"><img src=Royal.png id="image "></div>
<div class="split right">
<h3> ROYAL WEDDING PLANNERS </h3>
<table>
<tr class="d">
<td class="d"><a href="#wedding" id="wedding_info"
class="b">Wedding-info</a></td>
<td class="d"><a href="#contact" id="contact_info" class="b">Contact-info</a></td>
<td class="d"><a href="#services" id="services_info" class="b">Service
required</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="wedding">Wedding Information</td>
</tr>

<tr>
<td>Select your city : <br/><select id="city" required="required">
<option>Select..</option>
<option>Chennai</option>
<option>Banglore</option>
<option>Hyderabad</option>
<option>Mumbai</option>
</select> </td>
<td>Wedding date : <br/><input type="date" name="date" required="required"
id="date"></td>
<td>No of guests <br/><input type="number" id="guests"
required="required"></td>
</tr>

<tr>
<td>Venue</td>
<td colspan="2"><textarea name="Venue" id="venue" rows="4" cols="50"
placeholder="Wedding Venue" required="required"></textarea></td>
</tr>

<tr>
<td>Budget (approx)</td>
<td>< <input type="range" min="200000" max="5000000" value="0"
id="budget" required="required" onchange="show_value(this.value);">
<span id="demo"></span></td>
</tr>

<tr>
<td colspan="3" class="c" id="contact">Contact Information</td>
</tr>

<tr>
<td>Customer Name</td>
<td><input type="text" id="cname" placeholder="Enter the customer name"
required="required" pattern="[A-Z][a-z]"></td>
</tr>

<tr>
<td>Phone Number</td>
<td><input type="tel" id="phno" placeholder="Enter the phone number"
required="required" pattern="[789]{1}[0-9]{9}"></td>
</tr>

<tr>
<td>Email ID</td>
<td><input type="email" id="email" placeholder="Enter the email id"
required="required"></td>
</tr>

<tr>
<td colspan="3" class="c" id="services">Services Required</td>
</tr>

<tr class="d">
<td class="d"><input type="checkbox" name="charges" id="invitation">
Invitation</td>
<td class="d"><input type="checkbox" name="charges" id="decorators">
Decorators </td>
<td class="d"><input type="checkbox" name="charges"
id="makeupArtists">Makeup artists</td>
</tr>

<tr>
<td class="d" ><input type="checkbox" name="charges" id="photo_video">
Photographers & Videographers</td>
<td class="d"> <input type="checkbox" name="charges" id="Is_support">
Live streaming support</td>
<td class="d"><input type="checkbox" name="charges" id="caterers">
Caterers</td>
</tr>

<tr>
<td class="d"><input type="checkbox" name="charges" id="transportation" >
Transportation</td>
<td class="d"><input type="checkbox" name="charges" id="accomodation"
>Accomodation</td>
<td class="d"><input type="checkbox" name="charges" id="theme">
Theme-based</td>
</tr>

<tr>
<td colspan="3" id="condition ">**Quote you receive will include service tax of
5.0%</td>
</tr>

</table>
<br/>

<p><input type="button" id="submit" value="GET A QUOTE"> </p>

</div>

</body>
</html>

---------------------------------

16.Agape Food Delivery Service ----

<!DOCTYPE html>
<html>
<head>



<title>Agape Food Delivery Service</title>

input[type="text"] {
/*opacity: 0.0;*/
background: none;
width: 100%
/* Fill the attributes and values */
}
input[type="number"] {
/*opacity: 0.0;*/
background: none;
width: 100%
/* Fill the attributes and values */
}

input[type="email"] {
/*opacity: 0.0;*/
background: none;
width: 100%
/* Fill the attributes and values */
}

input[type="tel"] {
/*opacity: 0.0;*/
background: none;
width: 100%
/* Fill the attributes and values */
}

input[type="url"] {
/*opacity: 0.0;*/
background: none;
width: 100%
/* Fill the attributes and values */
}

input[type="checkbox"] {
/*opacity: 0.0*/
background: none;
/* Fill the attribute and value */
}

input[type="button"] {
/*opacity: 0.0*/
background: none;
/* Fill the attribute and value */
}

input[type="checkbox"] /* Fill here */ :checked + a {

color: #00800A
/* Fill the attribute and value */
}

body{
background-image: url('foodmitho.png');
}

h3{
border: 1px solid;
background-color: #08088A;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 60%;
font-family: "Verdana";
border-radius: 6px;
color: #E6ADAD;
/* Fill the attributes and values */
}

table{
border:3px solid;
width: 60%;
margin-left: auto;
margin-right: auto;
border-spacing: 5px;
border-radius: 6px

td{

font-size: 15px
}

#submit{
color: #08088A;
font-weight: bold;
/*opacity: 0.0;*/
background: none;
border-radius: 6px
/* Fill the attributes and values */
}

#submit:hover {
color: #FFFFFF;
background-color: #CD5C5C
}

.a{
width: 50%
/* Fill the attribute and value */
}
.b{
width: 60%;
margin-left: auto;
margin-right: auto
/* Fill the attributes and values */
}

::-webkit-input-placeholder {
color: #CD5C5C
/* Fill the attribute and value */
}
</style>

</head>
<body>

<h3>Agape Food Delivery Service - Partner Invite</h3>

<table>

<tr>
<td colspan=" " required>Cusine type :
<input type="checkbox" id="indianVeg" name="indianVeg"
value="Indian-veg" /> Indian-veg
<input type="checkbox" id="indianVegNonVeg" name="indianVegNonVeg"
value="Indian-veg & Non-veg" /> Indian-veg & Non-veg
<input type="checkbox" id="chinese" name="chinese" value="Chinese" />
Chinese
<input type="checkbox" id="continental" name="continental"
value="Continental" /> Continental
</td>
</tr>

<tr>
<td><label>License(Jpeg/PDF)*</label>
<input type="file" id="license" name="Choose File" value="Choose File"
accept="application/pdf, image/jpeg" required/>
</td>
<td><label>GSTIN/PAN*</label>
<input type="file" id="pan" name="Choose File" value="Choose File"
accept="application/pdf, image/jpeg" required/>
</td>
</tr>

<tr>
<td><label>FSSAI(Jpeg/PDF)*</label>
<input type="file" id="fssai" name="Choose File" value="Choose File"
accept="application/pdf, image/jpeg" required/>

</td>
<td>
<label>Facade/Kitchen/Dining-Packaging/Locality(Jpeg)*</label>
<input type="file" id="others" name="Choose Files" value="Choose Files"
accept="image/jpeg" multiple required/>

</td>
</tr>
</table>

<p class=" "><input type="checkbox" id="terms" name="terms" value="terms" /><a

href="#submit" id="terms_ref">I agree to terms of services</a></p>
<p class=" ">
<input type="button" id="submit" value="SUBMIT" />
</p>

</body>
</html>

17.Shine Clinic:-----

<title>Shine Clinic</title>
<style>

input[type="number"], input[type="text"], input[type="date"],

input[type="email"], input[type="tel"], select {
width:98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}

.left {
left: 0;
/* Fill the attribute and value */
}

.right {
right: 0;
background-color: #1AA3FF;
width: 60%;
padding: 10px;
/* Fill the attribute and value */
}

#image{
width: 90%;
height: 50%;
margin-top: 25%;

/* Fill the attribute and value */

}
h3{
text-align: center;
font-size: 20px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;

/* Fill the attribute and value */

}

table, h3{
/* Fill the attribute and value */
border: 3px solid #ffffff;
border-spacing: 2px;
width: 97%;
}

td{
/* Fill the attribute and value */
border: 1px solid #ffffff;
border-spacing: 5px;
color: #6600FF;
background-color: #E6E6E6;

#submit,h3{
color: #C21807;
font-weight: bold;
background-color: #FFFFFF;
/* Fill the attribute and value */
}

table,td,#submit{
font-family: Georgia;
font-size: 15px;
border-radius: 6px;
padding: 5px;

/* Fill the attribute and value */

}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

.b{
color: #6600FF;
/* Fill the attribute and value */
}

.c{
color: #C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
/* Fill the attribute and value */
}

.d{
border: 0px;;
}
</style>
</head>

<body>
<script>
function show_value(x){
document.getElementById("demo").innerHTML=x;
}
function setDisable(){
if(document.getElementById('cash').checked==true){

document.getElementById('cnumber').disabled=true;

document.getElementById('cvvnumber').disabled=true;
}
else if(document.getElementById('card').checked==true){

document.getElementById('cnumber').disabled=false;

document.getElementById('cvvnumber').disabled=false;
}
}
</script>

<div class="split left"><img src="SHINE.png" id="image"></div>

<h3>Shine Clinic</h3>
<table>
<tr class="d">
<td class="d"><a href="#admission" id="admission_info" class="b">Admission-info</a></td>
<td class="d"><a href="#personal" id="personal_info" class="b">Personal-info</a></td>
<td class="d"><a href="#payment" id="payment_info" class="b">Payment-info</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="admission">Admission Information</td>
</tr>

<tr>
<td>Date of Admission: <br/><input type="date" id="dateofadmission"
required="required"></td>
<td>Select the admission type<br/><select id="adtype" required>
<option value="Select..">Select..</option>
<option value="New Admission">New Admission</option>
<option value="Already Have">Already Have</option>
</select></td>
<td>Admission For<br/><select id="adfor" required>
<option value="Select..">Select..</option>
<option value="Ear">Ear</option>
<option value="Nose">Nose</option>
<option value="Throat">Throat</option>
<option value="General Checkup">General Checkup</option>

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

<tr>
<td colspan="3" >**Select if you have any of the following below</td>
</tr>
<tr>
<td class="d"><input type="checkbox" id="cold" name="health">Cold</td>
<td class="d"><input type="checkbox" id="fever" name="health">Fever</td>
<td class="d"><input type="checkbox" id="cough" name="health">Cough</td>
</tr>
<tr>
<td class="d"><input type="checkbox" id="diapedesis"
name="health">Diapedesis</td>
<td class="d"><input type="checkbox" id="blood pressure"
name="health">Blood Pressure</td>
<td class="d"><input type="checkbox" id="heavy surgery"
name="health">Heavy Surgery</td>
</tr>
<tr>
<td colspan="3" class="c" id="personal">Personal Information</td>
</tr>

<tr>
<td>Patient Name</td>
<td colspan="2"><input type="text" id="pname" placeholder="Enter the patient
name" pattern="[a-zA-Z\s]" required="required"></td>
</tr>

<tr>
<td>Phone Number</td>
<td colspan="2"><input type="text" id="phno" placeholder="Enter the phone
number" pattern="[789]{1}[0-9]{9}" maxlength="10" minlength="10"
required="required"></td>
</tr>

<tr>
<td>Email ID</td>
<td colspan="2"><input type="email" id="email" placeholder="Enter the
email id" required="required"></td>
</tr>

<tr>
<td>Address</td>
<td colspan="2"><textarea id="address" rows="4" cols="80"
placeholder="Enter the age" required="required"></textarea></td>
</tr>

<tr>
<td colspan="3" class="c" id="payment">Payment Information</td>
</tr>

<tr class="d">
<td>Select the payment type:</td>
<td class="d"><input type="radio" id="card" name="ptype"  onclick="setDisable()" required/>Card</td>
<td class="d"><input type="radio" id="cash" name="ptype"  onclick="setDisable()" required/>Cash</td>
</tr>
<tr>
<td>Card Number</td>
<td colspan="2"><input type="text" placeholder="Enter the card
number" id="cnumber" minlength="16" maxlength="16" required></td>
</tr>
<tr>
<td>Cvv Number</td>
<td colspan="2"><input type="text" id="cvvnumber" placeholder="Enter
the cvv number" minlength="3" maxlength="3" required></td>
</tr>

</table>
<br/>
<p><input type="button" value="CONFIRM" id="submit"></p>
</div>

</body>
</html>
18.Mercury Drug Delivery Service--

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE-edge">

<title>Mercury Drug Delivery Service</title>

</head>

<style>

input[type="file"] {

background: transparent;

width: 100%;

input[type="text"] {

background: transparent;

width: 100%;

input[type="number"] {

background: transparent;

width: 100%;

}
input[type="email"] {

background: transparent;

width: 100%;

input[type="tel"] {

background: transparent;

width: 100%;

input[type="url"] {

background: transparent;

width: 100%;

input[type="checkbox"] {

background: transparent;

input[type="button"] {

background: transparent;

input[type="checkbox"] /* Fill here */ :checked + a {

/* Fill the attribute and value */

body{

font-weight: bold;

margin-left: auto;

margin-right: auto;

h3{

color: #FFFFFF;

background-color: #800000;

margin-left: auto;

margin-right: auto;

text-align: center;

width: 60%;

font-family: Verdana;

padding: 3px;

border-radius: 6px;

table{

width: 60%;

border-style:3px solid;

margin-left: auto;

margin-right: auto;
border-spacing: 5px;

border-radius: 6px;

td{

font-size: 15px;

#submit{

color:#800000;

font-weight: bold;

background: transparent;

border-radius: 6px;

#submit:hover {

background-color:#800000 ;

color: #FFFFFF;

.a{

width: 50%;

.b{

width: 60%;
}

::-webkit-input-placeholder {

color: #dcdcdc;

</style>

<body>

<h3> Mercury Drug Delivery Service-Partner Invite </h3>

<table style="text-align: left;">

<tr>

<td colspan="2"><input type="text" required id="pharmacyName"

placeholder="Pharmacy name*"></td>

</tr>

<tr>

<td class="a"><input type="number" id="pin"

placeholder="Pin(PrimaryLocation)*" required></td>

<td><input type="text" id="city" placeholder="City*"></td>

</tr>

<tr>

<td class="a"><input type="text" id="oname" placeholder="Pharmacy owner*"

required</td>

<td><input type="tel" id="phno" placeholder="Phone number*"

pattern="[7-9]{1}[0-9]{9}" required></td>

</tr>

<tr>

<td colspan="2"><input type="email" id="email" placeholder="Email*"></td>

</tr>

</tr>

<tr>

<td colspan="2">Medicines available :

<input type="checkbox" id="gsl" name="items">General Sales List

Medicines(GSL)

<input type="checkbox" id="p" name="items">Pharmacy

Medicines(P)<br>
<input type="checkbox" id="pom" name="items">Prescription Only
Medicines (POM)

<input type="checkbox" id="cds" name="items">Controlled Drugs

(CDs)

</td>

</body>

</html>
19.Mahima Cashew Store---

<!DOCTYPE html >

<html>
<head>
<script>
function billCalculation ()
{
var name =document.getElementById("customerName").value;
var wholecashews=document.getElementById("wholecashews").value;
var halfcashews=document.getElementById("halfcashews").value;
var brokencashews=document.getElementById("brokencashews").value;
var distance=document.getElementById("distance").value;
var amount =(1100 * wholecashews)+(800 *halfcashews)+(650
*brokencashews)+(distance *22);

document.getElementById("result"). innerHTML = " Hi "+name+" ,you have

to pay "+amount.toFixed(2)+" thank for visting us!!!" ;
return false;
}
</script>

</style>

</head>
<body>
<form onsubmit=" return billCalculation ()">
<h1>Mahima Cashew Store</h1>
<table>
<tr>
<td>
customer name <input type ="text" id ="customerName" name
="customerName" placeholder="Enter Your Name" required="required">
</td>
</tr>
<tr>
<td>
Contact No <input type ="tel" id ="contactno" name ="contactno"
pattern="[7-9]{1}[0-9]{9}" placeholder="Enter Your mobile no" required="required">
</td>
</tr>
<tr>
<td>
Date of order received <input type ="date" id ="bookingdate" name
="bookingdate" required="required">
</td>
</tr>
<tr>
<td>
whole cashew (in Kg) <input type ="number" id ="wholecashews" name
="wholecashews" min="0" required="required">
</td>
</tr>
<tr>
<td>
Half cashew (in Kg) <input type ="number" id ="halfcashews" name
="halfcashews" min="0" required="required">
</td>
</tr>
<tr>
<td>
Broken cashew (in Kg) <input type ="number" id ="brokencashews" name
="brokencashews" min="0" required="required">
</td>
</tr>
<tr>
<td>
Address <textarea type="text" id="address" name ="address" rows="5" cols
="25" placeholder="Enter your address" required="required"></textarea>
</td>
</tr>
<tr>
<td>
Distance (in km) <input type ="number" id ="distance" name ="distance"
min="0" required="required">
</td>
</tr>
<tr>
<td>
Expected date of delivery <input type="date" id="deliverydate"
name="deliverydate" required="required">
</td>
</tr>
<tr id ="a">
<td >
<input type="button" id="submit" onclick=" billCalculation ()" value
="submit">
</td>
<td>
<input type ="reset" id="reset" name="reset" value ="clear">
</td>
</tr>
</table>
</form>
<div id="result">

</div>
</body>
</html>

20.Refrigerator Repair:--------

<!document HTML>
<HTML>
<head>
<style type="text/css">
//apply appropriate style
</style>
<script>
function bookAppointment(){
var charge;
var name=document.getElementById("customerName").value;
var brand=document.getElementById("brandName").value;
var type=document.getElementById("refrigeratorType").value;
var mail=document.getElementById("email").value;
if(type=="Single Door"){
charge=2500;
}
else if(type=="Double Door"){
charge=5500;
}
else{
charge=8500;
}
if(document.getElementById("yearlyMaintenance").checked==true){
var s=charge+1000;
document.getElementById("result").innerHTML= "Hello "+ name+ ", the
service appointment copy for "+ brand +" "+ type+" refrigerator with yearly
maintenance will be sent to your email ID "+ mail+ " and the estimated service charge
will be Rs "+ s;
}
else{
document.getElementById("result").innerHTML= "Hello"+ name+", the
service appointment copy for"+ brand+ type+" refrigerator without yearly
maintenance will be sent to your email ID "+ mail+ "and the estimated service charge
will be Rs"+ charge;
}
}
</script>
</head>
<body>
<h1>REFRIGERATOR REPAIR SERVICE</h1>
<form onsubmit="return bookAppointment()">
<label>Customer Name </label><input type="text" id="customerName"
placeholder="Enter your name" required><br>
<label>Gender </label><input type="radio" name="male"
id="male">Male</label>
<input type="radio" name="female" id="female">Female<br>
<label>Mobile Number </label><input type="text" id="mobilenumber"
placeholder="Enter your mobile number" pattern="[6-10]{3}-[0-9]{3}-[0-9]{4}"
required><br>
<label>Email Id </label><input type="email" id="email" placeholder="Enter
your email Id" required><br>
<label>Address </label><textarea rows="5" cols="25" id="address"
placeholder="Enter your address" required></textarea><br>
<label>Brand Name </label><input list="brandNames" id="brandName"
autocomplete="on" required>
<DataList id="brandNames">
<option value="LG">
<option value="Samsung">
<option value="Whirlpool">
<option value="Bosch">
<option value="Godrej">
<option value="Seimens"></option>
</datalist></select><br>
<label>Refrigerator Type</label><select id="refrigeratorType">
<option value="Single Door" >Single Door</option>
<option value="Double Door">Double Door</option>
<option value="Triple Door">Triple Door</option></select><br>
<label>Date for Appointment</label><input type="date"
id="dateForAppointment" required><br>
<label>Yearly Maintenance </label><input type="checkbox"
id="yearlyMaintenance"><br>
<label>Duration in months from the previous service</label><input type="range"
min="0" max="6" step="1"><br>
<input type="button" id="submit" value="submit"
onclick="bookAppointment()"></button>
<button type="reset" id="reset" value="clear">reset</button><br>
</form>
<div id="result">

</div>
</body>
</HTML>

21.Elite Travel Management:-----

<title>Elite Travel Management</title>

<style>

input[type="number"] {
width:98%;
}
input[type="text"] {
width:98%;
}
input[type="date"] {
width: 98%;
}
input[type="email"] {
width:98%;
}
input[type="tel"] {
width: 98%;
}
select {
width: 98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}

.left {
left: 0;
}

.right{
right: 0;
background-color: #74B14E;
width:60%;
padding: 10px;

#image{
width: 120%;
height: 90%;
}

h3{
text-align: center;
font-size: 20px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
}

table, h3{
border: 3px solid #FFFFFF;
border-spacing: 2px;
width:97%;
}

td{
border: 1px solid #FFFFFF;
color:#FFFFFF;
background-color: #6698FF ;
border-spacing : 5px;
}

#submit,h3{
color: #C21807;
font-weight: bold ;
background-color: #FFFFFF ;
}

table,td,#submit{
font-family: Georgia;
font-size: 15px;
border-radius:6px;
padding: 5px ;
}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

#offers:hover {
color: #C21807;
}

.b{
color: #FFFFFF;
}

.c{
color:#C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
}

.d{
border: 0px;;
}
</style>
</head>

function show_value(x)
{
document.getElementById("demo").innerHTML=x;
}
</script>

<div class="split left"><img src="ELITE.png " id="image"></div>

<h3> ELITE TRAVEL MANAGEMENT </h3>

<table>
<tr class="d">
<td class="d"><a href="#travel" id="travel_info"
class="b">Travel-info</a></td>
<td class="d"><a href="#personal" id="personal_info"
class="b">Personal-info</a></td>
<td class="d"><a href="#preferences" id="preferences_info"
class="b">Activities Preferences</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="travel">Travel Information</td>
</tr>

<tr>
<td>Select your travel destination : <br/>
<select id="destination">
<option value="Select.." required>Select..</option>
<option value="London">London</option>
<option value="Canada">Canada</option>
<option value="Mauritius">Mauritius</option>
<option value="Switzerland">Switzerland</option>
</select>
</td>
<td>Date of departure : <br/>
<input type="date" id="dateofdeparture" placeholder="dd-mm-yyyy"
required>
</td>
<td>Date of arrival : <br/>
<input type="date" id="dateofarrival" placeholder="dd-mm-yyyy"
required>
</td>
</tr>

<tr>
<td>Visa Assistance</td>
<td class="d"><input type="radio" name ="visa" id="yes" required>Yes</td>
<td class="d"><input type="radio" name ="visa" id="no" required>No</td>
</tr>

<tr>
<td colspan="3" class="c" id="personal">Personal Information</td>
</tr>

<tr>
<td>Customer Name</td>
<td><input type="text" id="cname" placeholder="Enter the customer name"
pattern="^[a-zA-Z\s]+$" required></td>
</tr>

<tr>
<td>Phone Number</td>
<td><input type="tel" id="phno" placeholder="Enter the phone number"
pattern="[7-9]{1}[0-9]{9}" required></td>
</tr>

<tr>
<td>Email ID</td>
<td><input type="email" id="email" placeholder="Enter the email id"
required></td>
</tr>

<tr>
<td colspan="3" class="c" id="preferences">Activities Preferences</td>
</tr>

<tr class="d">
<td class="d"><input type="checkbox" name="charges"
id="museumsAndHistoricSites">Museums & Historic Sites</td>
<td class="d"><input type="checkbox" name="charges"
id="culture">Culture</td>
<td class="d"><input type="checkbox" name="charges"
id="beaches">Beaches</td>
</tr>
<tr>
<td class="d"><input type="checkbox" name="charges"
id="shopping">Shopping</td>
<td class="d"><input type="checkbox" name="charges"
id="wildlife">Wildlife</td>
<td class="d"><input type="checkbox" name="charges"
id="relaxing">Relaxing</td>
</tr>

<tr>
<td colspan="3" ><a href="#submit" class="b" id="offers">**Click here
to unlock exclusive offers</a></td>
</tr>

</table>
<br>
<p><input type="button" id="submit" value="BUILD PACKAGE"></p>
</div>

</body>
</html>

22.Mercury Drug Delivery Code:------

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Mercury Drug Delivery Service</title>
</head>
<style>
input[type="file"] {
background: transparent;
width: 100%;
}

input[type="text"] {
background: transparent;
width: 100%;
}

input[type="number"] {
background: transparent;
width: 100%;
}

input[type="email"] {
background: transparent;
width: 100%;
}

input[type="tel"] {
background: transparent;
width: 100%;
}

input[type="url"] {
background: transparent;
width: 100%;
}

input[type="checkbox"] {
background: transparent;

input[type="button"] {
background: transparent;
}

input[type="checkbox"] /* Fill here */ :checked + a {

/* Fill the attribute and value */
}

body{
font-weight: bold;
margin-left: auto;
margin-right: auto;
}

h3{
color: #FFFFFF;
background-color: #800000;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 60%;
font-family: Verdana;
padding: 3px;
border-radius: 6px;
}

table{
width: 60%;
border-style:3px solid;
margin-left: auto;
margin-right: auto;
border-spacing: 5px;
border-radius: 6px;
}

td{
font-size: 15px;
}

#submit{
color:#800000;
font-weight: bold;
background: transparent;
border-radius: 6px;
}

#submit:hover {
background-color:#800000 ;
color: #FFFFFF;
}

.a{
width: 50%;
}

.b{
width: 60%;
}

::-webkit-input-placeholder {
color: #dcdcdc;
}
</style>
<body>

<h3> Mercury Drug Delivery Service-Partner Invite </h3>

<tr>
<td colspan="2"><input type="text" required id="pharmacyName"
placeholder="Pharmacy name*"></td>
</tr>
<tr>
<td class="a"><input type="number" id="pin"
placeholder="Pin(PrimaryLocation)*" required></td>
<td><input type="text" id="city" placeholder="City*"></td>
</tr>
<tr>
<td class="a"><input type="text" id="oname" placeholder="Pharmacy owner*"
required</td>
<td><input type="tel" id="phno" placeholder="Phone number*"
pattern="[7-9]{1}[0-9]{9}" required></td>
</tr>
<tr>
<td colspan="2"><input type="email" id="email" placeholder="Email*"></td>
</tr>
<tr>
<td colspan="2"><input type="url" id="link" placeholder="Website Link/ online
listing link"></td>
</tr>
<tr>
<td><input type="text" id="noOfOutlets" min="1" placeholder="Number of
outlets*" required></td>
<td class="a"><input type="text" id="primaryArea" placeholder="Primary Area
of outlet*" required></td>
</tr>
<tr>
<td><input type="text" min="200" id="cost" placeholder="Minimum purchase
cost*" required></td>
<td class="a"><input list="establishmentType" id="type"
placeholder="Establishment : Independant/Chain*"
required>
<datalist id="establishmentType">
<option value="Independant"></option>
<option value="Chain"></option>
</datalist>
</td>
</tr>
<tr>
<td colspan="2">Medicines available :
<input type="checkbox" id="gsl" name="items">General Sales List
Medicines(GSL)
<input type="checkbox" id="p" name="items">Pharmacy Medicines(P)<br>
<input type="checkbox" id="pom" name="items">Prescription Only
Medicines (POM)
<input type="checkbox" id="cds" name="items">Controlled Drugs (CDs)
</td>
</tr>
<tr>
<td>Retail Drug License(Jpeg/PDF)*<br>
<input type="file" id="license"></td>
<td>GSTIN/PAN*<br>
<input type="file" id="pan"></td>
</tr>
<tr>
<td>FSSAI(Jpeg/PDF)*<br>
<input type="file" id="fssai"></td>
<td>Facade/Pharmacy-shelves/Refridgerator(Jpeg)* <br>
<input type="file" id="others" multiple></td>
</tr>
</table>

<p class="b"><input type="checkbox"><a href="#submit" id="terms_ref"

style="color: blue;"><b>I agree to terms of
services</b></a></p>
<p class="b"><input type="button" id="submit" value="submit"></p>

</body>

</html>

23.Xchange - One Stop for Mobile-Accessories:-----

<title> Xchange - One Stop for Mobile-Accessories</title>

<style>

*{
background-color: #C2A1A1;
color:#FFFFFF;
font-family: Georgia;
}

input[type="text"] , input[type="number"], input[type="date"], select,

textarea{
width: 98%;
}

input[type="range"] {
width: 60%;
}

::placeholder{
color:#FFFFFF;
}

h3{
border: 2px solid #FFFFFF;
/* Fill the attributes and values */
margin-left: auto;
margin-right: auto;
text-align: center ;
width: 60%;
color: #5D4079;
background-color: #FFFFFF;
border-radius: 6px;
border-spacing: 2px;
font-size: 30px;

table{
/* Fill the attributes and values */
width:60%;
margin-right: auto;
margin-left: auto;
}

td{
border: 2px solid #FFFFFF;
color:#FFFFFF;
/* Fill the attributes and values */
color: #FFFFFF;
padding: 5px;
border-radius: 6px;
border-spacing: 5px;
}

#submit {
margin-left:45%;
/* Fill the attributes and values */
color: #FFFFFF;
background-color: #5D4079;
border-radius: 6px;
padding: 3px;
font-weight: bold;
}

#submit:hover {
background-color: #FFFFFF;
color:#5D4079;
}

.d{
color:#000000;
}

.c{
/* Fill the attributes and values */
color: #5D4079;
background-color: #FFFFFF;
font-weight: bold ;
}

</style>
</head>

<body >

<h3>Xchange - One Stop for Mobile-Accessories</h3>

<table>
<tr>
<td class="c">Furnish Details</td>
</tr>

<tr>

<td><input type="text" name="mtype" id="mtype" placeholder="Enter

the mobile type*" required/></td>
<td><input type="text" name="atype" id="atype" placeholder="Enter the
accessory type*" required/></td>
</tr>

<tr>
<td>Purchase date :<br/><input type="date" name="pdate" id="pdate"
placeholder="mm/dd/yyyy" required /></td>
<td>Available from :<br/><input type="date" name="availablefrom"
id="availablefrom" placeholder="mm/dd/yyyy" required /></td>
</tr>

<tr>
<td>Location :</td>
<td><input type="text" name="location" id="location"
placeholder="City,State*" required/></td>
</tr>

<tr>
<td colspan="2">Reason for selling : <textarea rows="4" columns="50"
id="reason" required></textarea></td>
</tr>

<tr>
<td>Price Quoted : </td>
<td> <input type="range" name="price" id="price" min="500"
max="20000" required onchange="show_value(this.value);" >
<span id="demo"></span></td>
</tr>

<tr>
<td colspan="2">Upload pics (in .png format) : <input type="file"
name="pic" id="pic" value="Choose Files" multiple required></td>
</tr>

</table>
<br/>

<p><input type="button" name="submit" id="submit" value="POST PRODUCT" /></p>

</body>
</html>

24.AirFine Airlines: -----

<!DOCTYPE html>
<html>
<body>

<form onsubmit="return display()">

<h3>AirFine AirLines</h3>
<table>
<tr><td>Passenger Name</td><td><input type="text" id="pname"
name="Passenger Name" placeholder="Enter the passenger name"
required=""></td></tr>
<tr><td>Phone Number</td><td><input type="text" id="mobile"
name="mobile" pattern="[789]{1}[0-9]{9}" min="7000000000" max="9999999999"
maxlength="10" placeholder="Enter the phone number" required=""></td></tr>
<tr><td>Ticket Id</td><td><input type="number" id="tid" name="Ticket Id"
placeholder="Enter the ticket id" required=""></td></tr>
<tr><td>Date of Trip</td><td><input type="date" id="tripdate" name="Date
of Trip" required=""></td></tr>
<tr><td>Number of Tickets</td><td><input type="number" id="noOfTickets"
name="Number of Tickets" placeholder="Enter the number of tickets"
required=""></td></tr>
<td>Date of Cancellation</td><td><input type="date" id="cancellationdate"
name="Date of Cancellation" required=""></td></tr>
<tr><td><label>Seat Type</label></td><td>
<select name="Seat Type" id="stype" required="">
<option id="seat" value="seat">Seat Type..</option>
<option id="eco" value="eco">Economy Class Seats</option>
<option id="prem" value="prem">Premium Class Seats</option>
<option id="bus" value="bus">Business Class Seats</option>
<option id="first" value="first">First Class Seats</option>
</select>
</td></tr>
<tr><td><label>Amount Paid</label></td><td><input type="number"
id="amountPaid" name="Amount Paid" placeholder="Enter the amount paid"
required=""></td></tr>

</table>
</br>
<input type="submit" id="submit" value="CONFIRM CANCELLATION">
</br></br>
<div id="result" name="result"></div>
</form>

</style>

}else if(st == "prem"){

conFee = 400;
cp=0.3;

}else if(st == "bus"){

conFee = 500;
cp=0.3;
}
else
{
conFee = 600;
cp=0.4;
}

convFee = not*conFee;
canChr = amtPaid*cp;
refAmt = amtPaid -convFee-canChr;
document.getElementById('result').innerHTML = "Hi "+pName+", your ticket has
been successfully cancelled and the refund amount is Rs."+refAmt;
return false;
}
</script>
</body>
</html>
25.Beauty Care Center - Appointment

<!DOCTYPE html>
<html>
<head>



<title>Beauty Care Center</title>
<style>

::placeholder {
color: #6A5ACD;
opacity: 2;
}

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],

input[type="date"], textarea, select, #services {
width: 85%;
color: #6A5ACD;
font-weight: bold;
background: transparent;
border-radius: 6px;
border-style: solid;
border-width: 2px;
border-color: #FFA07A;
}

input[type="button"] {
background-color: #08088A;
}

input[type="checkbox"]#terms:checked+a {
color: #40ff00;
}

body {
background-color: #000000;
}

h3 {
color: #FFFFFF;
background-color: #2F4F4F;
margin-right: auto;
margin-left: auto;
text-align: center;
width: 35%;
font-family: Verdana;
border-style: 1px solid;
border-radius: 6px;
}

label span{
color: #F0F8FF;
}

table {
width: 30%;
border-style: 3px groove;
margin-right: auto;
margin-left: auto;
border-spacing: 5px;
border-radius: 6px;
}

#appointment td {
width: 1px;
border-style: solid;
color: #F4A460;
padding: 8px;
}

#terms_ref {
color: #00bfff;
}

#submit {
color: #FFEFD5;
font-weight: bold;
background: transparent;
border-radius: 6px;
}

#submit:hover {
background-color: #2E8B57;
color: #FFFFFF;
}

.b {
width: 50%;
margin-left: auto;
margin-right: 14em;
}
</style>
</head>

<!DOCTYPE html>
<html>
<head>
<title>Vision Opticals</title>
<style>
input[type="number"], input[type="text"], input[type="date"],
input[type="email"], input[type="tel"], select {
width:98%;
}

body{
background-image: url("VISION.png");
background-size: 70%;
font-weight: bold;
}

div{
font-size:20px;
color:#FFFFFF;
text-align: center;
margin-left: auto;
margin-right: auto;
}

h3{
font-family: Verdana;
color: #FFFFFF;
background-color: #696969;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 50%;
padding: 5px;
border-radius: 6px;
}

table, td, tr{

border: solid 1px;
width: 50%;

margin-left: auto;
margin-right: auto;
padding: 1px;
border-spacing: 1px;
border-radius: 6px;
color:#696969 ;
background-color: #FFFFFF;
}

::-webkit-input-placeholder {
color: #696969;
font-weight: bold;
}
#submit{
color:#FFFFFF;
background-color:#696969;
font-family: Verdana;
font-weight: bold;
margin-left:auto;
margin-right:auto;
padding: 5px;
width: 50%;
border-radius: 6px;
}
#result1, #result2{
color: #0099FF;
background-color: #FFFFFF;
margin-left:auto;
margin-right:auto;
width:50%;
font-size:20px;
text-align:center;
}

</style>
</head>

<tr>
<td>Phone Number</td>
<td><input type="tel" id="phno" name="phno" placeholder="Phone number"
pattern="[789]{1}[0-9]{9}" maxlength="10" required></td>
</tr>

<tr>
<td>Email ID</td>
<td><input type="email" id="email" name="email" placeholder="Enter the email
id" required></td>
</tr>
<tr>
<td>Spectacle Type</td>
<td><select id="stype" required>
<option value="Select Glass">Select Glass</option>
<option value="Eye Glass">Eye Glass</option>
<option value="Sun Glass">Sun Glass</option>
<option value="Blu 0 Computer Glass">Blu 0 Computer Glass</option>
<option value="Reading Glass">Reading Glass</option>
</select>
</td>
</tr>
<tr>
<td>Frame Brand</td>
<td><select id="brand" required>
<option value="Select Brand">Select Brand</option>
<option value="Vincent Chase">Vincent Chase</option>
<option value="John Jacobs">John Jacobs</option>
<option value="Ray Ban">Ray Ban</option>
<option value="Carrera">Carrera</option>
<option value="Oakley">Oakley</option>
<option value="Vogue">Vogue</option>
</select>
</td>
</tr>
<tr>
<td>Frame Type</td>
<td><select id="ftype" required>
<option value="Select Frame">Select Frame</option>
<option value="Rectangle Frames">Rectangle Frames</option>
<option value="Wayfarer Frames">Wayfarer Frames</option>
<option value="Round Frames">Round Frames</option>
<option value="Aviator Frames">Aviator Frames</option>
<option value="Cat-Eye Frames">Cat-Eye Frames</option>
<option value="Rimless Frames">Rimless Frames</option>
<option value="Half Rim Frames">Half Rim Frames</option>
</select>
</td>
</tr>
<tr>
<td>Frame Color</td>
<td><select id="fcolor" required>
<option value="Select Frame Color">Select Frame Color</option>
<option value="Black">Black</option>
<option value="Brown">Brown</option>
<option value="Grey">Grey</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
</td>
</tr>
<tr>
<td>Glass Category</td>
<td><select id="category" required>
<option value="Select Glass Category">Select Glass Category</option>
<option value="Classic">Classic</option>
<option value="Premium">Premium</option>
<option value="Computer Glass">Computer Glass</option>
</select>
</td>
</tr>
<tr>
<td>Payment Type</td>
<td><select id="ptype" onchange="disableCardDetailsOnCash()" required>
<option value="Debit card / Credit card">Debit card / Credit card</option>
<option value="Cash">Cash</option>
</select>

</td>
</tr>
<tr>
<td>Card No</td>
<td><input type="text" id="cardno" name="cardno" placeholder="Enter the card
no" pattern="[0-9]{4} {0,1}[0-9]{4} {0,1}[0-9]{4} {0,1}[0-9]{4}" maxlength="19" ></td>
</tr>
<tr>
<td>Expiry Date</td>
<td><input type="date" id="edate" name="edate"></td>
</tr>

</table>
<br/>
<p><input type="submit" id="submit" value="CONFIRM ORDER"></p>

<div id="result1"> </div>

27.Discount Price: ----

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
font-style: italic;
font-weight: bold;
text-align: center;
color: #b03060;
}
table{
float: left;
margin-left: 35%;
border-style: solid 5px;
border-spacing: 10px;
border-collapse: collapse;
border-width: 30%;
}
tr,td{
border-style: solid 5px;
border-collapse: collapse;
padding: 10px;
border-style: solid;
border-width: 2px;
border: 5px solid black;
}
#submit{
margin-left: 45%;
}
div{
text-align: center;
font-weight: bold;
}
#result{
font-style: italic;
color: #FF0000;
font-size: 40px;
text-align: center;
font-weight: bold;
}
#discount{
font-size: 25px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body style="background-color:#99FFFF;">
<h1>DISCOUNT PRICE</h1>
<form>
<table>
<tr>
<td>Product Name</td>
<td><input type="text" name="name" id="name" pattern="[a-zA-Z0-9 ]+"
required> </td>
</tr>
<tr>
<td>Product Price</td>
<td><input type="number" id="price" name="price" min="15001"
required></td>
</tr>
<tr>
<td>Season</td>
<td>
<select name="season" id="season">
<option value="summer">SUMMER SALE</option>
<option value="newyear">NEW YEAR SALE</option>
<option value="clearance">CLEARANCE SALE</option>
</select>
</td>
</tr>
</table><br>
<input type="button" name="submit" id="submit" value="GET DISCOUNT
PRICE" onclick="discount()">
</form>
<div id="discount"></div>
<div id="result"></div>
<script>
function discount(){
var p=document.getElementById("price").value;
var s=document.getElementById("season").value;
var d;
if(s=="summer"){
document.getElementById("discount").innerHTML="The discount is 10%";
d=(p-(p*0.1));
}
else if(s=="newyear"){
document.getElementById("discount").innerHTML="The discount is 5%";
d=(p-(p*0.05));
}
else if(s=="clearance"){
document.getElementById("discount").innerHTML="The discount is 15%";
d=(p-(p*0.15));
}
document.getElementById("result").innerHTML="The discounted price : Rs
"+d;
}
</script>
</body>
</html>

28.BOOKS FORM
<html>

<head>

function test(){

alert("You have successfully submitted the Book Form");

return false;

</script>

</head>

<body>

<h1>A Simple Form</h1>

<h2>Form Fundamentals</h2>

<form name="form" autocomplete="on" onsubmit="return test()">

<legend>Customer Info</legend>

<input type="text" id="cusname" name="cusname" placeholder="Enter

your name" autofocus required><br><br>

<label for="telephone">Telephone:</label>

<input type="tel" name="telephone" id="telephone"

placeholder="Pattern: 234-567-8910" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

<label for="mail" >Email address:</label>

</fieldset>

<legend>Books</legend>

<input name="quantity" type="number" max="5" min="1">

<label for="quantity">Quantity: {Maximum 5}</label>

<input list="books" id="book" name="book">

<option value="HTML5 - Bruce Lawson and Remy Sharp">

<option value="HTML5 - Up and Running - Mark Pilgrim">

<option value="Head First HTML5 Programming - Eric Freeman">

<option value="Mastering HTML, CSS and JavaScript - Laura

Lemay">

</datalist>

</fieldset>

<input type="submit" id="submit" name="submit">

</form>

</body>

</form>

</body>

</html>

Outlook inverter

<!DOCTYPE html>
<html>
<head>
<title>Outlook Inverter Palace</title>
<script>

function billCalculation() {
/* Fill the Javascript code to calculate the bill amount */
var Luminous = document.getElementById("luminous").value;
var Microtek = document.getElementById("microtek").value;
var Exide = document.getElementById("exide").value;
var Livguard = document.getElementById("livguard").value;
var Vguard = document.getElementById("vguard").value;
var amount =
(Luminous*4740)+(Microtek*4500)+(Exide*5050)+(Livguard*5600)+(Vguard*5400);
if(amount>5500)
{
var discount = (amount*15)/100;
amount=amount-discount;
}
amount=parseFloat(amount);
document.getElementById("result").innerHTML = "Hi, You have to pay
Rs."+amount.toFixed(2)+". Thanks for selecting us!!!";
return false;
}
</script>

input[type="email"], input[type="tel"], input[type="number"],

input[type="text"],input[type="date"], textarea, select {
width: 85%;
color: #342E53;
font-weight: bold;
background: transparent;
border-radius: 6px;
border-style: solid;
border-width: 2px;
}

input[type="submit"] {
background-color: #08088A;
}
label span {
color: #2E4053;
}
body {
background-color: #9ACD32;
}
h1 {
color: #FFFFFF;
font-family: Arial;
border-style: 1px solid;
border-radius: 6px;
width: 50%;
margin-right: auto;
margin-left: auto;
background-color:#FF8C00;
text-align: center;
}
#result {
font-family:Calibri;
font-weight: bold;
font-size: 24px;
margin-right: auto;
margin-left: 15em;
color: #800000;
}

#submit {
font-weight: bold;
font-family: Times New Roman;
border-radius: 6px;
background: transparent;
margin-right: auto;
width: 13em;
height: 35px;
margin-left: 28em;
}
#reset {
font-weight: bold;
font-family: Times New Roman;
border-radius: 6px;
background: transparent;
margin-right: auto;
width: 13em;
height: 35px;
margin-left: 18em;
}
table {
width: 50%;
margin-right: auto;
margin-left: auto;
border-style: 3px groove;
border-spacing: 5px;
border-radius: 6px;

}
#billing td {
border-width:2px;
border-style: solid;
border-color: #EC7063;
padding: 5px;

}
.b {
width:50%;
margin-left: auto;
margin-right: 14em;
}
#brandName td {
margin-left: auto;
margin-right: auto;
width: 50%;
border-width: 2px;
border-style: solid;
border-spacing: 5px;
border-radius: 6px;
}
#submit:hover, #reset:hover {
background-color: #2E8B57;
color: #FFFFFF;
}

</style>
</head>
<body>

<h1>Outlook Inverter Palace</h1>

<form onsubmit="return billCalculation()">

<table id="billing">
<tr>
<th id="details" colspan="2"></th>
</tr>
<tr>
<td><label><span><b>Name*</b></span></label></td>
<td><input type="text" name="name" id="name"
placeholder="Enter the name" pattern="[a-zA-z]+" required/></td>
</tr>
<tr>
<td><label><span><b>Contact
No*</b></span></label></td>
<td><input type="text" name="contactNo" id="contactNo"
placeholder="Enter the contact no" pattern="[7-9]{1}[0-9]{9}" required/></td>
</tr>
<tr>
<td><label><span><b>E-mail
address</b></span></label></td>
<td><input type="email" name="Email" id="Email"
placeholder="Example:[email protected]" required/></td>
</tr>
<tr>
<td>

<label><span><b>Brand Name</b></span></label>
</td>
<td>
<table id="brandName">
<tr>

<td><label><span><b>Luminous</b></span></label></td>
<td><input type="number"
name="luminous" id="luminous" min="0" required/></td>
</tr>
<tr>

<td><label><span><b>Microtek</b></span></label></td>
<td><input type="number" name="microtek"
id="microtek" min="0" required/></td>
</tr>
<tr>

<td><label><span><b>Exide</b></span></label></td>
<td><input type="number" name="exide"
id="exide" min="0" required/></td>
</tr>
<tr>

<td><label><span><b>Livguard</b></span></label></td>
<td><input type="number" name="livguard"
id="livguard" min="0" required/></td>
</tr>
<tr>

<td><label><span><b>V-Guard</b></span></label></td>
<td><input type="number" name="vguard"
id="vguard" min="0" required/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><label><span><b>Date of
Booking*</b></span></label></td>
<td><input required type="date" name="Date" id="Date"
/></td>
</tr>
<tr>
<td><label><span><b>Address</b></span></label></td>
<td><textarea id="address" required rows="5" cols="25"
placeholder="Enter your address"></textarea></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" id="submit" value="Submit"/></td>
<td><input type="reset" id="reset" value="Clear" /></td>
</tr>
</table>
<p class="b"><div class="b" id="result"></div>
</form>
</body>
</html>
JAVASCRIPT

YORK ADMISSION
<!DOCTYPE html>

<html>

<head>

<title>York Admission</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function display()

var name = document.getElementById("sname").value;

var dept = document.getElementById("deptname");

var deptname = dept.options[dept.selectedIndex].text;

var yes = document.getElementById("yes").checked;

var firstGraduate = document.getElementById("firstGraduate").checked;

var fs = 0;

if(firstGraduate){

fs = 20000;

}
var af = 30000;

var tf = 0;

var hf = 0;

if(yes){

if(deptname == 'EEE' || deptname == 'CSE' || deptname == 'IT'){

tf = 45000;

hf = 75000;

}else if(deptname == 'ECE' || deptname == 'CIVIL'){

tf = 50000;

hf = 75000;

}else{

tf = 55000;

hf = 75000;

}else{

if(deptname == 'EEE' || deptname == 'CSE' || deptname == 'IT'){

tf = 45000;

}else if(deptname == 'ECE' || deptname == 'CIVIL'){

tf = 50000;

}else{

tf = 55000;

}
}

var total = parseInt(af) + parseInt(tf) + parseInt(hf) - parseInt(fs);

var display_text = "<p>Hi " + name +",<br>" +

"Your Admission Fee is Rs."+ af +"<br>" +

"Tution Fee is Rs."+ tf +"<br>"+

"Hostel Fee is Rs."+ hf +"<br>"+

"Total College Fee is Rs."+ total+"</p>";

document.getElementById("result").innerHTML = display_text;

return false;

</script>

<style>

input[type="number"] {

width:98%;

input[type="text"] {

width:98%;

input[type="date"] {
width: 98%;

input[type="email"] {

width:98%;

input[type="tel"] {

width: 98%;

select {

width: 98%;

body{

background-size: 70%;

font-weight: bold;

background-position: center;

background-repeat: no-repeat;

/* Fill the attributes and values */

div{

font-size: 20px;

text-align: center;

margin-left: auto;

margin-right: auto;
/* Fill the attributes and values */

h3{

color: #ffffff;

background-color: #00ccff;

margin-left: auto;

margin-right: auto;

text-align: center;

width: 50%;

font-family: Verdana;

padding: 5px;

border-radius: 6px;

/* Fill the attributes and values */

table, td, tr{

width: 50%;

border-style: solid 1px;

margin-right: auto;

margin-left: auto;

border-spacing: 1px;

border-radius: 6px;

color: #009900;
background-color: #f2f2f2;

padding: 1px;

/* Fill the attributes and values */

::-webkit-input-placeholder {

color: #696969;

font-weight: bold;

#submit{

color:#ffffff;

background-color: #00CCFF;

margin-left: auto;

margin-right: auto;

padding: 5px;

width:50%;

font-family: Verdana;

font-weight: bold;

border-radius: 6px;

/* Fill the attributes and values */

#result{

color: #00cc66;
background-color: #ffffff;

margin-left: auto;

margin-right: auto;

padding: 5px;

width: 50%;

font-size: 20px;

/* Fill the attributes and values */

</style>

</head>

<body>

<div>

<h3>York Admission</h3>

</tr>

<tr>

<td>Prefer College Hostel</td>

<td><input type="radio" id="yes" name="preferHostel" required="required">Yes

<input type="radio" id="no" name="preferHostel" required="required">No</td>

</tr>

<tr>

<td>First Graduate</td>

<td><input type="checkbox" id="firstGraduate" name="firstGraduate">Click if you are first

graduate</td>

</tr>

</table>

<p><input id="submit" type="submit" value="CONFIRM ADMISSION"></p>

<div id="result"> </div>

</form>

</div>

</body>

</html>
We-Host Server Resellers - Purchase Entry

<!DOCTYPE html>

<html>

<head>

<!-- Do specify all the component-ids (incl. div ids) correctly for your code to get evaluated successfully --
>

<title>We-Host Server Resellers - Purchase Entry</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function show_value(x)

document.getElementById("demo").innerHTML=x;

function display()

/* Fill the Javascript code to display the purchase entry inclusive of tax */

var server = document.getElementById("stype").value;

var config = document.getElementById("configuration").value;

var payment = document.getElementById("ptype").value;

var tax = document.getElementById("tax").value;

var cost = document.getElementById("cost").value;

var total = parseFloat(cost) *(1 + (parseFloat(tax)/100));

total = Math.round(total);

document.getElementById("result1").innerHTML = "Purchase of a "+server+"

with "+config+" has been logged ! ";

document.getElementById("result2").innerHTML = "An amount of Rs. "+total+",

inclusive of tax has been received by "+payment;

return false;

function today()

var x = new Date();

document.getElementById("pdate").value = x.getFullYear()+'-
'+("0"+(x.getMonth()+1)).slice(-2)+'-'+("0"+x.getDate()).slice(-2);

function disableCardDetailsOnCash()

if (document.getElementById("ptype").value == "Cash")

document.getElementById("cardno").disabled=true;

document.getElementById("edate").disabled=true;

else

{
/* Fill the Javascript code to set disable on cardno and edate fields as
false when ptype is Card */

document.getElementById("cardno").disabled=false;

document.getElementById("edate").disabled=false;

</script>

<style>

input[type="text"] {

width: 97%;}

input[type="number"] {

width: 97%;}

input[type="tel"] {

width: 97%;}

body{

background-size: 100%;

font-weight: bold;

div{

font-size: 20px;
color: #FFFFFF;

text-align: center;

margin-left: auto;

margin-right: auto;

h3{

color: #FFFFFF;

background-color: #000080;

margin-left: 25%;

margin-right: auto;

text-align: center;

width: 50%;

font-family: Verdana;

padding: 5px;

border-radius: 6px;

table, td, tr{

border : solid 1px;

width: 50%;

margin-left: auto;

margin-right: auto;

border-spacing: 1px;

border-radius: 6px;
color: #000080;

background-color: #FFFFFF;

padding: 1px;

::-webkit-input-placeholder {

color: #808080; }

#submit{

color: #FFFFFF;

background-color: #000080;

margin-left: 25%;

margin-right: auto;

padding: 5px;

width: 50%;

font-family: Verdana;

font-weight: bold;

border-radius: 6px;

</style>

</head>

<body>
<h3>We-Host Server Resellers - Purchase Entry</h3>

<form onsubmit="return display()" >

<table>

<tr>

<td>Purchase Date</td>

<option value="Select Server Type..">Select Server Type..</option>

<option value="Dedicated Server">Dedicated Server</option>

<option value="Storage Server">Storage Server</option>

<option value="Database Server">Database Server</option>

</select>

</td>

</tr>

<tr>

<td><select name="model" id="model" required>

<option value="Select no of cores..">Select no of cores..</option>

<option value="2 cores">2 cores</option>

<option value="4 cores">4 cores</option>

<option value="6 cores">6 cores</option>

<option value="8 cores">8 cores</option>

</select>

</td>

</tr>

<tr>

<td>Configuration</td>

<td><select name="configuration" id="configuration" required>

<option value="Select configuration..">Select configuration..</option>

<option value="4 GB RAM & 300 GB SSD-boosted Disk Storage">4 GB RAM & 300 GB SSD-boosted
Disk Storage</option>

<option value="10 GB RAM & 700 GB SSD-boosted Disk Storage">10 GB RAM & 700 GB SSD-
boosted Disk Storage</option>

<option value="20 GB RAM & 1400 GB SSD-boosted Disk Storage">20 GB RAM & 1400
GB SSD-boosted Disk Storage</option>
</select>

</td>

</tr>

<tr>

<td>Prepayment Period (in months)</td>

<td><select name="period" id="period" required>

<option value="Select prepayment period..">Select prepayment period..</option>

<option value="1 month">1 month</option>

<option value="3 months">3 months</option>

<option value="6 months">6 months</option>

<option value="12 months">12 months</option>

</select>

</td>

</tr>

<tr>

<td>Purchase Cost</td>

<td><input type="range" name="cost" id="cost" value="" min="900" max="5000"

onchange="show_value(this.value);" required/>

<tr>

<td><input type="number" name="tax" id="tax" placeholder="“Enter the tax %" required/></td>

</tr>

</table>

<input type="submit" name="submit" id="submit" value="CONFIRM PURCHASE" />

<div id="result1"> </div>

<div id="result2"> </div>

</form>

</body>

</html>
PIGGY BANK DEPOSIT AUTOMATION
<!Doctype html>

<html>

<head>

body{

background-color:#F0E68C;

#discounttable{

border-style:solid;

float:right;

h1{

color:#800080;

font-family:cursive;

text-align:center;

header{

float:right;

</style>

function calculateTotalSavings(){

var amt =document.getElementsByName('amount')[0].value;

var tenur=document.getElementsByName('tenure')[0].value;
var saving_bank=document.getElementsByName('savingType')[0].value;

var totalSavings;

if(document.getElementById("NormalCitizen").checked && saving_bank=='FD' && tenur <= 2){

totalSavings=(amt*tenur*7)/100+parseInt(amt);

else if(document.getElementById("NormalCitizen").checked && saving_bank=='FD' && tenur > 2 &&

tenur <= 4){

totalSavings=(amt*tenur*7.5)/100+parseInt(amt);

else if(document.getElementById("NormalCitizen").checked && saving_bank=='FD' && tenur > 4 &&

tenur <= 5){

totalSavings=(amt*tenur*8)/100+parseInt(amt);

else if(document.getElementById("NormalCitizen").checked && saving_bank=='RD' && tenur<= 2){

totalSavings=(amt*tenur*6.5)/100+parseInt(amt);

else if(document.getElementById("NormalCitizen").checked && saving_bank=='RD' && tenur > 2 &&

tenur <= 4){

totalSavings=(amt*tenur*6)/100+parseInt(amt);

else if(document.getElementById("NormalCitizen").checked && saving_bank=='RD' && tenur > 4 &&

tenur <= 5){
totalSavings=(amt*tenur*5.5)/100+parseInt(amt);

else if(document.getElementById("SeniorCitizen").checked && saving_bank=='FD' && tenur <= 2){

totalSavings=(amt*tenur*7.5)/100+parseInt(amt);

else if(document.getElementById("SeniorCitizen").checked && saving_bank=='FD' && tenur > 2 &&

tenur <= 4){

totalSavings=(amt*tenur*8)/100+parseInt(amt);

else if(document.getElementById("SeniorCitizen").checked && saving_bank=='FD' && tenur > 4 &&

tenur <= 5){

totalSavings=(amt*tenur*8.5)/100+parseInt(amt);

else if(document.getElementById("SeniorCitizen").checked && saving_bank=='RD' && tenur<= 2){

totalSavings=(amt*tenur*7)/100+parseInt(amt);

else if(document.getElementById("SeniorCitizen").checked && saving_bank=='RD' && tenur > 2 &&

tenur <= 4){

totalSavings=(amt*tenur*6.5)/100+parseInt(amt);

}
else if(document.getElementById("SeniorCitizen").checked && saving_bank=='RD' && tenur > 4 &&
tenur <= 5){

totalSavings=(amt*tenur*6)/100+parseInt(amt);

document.getElementById("result").innerHTML="Total Savings done "+totalSavings;

</script>

</head>

<body>

<h1>PIGGY BANK SAVINGS CALCULATOR</h1>

<form onsubmit="return false">

<table>

<tr><td>Customer Name</td>

<td><input type="text" placeholder="Enter the Customer Name" name="customerName" pattern="[a-

zA-Z ]+" required > </td>

</tr>

<tr>

<td>Customer Type</td>

<td><input type="radio" id="NormalCitizen" value="Normal Citizen" name="customerType"

required>Normal Citizen

<input type="radio" id="SeniorCitizen" value="Senior Citizen" name="customerType" required>Senior

Citizen</td>

</tr>

<tr>
<td>Address & ID Proof</td>

<td><input type="checkbox" id="Address & ID Proof" name="addressProof" value="addressProof">

<label for="Address & ID Proof"> Aadhar Card</label>

<input type="checkbox" id="vehicle1" name="addressProof" value="addressProof">

<label for="Address & ID Proof"> Pan Card</label>

<input type="checkbox" id="vehicle1" name="addressProof" value="addressProof">

<label for="Address & ID Proof"> Driving License</label>

<input type="checkbox" id="vehicle1" name="addressProof" value="addressProof">

<label for="Address & ID Proof">Passport</label>

<input type="checkbox" id="vehicle1" name="addressProof" value="addressProof">

<label for="Address & ID Proof">Voter Id</label></td>

</tr>

<tr>

<td>Mobile Number</td>

<td><input type="tel" placeholder="Enter the Mobile Number" name="customerMobileNumber"

pattern="[789]{1}[0-9]{9}" required></td>

</tr>

<tr>

<td>Type of Savings</td>

<td> <input type="text" name="savingType" list="savings">

</datalist>

</td>

</tr>
<tr><td>Amount</td>

<td><input type="number" placeholder="Enter the Amount" name="amount" min="500"

required></td>

</tr>

<tr>

<td>Tenure</td>

<td><input type="number" required min="1" max="5" value="1" name="tenure" id="tenure" >

</td>

</tr>

<input type="submit" onclick="calculateTotalSavings()" name="submit" value="Calculate Savings">

</td><td><input type="reset" name="reset" value="Reset"></td></tr>

</table>

</form>

<table id="discounttable" border="1">

<caption>Interest Rate Chart</caption>

<thead>

<tr>

<th>Deposit Type</th>

<th>Tenure</th>

<th>Interst Rate</th>

</tr>

</thead>

<tbody>

<td>1 to 2 years</td>

</html>
OUTLOOK FAN MARKET
<!DOCTYPE html>

<html>

<head>

<title>Outlook Fan Market</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function billCalculation() {

var uprice = document.getElementById("usha").value;

var bprice = document.getElementById("bajaj").value;

var oprice = document.getElementById("orient").value;

var hprice = document.getElementById("havells").value;

var cprice = document.getElementById("crompton").value;

var lprice = document.getElementById("luminous").value;

var mprice = document.getElementById("maharaja").value;

var total = uprice*1999 + 1500*bprice + 2100 * oprice + 1785 * hprice + 1960 * cprice + 1655 *
lprice + 2249 * mprice;

if(total>5500){

total -= total * 0.15;

}
total = Math.round(total);

var text = "Hi, You have to pay Rs."+total+". Thanks for selecting us!!!";

document.getElementById("result").innerHTML = text;

return false;

</script>

::placeholder {

color: #6A5ACD;

opacity: 2;

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],input[type="date"],

textarea, select {

width: 85%;

color: #808B96;

font-weight: bold;

border-radius: 6px;

border-style: solid;

border-width: 2px;

border-color: #FFA07A;

input[type="submit"] {

background-color: #08088A;
}

label span {

color: #F0F8FF;

body {

background-color: #2E4053;

h1 {

/* Fill the attributes and values */

color: #FFFFFF;

font-family: Verdana;

border-style: 1px solid;

border-radius: 6px;

width: 50%;

margin-left: auto;

margin-right: auto;

background-color: #1A5276;

text-align: center;

#result {

/* Fill the attributes and values */

font-weight: bold;

font-family: Bahnschrift;

font-size: 24px;

margin-left: 18em;
margin-right: auto;

color: #B3B6B7;

#submit {

/* Fill the attributes and values */

font-weight: bold;

color: #FFEFD5;

font-family: Bahnschrift;

background-color: transparent;

margin-right: auto;

height: 35px;

width: 13em;

margin-left: 35em;

#reset {

/* Fill the attributes and values */

font-weight: bold;

color: #FFEFD5;

font-family: Bahnschrift;

background-color: transparent;

margin-right: auto;

height: 35px;

width: 13em;

margin-left: 18em;
}

table {

width: 50%;

margin-right: auto;

margin-left: auto;

border-style: 3px groove;

border-spacing: 5px;

border-radius: 6px;

#billing td {

border-width: 1px;

border-style: solid;

border-color: #F4A460;

padding: 5px;

.b {

width: 50%;

margin-left: auto;

margin-right: 14em;

#brandName td {

margin-left: auto;

margin-right: auto;

width: 50%;
border-width: 1px;

border-style: solid;

border-spacing: 5px;

border-radius: 6px;

#submit:hover, #reset:hover {

background-color: #2E8B57;

color: #FFFFFF;

</style>

</head>

<body>

<h1> Outlook Fan Market </h1>

<form onsubmit="return billCalculation()" >

<tr>

<th id="details" colspan="2"></th>

</tr>

<tr>

<td>

</td>

<td>

<input type="text" name="name" id="name" pattern="[a-zA-

Z\s]+" value="" placeholder="Enter the name" required />

</td>

</tr>

<tr>

<td>

<label for="contactNo"><span><b>Contact
No*</b></span></label>

</td>

<td>

<input type="number" name="contactNo" id="contactNo"

pattern="^[7-9]\d{9}$" placeholder="Enter the contact no" value="" required />

</td>

</tr>

<td>

<label
for="bajaj"><span><b>Bajaj</b></span></label>

</td>

<td>

<input type="number" name="bajaj"

id="bajaj" value="" min="0" required />

</td>

</tr>

<tr>

<td>

<label
for="orient"><span><b>Orient</b></span></label>

</td>

<td>

<input type="number" name="orient"

id="orient" value="" min="0" required />

</td>

</tr>
<tr>

<td>

<label
for="havells"><span><b>Havells</b></span></label>

</td>

<td>

<input type="number" name="havells"

id="havells" value="" min="0" required />

</td>

</tr>

<tr>

<td>

<td>

<label
for="maharaja"><span><b>Maharaja</b></span></label>

</td>

<td>

<input type="number" name="maharaja"

id="maharaja" value="" min="0" required />

</td>

</tr>

</table>
</td>

</tr>

<tr>

<td>

<label for="date"><span><b>Date of
Booking*</b></span></label>

</td>

<td>

<input type="date" name="date" id="date" value="" required />

</td>

</tr>

<tr>

<td>

<label for="address"><span><b>Address</b></span></label>

</td>

<td>

<textarea name="address" id="address" rows="5" cols="25"

placeholder="Enter your address" required></textarea>
</td>

</tr>

</table>

<tr>

<td>

<input type="submit" name="submit" id="submit" value="Submit" />

</td>

<td>

<input type="reset" name="reset" id="reset" value="Clear" />

</td>

</tr>

</div>

</p>

</form>

</body>

</html>
KASA IT FINISHING SCHOOL – FEEDBACK AUTOMATION
<!DOCTYPE html>

<html>

<head>

body{

background-color: #FFAACC;

color: #770080;

font-family: Courier New;

font-style: italic;

text-align: center;

form

margin :0 auto;

width:300px;

}
#result

color: #770080;

font-weight: bold;

</style>

<title>Infotech College</title>

function calculateFeedbackRating()

var r=document.getElementById('cat').value;

var rate;

if(r=="Excellent") rate=5;

else if(r=="Very Good") rate=4;

else if(r=="Good") rate=3;

else if(r=="Average") rate=2;

else if(r=="Below Average") rate=1;

var trainer=document.getElementById('trainerName').value;

document.getElementById('result').innerHTML="Feedback rating of "+trainer+" is "+rate;

return false;

}
</script>

</head>

<body>

<h1>College Training Feedback Form </h1>

<form onsubmit="return calculateFeedbackRating()" >

<table>

<tr>

<td>Participant Name</td>

<td><input type="text" name="participantName" placeholder="Enter your name" required></td>

</tr>

<tr>

<td>College Name</td>

<td><input type="text" name="collegeName" required></td>

</tr>

<tr>

<td>Participant Address</td>

<td><textarea name="participantAddress" rows="5" cols="20" required></textarea></td>

</tr>
<tr>

<td>Gender</td>

<td>

<input type="radio" name="gender" value="male" required>Male

<input type="radio" name="gender" value="female" required>Female

</td>

</tr>

<tr>

<td>Email ID</td>

<td><input type="email" name="email" required></td>

</tr>

<tr>

<td>Mobile Number</td>

<td><input type="text" name="mobileNumber" pattern="[789][0-9]{9}" required></td>

</tr>

<tr>

<td>Trainer’s Name</td>

<td><input type="text" name="trainerName" id="trainerName" required></td>

</tr>

<tr>

<td>Course Name</td>
<td><input type="text" name="courseName" required></td>

</tr>

<tr>

<td>Course Completion date</td>

<td><input type="date" name="dateofcompletion" required></td>

</tr>

<tr>

<td>Trainer's Feedback</td>

<td><input name="trainerFeedback" id="cat" list="feedback">

<option value="Excellent">Excellent</option>

<option value="Very Good">Very Good</option>

<option value="Average">Average</option>

<option value="Below Average">Below Average</option>

</datalist>

</td>

</tr>

<tr>

<td><input type="submit" name="submit" value="Submit Feedback"

onclick="calculateFeedbackRating()"></td>
<td><input type="reset" name="reset" value="Clear"></td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>
GOOD HARVEST RICE STORE
<!DOCTYPE html>

<html>

<head>

<title>Good Harvest Rice Store</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function billCalculation() {

var result=document.getElementById("result");

var a =parseInt(document.getElementById("arborioRice").value);

var bas=parseInt(document.getElementById("basmatiRice").value);

var bl =parseInt(document.getElementById("blackRice").value);

var j =parseInt(document.getElementById("jasmineRice").value);

var br =parseInt(document.getElementById("brownRice").value);

var r =parseInt(document.getElementById("redRice").value);

var c =parseInt(document.getElementById("calroseRice").value);

var d =parseInt(document.getElementById("distance").value);

var amount=(600*a)+(200*bas)+(275*bl)+(260*j)+(135*br)+(100*r)+(300*c)+(22*d);

var name=document.getElementById("customerName").value;
result.innerHTML="Hi "+name+", You have to pay Rs."+amount.toFixed(2)+".Thanks for visiting
us!!!";

return false;

</script>

body{

background-color: #9ACD32;

h1 {

color: #FFFFFF;

font-family: Arial;

font-style: italic;

background-color: #FF8C00;

text-align: center;

#result {

font-size: 24px;

color: #800000;

display: block;

width: 90%;

font-family: calibri;

position: absolute;
font-weight: bold;

#submit, #reset {

font-weight: bold;

font-family: Times New Roman;

background-color: #FFA07A;

width: 13em;

height: 35px;

input[type="text"],input[type="tel"] {

width:13em;

input[type="number"]{

width:2cm;

#billing {

font-family:sans-serif;

width:80%;

border-collapse:collapse;

#types, #types td {

border-color: rgba(255, 255, 255, 1);

border-style: solid;

border-width: 1px;

padding: 5px;

background-color: #F4A460;

border-collapse: collapse;

td{

padding: 5px;

</style>

</head>

<body>

<h1>Good Harvest Rice Store</h1>

<form id="form_1" onsubmit="return billCalculation()" name="riceForm">

<tr>

<td><label for="customer name">Customer Name</label></td>

<td><input type="text" name="customer name" id="customerName" placeholder="Enter your

name" required> </td>

</tr>
<tr>

<td><label for="contact number">Contact No</label></td>

<td><input type="tel" name="contact number" id="contactNo" placeholder="Enter your mobile

number" required></td>

</tr>

<tr>

<td><label for="Date of order received">Date of order received</label> </td>

<td><input type="date" name="date of order received" id="bookingDate" required></td>

</tr>

<tr>

<td><label for="Rice type and quality">Rice type & quantity</label></td>

<td>

<tr>

<td><label for="Arborio rice">Arborio rice</label></td>

<td><input type="number" min="0" max="" name="Arborio rice" id="arborioRice"

required></td>

<tr>

<td><label for="Basmati rice">Basmati rice</label></td>

<td><input type="number" min="0" max="" name="Basmati rice" id="basmatiRice"

required></td>

</tr>
<tr>

<td><label for="Black rice">Black rice</label></td>

<td><input type="number" min="0" max="" name="Black rice" id="blackRice" required></td>

</tr>

<tr>

<td><label for="Jasmine rice">Jasmine rice</label></td>

<td><input type="number" min="0" max="" name="Jasmine rice" id="jasmineRice"

required></td>

</tr>

<tr>

<td><label for="Brown rice">Brown rice</label></td>

<td><input type="number" min="0" max="" name="Brown rice" id="brownRice" required></td>

</tr>

<tr>

<td><label for="Red rice">Red rice</label></td>

<td><input type="number" min="0" max="" name="Red rice" id="redRice" required></td>

</tr>

<tr>

<td><label for="Calrose rice">Calrose rice</label></td>

<td><input type="number" min="0" max="" name="Calrose rice" id="calroseRice" required></td>

</tr>
</table>

</td>

</tr>

<tr>

<td><label for="Address">Address</label> </td>

<td><textarea id="address" name="Address" rows="5" cols="25" placeholder="Enter your

Address" required></textarea> </td>

<input type="reset" name="Clear" id="reset" value="Clear">

</td>
</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>
E-BOOK PORTAL
<html>

<style>

body{

background-color:#E6E6FA;

#discounttable{

border-style:solid;

float:right;

h1{

color:#800080;

font-family:cursive;

text-align:center;

h2{

text-align:center;

</style>

function validate()

var bcats=document.getElementsByName("bookCategory");

var bcat;

var price;
var disc;

for(var i=0;i<bcats.length;i++)

if(bcats[i].checked)

bcat=bcats[i].value;

var bcount=document.getElementById("bookval").value;

bcount=parseInt(bcount);

if(bcat=="Science")

price=400;

if(bcount<=250)

disc=5;

else{

disc=7;

else{

price=300;

if(bcount<=250)

{
disc=3;

else{

disc=4;

var tot=bcount*price-((bcount*price*disc)/100);

document.getElementById("result").innerHTML="Total Price is:"+tot;

</script>

</head>

<body>

<h1>E-BOOK GRAND SALE</h1>

<table>

<tr>

<td>Customer Name</td>

<td><input type="text" name="customerName" placeholder="Enter the Customer Name"

pattern="[a-zA-Z\s]+" required></td>

</tr>

<tr>

<td>Email ID</td>

<td><input type="email" name="email" required></td>

</tr>

<tr>
<td>Mobile Number</td>

<td><input type="tel" name="customerMobileNumber" placeholder="Enter the Mobile

Number" pattern="[89][0-9]{9}" required></td>

</tr>

<tr>

<td>Book Category</td>

<td>

<input type="radio" name="bookCategory" value="Science" required>Science

<input type="radio" name="bookCategory" value="Comics" required>Comics

</td>

</tr>

<tr>

<td>

<input list="bookTypes" name="bookType" required auto-complete >

<datalist id="bookTypes" >

<option value="Weekly">Weekly</option>

<option value="Monthly">Monthly</option>

<option value="Fortnightly">Fortnightly</option>

</datalist>

</td>

</tr>

<tr>

<td>No of Books Required</td>

<td><input type="range" name="bookCount" id="bookval" min="1" max="500" value="1"

oninput="markOutputId.value=bookval.value" required>
<output name="markOutputName" id="markOutputId"></output></td>

</tr>

<tr>

<td><input type="button" name="submit" value="Calculate Total Price"

onclick="validate()"></td>

<td><input type="reset" name="reset" ></td>

</tr>

</table>

</form>

<table id="discounttable" border="1px">

<caption>Discount Rate Chart</caption>

</table>

</body>

</html>
DREAM THEME PARK TICKET BOOK AUTOMATION
<!DOCTYPE html>

<html>

<head>

body{

background-color: #FFAACC;

color:#770080;

font-family:courier new;

font-style:italic;

text-align:center;

form

margin :0 auto;

width:300px;

}
#result

color:#770080;

font-weight:bold;

</style>

<title>DREAM Theme Park</title>

function calculateCharges()

var customerName=document.getElementById("customerName").value;

var bookingType=document.getElementById("bookingType").value;

var adult=document.getElementById("adults").value;

var children=document.getElementById("children").value;

var ticketCost=0;

var discount=0;

var result = 0;

ticketCost=adult*1500 + children*1200;

if(bookingType == "School"){

discount = ticketCost*0.5;

result = ticketCost-discount;
}

else if(bookingType == "Corporate"){

discount = ticketCost*0.25;

result = ticketCost-discount;

else if(bookingType=="Normal"){

result = ticketCost;

//alert(bookingType);

document.getElementById("result").innerHTML = "Thank you "+customerName+". Total cost to be paid

is "+result;

return false;

</script>

<input type="radio" name="location" id="locationMumbai" value="Mumbai" required>Mumbai

</td>

</tr>

<tr>
<td>Date of Visit</td>

<td><input type="date" name="dateOfVisit" id="dateOfVisit" required/> </td>

</tr>

<tr>

<td>Booking Type</td>

<td><input name="bookingType" id="bookingType" list="bookType" required>

</datalist>

</td>

</tr>

<tr>

<td>Adult</td>

<td><input type="number" name="adults" id="adults" min="0" max="500" required/> </td>

</tr>

<tr>

<td>Children</td>

<td><input type="number" name="children" id="children" required/> </td>

</tr>
<tr>

<td><input type="submit" value="Book Now" name="submit"> </td>

<td><input type="reset" value="Clear"> </td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>
DISCOUNT PRICE AUTOMATION
<html>

<head>

<title>

discount price

</title>

function CalculateDiscount(){

var discount,discountPrice;

var price = Number(document.getElementById("price").value);

</script>
<style>

body{

background-color: #99FFFF;

h1{

font-style: italic;

text-align: center;

color: #b03060;

table{

margin-left: 35%;

border-style: 5px solid;

border-width: 30%;

border-collapse: collapse;

td{

border-style: solid;

padding: 10px;

div{

text-align: center;

font-weight: bold;

#discount{

font-size: 25px;
}

#result{

font-style: italic;

color: #FF0000;

font-size: 40px;

</style>

</head>

<body>

<h1>Discount Price</h1>

<form onsubmit="return CalculateDiscount()">

<table>

<tr>

<td><label for="name">Product Name</label></td>

<td><input type="text" id="name" name="name" required pattern="[a-zA-Z][a-zA-

Z\s]+"/></td>

</tr>

<tr>

<td><label for="price">Product Price</label></td>

<td><input type="number" id="price" name="price" min="15001" required/></td>

</tr>

<tr>

<td><label for="season">Season</label></td>

<td><select id="season" name="season" required>

<option value="summer">SUMMER SALE</option>

<option value="clearance">CLEARANCE SALE</option>

</select></td>

</tr>

</table>

<input type="submit" id="submit" name="submit" value="GET DISCOUNT PRICE"/>

</form>

</body>

</html>
DAC BANK LOAN AUTOMATION
<html>

<head>

<style>

body {

background-color: #FFAACC;

h1 {

color: #770080;

font-family: cursive;

text-align: center;

#result{

font-weight: bold;

color: #770080;

</style>

function display(){

var name=document.getElementsByName("customerName")[0].value;

var amount=document.getElementsByName("loanamount")[0].value;

9]{9}" maxlength="10">

</td>

</tr>

<tr>

<td>Date Of Birth</td>

<td>

<input type="date" name="dob" id="dob">

</td>

</tr>

<tr>

<td>

<input list="loan" name="loanType" autocomplete="on">

<option value="Vehicle">Vehicle</option>
<option value="Home">Home</option>

<option value="Education">Education</option>

</datalist>

</td>

</tr>

<tr>

<td>Loan Amount</td>

<td>

<input type="text" name="loanamount" id="loanamount" placeholder="Enter the

amount" required>

</td>

</tr>

<tr>

<td>Tenure</td>

<td>

<input type="number" name="loanTenure" id="loan" min="1" max="5">

</td>

</tr>

<tr>

<td>

<input type="button" name="submit" value="Avail Loan" onclick="display()">

</td>

<td>

<input type="reset" name="reset" value="reset" >

</td>

</tr>
</table>

</center>

</form>

</body>

</html>
BROADBAND PAYMENT PORTAL
<html>

<head>

<style>

h1{

color:#660066;

text-align: center;

font-family:verdana;

body

background-color: #ff9999;

<tr>

<td> <label>Plan Name</label></td>

<td>

<input type="radio" id="type1" name="plan" value="Sprint 200 GB" required>

<label for="type1">Sprint 200 GB</label>

<input type="radio" id="type2" name="plan" value="Bolt 200 GB" required>

<label for="type2">Bolt 200 GB</label>

<label for="type3">Rush 500 GB</label>

<input type="radio" id="type4" name="plan" value="Speed 500 GB" required>

<label for="type4">Speed 500 GB</label>

</td>

</tr>

<tr>

<td><label>Payment for</label></td>

<td><input type="number" name="payment" id="payment" min="3" max="12"

required></td>

</tr>

<tr>

<td><button type="submit" name="submit" id="submit" value="submit" >Calculate Bill

Amount</button></td>

<td><input type="reset" id="clear" name="clear" value="Reset" ></td>

</tr>

<tr>

<td colspan="2"><div type="number" name="result" id="result"></div></td>

</tr>

</table>

</form>

function costCalculation()

var payment=document.getElementById("payment").value;
var MR=document.getElementById("bandType").value;

var CTC=0;

var montrent=0;

var total=0;

if(MR=="Normal")

montrent=150;

if(MR=="ADSL")

montrent=200;

if(MR=="DSL")

montrent=300;

if(document.getElementById("type1").checked)

CTC=349;

if(document.getElementById("type2").checked)

CTC=499;

if(document.getElementById("type3").checked)
{

CTC=949;

if(document.getElementById("type4").checked)

CTC=1299;

total=( montrent * payment)+CTC;

document.getElementById("result").innerHTML="The bill amount is Rs "+total;

return false;

</script>

</body>

</html>
AC MAINTAINANCE SERVICE
<!DOCTYPE html>

<html>

<head>

<title>AC Maintenance Service</title>

// Do not use let keyword to initialize a javascript variable. Instead use var.

function bookAppointment() {

/* Fill the Javascript code calculating the service charge and display the required appiontment
details */

var customerName=document.getElementById("customerName").value;

var acType=document.getElementById("acType").value;

var serviceType=document.getElementById("serviceType").value;

var email=document.getElementById("email").value;

var serviceCharge=0;

if(serviceType=="Cleaning")

serviceCharge=500;

if(serviceType=="Repair")

serviceCharge=1000;

if(serviceType=="Gas Refill")
serviceCharge=1500;

if(document.getElementById("yearlyMaintenance").checked)

serviceCharge+=1000;

document.getElementById("result").innerHTML="Hello "+customerName+", your service

appointment for "+acType+" AC "+serviceType+" with yearly maintenance will be send to your email ID
"+email+" and the estimated service charge will be Rs "+serviceCharge;

else

document.getElementById("result").innerHTML="Hello "+customerName+", your service

appointment for "+acType+" AC "+serviceType+" without yearly maintenance will be send to your email
ID "+email+" and the estimated service charge will be Rs "+serviceCharge;;

return false;

</script>

body {

/* Fill attributes and values */

background-color: #0ca2b9;

width: 80%;

margin-left: 10%;

h1 {
/* Fill attributes and values */

color: #FFFFFF;

font-family: Calibri;

font-style: italic;

background-color: #900043;

text-align: center;

#result {

/* Fill attributes and values */

font-weight: bold;

font-family: Arial;

font-size: 24px;

color: #782e07;

#submit, #reset {

/* Fill attributes and values */

font-weight: bold;

font-family: Candara;

background-color: #556b2f;

width: 10em;

height: 35px;

border-radius: 10px;

}
input {

width:13.6em;

#appointment {

font-family:sans-serif;

width:80%;

border-collapse:collapse;

text-align:left;

#acType, textarea{

width:13.6em;

select {

width:14em;

td{

padding:3px;

#male, #female, #yearlyMaintenance {

width:10pt;

</style>

</head>

<body>
<h1> AC Maintenance Service</h1>

<form onsubmit="return bookAppointment()" >

<tr>

<td> <label>Customer Name</label> </td>

</tr>

<tr>

<td> <label>Gender</label> </td>

<td>

<input type="radio" id="male" name="gender" value="Male" >Male

<input type="radio" id="female" name="gender" value="Female" >Female </td>

</tr>

<tr>

<td> <label>Mobile Number</label> </td>

</tr>

<tr>
<td>  <label>Email ID</label></td>

</tr>

<tr>

<td> <label>Address</label> </td>

</tr>

<tr>

<td> <label>AC Type</label></td>

</datalist> </td>

</tr>

<tr>

<td>  <label>Service Type</label></td>

<option value="Cleaning">Cleaning</option>
<option value="Repair">Repair</option>

<option value="Gas Refill">Gas Refill</option>

</select> </td>

</tr>

<tr>

<td> <label>Date for Appointment</label> </td>

</tr>

<tr>

<td> <label>Yearly Maintenance</label> </td>

<td> <input type="checkbox"
id="yearlyMaintenance" value="Select if required">Select if required </td>

</tr>

<tr>

<td> <label>Duration in
months from the previous service</label> </td>

</tr>

<tr>

<td> </td>

<input type="reset" value="Clear" id="reset">

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>
MAHIMA CASHEW STORE
<!DOCTYPE html >
<html>
<head>
<script>
function billCalculation ()
{
var name =document.getElementById("customerName").value;
var wholecashews=document.getElementById("wholecashews").value;
var halfcashews=document.getElementById("halfcashews").value;
var brokencashews=document.getElementById("brokencashews").value;
var distance=document.getElementById("distance").value;
var amount =(1100 * wholecashews)+(800 *halfcashews)+(650 *brokencashews)+(distance *22);

document.getElementById("result"). innerHTML = " Hi "+name+" ,you have to pay

"+amount.toFixed(2)+" thank for visting us!!!" ;
return false;
}
</script>

</style>

</head>
<body>
<form onsubmit=" return billCalculation ()">
<h1>Mahima Cashew Store</h1>
<table>
<tr>
<td>
customer name <input type ="text" id ="customerName" name ="customerName"
placeholder="Enter Your Name" required="required">
</td>
</tr>
<tr>
<td>
Contact No <input type ="tel" id ="contactno" name ="contactno" pattern="[7-9]{1}[0-9]{9}"
placeholder="Enter Your mobile no" required="required">
</td>
</tr>
<tr>
<td>
Date of order received <input type ="date" id ="bookingdate" name ="bookingdate"
required="required">
</td>
</tr>
<tr>
<td>
whole cashew (in Kg) <input type ="number" id ="wholecashews" name ="wholecashews" min="0"
required="required">
</td>
</tr>
<tr>
<td>
Half cashew (in Kg) <input type ="number" id ="halfcashews" name ="halfcashews" min="0"
required="required">
</td>
</tr>
<tr>
<td>
Broken cashew (in Kg) <input type ="number" id ="brokencashews" name ="brokencashews"
min="0" required="required">
</td>
</tr>
<tr>
<td>
Address <textarea type="text" id="address" name ="address" rows="5" cols ="25"
placeholder="Enter your address" required="required"></textarea>
</td>
</tr>
<tr>
<td>
Distance (in km) <input type ="number" id ="distance" name ="distance" min="0"
required="required">
</td>
</tr>
<tr>
<td>
Expected date of delivery <input type="date" id="deliverydate" name="deliverydate"
required="required">
</td>
</tr>
<tr id ="a">
<td >
<input type="button" id="submit" onclick=" billCalculation ()" value ="submit">
</td>
<td>
<input type ="reset" id="reset" name="reset" value ="clear">
</td>
</tr>
</table>
</form>
<div id="result">

</div>
</body>
</html>
REFRIGATOR REPAIR SERVICE
<!document HTML>
<HTML>
<head>
<style type="text/css">
//apply appropriate style
</style>
<script>
function bookAppointment(){
var charge;
var name=document.getElementById("customerName").value;
var brand=document.getElementById("brandName").value;
var type=document.getElementById("refrigeratorType").value;
var mail=document.getElementById("email").value;
if(type=="Single Door"){
charge=2500;
}
else if(type=="Double Door"){
charge=5500;
}
else{
charge=8500;
}
if(document.getElementById("yearlyMaintenance").checked==true){
var s=charge+1000;
document.getElementById("result").innerHTML= "Hello "+ name+ ", the service appointment
copy for "+ brand +" "+ type+" refrigerator with yearly maintenance will be sent to your email ID "+ mail+ "
and the estimated service charge will be Rs "+ s;
}
else{
document.getElementById("result").innerHTML= "Hello"+ name+", the service appointment
copy for"+ brand+ type+" refrigerator without yearly maintenance will be sent to your email ID "+ mail+
"and the estimated service charge will be Rs"+ charge;
}
}
</script>
</head>
<body>
<h1>REFRIGERATOR REPAIR SERVICE</h1>
<form onsubmit="return bookAppointment()">
<label>Customer Name </label><input type="text" id="customerName" placeholder="Enter your
name" required><br>
<label>Gender </label><input type="radio" name="male" id="male">Male</label>
<input type="radio" name="female" id="female">Female<br>
<label>Mobile Number </label><input type="text" id="mobilenumber" placeholder="Enter your
mobile number" pattern="[6-10]{3}-[0-9]{3}-[0-9]{4}" required><br>
<label>Email Id </label><input type="email" id="email" placeholder="Enter your email Id"
required><br>
<label>Address </label><textarea rows="5" cols="25" id="address" placeholder="Enter your
address" required></textarea><br>
<label>Brand Name </label><input list="brandNames" id="brandName" autocomplete="on"
required>
<DataList id="brandNames">
<option value="LG">
<option value="Samsung">
<option value="Whirlpool">
<option value="Bosch">
<option value="Godrej">
<option value="Seimens"></option>
</datalist></select><br>
<label>Refrigerator Type</label><select id="refrigeratorType">
<option value="Single Door" >Single Door</option>
<option value="Double Door">Double Door</option>
<option value="Triple Door">Triple Door</option></select><br>
<label>Date for Appointment</label><input type="date" id="dateForAppointment" required><br>
<label>Yearly Maintenance </label><input type="checkbox" id="yearlyMaintenance"><br>
<label>Duration in months from the previous service</label><input type="range" min="0" max="6"
step="1"><br>
<input type="button" id="submit" value="submit" onclick="bookAppointment()"></button>
<button type="reset" id="reset" value="clear">reset</button><br>
</form>
<div id="result">

</div>
</body>
</HTML>
AIRFINE AND AIRLINES

<!DOCTYPE html>
<html>
<body>

<form onsubmit="return display()">

<h3>AirFine AirLines</h3>
<table>
<tr><td>Passenger Name</td><td><input type="text" id="pname" name="Passenger Name"
placeholder="Enter the passenger name" required=""></td></tr>
<tr><td>Phone Number</td><td><input type="text" id="mobile" name="mobile"
pattern="[789]{1}[0-9]{9}" min="7000000000" max="9999999999" maxlength="10" placeholder="Enter the
phone number" required=""></td></tr>
<tr><td>Ticket Id</td><td><input type="number" id="tid" name="Ticket Id" placeholder="Enter
the ticket id" required=""></td></tr>
<tr><td>Date of Trip</td><td><input type="date" id="tripdate" name="Date of Trip"
required=""></td></tr>
<tr><td>Number of Tickets</td><td><input type="number" id="noOfTickets" name="Number of
Tickets" placeholder="Enter the number of tickets" required=""></td></tr>
<td>Date of Cancellation</td><td><input type="date" id="cancellationdate" name="Date of
Cancellation" required=""></td></tr>
<tr><td><label>Seat Type</label></td><td>
<select name="Seat Type" id="stype" required="">
<option id="seat" value="seat">Seat Type..</option>
<option id="eco" value="eco">Economy Class Seats</option>
<option id="prem" value="prem">Premium Class Seats</option>
<option id="bus" value="bus">Business Class Seats</option>
<option id="first" value="first">First Class Seats</option>
</select>
</td></tr>
<tr><td><label>Amount Paid</label></td><td><input type="number" id="amountPaid"
name="Amount Paid" placeholder="Enter the amount paid" required=""></td></tr>

</table>
</br>
<input type="submit" id="submit" value="CONFIRM CANCELLATION">
</br></br>
<div id="result" name="result"></div>
</form>

</style>
<script>
function display()
{
var conFee,cp,convFee,canChr,refAmt;
var not = document.getElementById("noOfTickets").value;
var sType = document.getElementById("stype");
var st = sType.options[sType.selectedIndex].value;
var amtPaid = document.getElementById("amountPaid").value;
var pName = document.getElementById("pname").value;
if(st =="eco")
{
conFee = 200;
cp = 0.2;

}else if(st == "prem"){

conFee = 400;
cp=0.3;

}else if(st == "bus"){

conFee = 500;
cp=0.3;
}
else
{
conFee = 600;
cp=0.4;
}

convFee = not*conFee;
canChr = amtPaid*cp;
refAmt = amtPaid -convFee-canChr;
document.getElementById('result').innerHTML = "Hi "+pName+", your ticket has been successfully
cancelled and the refund amount is Rs."+refAmt;
return false;
}
</script>
</body>
</html>
VISION OPTICALS
<!DOCTYPE html>
<html>
<head>
<title>Vision Opticals</title>
<style>

input[type="number"], input[type="text"], input[type="date"], input[type="email"],

input[type="tel"], select {
width:98%;
}

body{
background-image: url("VISION.png");
background-size: 70%;
font-weight: bold;
}

div{
font-size:20px;
color:#FFFFFF;
text-align: center;
margin-left: auto;
margin-right: auto;
}

h3{
font-family: Verdana;
color: #FFFFFF;
background-color: #696969;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 50%;
padding: 5px;
border-radius: 6px;
}

table, td, tr{

border: solid 1px;
width: 50%;
margin-left: auto;
margin-right: auto;
padding: 1px;
border-spacing: 1px;
border-radius: 6px;
color:#696969 ;
background-color: #FFFFFF;
}

</style>
</head>

<tr>
<td>Phone Number</td>
<td><input type="tel" id="phno" name="phno" placeholder="Phone number"
pattern="[789]{1}[0-9]{9}" maxlength="10" required></td>
</tr>

<tr>
<td>Email ID</td>
<td><input type="email" id="email" name="email" placeholder="Enter the email id"
required></td>
</tr>
<tr>
<td>Spectacle Type</td>
<td><select id="stype" required>
<option value="Select Glass">Select Glass</option>
<option value="Eye Glass">Eye Glass</option>
<option value="Sun Glass">Sun Glass</option>
<option value="Blu 0 Computer Glass">Blu 0 Computer
Glass</option>
<option value="Reading Glass">Reading Glass</option>
</select>
</td>
</tr>
<tr>
<td>Frame Brand</td>
<td><select id="brand" required>
<option value="Select Brand">Select Brand</option>
<option value="Vincent Chase">Vincent Chase</option>
<option value="John Jacobs">John Jacobs</option>
<option value="Ray Ban">Ray Ban</option>
<option value="Carrera">Carrera</option>
<option value="Oakley">Oakley</option>
<option value="Vogue">Vogue</option>
</select>
</td>
</tr>
<tr>
<td>Frame Type</td>
<td><select id="ftype" required>
<option value="Select Frame">Select Frame</option>
<option value="Rectangle Frames">Rectangle Frames</option>
<option value="Wayfarer Frames">Wayfarer Frames</option>
<option value="Round Frames">Round Frames</option>
<option value="Aviator Frames">Aviator Frames</option>
<option value="Cat-Eye Frames">Cat-Eye Frames</option>
<option value="Rimless Frames">Rimless Frames</option>
<option value="Half Rim Frames">Half Rim Frames</option>
</select>
</td>
</tr>
<tr>
<td>Frame Color</td>
<td><select id="fcolor" required>
<option value="Select Frame Color">Select Frame Color</option>
<option value="Black">Black</option>
<option value="Brown">Brown</option>
<option value="Grey">Grey</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
</td>
</tr>
<tr>
<td>Glass Category</td>
<td><select id="category" required>
<option value="Select Glass Category">Select Glass Category</option>
<option value="Classic">Classic</option>
<option value="Premium">Premium</option>
<option value="Computer Glass">Computer Glass</option>
</select>
</td>
</tr>
<tr>
<td>Payment Type</td>
<td><select id="ptype" onchange="disableCardDetailsOnCash()" required>
<option value="Debit card / Credit card">Debit card / Credit card</option>
<option value="Cash">Cash</option>
</select>

</td>
</tr>
<tr>
<td>Card No</td>
<td><input type="text" id="cardno" name="cardno" placeholder="Enter the card no" pattern="[0-9]{4}
{0,1}[0-9]{4} {0,1}[0-9]{4} {0,1}[0-9]{4}" maxlength="19" ></td>
</tr>
<tr>
<td>Expiry Date</td>
<td><input type="date" id="edate" name="edate"></td>
</tr>

</table>
<br/>
<p><input type="submit" id="submit" value="CONFIRM ORDER"></p>

<div id="result1"> </div>

<div id="result2"> </div>
</form>
</div>
</body>
</html>
COLLEGE TRAINING FEEDBACK FORM

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: #FFAACC;
}
h1
{
color: #770080;
font-style:italic;
font-family: Courier New;
text-align: center;
}
#result
{
color: #770080;
font-weight: bold;
}
</style>
</head>
<body>
<h1>College Training Feedback Form</h1>
<form onsubmit="return rating()">
Participant Name<input type="text" name="participantName" id="pname" placeholder="Enter your
name" patter="[a-zA-Z ]+"><br>
College Name<input type="text" name="collegeName"><br>
Participant Address<textarea name="participantAddress" rows="5" cols="20"></textarea><br>
Gender<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female<br>
Email ID<input type="email" name="email"><br>
Mobile Number<input type="text" name="mobileNumber" pattern="[7-9]{1}[0-9]{9}"><br>
Trainer's Name<input type="text" name="trainerName" id="tname"><br>
Course Name<input type="text" name="courseName"><br>
Course Completion date<input type="date" name="dateofcompletion"><br>
Trainer's Feedback<input type="text" id="fd" name="trainerFeedback" list="feedback"
autocomplete="on">
<datalist id="feedback" autocomplete="on">
<option>Excellent</option>
<option>Very Good</option>
<option>Good</option>
<option>Average</option>
<option>Below Average</option>
</datalist><br>
<input type="submit" name="submit" value="Submit Feedback">
<input type="reset" name="Reset" value="Clear">
</form>
<div id="result"></div>
<script>
function rating()
{
var feed=document.getElementById("fd").value;
var participantName=document.getElementById("pname").value;
var trainerName=document.getElementById("tname").value;
var feedbackRate;
if(feed=="Excellent")
{
feedbackRate=5;
}
else if(feed=="Very Good")
{
feedbackRate=4;
}
else if(feed=="Good")
{
feedbackRate=3;
}
else if(feed=="Average")
{
feedbackRate=2;
}
else if(feed=="Below Average")
{
feedbackRate=1;
}
document.getElementById("result").innerHTML="Feedback rating of "+trainerName+" is
"+feedbackRate+" / 5. Given by participant - "+participantName;
return false;
}
</script>
</body>
</html>
PALLINDROME

<!Doctype html>
<html>

<head>
<title>Palindrome</title>
<script>
function palindrome()
{
var enteredstring=document.getElementById("word").value;
enteredstring=((enteredstring.toLowerCase()).split(" ")).join("");
var splittedarray=enteredstring.split("");
var reversestring=splittedarray.reverse().join("");

if(enteredstring==reversestring)
{
alert("The entry is a Palindrome");
}
else
{
alert("The entry is not a Palindrome");
}
return false
}
</script>
</head>
<body>
<form name="palform">
<label for="plain">Enter word/sentence to check for palindrome:</label>
<input type="text" id="word" name="palin" required><br/>
<input type="submit" name="palinbtn" value="CheckPalindrome" onclick= "return palindrome ()">
</form>
</body>
</html>
ELITE

<title>Elite Travel Management</title>

<style>

input[type="number"] {
width:98%;
}
input[type="text"] {
width:98%;
}
input[type="date"] {
width: 98%;
}
input[type="email"] {
width:98%;
}
input[type="tel"] {
width: 98%;
}
select {
width: 98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}

.left {
left: 0;
}

.right{
right: 0;
background-color: #74B14E;
width:60%;
padding: 10px;

}
#image{
width: 120%;
height: 90%;
}

h3{
text-align: center;
font-size: 20px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
}

table, h3{
border: 3px solid #FFFFFF;
border-spacing: 2px;
width:97%;
}

td{
border: 1px solid #FFFFFF;
color:#FFFFFF;
background-color: #6698FF ;
border-spacing : 5px;
}

#submit,h3{
color: #C21807;
font-weight: bold ;
background-color: #FFFFFF ;
}

table,td,#submit{
font-family: Georgia;
font-size: 15px;
border-radius:6px;
padding: 5px ;
}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

#offers:hover {
color: #C21807;
}

.b{
color: #FFFFFF;
}

.c{
color:#C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
}

.d{
border: 0px;;
}
</style>
</head>

function show_value(x)
{
document.getElementById("demo").innerHTML=x;
}
</script>

<div class="split left"><img src="ELITE.png " id="image"></div>

<h3> ELITE TRAVEL MANAGEMENT </h3>

<table>
<tr class="d">
<td class="d"><a href="#travel" id="travel_info" class="b">Travel-info</a></td>
<td class="d"><a href="#personal" id="personal_info" class="b">Personal-info</a></td>
<td class="d"><a href="#preferences" id="preferences_info" class="b">Activities
Preferences</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="travel">Travel Information</td>
</tr>

<tr>
<td>Select your travel destination : <br/>
<select id="destination">
<option value="Select.." required>Select..</option>
<option value="London">London</option>
<option value="Canada">Canada</option>
<option value="Mauritius">Mauritius</option>
<option value="Switzerland">Switzerland</option>
</select>
</td>
<td>Date of departure : <br/>
<input type="date" id="dateofdeparture" placeholder="dd-mm-yyyy" required>
</td>
<td>Date of arrival : <br/>
<input type="date" id="dateofarrival" placeholder="dd-mm-yyyy" required>
</td>
</tr>

<tr>
<td>Visa Assistance</td>
<td class="d"><input type="radio" name ="visa" id="yes" required>Yes</td>
<td class="d"><input type="radio" name ="visa" id="no" required>No</td>
</tr>

<tr>
<td colspan="3" class="c" id="personal">Personal Information</td>
</tr>

<tr>
<td>Customer Name</td>
<td><input type="text" id="cname" placeholder="Enter the customer name" pattern="^[a-zA-
Z\s]+$" required></td>
</tr>

<tr>
<td>Phone Number</td>
<td><input type="tel" id="phno" placeholder="Enter the phone number" pattern="[7-
9]{1}[0-9]{9}" required></td>
</tr>

<tr>
<td>Email ID</td>
<td><input type="email" id="email" placeholder="Enter the email id" required></td>
</tr>

<tr>
<td colspan="3" class="c" id="preferences">Activities Preferences</td>
</tr>

<tr class="d">
<td class="d"><input type="checkbox" name="charges"
id="museumsAndHistoricSites">Museums & Historic Sites</td>
<td class="d"><input type="checkbox" name="charges" id="culture">Culture</td>
<td class="d"><input type="checkbox" name="charges" id="beaches">Beaches</td>
</tr>
<tr>
<td class="d"><input type="checkbox" name="charges"
id="shopping">Shopping</td>
<td class="d"><input type="checkbox" name="charges" id="wildlife">Wildlife</td>
<td class="d"><input type="checkbox" name="charges" id="relaxing">Relaxing</td>

</tr>
<tr>
<td colspan="3" ><a href="#submit" class="b" id="offers">**Click here to unlock
exclusive offers</a></td>
</tr>

</table>
<br>
<p><input type="button" id="submit" value="BUILD PACKAGE"></p>
</div>

</body>
</html>
///BEAUTY CARE

<!DOCTYPE html>
<html>
<head>



<title>Beauty Care Center</title>
<style>

::placeholder {
color: #6A5ACD;
opacity: 2;
}

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],

input[type="button"] {
background-color: #08088A;
}

input[type="checkbox"]#terms:checked+a {
color: #40ff00;
}

body {
/* Fill the attribute and value */
background-color: #000000;
}

h3 {
/* Fill the attributes and values */
color: #FFFFFF;
background-color: #2F4F4F;
margin-left: auto;
margin-right:auto;
text-align: center;
width: 35%;
font-family: Verdana;
border-style: 1px solid;
border-radius: 6px;

label span{
color: #F0F8FF;
}

table {
/* Fill the attributes and values */
width: 30%;
border-style: 3px groove;
margin-left: auto;
margin-right: auto;
border-spacing: 5px;
border-radius: 6px;
}

#appointment td {
/* Fill the attributes and values */
border-width: 1px;
border-style: solid;
border-color: #F4A460;
padding: 8px;
}

#terms_ref {
color: #00bfff;
}

#submit {
/* Fill the attributes and values */
color:#FFEFD5;
font-weight: bold;
background-color: transparent;
border-radius: 6px;
}

#submit:hover {
background-color: #2E8B57;
color: #FFFFFF;
}

.b {
/* Fill the attributes and values */
width: 50%;
margin-left: auto;
margin-right: 14em;

}
</style>
</head>

<body>

<h3>Beauty Care Center-Appointment</h3>

<tr>
<td>
<label><span><b>Gender*</b></span>:</label>
</td>
<td>

<input type="radio" id="male" name="gender" value="Male" ><label><span><b> Male
</b></span></label>
<input type="radio" id="female" name="gender" value="Female" ><label><span><b>
Female</b></span></label>
<input type="radio" id="others" name="gender" value="Others" > <label><span><b>
Others</b></span></label>
</td>
</tr>

<tr>
<td>
<label><span><b>E-mail address</b></span>:</label>
</td>
<td>
<input type="email" name="email" id="email" placeholder="Example:[email protected]"
required/>

</td>
</tr>
<tr>
<td>
<label><span><b>Mobile No*</b></span>:</label>
</td>
<td>
<input type="tel" name="mobileNo" id="mobileNo" placeholder="Enter your mobile no"
required/>

</td>
</tr>

<tr>
<td>
<label><span><b>Services*</b></span>:</label>
</td>
<td>

<input list="serviceList" id="services" name="services" required>
<datalist id="serviceList" required>
<option value="Manicure">Manicure</option>
<option value="Pedicure">Pedicure</option>
<option value="Facial">Facial</option>
<option value="Threading">Threading</option>
<option value="Waxing">Waxing</option>
<option value="Hair Spa">Hair Spa</option>
<option value="Body Massage">Body Massage</option>
<option value="Others">Others</option>
</datalist>
</td>
</tr>

</td>
</tr>

</td>
</tr>

<tr>
<td>
<label><span><b>Address</b></span>:</label>
</td>
<td>

<textarea name="address" id="address" rows="5" cols="25" placeholder="Enter your address"
required></textarea>
</td>
</tr>

</table>
<p class="b"><input type="checkbox" name="terms"
id="terms"/><a href="#submit" id="terms_ref">I agree to the terms of service
and privacy policy</a></p>
<p class="b"><input type="button" name="submit" id="submit"
value="Submit"/></p>

</body>
</html>
//Mercury drug
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Mercury Drug Delivery Service</title>
</head>
<style>
input[type="file"] {
background: transparent;
width: 100%;
}

input[type="text"] {
background: transparent;
width: 100%;
}

input[type="number"] {
background: transparent;
width: 100%;
}

input[type="email"] {
background: transparent;
width: 100%;
}

input[type="tel"] {
background: transparent;
width: 100%;
}

input[type="url"] {
background: transparent;
width: 100%;
}

input[type="checkbox"] {
background: transparent;

input[type="button"] {
background: transparent;
}

input[type="checkbox"] /* Fill here */ :checked + a {

/* Fill the attribute and value */
}

body{
font-weight: bold;
margin-left: auto;
margin-right: auto;
}

h3{
color: #FFFFFF;
background-color: #800000;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 60%;
font-family: Verdana;
padding: 3px;
border-radius: 6px;
}

table{
width: 60%;
border-style:3px solid;
margin-left: auto;
margin-right: auto;
border-spacing: 5px;
border-radius: 6px;
}

td{
font-size: 15px;
}

#submit{
color:#800000;
font-weight: bold;
background: transparent;
border-radius: 6px;
}

#submit:hover {
background-color:#800000 ;
color: #FFFFFF;
}

.a{
width: 50%;
}

.b{
width: 60%;
}

::-webkit-input-placeholder {
color: #dcdcdc;
}
</style>
<body>

<h3> Mercury Drug Delivery Service-Partner Invite </h3>

<tr>
<td colspan="2"><input type="text" required id="pharmacyName" placeholder="Pharmacy
name*"></td>
</tr>
<tr>
<td class="a"><input type="number" id="pin" placeholder="Pin(PrimaryLocation)*"
required></td>
<td><input type="text" id="city" placeholder="City*"></td>
</tr>
<tr>
<td class="a"><input type="text" id="oname" placeholder="Pharmacy owner*" required</td>
<td><input type="tel" id="phno" placeholder="Phone number*" pattern="[7-9]{1}[0-9]{9}"
required></td>
</tr>
<tr>
<td colspan="2"><input type="email" id="email" placeholder="Email*"></td>
</tr>
<tr>
<td colspan="2"><input type="url" id="link" placeholder="Website Link/ online listing
link"></td>
</tr>
<tr>
<td><input type="text" id="noOfOutlets" min="1" placeholder="Number of outlets*"
required></td>
<td class="a"><input type="text" id="primaryArea" placeholder="Primary Area of outlet*"
required></td>
</tr>
<tr>
<td><input type="text" min="200" id="cost" placeholder="Minimum purchase cost*"
required></td>
<td class="a"><input list="establishmentType" id="type" placeholder="Establishment :
Independant/Chain*"
required>
<datalist id="establishmentType">
<option value="Independant"></option>
<option value="Chain"></option>
</datalist>
</td>
</tr>
<tr>
<td colspan="2">Medicines available :
<input type="checkbox" id="gsl" name="items">General Sales List Medicines(GSL)
<input type="checkbox" id="p" name="items">Pharmacy Medicines(P)<br>
<input type="checkbox" id="pom" name="items">Prescription Only Medicines (POM)
<input type="checkbox" id="cds" name="items">Controlled Drugs (CDs)
</td>
</tr>
<tr>
<td>Retail Drug License(Jpeg/PDF)*<br>
<input type="file" id="license"></td>
<td>GSTIN/PAN*<br>
<input type="file" id="pan"></td>
</tr>
<tr>
<td>FSSAI(Jpeg/PDF)*<br>
<input type="file" id="fssai"></td>
<td>Facade/Pharmacy-shelves/Refridgerator(Jpeg)* <br>
<input type="file" id="others" multiple></td>
</tr>
</table>

<p class="b"><input type="checkbox"><a href="#submit" id="terms_ref" style="color: blue;"><b>I

agree to terms of
services</b></a></p>
<p class="b"><input type="button" id="submit" value="submit"></p>

</body>

</html>
//shine clinic

<title>Shine Clinic</title>
<style>

input[type="number"], input[type="text"], input[type="date"], input[type="email"],

input[type="tel"], select {
width:98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}

.left {
left: 0;
/* Fill the attribute and value */
}

.right {
right: 0;
background-color: #1AA3FF;
width: 60%;
padding: 10px;
/* Fill the attribute and value */
}

#image{
width: 90%;
height: 50%;
margin-top: 25%;

/* Fill the attribute and value */

}
h3{
text-align: center;
font-size: 20px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;

/* Fill the attribute and value */

}

table, h3{
/* Fill the attribute and value */
border: 3px solid #ffffff;
border-spacing: 2px;
width: 97%;
}

td{
/* Fill the attribute and value */
border: 1px solid #ffffff;
border-spacing: 5px;
color: #6600FF;
background-color: #E6E6E6;

#submit,h3{
color: #C21807;
font-weight: bold;
background-color: #FFFFFF;
/* Fill the attribute and value */
}

table,td,#submit{
font-family: Georgia;
font-size: 15px;
border-radius: 6px;
padding: 5px;

/* Fill the attribute and value */

}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

.b{
color: #6600FF;
/* Fill the attribute and value */
}

.c{
color: #C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
/* Fill the attribute and value */
}

.d{
border: 0px;;
}
</style>
</head>

<body>
<script>
function show_value(x){
document.getElementById("demo").innerHTML=x;
}
function setDisable(){
if(document.getElementById('cash').checked==true){
document.getElementById('cnumber').disabled=true;
document.getElementById('cvvnumber').disabled=true;
}
else if(document.getElementById('card').checked==true){
document.getElementById('cnumber').disabled=false;
document.getElementById('cvvnumber').disabled=false;
}
}
</script>

<div class="split left"><img src="SHINE.png" id="image"></div>

<h3>Shine Clinic</h3>
<table>
<tr class="d">
<td class="d"><a href="#admission" id="admission_info" class="b">Admission-
info</a></td>
<td class="d"><a href="#personal" id="personal_info" class="b">Personal-info</a></td>
<td class="d"><a href="#payment" id="payment_info" class="b">Payment-info</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="admission">Admission Information</td>
</tr>

<tr>
<td>Date of Admission: <br/><input type="date" id="dateofadmission"
required="required"></td>
<td>Select the admission type<br/><select id="adtype" required>
<option value="Select..">Select..</option>
<option value="New Admission">New Admission</option>
<option value="Already Have">Already Have</option>
</select></td>
<td>Admission For<br/><select id="adfor" required>
<option value="Select..">Select..</option>
<option value="Ear">Ear</option>
<option value="Nose">Nose</option>
<option value="Throat">Throat</option>
<option value="General Checkup">General Checkup</option>

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

<tr>
<td colspan="3" >**Select if you have any of the following below</td>
</tr>
<tr>
<td class="d"><input type="checkbox" id="cold" name="health">Cold</td>
<td class="d"><input type="checkbox" id="fever" name="health">Fever</td>
<td class="d"><input type="checkbox" id="cough" name="health">Cough</td>
</tr>
<tr>
<td class="d"><input type="checkbox" id="diapedesis"
name="health">Diapedesis</td>
<td class="d"><input type="checkbox" id="blood pressure" name="health">Blood
Pressure</td>
<td class="d"><input type="checkbox" id="heavy surgery" name="health">Heavy
Surgery</td>
</tr>
<tr>
<td colspan="3" class="c" id="personal">Personal Information</td>
</tr>

<tr>
<td>Patient Name</td>
<td colspan="2"><input type="text" id="pname" placeholder="Enter the patient name"
pattern="[a-zA-Z\s]" required="required"></td>
</tr>

<tr>
<td>Phone Number</td>
<td colspan="2"><input type="text" id="phno" placeholder="Enter the phone number"
pattern="[789]{1}[0-9]{9}" maxlength="10" minlength="10" required="required"></td>
</tr>

<tr>
<td>Email ID</td>
<td colspan="2"><input type="email" id="email" placeholder="Enter the email id"
required="required"></td>
</tr>
<tr>
<td>Age</td>
<td colspan="2"><input type="number" id="age" placeholder="Enter the age"
required="required"></td>
</tr>

<tr>
<td>Address</td>
<td colspan="2"><textarea id="address" rows="4" cols="80" placeholder="Enter the age"
required="required"></textarea></td>
</tr>

<tr>
<td colspan="3" class="c" id="payment">Payment Information</td>
</tr>

<tr class="d">
<td>Select the payment type:</td>
<td class="d"><input type="radio" id="card" name="ptype" onclick="setDisable()"
required/>Card</td>
<td class="d"><input type="radio" id="cash" name="ptype" onclick="setDisable()"
required/>Cash</td>
</tr>
<tr>
<td>Card Number</td>
<td colspan="2"><input type="text" placeholder="Enter the card number"
id="cnumber" minlength="16" maxlength="16" required></td>
</tr>
<tr>
<td>Cvv Number</td>
<td colspan="2"><input type="text" id="cvvnumber" placeholder="Enter the cvv
number" minlength="3" maxlength="3" required></td>
</tr>

</table>
<br/>
<p><input type="button" value="CONFIRM" id="submit"></p>
</div>

</body>
</html>
//xchange

<title> Xchange - One Stop for Mobile-Accessories</title>

<style>

*{
background-color: #C2A1A1;
color:#FFFFFF;
font-family: Georgia;
}

input[type="text"] , input[type="number"], input[type="date"], select, textarea{

width: 98%;
}

input[type="range"] {
width: 60%;
}

::placeholder{
color:#FFFFFF;
}

table{
/* Fill the attributes and values */
width:60%;
margin-right: auto;
margin-left: auto;
}
td{
border: 2px solid #FFFFFF;
color:#FFFFFF;
/* Fill the attributes and values */
color: #FFFFFF;
padding: 5px;
border-radius: 6px;
border-spacing: 5px;
}

#submit {
margin-left:45%;
/* Fill the attributes and values */
color: #FFFFFF;
background-color: #5D4079;
border-radius: 6px;
padding: 3px;
font-weight: bold;
}

#submit:hover {
background-color: #FFFFFF;
color:#5D4079;
}

.d{
color:#000000;
}

.c{
/* Fill the attributes and values */
color: #5D4079;
background-color: #FFFFFF;
font-weight: bold ;
}

</style>
</head>

<body >

<h3>Xchange - One Stop for Mobile-Accessories</h3>

<table>
<tr>
<td class="c">Furnish Details</td>
</tr>

<tr>

<td><input type="text" name="mtype" id="mtype" placeholder="Enter the mobile

type*" required/></td>
<td><input type="text" name="atype" id="atype" placeholder="Enter the accessory
type*" required/></td>
</tr>

<tr>
<td>Location :</td>
<td><input type="text" name="location" id="location" placeholder="City,State*"
required/></td>

</tr>

<tr>
<td colspan="2">Reason for selling : <textarea rows="4" columns="50" id="reason"
required></textarea></td>
</tr>

<tr>
<td>Price Quoted : </td>
<td> <input type="range" name="price" id="price" min="500" max="20000"
required onchange="show_value(this.value);" >
<span id="demo"></span></td>
</tr>

<tr>
<td colspan="2">Upload pics (in .png format) : <input type="file" name="pic"
id="pic" value="Choose Files" multiple required></td>
</tr>

<p><input type="button" name="submit" id="submit" value="POST PRODUCT" /></p>

</body>
</html>

Agape Food Delivery Service

<!DOCTYPE html>
<html>
<head>



<title>Agape Food Delivery Service</title>

input[type="text"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
}

input[type="number"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
}

input[type="email"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
}

input[type="tel"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
}

input[type="url"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
}

input[type="checkbox"] {
/* Fill the attribute and value */
background: transparent;
}

input[type="button"] {
/* Fill the attribute and value */
background: transparent;
}

input[type="checkbox"]#terms:checked + a {
/* Fill the attribute and value */
color: #00800A;
}

body{
background-image: url('foodmitho.png');
}

h3{
border:1px solid;
/* Fill the attributes and values */
color: #E6ADAD;
background-color: #08088A;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 60%;
font-family: Verdana;
border-radius: 6px;
}

table{
border:3px solid;
/* Fill the attributes and values */
width: 60%;
margin-right: auto;
margin-left: auto;
border-spacing: 5px;
border-radius: 6px;
}

td{
font-size: 15px;
}

#submit{
/* Fill the attributes and values */
color: #08088A;
font-weight: bold;
background: transparent;
border-radius: 6px;

#submit:hover {
/* Fill the attributes and values */
background-color: #CD5C5C;
color: #ffffff;
}

.a{
/* Fill the attribute and value */
width:50%;
}

.b{
/* Fill the attributes and values */
width: 60%;
margin-right: auto;
margin-left: auto;
}

::-webkit-input-placeholder {
color: #CD5C5C;
}
</style>

</head>
<body>

<h3> Agape Food Delivery Service - Partner Invite</h3>

<table>

<tr>
<td class="a"><input type="number" name="cost" id="cost" value="" min="200" required
placeholder="Cost for two*" /></td>
<td class="a"><input list="establishmentType" id="type" required
placeholder="Establishment : Independant/Chain*">
<datalist id="establishmentType">
<option>Independant</option>
<option>Chain</option>
</datalist></td>
</tr>

<tr>
<td colspan=" ">Cusine type :
<input type="checkbox" name="cusineType" required id="indianVeg"><label
for="indianVeg">Indian-veg</label>
<input type="checkbox" name="cusineType" id="indianVegNonVeg"><label
for="indianVegNonVeg">Indian-veg & Non-veg</label>
<input type="checkbox" name="cusineType" id="chinese"><label
for="chinese">Chinese</label>
<input type="checkbox" name="cusineType" id="continental"><label
for="continental">Continental</label>
</td>
</tr>

<tr>
<td><label>Licence(Jpeg/PDF)*</label><input type="file" id="license"
accept="image/jpeg,application/pdf" required></td>
<td><label>GSTIN/PAN*</label><input type="file" id="pan"
accept="image/jpeg,application/pdf" required></td>
</tr>

<tr>
<td><label>FSSAI(Jpeg/PDF)*</label><input type="file" id="fssai"
accept="image/jpeg,application/pdf" required></td>
<td><label>Facade/Kitchen/Dining-Packaging/Locality(Jpeg)*</label><input
type="file" multiple id="others" accept="image/jpeg" required></td>
</tr>
</table>
<p class="b"><input type="checkbox" id="terms"><a id="terms_ref" href="#submit">I agree to
terms of services</a></p>
<p class="b"><input type="button" id="submit" value="SUBMIT"></p>
</body>
</html>

//ATLAS PACKERS AND MOVERS

<!DOCTYPE html>
<html>
<head>



<title>Atlas Packers and Movers</title>
<style>
.left:0:
}
.right
right:0;
background-color:#548AE3;
width:60%;
padding:10px;
}

.b{
color:#21807;
font-size:15px;
font-family:"georgia";
}
#image{
width:80%;
height:90%;
}
h3{
margin-right:auto;
margin-left:auto;
text-align:center;
width:50%;
font-family:"Georgia";
border-radius:6px;
}
table th,td{
border-spacing:2px;
font-size:15px;
font family:"Georgia";
border-radius:6px;
padding:3px;
border: 1px solid white;
}
td{
color:#FFFFFF;
background-color:#548EA3;
border-spacing: 5px;
}
#submit{
color:#c21807;
font-weight:bold;
background-color:#ffffff;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px;
}
#submit:hover{
background-color:FFOOOO;
color:#ffffff;
}
h3{
color:#c21807;
font-weight:bold;
background-color:#ffffff;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px;
}
</stle>
</head>
<body>
<div>
<table>
<tr>
<td><div>img src="packers.jpg"
id="image"/></div></td>
<td>
<div>
<center><h3>ATLAS PACKERS AND MOVERS</h3>/center>
<form>
<table>
<tr><td colspan=2>
<a href="#reloc" id="reloc_info"
class="b">Relocation-info</a><br/>
<a href="#personal"
id="personal_info"
class="b">personal-info</a></br>
<a href="#quote"id="quote_info"
class="b">get a quote!</a><br/>
</td>
</tr>
<tr><td colspan=2><label
id="reloc" class="c">Relocation
Information</label></td></tr>
<tr>
<td>
<select id="city"required>
<option value="select your current city">select your current city option>
<option value="Chennai">Chennai</option>
<option value="Bngalore">Bngalore</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Mumbai">Mumbai</option>
</list>
<td>
<td>input type="date" id="date"required></td>
</tr>
<tr>
<td>label>select category</label></td><td>
<input type="radio"name="category"id="home"required>
<label for="home">home relocation</label>
<input type="radio" name="category"id="factory"required>
<label for="factory">factory/office relocation</label>
</td>
</tr>
<tr>
<td>
<td> <textarea id="faddress"
placeholder="from address"
rows="4" cols="50" required>
</text textarea> </td>
</td>
</tr>
<td><label distance in km>
</td>
<td> <input id="distance"
type=range min=0 max=2000 required><td>
</tr>
<tr><td>colspan=2>
<label id="personal"
class="c">personal
information</label>
</td>
</tr>
<tr>
<td><label>customer name</label>
</td>input type ="text"
id="cname"pattern=[A-Za=z\\s]*'placeholder="enter the customer name" required> </td>
</tr>
<tr>
<td><label>phone number</label>
</td><td><input type="tel"
pattern=[7,8,9]{1}[0-9]{9}"
id="phno"placeholder="enter the phone number"required></td>
</tr>
<tr>
<td><label><Email ID</label></td>
<td> <input type="email"
id="email"placeholder="enter the emailid required"></td>
</tr>
<tr>
<td colspan=2>
<label id="quote"class="c">get a quote:</label>
</td>
</tr>
<tr>
<td><label>possible charges involves</label></td>
<td>
<input type="checkbox"
name="category"id="packing">
<label for ="packing">packing charges</label>
<input type="checkbox"
name="category"id="loading">
<label for "loading">loading charges</label>
<input type ="checkbox"
name="category"
id="transportation"><label for transportation charges</label>
<input type="checkbox"
name="category"id="unloading">
<label for ="unloading">unloading charges</label>
</td>
</tr>
<td colspan=2><label>**quote you receive will include service tax of 12.3%<label></td>
</tr>
</table>"
<button type="submit" id="submit"
value="GET A QUOTE">GET A QUOTE</button>
</form>
</div>
</td></tr>
</table>
</div>
</body>
</html>

//BOOK A SHOW ONLINE TICKET

<!DOCTYPE HTML>
<html>
<head>
<title>
BOOK A SHOW- TICKET </title>
<style>
body{
background-color: #00CED1;
color: #0C1584;
}
h1{
color: #0000FF;
font-family: Monospace;
text-align: center;
}
form{
display: grid;
place-items: center;
}
table{
font-weight: bold;
font-family: Monospace;
}
</style>
</head>
<body>
<h1> BOOK A SHOW - TICKET BOOKING</h1>
<form onsubmit="alert('Booking Successful');
return false; " >
<table>
<tr><td>
<label for="name"> Name </label </td>
<td>
<input type="text" id="name" name="name" pattern="^[a-zA-Z]+$" placeholder="Enter the
name" required>
</td>
</tr>
<tr> <td>
<label >Movie Name</label></td>
<td>
<input list="movies" name="moviename" id="moviename" placeholder="Movie Name" required>
<datalist id="movies" name="movies">
<option value="Iranda">Iranda</option>
<option value="Logan">Logan</option>
<option value="Fist Fight">Fist Fight</option>
</datalist>
</td>
</tr>
<tr>
<td>
<label> circle</label>
</td>
<td>
<input list="circles" name="circle" id="circle" required>
<datalist id="circles" name="circles">
<option value="Silver" > Silver</option>
<option value="Gold" > Gold</option>
<option value="Plantinium" > Plantinium</option>
</datalist>
</td>
</tr>
<tr>
<td>
<label>Phone no </label>
</td>
<td>
<input type="number" name="phone" id="phone" pattern="^\d{}$" placeholder="Enter
Mobile Number" required>
</td>
</tr>
<tr>
<td>
<label> Show date and time</label
</td>
<td>
<input type="datetime-local" name="showdate" id="showdate" name="showdate"
required>
</td>
</tr>
<tr>
<td>
<label for="adults" >No of Adults</label>
</td>
<td>
<input type="number" id="tickets" name="tickets" min="1" max="10" required>
</td>
</tr>
<tr>
<td>
<label for="children" >No of children</label>
</td>
<td>
<input type="number" id="children" name="children" min="1" max="5" required>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" id="submit" value="Book My Show">
</td>
<td>
<input type="reset" name="reset" id="reset" value="reset"
</td>
</tr>
</table>
</form>
</body>
</html>

//bookform

<html>
<head>
<script>
function test(){
alert("You have successfully submitted the Book Form");
return false;
}
</script>
</head>
<body>
<h1>A Simple Form</h1>

<h2>Form Fundamentals</h2>
<form name="form" autocomplete="on" onsubmit="return test()">
<fieldset>
<legend>Customer Info</legend>
<label for="cusname">Name:</label>
<input type="text" id="cusname" name="cusname" placeholder="Enter your name"
autofocus required><br><br>
<label for="telephone">Telephone:</label>
<input type="tel" name="telephone" id="telephone" placeholder="Pattern: 234-567-8910"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<br><br>
<label for="mail" >Email address:</label>
<input type="email" id="mail" name="mail" placeholder="Enter your email address"
required>
</fieldset>
<fieldset>
<legend>Books</legend>

<input name="quantity" type="number" max="5" min="1">

<label for="quantity">Quantity: {Maximum 5}</label>
<input list="books" id="book" name="book">
<datalist id="books">
<option value="HTML5 - Bruce Lawson and Remy Sharp">
<option value="HTML5 - Up and Running - Mark Pilgrim">
<option value="Head First HTML5 Programming - Eric Freeman">
<option value="Mastering HTML, CSS and JavaScript - Laura Lemay">
</datalist>
</fieldset>
<input type="submit" id="submit" name="submit">
</form>
</body>

</form>
</body>
</html>
//HEALTH CARE CENTRE

<!DOCTYPE html>
<html>
<head>



<title>Health Care Center</title>
<style type="text/css">

::placeholder {
color: #40E0D0;
opacity: 2;
}

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],

input[type="date"], textarea, select, #services {
width: 85%;
color: #40E0D0;
font-weight: bold;
background: transparent;
border-radius: 6px;
border-style: solid;
border-width: 2px;
border-color: #FFA07A;
}

input[type="button"] {
background-color: #08088A;
}

input[type="checkbox"]#terms:checked+a {
color: #FFFF00;
}

body {
/* Fill the attribute and value */
background-color: #191970;

label span{
color: #F0F8FF;
}
table {
/* Fill the attributes and values */
width: 30%;
border-style: 3px groove;
margin-left: auto;
margin-right: auto;
border-spacing: 5px;
border-radius: 6px;
}

#appointment td {
/* Fill the attributes and values */
border-width: 1px;
border-style: solid;
border-color: #F4A460;
font-size: 15px;
padding: 8px;

#terms_ref {
color: #9ACD32;
}

#submit {
/* Fill the attributes and values */
color: #FFEFD5;
font-weight: bold;
background-color: transparent;
border-radius: 6px;
}

#submit:hover {
background-color: #8B4513;
color: #FFFFFF;
}

.b {
/* Fill the attributes and values */
width: 50%;
margin-left: auto;
margin-right: 14em;
}
</style>
</head>

<body>

<h3>Health Care Center-Appointment</h3>

<tr>
<td>
<label><span><b>Gender*</b></span>:</label>
</td>
<td>

<input type="radio" id="male " name="gender" value="Male"
required ><label><span><b>Male</b></span></label>
<input type="radio" id="female " name="gender" value="Female"
required ><label><span><b>Female</b></span></label>
<input type="radio" id="others " name="gender" value="Others"
required ><label><span><b>Others</b></span></label>
</td>
</tr>

<tr>
<td>
<label><span><b>E-mail address</b></span>:</label>
</td>
<td>

<input type="email" name="email" id="email"
placeholder="Example:[email protected]" required />
</td>
</tr>
<tr>
<td>
<label><span><b>Mobile No*</b></span>:</label>
</td>
<td>

<input type="tel" name="mobileNo" id="mobileNo"
placeholder="Enter your mobile no" required />

</td>
</tr>

<tr>
<td>
<label><span><b>Services*</b></span>:</label>
</td>
<td>

<input list="serviceList" id="services" name="services" required >
<datalist id="serviceList" required >
<option value="Dentistry">Dentistry</option>
<option value="Midwifery">Midwifery</option>
<option value="Nursing">Nursing</option>
<option value="Medicine">Medicine</option>
<option value="Optometry">Optometry</option>
<option value="Psychology">Psychology</option>
<option value="Physical therapy">Physical therapy</option>
<option value="Others">Others</option>
</datalist>
</td>
</tr>

<tr>
<td>
<label><span><b>Address</b></span>:</label>
</td>
<td>

<textarea name="address" id=address rows="5" cols="25"
placeholder="Enter your address" required ></textarea>
</td>
</tr>

</table>
<p class="b"><input type="checkbox" name="terms" id="terms" /><a href="#submit"
id="terms_ref">I agree to the terms of service and privacy policy</a></p>
<p class="b"><input type="button" name="submit" id="submit" value="Submit" /></p>

</body>
</html>

//palindrome check

<html>
<head>
<script type="text/javascript">
function CheckPalindrome()
{
var str=document.getElementById("Palin").value;
str=str.toLowerCase();
str=str.replace(/\s/g,'');
var rev=str.split('').reverse().join('');
if(str==rev)
alert("The entry is a palindrome.");
else
alert("The entry is not a palindrome.");
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Enter word/sentence to check for palindrome:</td>
<td><input type="text" id="Palin" name="Palin"></td>
</tr>
<tr>
<td>
<Input type="button" name="palinbtn" value="CheckPalindrome"
onclick="CheckPalindrome()">
</td>
</tr>
</table>
</form>
</body>
</html>

//PLATINUM PROPERTIES

<!DOCTYPE html>
<html>
<head>



<title>Platinum Properties</title>
<style>

input[type="number"] {
width:98%;
}
input[type="text"] {
width:98%;
}
input[type="date"] {
width: 98%;
}
input[type="email"] {
width:98%;
}
input[type="tel"] {
width: 98%;
}
select {
width: 98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}
.left {
/* Fill the attribute and value */
left: 0;
}

.right {
/* Fill the attribute and value */
right: 0;
background-color: #74B14E;
width: 60%;
padding: 10px;
}

table, h3{
/* Fill the attribute and value */
border: 3px solid #ffffff;
border-spacing: 2px;
width: 97%;
}

td{
/* Fill the attribute and value */
border: 1px solid #ffffff;
color: #6600FF;
background-color: #DFBF9F;
border-spacing: 5px;
}

#submit,h3{
/* Fill the attribute and value */
color: #C21807;
font-weight: bold;
background-color: #FFFFFF;
}

table,td,#submit{
/* Fill the attribute and value */
font-size: 15px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

#offers:hover {
color: #C21807;
}

.b{
/* Fill the attribute and value */
color: #6600FF;
}

.c{
/* Fill the attribute and value */
color: #C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
}

.d{
border: 0px;;
}
</style>
</head>

function show_value(x)
{
document.getElementById("demo").innerHTML=x;
}
</script>

<div class="split left"><img src="PLATINUM.png" id="image"></div>

<div class="split right">
<h3>Platinum Properties</h3>
<table>
<tr class="d">
<td class="d"><a id="property_info" class="b" href="#property">Property-info</a></td>
<td class="d"><a id="personal_info" class="b" href="#personal">Personal-info</a></td>
<td class="d"><a id="features_info" class="b" href="#features">Extra Features</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="property">Property Information</td>
</tr>

<tr>
<td>Price Range:</td>
<td class="d"><input type="number" id="from" placeholder="From" required></td>
<td class="d"><input type="number" id="to" placeholder="To" required></td>
</tr>

<tr>
<td>Location:</td>
<td class="d" colspan="2"><input type="text" id="location" placeholder="Enter the
location" required></td>
</tr>

<tr>
<td colspan="3" class="c" id="personal">Personal Information</td>
</tr>
<tr>
<td>Customer Name</td>
<td colspan="2"><input type="text" id="cname" pattern="[A-Za-z ]{1,100}" placeholder="Enter
the customer name" required></td>
</tr>

<tr>
<td>Phone Number</td>
<td colspan="2"><input type="tel" id="phno" pattern="[987]{1}[0-9]{9}"
placeholder="Enter the phone number" required></td>
</tr>

<tr>
<td>Email ID</td>
<td colspan="2"><input type="email" id="email" placeholder="Enter the email id"
required></td>
</tr>

<tr>
<td colspan="3" class="c" id="features">Extra Features</td>
</tr>

<tr class="d">
<td class="d"><input type="checkbox" id="parking" name="optional">Parking</td>
<td class="d"><input type="checkbox" id="swimming pool" name="optional">Swimming Pool</td>
<td class="d"><input type="checkbox" id="super market" name="optional">Super Market</td>
</tr>

<tr>
<td class="d"><input type="checkbox" id="park" name="optional">Park</td>
<td class="d"><input type="checkbox" id="library" name="optional">Library</td>
<td class="d"><input type="checkbox" id="playground" name="optional">Play Ground</td>
</tr>

<tr>
<td colspan="3" ><a id="offers" class="b" href="#submit">**Click here to unlock
exclusive offers</a></td>
</tr>

</table>
<br/>
<p><input type="button" id="submit" value="CHECK
AVAILABILITY"></p>
</div>
</body>
</html>

//Royal wedding planners

<!DOCTYPE html>
<html>
<head>

<title>Royal Wedding Planners</title>

<style>

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}

.left {
left: 0;
}
.right {
/* Fill the attributes and values */
right: 0;
background-color: #CA9499;
width:60%;
padding: 10px;
}

#image{
/* Fill the attributes and values */
width: 90%;
height: 90%;
}

h3{
/* Fill the attributes and values */
text-align: center;
font-size: 20px;
font-family: Georgia;
border-radius: 6px;
padding: 2px;
}

table, h3{
/* Fill the attribute and value */
border-spacing: 2px;
width: 97%;
border: 3px solid #FFFFFF;
}

td{
/* Fill the attributes and values */
color: #FFFFFF ;
background-color: #A9A9A9;
border-spacing: 5px;
border: 1px solid #FFFFFF;
}

#submit,h3{
/* Fill the attributes and values */
color: #C21807;
font-weight: bold;
background-color: #FFFFFF;
}

table,td,#submit{
/* Fill the attributes and values */
font-size: 15px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

#offers:hover {
color: #C21807;
}

.b{
/* Fill the attribute and value */
color: #FFFFFF;
}

#condition:hover {
color: #C21807;
}

.c{
/* Fill the attributes and values */
color: #C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
}

.d{
border: 0px;
}
</style>
</head>

function show_value(x)
{
document.getElementById("demo").innerHTML=x;
}
</script>

<div class="split left"><img src="ROYAL.png" id="image"></div>

<div class="split right">
<h3>ROYAL WEDDING PLANNERS </h3>
<table>
<tr class="d">
<td class="d"><a id ="wedding_info" href="#wedding" class="b">Wedding-info</a></td>
<td class="d"><a id ="contact_info" href="#contact" class="b">Contact-info</a></td>
<td class="d"><a id ="services_info" href="#services" class="b">Services required</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="wedding">Wedding Information</td>
</tr>

<tr>
<td>Select your city : <br/><select id="city" required="required">
<option>Select..</option>
<option>Chennai</option>
<option>Bangalore</option>
<option>Hyderabad</option>
<option>Mumbai</option>

</select></td>
<td>Wedding date : <br/><input type="date" id="date" required></td>
<td>No of guests <br/> <input type="number" id="guests" required></td>
</tr>

<tr>
<td>Venue</td>
<td colspan="2"><textarea id="venue" placeholder="Wedding venue" rows="4"
cols="50" required></textarea></td>
</tr>

<tr>
<td>Budget (approx)</td>
<td colspan="2"><input id="budget" value="0" type="range"min="200000"
max="5000000" required onchange="show_value(this.value)">
<span id="demo"></span></td>
</tr>

<tr>
<td colspan="3" class="c" id="contact">Contact Information</a></td>
</tr>

<tr>
<td>Customer Name</td>
<td colspan="2"><input id=cname type="text" placeholder="Enter the customer name"
pattern="[A-Z][a-z]"required></td>
</tr>

<tr>
<td>Phone Number</td>
<td colspan="2"><input id="phno" type="tel" placeholder="Enter the phone number"
pattern="[789]{1}[0-9]{9}" required></td>
</tr>

<tr>
<td>Email ID</td>
<td colspan="2"><input id="email" type="email" placeholder="Enter the email id"
required></td>
</tr>

<tr>
<td colspan="3" class="c" id="services">Services Required</td>
</tr>

<tr class="d">
<td class="d"><input type="checkbox" id="invitation"
name="charges">Invitation</td>
<td class="d"><input type="checkbox" id="decorators" name="charges">Decorators
</td>
<td class="d"><input type="checkbox" id="makeupArtists"
name="charges">Makeup artists</td>
</tr>

<tr>
<td class="d"><input type="checkbox" id="photo_video"
name="charges">Photographers & Videographers</td>
<td class="d"><input type="checkbox" id="ls_support" name="charges">Live
streaming support</td>
<td class="d"><input type="checkbox" id="caterers" name="charges">Caterers</td>

</tr>

<tr>
<td class="d"><input type="checkbox" id="transportation"
name="charges">Transportation</td>
<td class="d"><input type="checkbox" id="accomodation"
name="charges">Accomodation</td>
<td class="d"><input type="checkbox" id="theme" name="charges">Theme-
based</td>
</tr>

<tr>
<td colspan="3" id="condition">**Quote you receive will include service tax of
5.0%</td>
</tr>

</table>
<br/>
<p><input id="submit" type="button" value="GET A QUOTE"</p>
</div>

</body>
</html>
1. ATLAS PACKERS AND MOVERS:----
<!DOCTYPE html>
<html>
<head>
<title>ATLAS PACKERS AND MOVERS</title>
<style>
.left{
left:0; }
.right{
right:0;
background-color:#548AE3;
width:60%;
padding:10px; }
.b{
color:#FFFFFF; }
.c{
color:#C21807;
font-size:15px;
font-family:"Georgia"; }
#image{
width:80%;
height:90%; }
h3{
margin-right:auto;
margin-left:auto;
text-align:center;
width:50%;
font-family:"Georgia";
border-radius:6px; }
table,th,td{
border-spacing:2px;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px;
border: 1px solid white; }
td{
color:#FFFFFF;
background-color:#548EA3;
border-spacing:5px; }
#submit{
color:#c21807;
font-weight:bold;
background-color:#ffffff;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px; }
#submit:hover{
background-color:#FF0000;
color:#ffffff; }
h3{
color:#c21807;
font-weight:bold;
background-color:#ffffff;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px; }
</style>
</head>
<body>
<div>
<table>
<tr>
<td><div><img src="packers.jpg" id="image"/></div></td>
<td>
<div>
<center><h3>ATLAS PACKERS AND MOVERS</h3></center>
<form>
<table>
<tr><td colspan="2">
<a href="#reloc" id="reloc_info" class="b">Relocation-info</a><br/>
<a href="#personal" id="personal_info" class="b">Personal-info</a><br/>
<a href="#quote" id="quote_info" class="b">Get a quote!</a><br/></td>
</tr>
<tr><td colspan="2"><label id="reloc" class="c">Relocation Information</label></td></tr>
<tr>
<td>
<select id="city" required>
<option value="Select your current city">Select your current city</option>
<option value="Chennai">Chennai</option>
<option value="Bangalore">Bangalore</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Mumbai">Mumbai</option>
</select>
</td>
<td><input type="date" id="date" required></td>
</tr>
<tr>
<td><label >Select Category</label></td><td>
<input type="radio" name ="category" id="home" required><label for="home">Home
Relocation</label>
<input type="radio" name ="category" id="factory" required><label
for="factory">Factory/Office Relocation</label>
</td>
</tr>
<tr>
<td> <textarea id="faddress" placeholder="From address" rows="4" cols="50"
required></textarea> </td>
<td><textarea id="taddress" placeholder="To address" rows="4" cols="50"
required></textarea></td>
</tr>
<tr>
<td> <label>Distance in km(approx)</label></td>
<td> <input id="distance" type="range" min="0" max="2000" required></td>
</tr>
<tr><td colspan="2">
<label id="personal" class="c">Personal Information</label>
</td>
</tr>
<tr>
<td><label >Customer Name</label></td><td> <input type="text" id="cname"
pattern="[A-Za-z\\s]*" placeholder="Enter the customer name" required> </td>
</tr>
<tr>
<td><label >Phone Number</label></td><td> <input type="tel" pattern="[7,8,9]{1}[0-9]{9}"
id="phno" placeholder="Enter the phone number" required> </td>
</tr>
<tr>
<td><label >Email ID</label></td><td> <input type="email" id="email" placeholder="Enter
the email id" required> </td>
</tr>
<tr>
<td colspan="2">
<label id="quote" class="c"> Get a quote:</label>
</td>
</tr>
<tr>
<td><label>Possible charges involved</label></td>
<td>
<input type="checkbox" name="category" id="packing"><label for="packing">Packing
Charges</label>
<input type="checkbox" name="category" id="loading"><label for="loading">Loading
Charges</label>
<input type="checkbox" name="category" id="transportation"><label
for="transportation">Transportation Charges</label>
<input type="checkbox" name="category" id="unloading"><label for="unloadig">Unloading
Charges</label>
<input type="checkbox" name="category" id="unpacking"><label
for="unpacking">Unpacking Charges</label>
<input type="checkbox" name="category" id="escort"><label for="escort">Escort
Charges</label>
<input type="checkbox" name="category" id="octroi"><label for="octroi">Octroi
Charges</label>
</td>
</tr>
<tr>
<td colspan="2"><label>**Quote you recieve will include service tax of 12.3%</label></td>
</tr>
</table>
<button type="submit" id="submit" value="GET A QUOTE">GET A QUOTE</button>
</form>
</div>
</td></tr>
</table>
</div>
</body>
</html>