TRAINING REPORT

ON

Tranzy

S u bm it ted In P artia l F u lfillm ent of the R eq u irem ents fo r the

D egree of inform ation tech nology

Bachelor of Technology In INFORMATION

TECHNOLOGY

Submitted By:

A LO K (1 2 2 16 0 9 )

B A T C H : 2 0 2 1-25

To

Department of Information Technology

I
 Declaration

I,A L O K he re b y d e c la re th a t th e tra in in g r e p or t e n t it le d ( “ Fu ll S t a c k ” ) ha s n o t

p re se n t e d a s a p a rt o f a n y o t h er a c a d e m ic w o rk t o g e t m y d e g re e o r c e rt if ic a t e

e xc e p t JM IT R a d a u r f o r t h e f u lfillm e n t o f t he re qu ire m e n t fo r t he d e gr ee o f

B a c h e lo r

IN F O R M A TIO N T E C H N O L O G Y .

I
 Acknowledgement

A p a r t f ro m th e e f fo rt s o f m e , th e su c c e ss o f m y p ro je c t d e p e n d s o n th e

e n c o u ra ge m e n t a n d g u id e lin e s o f m a n y o th e rs. I t a k e t h is o p p o rt u n it y t o

e xp re ss m y g ra t itu d e to th e p e o p le w h o ha ve be e n in st ru m e n t a l in th e

c o m p le t io n o f t h e p ro je c t .

I w o u ld lik e t o sho w m y gre a t es t a p p re c ia t io n t o m y p ro je c t in -c ha n ge M r. V la d

B u t n isk i I c a n n o t s a y t ha n k y o u e n o u gh f o r t he ir t re m e n d o u s su p p o rt a n d he lp . I

f e e l m o t iv a t e d a n d e n c o u ra g e d e v e ry t im e I a tt e n d e d h is c la sse s. W ith o u t his

e n c o u ra ge m e n t a nd gu id e lin e s th is p ro je c t work w o u ld not ha ve be e n

m a te r ia liz e d .

I’ m high ly gra te f u l to M r. V la d B u t n isk i, t e a c h e r a t ho p p in g m in ds , fo r his

t ho ro u g h g uid a n c e o n e d a y t ill en d o f t h e t ra in in g. H e a c t ua lly la id th e g ro u n d

f o r c o n c e p tu a l u n d e rst a n d in g o f t e c h n o lo g ie s a n d p ro je c t .

ALOK

12 2 1609

II
III
 COMPANY INFORMATION

H op in g M in d s is a f o rw a rd -t hin k in g t ra in in g a n d d ev e lo p m e n t o rg a n iz a t io n
d e d ic a te d t o b rid gin g t he g a p be t w e e n e d u c a tio n a n d in d u str y d e m a n d s. Th e y
p ro vid e ta ilo re d p ro g ra m s in fie ld s lik e d a t a sc ie n c e , d igit a l m a rk e tin g ,
so ft w a re d e v e lo p m e n t , a n d b u sin e ss a n a ly t ic s. Th e se c o u rse s fo c u s o n p ra c t ic a l,
ha n d s-o n le a rn in g , gu id e d b y e xp e rien c ed m e n t o rs t o e n su re st u d e n ts g a in
jo b -re a d y sk ills.
Th e p la tf o rm a lso e m p ha size s c a r e er se rv ic e s, in c lu d in g re su m e b u ild in g,
in t e rv ie w p re p a r a t io n , a n d jo b p la c e m e n t a ssist a n c e . B y fo st e rin g sk ill
e n ha n c e m e n t a n d p ro f e ssio n a l gro w t h, H o p in g M in d s a im s t o e m p o w e r
in d iv id u a ls f o r lo n g -te rm c a re e r su c c e ss. V isit h o p in g m in d s.c o m fo r m o r e d e t a ils.

IV
 TABLE OF CONTENT
D e c la ra t io n … ..............................................................................................................i

A c k n o w le d ge m e n t … ................................................................................................. ii

C e rt ific a t e … ...............................................................................................................iii - iv

Ta ble of C o n t e n ts … .................................................................................................. v - v i

L ist o f F ig u re s.............................................................................................................vii

Chapter 1 H t m l

1.1 H t m l....................................................................................................................1 -2

1.2 E le m e n t s a n d A tt ribu t e s… ..............................................................................2 -4

1.3 H tm l Fo r m a t t in g ................................................................................................ 4 -5

1.4 A n c ho r, im a ge a n d t a b le … ............................................................................ 5 -6

1.5 L ist a n d f o rm s… .................................................................................................6-7

1.6 H tm l c la sse s… .................................................................................................. 7 -8

Chapter 2 C SS

2 .1 C SS .................................................................................................................. 9 -1 4

2 .2 C SS P a d d in g................................................................................................. 14 -15

2 .3 D isp la y a n d p o sit ion p ro p e rt y ..................................................................... 15 -16

2 .4 N a v ig a t io n b a r a n d ra d io b u tt o n … ............................................................. 16 -1 7

V
 2 .5 C SS a n im a t io n … ...........................................................................................1 8

Chapter 3 Ja va Sc rip t

3 .1 Ja v a S c rip t in t ro d u c tio n ............................................................................... 1 9

3 .2 V a ria ble s a n d d a t a t y p e s… .................................................................. 1 9 -2 0

3 .3 Ja va Sc rip t op e r a t o r p r ec ed e n c e ...............................................................2 1

3 .4 Ja v a S c rip t a rra y s… .....................................................................................2 1 -2 2

3 .5 Ja va Sc rip t f u n c t io n s… ................................................................................ 2 2

3 .6 Ja v a S c rip t st rin gs… .................................................................................... 2 2

3 .7 Ja va Sc r ip t lo o p s..................................................................................... 2 2 -2 3

3 .8 E xc e p t io n ha n d lin g in Ja va Sc rip t … .......................................................... 24

Chapter 4 B o ot st ra p

4 .1 B o o ts tra p in t ro d u c tio n … ............................................................................... 2 5

4 .2 B u tt o n , gr id , t a b le...........................................................................................2 5 -2 6

4 .3 B a d ge s, la b e ls, p a n e ls… ..............................................................................2 6-2 7

4 .4 Im a g e s, p ro gre ss b a r,list g ro u p , d ro p -d ow n s… .........................................2 7

4 .5 A le rt s, w e lls, c olla p se ,pa gin a tio n p a g e s… ................................................ 2 8 -3 0

Chapter 5 R e a c t Js

5 .1 In t ro d u c tio n … .................................................................................................3 0

5.2 H ist o ry a n d B a c k gr o un d … ............................................................................3 1

5.3 K e y Fe a tu r e s...................................................................................................3 1

5.4 C o re c o n c e p t s.................................................................................................3 1

5 .5 A d va n ta ge s A n d L im it a t io n s.................................................................... 3 1-3 2

5 .6 R e a c t E c o sy st e m ...........................................................................................3 2

VI
Chapter 6 M o n g o D B

6.1 In t ro d u c t ion t o M o n g o D B … … … … … … … … … … … … … … … … … … … … … 3 9

6.2 A d v a n t a g e s o f M o n g o D B … … … … … … … … … … … … … … … … … … … … ..3 9

6.3 C R U D O p e ra tio n s … … … … … … … … … … … … … … … … … … … … … … … ..3 9

6.4 D a t a M od e lin g in M o n g o D B … … … … … … … … … … … … … … … … … … 3 9 -4 0

6.5 A g gre g a t io n F ra m e w o r k … … … … … … … … … … … … … … … … … … … … … 4 0

Chapter 7 N o d e JS

7 .1 In t ro d u c t io n t o N o d e .js … … … … … … … … … … … … … … … … … … … … … ...4 1

7 .2 A d v a n t a g e s o f N od e .js … … … … … … … … … … … … … … … … … … … … … ...4 1

7 .3 C o re C o n c e p t s … … … … … … … … … … … … … … … … … … … … … … … … … .4 1

7 .4 B u ild in g R E S Tf u l A P Is … … … … … … … … … … … … … … … … … … … … … … 4 1

7 .5 R e a l-T im e A p p lic a t io n s … … … … … … … … … … … … … … … … … … … … … ..4 2

7 .6 In t e gra tio n w it h M o n go D B … … … … … … … … … … … … … … … … … … … … .4 2

7 .7 E rro r H a n d lin g … … … … … … … … … … … … … … … … … … … … … … … … … ..4 2

Chapter 8 P ro je c t
8 .1 P ro je c t in t ro … ................................................................................................ 4 3

8 .2 B a c k g ro u n d … ................................................................................................. 4 4

8 .3 O b jec tive ..........................................................................................................4 4

8 .4 P u rp o se ............................................................................................................4 4

8 .5 S c o p e ......................................................................................................... 4 4 -4 5

F e a t u re s a n d fu n c t io n a lity ............................................................................ 4 5

M o d u le s… .......................................................................................................4 6

8.6 Tech nolo g y u sed … ............................................................................................48

VII
Chapter 9 C o n c lu sio n … ................................................................................................. 4 9

Chapter 10 Sc re e n sh o t s.................................................................................................5 0 -5 3

VIII
 CHAPTER-1
HTML

1.1 What is HTML?

H T M L is a n a c ro n y m w h ic h sta n d s f o r H y p e r Te xt M a rk u p L a n g ua ge w hic h is u se d

fo r c re a t in g w e b p a g e s a n d w e b a p p lic a t io n s. L e t 's se e w h a t is m e a n t b y H y p e rt e xt

M a rk u p L a n g u a g e , a n d W e b p a g e .

H y p e r T e xt: H y p e r Te xt sim p ly m e a n s "T e xt w ith in T e xt." A t e xt h a s a lin k w ith in it , is

a hy p e rt e xt . W h e n e ve r y o u c lic k o n a lin k w h ic h brin g s y o u t o a n e w w e b p a g e , y o u

ha ve c lic k e d o n a hy p e rt e xt . H y p e r T e xt is a w a y t o lin k t w o o r m o re w eb p a g e s

(H TM L d o c u m e n t s) w ith e a c h o t he r.

Markup language: A m a r k u p la n gu a ge is a c o m p u t e r la n gu a g e th a t is u se d t o

a p p ly la y o u t a n d fo rm a t tin g c o n ve n t io n s t o a te xt d o c u m e n t . M a rk u p la n g u a g e

m a k e s te xt m o re in t e ra c tive a n d d y n a m ic . I t c a n t u rn te xt in t o im a g e s, ta ble s, lin k s,

etc.

Web Page: A w e b p a g e is a d o c u m en t w hic h is c o m m o n ly w rit t e n in H TM L a n d

tra n sla t e d b y a w e b bro w se r. A w e b p a ge c a n be id e n tif ie d b y e n te rin g a n U R L . A

W e b p a ge c a n be o f t he st a t ic o r d y n a m ic t y p e . W it h t he he lp o f H TM L o n ly , w e c a n

c re a t e sta tic w e b pa ge s. H e n c e , H T M L is a m a rk u p la n gu a g e w hic h is u se d f o r

c re a t in g a t t ra c t ive w e b p a ge s w ith th e he lp o f st y lin g, a n d w h ic h lo o k s in a n ic e

fo rm a t o n a w e b bro w se r. A n H TM L do c u m e n t is m a d e o f m a n y H TM L t a g s a n d

e a c h H T M L t a g c o n t a in s d iff e re n t c o n t e n t . HTML text Editors

• A n H T M L f ile is a te xt file , so to c re a te a n H TM L file w e c a n u se a n y t e xt e d it o rs.

1
• Te xt e d ito rs a re th e p ro gra m s w hic h a llo w e d itin g in a w rit te n t e xt, h e n c e to c re a te a w e b

p a g e w e n e e d t o w rit e o u r c o d e in so m e t e xt e d it o r.

• Th e re a re v a rio u s t y p e s o f t ex t e d ito rs a va ila ble w h ic h y o u c a n d ire c t ly d o w n lo a d , b u tf o r

a b e gin n e r, t he be st te xt e d ito r is N o t e p a d ( W in d o w s) o r T e xt E d it ( M a c ).

HTML Tags

H T M L t a gs a re lik e k e y w o rd s w hic h d e fin e s t h a t ho w w eb b ro w se r w ill fo rm a t a n d

d isp la y t he c o n t e n t. W it h t he h e lp o f t a g s, a w e b b ro w se r c a n d istin gu ish b e t w e e n

a n H T M L c o n t e n t a n d a sim p le c o n t e n t . H TM L ta gs c o n t a in t h re e m a in p a rts:

o p en in g t a g, c o n t e n t a n d c lo sin g t a g . B u t so m e H T M L t a g s a re u n c lo se d t a g s.

W h e n a w e b br ow se r re a d s a n H TM L d o c u m e n t , br ow se r re a d s it fro m to p t o b o tt o m

a n d le f t to rig h t. H T M L ta gs a re u se d to c re a t e H T M L d o c u m e n ts a n d re n d e r t he ir

p ro p e rtie s.

E a c h H T M L t a g s h a v e d if f e re n t p ro p e rt ie s.

A n H T M L f ile m u st h a v e so m e es se n tia l ta gs so t ha t w e b br o w se r c a n d if f er e n tia t e

be t w e en a sim p le t e xt a n d H TM L t ex t. Y o u c a n u se a s m a n y ta gs y o u w a n t a s p e r

y o u r c od e re q u ir e m e n t. A ll H TM L ta gs m u st e n c lo se d w ith in < > t he se b ra c k e ts.

E ve ry t a g in H TM L p er fo rm d if fe re n t ta sk s.

If y o u ha ve u se d a n o p e n ta g < ta g> , th e n y o u m u st u se a c lo se t a g </ ta g>

(e xc e p t so m e ta gs)

Syntax

<t a g > c o n t e n t < /t a g > H TM L Ta g E xa m p le s

2
 <p > P a ra gra p h T a g < /p >

<h 2 > H e a d in g Ta g </ h2 >

<b > B o ld T a g < /b >

<i> It a lic Ta g </ i>

<u > U n d e rlin e T a g </ u >

1.2 Elements and Attributes

H T M L E le m e n t s

A n H TM L file is m a d e o f e le m e n t s. T he se e le m e n t s a re r e sp o n sib le f o r c re a t in g

w e b p a g e s a n d d e fin e c o n te n t in t ha t w e b p a ge . A n e le m en t in H T M L u su a lly c o n sist

o f a st a rt ta g < ta g n a m e >,c lo se t a g < /t a g n a m e > a n d c o n t en t in se rte d b et w e e n

th e m . T e c hn ic a lly , a n e le m e n t is a c olle c tio n o f st a r t t a g, a t trib u te s, e n d t a g ,

c o n te n t be t w e en t he m .

HTML Attribute

H T M L a tt ribu t e s a re sp e c ia l w o rd s w h ic h p ro v id e a d d it io n a l in f o rm a t io n a b ou t t he

e le m e n t s o ra t t rib u t e s a re th e m o d if ie r o f t he H TM L e le m e n t .

E a c h e le m e n t o r t a g c a n h a v e a t trib u te s, w h ic h d e f in e s t h e b e ha vio r o f t ha t

e le m e n t . A t t rib u t es sh o u ld a lw a y s be a p p lie d w ith st a rt t a g. Th e A t t rib u te sh o uld

a lw a y s be a p plie d w it h its n a m e a n d va lu e p a ir.

Th e A t trib u te s n a m e a n d va lu e s a re c a se se n sitiv e, a n d it is re c o m m e n d e d b y W 3 C t ha t it

sho u ld be w ritt e n in L o w e r c a se o n ly .

3
1.3 HTML Formatting

H T M L Fo rm a t tin g is a p ro c e ss o f f o rm a tt in g t e xt f o r b et t e r lo o k a n d f e e l. H T M L

p ro vid e s u s a bilit y t o f o rm a t te xt w ith o u t u sin g C SS . Th e re a re m a n y fo rm a t tin g

ta gs in H TM L . T he se ta gs a re u se d t o m a k e t e xt bo ld , it a lic ize d , o r u n d e rlin e d .

Th e re a re a lm o st 1 4 o p tio n s a v a ila b le t ha t ho w t e xt a p pe a rs in H T M L a n d X H T M L .

In H T M L t he f o rm a t t in g ta gs a re d iv id e d in to t w o c a te g o rie s:

• P h y sic a l ta g: Th e se ta gs a r e u se d t o p ro v id e t he v is ua l a p p e a ra n c e t o th e te xt .

• L o gic a l t a g : T he se t a g s a re u se d t o a d d so m e log ic a l o r s em a n t ic v a lu e to t he t e xt.

<b > Th is is a p h y sic a l t a g, w hic h is u se d t o b old th e t e xt

w ritt e n be t w e e n it .

< str o n g> Th is is a lo gic a l ta g, w h ic h t e lls th e bro w se r t ha t t he

te xt is im p o rt a n t .

< i> T his is a p h y sic a l ta g w hic h is u se d to m a k e t ex t

ita lic .

<em > Th is is a lo gic a l t a g w h ic h is u se d t o d isp la y c o n t e n t in

it a lic .

<m a rk > Th is t a g is u se d t o h ig h ligh t t e xt .

<u > T his t a g is u se d to u n d e rlin e t e xt w ritt e n be t w e e n

it .

< tt > Th is t a g is u se d to a p p e a r a t e xt in te le ty pe . ( n o t
su p p o rte d

in H T M L 5 )

<st rik e > Th is t a g is u se d t o d ra w a s t r i k e t h r o u g h o n a

4
 se c tio n o f t e xt . ( N ot su p p o rt ed in H T M L 5)

< su p > It d isp la y s t he c o n t e n t slig ht ly a bo v e th e n o rm a l lin e .

<su b > It d isp la y s t he c o n t e n t slig ht ly be lo w t he n o rm a l lin e .

1.4 Anchor, Image and Tables

HTML Anchor

Th e H T M L a n c h o r ta g d e f in e s a h y p e rlin k t ha t lin k s o n e p a ge t o a n o t he r pa ge . It

c a n c re a t e h y p e rlin k t o o t he r w e b p a ge a s w e ll a s f ile s, lo c a t io n , o r a n y U R L . T he

"h re f " a tt ribu t e is t h e m o st im p o rt a n t a t tr ib u te o f th e H TM L a t a g . a n d w h ic h lin k s

to d e st in a tio n p a g e o r U R L .

“ href” attribute of HTML anchor tag

Th e h re f a tt ribu t e is u se d t o d e f in e t he a d dr e ss o f th e file t o be lin k e d . I n o t he r w o rd s, it

p o in t s o u tt he d e st in a t io n p a g e .

Th e sy n t a x o f H T M L a n c ho r t a g is g iv e n be lo w .

<a hre f = " "> L in k Te xt < /a >

HTML Image

H T M L im g t a g is u se d t o d isp la y im a ge o n th e w e b pa ge . H T M L im g t a g is a n e m p t y t a g

th a t c o n ta in s a t tribu t e s o n ly , c lo sin g t a g s a re n o t u se d in H T M L im a ge e le m e n t. L e t's se e

a n e xa m p le o f H TM L im a g e .

1. < h2 >H TM L Im a ge E xa m p le < /h 2 >

2. < im g src = "go o d _ m o rn in g.jp g" a lt = "G o o d M o rn in g Fr ie n d s"/>

5
 HTML Table

H T M L ta ble t a g is u se d t o d isp la y d a t a in t a b u la r f o rm ( ro w * c o lu m n ). T he re c a n

be m a n y c o lu m n s in a ro w . W e c a n c re a t e a t a b le to d isp la y d a t a in ta bu la r f or m ,

u sin g <t a b le > e le m en t , w ith th e he lp o f <t r> ,

<t d >, a n d

<t h> e le m e n t s.

In E a c h ta ble , ta ble ro w is d e f in e d b y < tr > ta g, t a b le he a d e r is d e fin e d b y < t h> , a n d ta ble

d a t a is d e fin e d by <t d > t a g s.

H T M L ta ble s a re us ed to m a n a g e t he la y o u t o f th e p a g e e .g., h e a d e r se c t io n ,

n a v ig a t io n ba r, b o d y c o n t e n t, fo o t e r se c t io n e tc . B u t it is re c o m m e n d e d t o u se d iv

ta g o ve r t a b le t o m a n a ge t he la y o u t o f th e p a g e .

1.5 Lists and Forms

HTML Lists

H T M L L ists a re u se d t o sp e c ify list s o f in f o rm a t io n . A ll list s m a y c o n t a in o n e o r m or e list

e le m e n t s.Th e re a re t hre e d iff e re n t t y p e s o f H TM L list s:

Ordered List or Numbered List (ol)

In th e o rd e r ed H TM L list s, a ll th e list it e m s a re m a rk e d w ith n u m be rs by d e f a u lt . It

is k n o w n a s n u m b e re d list a lso . T he o rd e re d list st a r ts w it h <o l> ta g a n d t he list

it e m s st a rt w it h < li> t a g

Unordered List or Bulleted List (ul)

6
In H TM L U n o rd e re d list, a ll th e list it e m s a re m a rk e d w it h b u lle t s. It is a lso k n o w n

a s bu lle t e d list a lso . T he U n o rd e re d list st a r ts w it h <u l> t a g a n d list it e m s st a rt

w it h t he < li> t a g .

Description List or Definition List (dl)

H T M L D e sc rip t ion list is a lso a list sty le w h ic h is s up p o rt e d by H T M L a n d X H TM L .

It is a lso k n o w n a s D e f in it io n list w he re e n t rie s a r e list e d lik e a d ic tio n a ry o r

e n c y c lo p e d ia . T he d e f in it io n list is v e ry a p p r op r ia te w h e n y o u w a n t to p re se n t

glo ssa ry , list o f t e rm s o r a n o th e r n a m e -v a lu e list . Th e H T M L d ef in itio n list

c o n ta in s f o llo w in g t hre e t a g s:

<d l>t a g d e fin e s th e sta rt o f th e list .

<d t > t a g d e f in e s a te rm .

<d d > t a g d e fin e s th e te rm d e f in it io n ( d e sc rip t io n ) .

Note: We create a list inside another list, which will be termed as nested List.

HTML Form

A n H TM L f o rm is a s ec tio n o f a d o c u m e n t w h ic h c o n t a in s c o n t ro ls su c h a s t e xt fie ld s,

p a ssw o rd f ie ld s, c h e c k b o xe s, ra d io bu t to n s, su b m it b u tt o n , m e n u s e tc .

A n H T M L fo rm fa c ilit a t e s th e u se r t o e n te r d a t a t ha t is t o b e se n t t o t he se r ve r f o r

p ro c e ssin g su c h a s n a m e ,e m a il a d d re ss, p a ssw o rd , p h o n e n u m be r, e t c .

7
 Why use HTML Form

H T M L f o rm s a r e re q u ire d if y o u w a n t to c o llec t so m e d a t a f ro m o f t he site v isit o r.

Fo r e xa m p le : I f a u se r w a n t t o p u rc h a se so m e it e m s o n in t e rn e t, h e /sh e m u st f ill

th e f o rm su c h a s sh ip p in g a dd r e ss a n d c re d it /d e bit c a rd d et a ils so t ha t ite m c a n

be se n t t o th e g ive n a d d re ss.

HTML Form Syntax

1. < fo rm a c tio n = "se rv er u rl" m e th o d = "ge t |p o st ">

2. // in p u t c o n t ro ls e .g . t e xtf ie ld , t e xt a re a , ra d io bu t t o n , bu t to n

3. < /f o rm >

HTML Form Input Types

In H TM L <in p u t t y p e = " "> is a n im p o rt a n t e lem e n t o f H TM L fo rm . Th e "t y p e "

a t trib u te o f in pu t e le m e n t c a n be v a r io u s t y p e s, w h ic h d e fin e s in fo r m a t io n

fie ld . S u c h a s < in p u t ty p e = "t e xt" n a m e = "n a m e "> g iv e s a te xt bo x.

Fo llo w in g is a list o f a ll ty p e s o f <in p u t> e le m en t o f H T M L .

type= Description

""
te xt D e f in e s a o n e -lin e t e xt in p u t f ie ld .

p a ssw D e f in e s a o n e -lin e p a ssw o rd in p u t fie ld .

o rd

su bm it D e f in e s a su b m it b u tt o n to su bm it th e fo rm t o
se rve r.

re se t D e f in es a r e se t bu t t o n t o re se t a ll va lu e s in
th e fo rm .

ra d io D e f in e s a ra d io bu t to n w hic h a llo w s se le c t o n e
o p tio n .

8
 f ile D e f in e s t o se le c t t he file fro m d e v ic e st o ra g e .

im a g e D e f in e s a gra p hic a l su bm it bu t to n .

1.6 HTML Classes

C la ss A tt ribu t e in H T M L

Th e H T M L c la ss a tt ribu t e is u se d t o sp e c if y a sin g le o r m u lt ip le c la ss n a m e s fo r

a n H T M L e le m e n t. T he c la ss n a m e c a n b e u se d by C S S a n d Ja v a S c rip t to d o so m e

ta sk s fo r H TM L e le m e n t s. Y o u c a n u se th is c la ss in C S S w it h a sp e c if ic c la ss, w rite

a p e rio d ( .) c h a ra c te r, f o llo w e d by t he n a m e o f th e c la ss fo r se le c t in g ele m e n t s.

A c la ss a tt ribu t e c a n b e d e f in e d w it hin <st y le > t a g o r in se p a ra te f ile u sin g t he ( .)

c ha ra c t e r.

In a n H TM L d o c u m e n t, Advantages of HTML

S im p lic ity a n d E a se o f U se . A p rim a r y a d va n ta ge o f u sin g H T M L is th a t it is sim p le a n d

p ra c tic a l.

C om p a t ib ilit y . ...

9
 CHAPTER-2
CSS

C a sc a d in g S ty le Sh e e ts ( C S S) is a st y le sh e e t la n g u a g e u se d f o r sp e c if y in g th e

p re se n t a t io n a n d st y lin g of a d o c u m e n t w rit te n in a m a rk up la n g u a g e su c h a s

H TM L o r X M L ( in c lu d in g X M L d ia le c t s su c h a s SV G , M a th M L o r X H T M L ) .

2.1 CSS

• C S S d e sc ribe s h o w H T M L e le m e n ts a re to be d isp la y e d o n sc r e en , pa p e r, o r in o t he r m ed ia

• C S S sa ve s a lo t o f w o rk . It c a n c o n t ro l th e la y o u t o f m ult iple w e b p a g e s a ll a to n c e

• E xt e rn a l sty le sh e et s a re st o re d in C SS f ile s.

Why Use CSS?

C SS is u se d to d e f in e st y le s fo r y o u r w e b p a g e s, in c lu d in g t he d e sig n , la y o u t a n d

va ria t io n sin d isp la y f o r d iff e re n t d e v ic e s a n d sc r e e n siz e s.

10
 CSS Solved a Big Problem

H T M L w a s N E V E R in te n d e d to c o n ta in t a gs f o r f o rm a t t in g a w e b p a g e ! H TM L w a s c re a te d

to d e sc rib e t he c o n t e n t o f a w e b p a g e , lik e :

<h 1> Th is is a h e a d in g< /h 1>

<p > Th is is a p a ra gr a p h. < /p >

W h e n t a g s lik e < f o n t> , a n d c o lo r a t trib ut e s w e re a d d ed t o t he H T M L 3 .2

sp e c if ic a t ion , it st a r te d a n ig h tm a re f o r w e b d e v e lo p e rs. D e v e lo p m en t o f la rg e

w e b site s, w h e re f o n ts a n d c o lo r in f o rm a tio n w e re a d d e d t o e ve ry sin g le p a ge ,

be c a m e a lo n g a n d e xp e n siv e p ro c e ss. To so lv e t his p ro b le m , t he W o rld W id e W e b

C o n so rt iu m ( W 3 C ) c re a t e d C S S.C SS re m o v e d th e st y le f or m a t t in g f ro m t he H T M L

p a g e!

CSS Syntax

Th e se le c t o r p o in t s to t he H TM L e le m e n t y o u w a n t t o sty le .

How to add CSS

C SS is a d d e d t o H TM L pa ge s t o fo rm a t t h e d o c u m e n t a c c o r d in g to in fo rm a t io n in th e sty le

she e t .Th e re a re th re e w a y s to in se rt C SS in H TM L d o c u m e n ts.

1. In lin e C SS

2. In t e rn a l C S S

3. E xt e rn a l C SS CSS Selector

11
 C SS se le c t o rs a re u se d to se le c t t he c o n t e n t y o u w a n t t o st y le . Se le c t o rs a re th e

p a rt o f C S S ru le se t . C SS se le c t o rs se le c t H TM L e le m e n t s a c c o rd in g t o it s id ,

c la ss, t y p e , a t trib u te e t c .

Th e re a re se ve ra l d if fe re n t ty p e s o f se le c t o rs in C S S.

1. C S S E le m e n t S e le c t o r

Th e e le m e n t se le c t o r se le c t s th e H T M L e le m e n t by n a m e .

2. C S S Id Se le c t o r

id se lec to r se le c t s th e id a t trib u te o f a n H TM L e le m e n t t o se le c t a sp e c if ic e le m e n t . A n id

isa lw a y s u n iq u e w it hin th e p a g e so it is c ho se n t o se le c t a sin g le , u n iq u e e le m e n t .

It is w rit t e n w it h t he ha sh c h a ra c te r ( # ), f o llo w e d by t he id o f th e e le m e n t.

Th e c la ss se le c t o r se le c ts H T M L e le m e n t s w it h a sp e c ific c la ss a tt ribu t e . It is u se d w it h a

p e rio d c h a ra c t er . ( Fu ll st o p sy m b o l) fo llow e d b y t h e c la ss n a m e .

3. C S S U n ive rsa l S e le c t o r

Th e u n ive rsa l se le c to r is u se d a s a w ild c a rd c h a ra c te r . It se le c ts a ll t he ele m e n t s o n th e

p a g es .

Inline CSS
W e c a n a p p ly C SS in a sin gle e le m en t by in lin e C S S t e c hn iq u e.

Th e in lin e C SS is a lso a m e t ho d t o in se rt st y le she e t s in H T M L d o c u m e n t. Th is m e t ho d

m itiga t es so m e a d va n t a ge s o f sty le she e t s so it is a dv ise d t o u se th is m e t h o d sp a rin gly .

If y o u w a n t to u se in lin e C SS , y o u sho u ld u se t he st y le a tt ribu t e to t he re le va n t t a g .

Syntax:
1. < ht m l t a g st y le = "c ssp ro p e rt y 1 :v a lu e ; c ssp ro p e rt y 2 :v a lu e ;"> < /h tm lt a g >E xa m p le :

12
2. < h2 st y le = "c olo r: re d ; m a rgin -le f t :4 0 p x;"> In lin e C SS is a p p lie d o n t his he a d in g . < / h2 >

3. < p >T his p a ra gra p h is n o t a f fe c t e d . </ p > Output:

In lin e C S S is a p p lie d o n th is h e a d in g. T his p a ra gra p h is n o t a f fe c t e d .

Disadvantages of Inline CSS

• Y o u c a n n o t u se qu o t a t io n s w it hin in lin e C SS . If y o u u se qu o t a t io n s t he b ro w se r w ill in te rp re t

t his a s a n e n d o f y o u r st y le v a lu e .

• Th e se sty le s c a n n o t be re u se d a n y w h e re e lse .

• Th e se sty le s a re t o u gh to be e d ite d b e c a u se th e y a re n o t st o re d a t a sin gle p la c e .

• It is n o t p o ssib le t o st y le p se ud o -c o d e s a n d p se u d o -c la sse s w it h in lin e C S S.

• In lin e C SS d o e s n o t p r ov id e b ro w se r c a c h e a d va n t a g es .

Internal CSS

Th e in t e rn a l st y le she e t is u se d t o a d d a u n iqu e st y le fo r a sin gle d o c u m e n t . It is

d e fin e d in

<h e a d > se c tio n o f t he H TM L p a g e in sid e t h e < st y le > ta g.

External CSS
Th e e xt e rn a l st y le sh e e t is g e n e ra lly u se d w h e n y o u w a n t t o m a k e c h a n g e s o n m u lt ip le

p a g es . It is id e a l fo r t h is c o n d itio n be c a u se it fa c ilit a t e s y ou t o c ha n ge t he loo k o f t he

e n tire w e b site by c h a n g in g jus t o n e file .

It u se s t he <lin k > ta g o n e ve ry p a g e a n d t he <lin k > ta g sho u ld be p u t in sid e t h e h e a d se c t io n .

E xa m p le :

1. <head>

13
2. <link re l= "sty le sh e e t" ty p e = "t e xt/ C S S" hre f = "m y st y le .c ss">

3. </head>

Th e e xt e rn a l st y le sh e et m a y b e w r it t e n in a n y t e xt e d ito r b u t m u st be sa v e d w it h a .c ss

e xte n sio n .Th is f ile sh o u ld n o t c o n t a in H TM L ele m e n t s.

Comments, Color, Padding and MarginsCSS Comments

C o m m e n t s a re u se d to e xp la in t he c od e , a n d m a y h e lp w h e n y o u e d it t he so u rc e c o d e a t a

la te rd a te . C o m m e n ts a re ig n o re d by bro w se rs.

A C S S c o m m e n t is p la c e d in sid e th e < st y le > e le m e n t , a n d st a rt s w it h /* a n d e n d s

w it h * /

CSS Colors

C o lo rs a re sp e c ifie d u sin g p re d e fin e d c o lo r n a m e s, o r R G B , H E X , H S L , R G B A , H S L A v a lu e s.

CSS Background Color

Y o u c a n se t t h e b a c k gro u n d c o lo r f o r H TM L e le m e n t s:

H e llo W o rld

C SS Te xt C o lo r

Y o u c a n se t t h e c o lo r o f t e xt: H e llo W o rld

L o re m ip su m d o lo r sit a m e t , c o n se c t e tu e r a d ipisc in g e lit, se d d ia m n o n a rm y n ib e u lim id

in c id e n t a tla bre t d olo re m a gn a a liq u o t a t vo lita n t .

CSS Border Color

Y o u c a n se t t h e c o lo r o f b o rd e rs:

14
<h 1 st y le = "b o rd e r:2 p x so lid To m a t o ;">H e llo W o rld </ h1 >

<h 1 st y le = "b o rd e r:2 p x so lid D o d ge r B lu e ;">H e llo W o rld < /h 1 >

<h 1 st y le = "b o rd e r:2 p x so lid V io le t ;">H e llo W o rld </ h1 >

CSS Margins

Th e C S S m a rg in p ro p e rt ie s a re u se d to c re a t e sp a c e a ro u n d ele m e n t s, o ut sid e o f

a n y d e fin e d b o rd e rs. W it h C S S, y o u ha ve fu ll c o n t ro l o v e r t h e m a rgin s. Th e re a re

p ro p e rtie s fo r se tt in g th e m a rg in f o re a c h sid e o f a n e le m e n t ( t op , rig ht , bo t to m ,

a n d le f t ).

CSS Margin Properties

Property Description

m a r gin T his p ro p e rty is u se d to se t a ll th e p ro p e rtie s in o n e

d e c la ra t io n .

m a rg in - it is u se d to se t le f t m a rgin o f a n e le m e n t .

le f t

m a rg in - It is u se d t o se t righ t m a rgin o f a n e le m e n t .

rig ht

m a rgin - t o p It is u se d t o se t to p m a rgin o f a n e le m e n t .

15
2.2 CSS Padding

Th e C SS p a d d in g pr o p er tie s a re u se d t o ge n e ra te sp a c e a ro u n d a n e le m e n t 's c o n t e n t ,

in sid e o fa n y d e fin e d bo rd e rs.

W it h C SS , y o u ha ve f u ll c o n t ro l o ve r t he p a d d in g . Th e re a re p ro p e rt ie s fo r se t t in g t he

p a d d in gf o re a c h sid e o f a n e le m e n t (t o p , righ t , bo t to m , a n d le f t ).

The CSS Box Model

In C SS , t he te r m "b o x m o d e l" is u se d w he n t a lk in g a bo u t d es ig n a n d la y o u t.

Th e C SS b o x m o d e l is e sse n tia lly a bo x t ha t w ra p s a ro u n d e ve ry H TM L e le m e n t. It

c o n sist s o f: m a rgin s, bo r de r s, p a d d in g, a n d t he a c tu a l c o n t e n t. Th e im a ge be lo w

illu stra t es t he b o x m o d e l:

E xp la n a t io n o f th e d if fe re n t p a rt s:

• Content - T he c o n t e n t o f th e b o x, w he re t e xt a n d im a ge s a p p e a r

• Padding - C le a rs a n a re a a ro u n d t h e c o n t e n t. T he p a d d in g is tra n sp a re n t

• Border - A b o rd e r th a t go e s a ro u n d t he p a d din g a n d c o n te n t

• Margin - C le a rs a n a re a o u tsid e th e b o rd e r. Th e m a rg in is tra n sp a re n t Th e bo x m o d e l

Icons, Lists and Buttons

Ic o n s c a n e a sily b e a d d e d to y o u r H TM L p a g e , by u sin g a n ic o n libr a ry .

16
 How To Add Icons

Th e sim p le st w a y to a d d a n ic o n to y o u r H TM L p a g e, is w ith a n ic on libra ry , su c h a s

Fo n t A w e so m e .A d d th e n a m e o f t h e sp e c if ie d ic o n c la ss to a n y in lin e H TM L e le m en t

(lik e <i> o r < sp a n > ).

A ll t he ic o n s in t he ic o n libr a rie s b e lo w , a re sc a la b le ve c t o rs th a t c a n be c u sto m iz e d w ith

C SS ( siz e ,c o lo r, sha d o w , e tc .)

Styling Links

L in k s c a n be st y le d w ith a n y C S S p ro p e rt y (e .g ., c o lo r, f o n t-f a m ily , b a c k g ro u n d , e t c .). a

{c o lo r: h o t p in k ;}

In a d d itio n , lin k s c a n b e st y le d dif fe r e n tly d e p e n d in g o n w h a t sta te t he y a re in t he f o u r

lin k s st a t e sa r e :

• a : lin k - a n o rm a l, u n visite d lin k

• a : v isit e d - a lin k th e u se r h a s v is it e d

• a : h o ve r - a lin k w h e n t h e u se r m o v se s o ve r it

• a : a c tive - a lin k t h e m o m e n t it is c lic k e d

CSS Lists

C SS list p ro p e rtie s a llo w y o u t o :

• Se t d iff e re n t list ite m m a rk e rs fo r o rd e re d list s

17
 • Se t d iff e re n t list ite m m a rk e rs fo r u n o rd e re d list s

• Se t a n im a g e a s t he list it e m m a rk e r

• A d d ba c k g ro u n d c o lo rs to lists a n d list ite m s CSS Buttons

In H TM L , w e u se t he bu t to n ta g to c re a t e a bu t t o n , b u t by u sin g C SS p ro p e rt ie s, w e

c a n st y le th e b u tt o n s. B u tt o n s h e lp u s to c re a te u se r in te ra c tio n a n d e ve n t

p ro c e ssin g . T he y a re o n e o f t he w id e ly u se d e le m e n t s o f w eb p a g es . D u rin g th e

fo rm su b m issio n , to vie w o r to g et so m e in fo rm a t io n , w e ge n e ra lly u se bu t t o n s.

2.1 Navigation bar and Radio ButtonCSS Navigation bar

A N a v ig a t io n b a r o r n a vig a t io n sy st e m c o m es u n d e r G U I t ha t h e lp s th e v isit o rs in

a c c e ssin g in fo r m a t io n . It is t he U I e le m e n t o n a w e b pa ge t ha t in c lu d e s lin k s fo r

th e o t h e r se c t io n s o f t he w e bsit e .

A n a v ig a t io n ba r is m o st ly d isp la y e d o n t h e to p o f t he p a ge in t he f o rm o f a

ho rizo n t a l list o f lin k s . It c a n b e p la c e d b e lo w th e lo go o r th e he a d e r, b u t it sh o u ld

a lw a y s be p la c e d be f o re th e m a in c o n te n t o f t he w e bp a ge .

It is im p o r ta n t f o r a w e bsit e to ha ve e a sy -to -u se n a v iga tio n . It p la y s a n im p o rt a n t ro le

in t he w e bsit e a s it a llo w s t he v isit o rs to v isit a n y se c tio n qu ic k ly .

Th e ho riz o n ta l n a v ig a t io n ba r is th e h o riz o n t a l list o f lin k s, w h ic h is g e n er a lly o n th e

to p o f t he p a ge .

18
 CSS Radio Button

Th e ra d io bu t to n is a n H T M L e le m e n t t ha t h e lp s t o t a k e in p u t fro m th e u se r.

A lt ho u g h it is h a rd to st y le t he ra d io b u tt o n , p se u d o -e le m e n t s m a k e it e a sie r t o

sty le th e ra d io bu t t o n . R a d io b u tt o n s a re a p p lie d w he n th e re is th e re q u ire m e n t o f

a sin gle s ele c t ion f ro m a g ro u p o f ite m s.

Th is H TM L e le m e n t is ge n e ra lly u se d o n ev e ry w e bsite , b u t w it h o ut sty lin g t he m ,

th e y lo o k sim ila r o n e v e ry w e bsit e . So , sty lin g t h e m w ill m a k e o u r sit e d iff e re n t

a n d a t tr a c t iv e . D e sig n in g th e ra d io bu t to n u sin g C S S is a n in te re st in g a n d c re a tiv e

ta sk , w h ic h w ill p ro v id e a n e w lo o k t o th e de f a ult ra d io bu t to n .

To c re a t e th e c u sto m ra d io b u tt o n s, w e re qu ire to w rite a n H T M L m a rk u p , a n d t o sty le , w e

ha ve t o w rit e th e C SS .

2.2 CSS Animation

C SS A n im a t io n p ro p e rty is u se d t o c re a t e a n im a tio n o n t he w e b p a g e. I t c a n be u se d a s a

re p la c e m e n t o f a n im a tio n c re a t e d by F la sh a n d Ja v a S c rip t.

C SS 3 @ k e y f ra m e s R u le

Th e a n im a t ion is c re a t e d in t he @ k e y f ra m e r ule . It is u se d t o c o n tr o l t he in te rm e dia te

ste p s in a C S S a n im a t io n se qu e n c e . What animation does?

A n a n im a t io n m a k e s a n e le m e n t c h a n g e g ra d ua lly f ro m o n e st y le to a n o t he r. Y o u

c a n a d d a s m a n y a s p ro p e rt ie s y o u w a n t to a d d . Y o u c a n a lso sp e c ify th e c ha n ge s

in p e rc e n t a g e .0 % sp e c if y t h e st a r t o f t he a n im a t io n a n d 1 0 0 % s pe c if y it s c o m p le tio n .

19
 CSS Solved a Big Problem

H T M L w a s N E V E R in t en d e d to c o n ta in t a g s f o r f o rm a tt in g a w e b p a ge ! H TM L w a s c re a te d

to d e sc ribe t he c o n t en t o f a w e b pa ge , lik e : <h 1 >T his is a h e a d in g< /h 1 >

<p > Th is is a p a ra gr a p h.< /p >

W h e n ta gs lik e < f o n t> , a n d c o lo r a tt ribu t e s w e re a d d e d t o th e H TM L 3 .2

sp e c if ic a t ion , it st a rt e d a n ig ht m a re fo r w e b d e ve lo p e rs. D e ve lo p m e n t o f la r ge

w e b site s, w he re f o n ts a n d c o lo rin f o rm a tio n w e re a d d ed t o e v e ry sin gle p a g e ,

be c a m e a lo n g a n d e xp e n siv e p ro c e ss .

2.3 Display and Position Property

E ve ry H TM L e le m e n t ha s a d e fa u lt d isp la y va lu e d e p e n d in g o n w h a t ty p e o f e le m e n t it is .

Th e d e f a u lt d isp la y v a lu e f o r m o st e le m e n t s is b lo c k o r in lin e .

CHAPTER-3

JAVASCRIPT

3.1 JavaScript Introduction

Ja va Sc rip t is t he w o rld 's m o st p o p u la r p ro gra m m in g

20
 L a n g u a ge . Ja v a S c ript is t h e p ro g ra m m in g la n g ua ge o f th e W e b . Ja v a S c rip t is e a sy to le a rn .

Th e < sc rip t> Ta g

In H T M L , Ja va Sc rip t c o d e is in se rt e d be t w e e n < sc rip t> a n d </ sc rip t> ta gs.

<sc rip t > d o c u m e n t.g e tE le m e n t B y Id ("d e m o ").in n e r HTML = "M y F ir stJa v a S c rip t";

</ sc rip t>

JavaScript Programs

A c o m p u te r p ro g ra m is a list o f "in st ru c t io n s" t o be "e xe c u t ed " b y a c o m p u t e r. In a

p ro gra m m in g la n gu a ge , t he se p r o gra m m in g in st ru c t io n s a re c a lle d st a t e m e n ts . A

Ja va Sc rip t p ro g ra m is a list o f pr o gra m m in g st a t e m e n t s. In H TM L , Ja va Sc rip t

p ro gra m s a re e xe c u t e d b y th e w e b bro w se r.

JavaScript Syntax

Ja va Sc rip t sy n ta x is t he se t o f ru le s, h o w Ja va Sc rip t p ro g ra m s a re c o n str u c te d :

// H o w to c re a te v a ria b le s: v a r x; le ty ;

// H ow to u se

va ria ble s: x = 5; y = 6;

le t z = x + y ;

3.2 Variables and Data Types

Ja va Sc rip t va ria b le is sim p ly a n a m e of st o ra g e lo c a t io n . Th er e a re t w o t y p e s o f va ria ble s

in Ja v a S c rip t: lo c a l va ria ble a n d glo b a l v a r ia ble .

21
 Th e re a re so m e ru le s w h ile d e c la rin g a Ja v a S c rip t va ria b le ( a lso k n o w n a s id e n tif ie rs) .

1. N a m e m u st sta rt w it h a le tt e r ( a to z o r A t o Z ), u n d e rsc o r e( ), o r d o lla r( $ ) sig n .

2. A f te r f irs t le tt e r w e c a n us e d igit s (0 t o 9 ) , f o r e xa m p le v a lu e 1 .

3. Ja v a S c rip t va ria b le s a r e c a se se n sit ive , f o r e xa m p le x a n d X a re d iff e re n t va ria ble s.

JavaScript Global Variable

A Ja v a S c rip t glo ba l v a ria b le is d e c la re d o u t sid e t he fu n c t io n o r d e c la re d w it h w in d o w

o bje c t. It c a n b e a c c e sse d f ro m a n y f u n c t io n .

JavaScript Data Types

Ja va Sc rip t p ro v id e s d if fe re n t data types t o ho ld d iff e re n t t y p e s o f va lu e s. T he re a re t w o

ty p e s o f d a t a t y p e s in Ja va Sc r ip t .

1. P r im it ive d a t a t y p e

2. N o n -p r im it ive (r e fe re n c e ) d a t a ty pe

Ja va Sc rip t is a dynamic type language, m e a n s y o u d o n 't n e e d t o sp e c ify t y p e o f t he

va ria ble b e c a u se it is d y n a m ic a lly u se d b y Ja v a S c rip t e n g in e. Y o u n e e d t o u se v a r

he re t o sp e c if y t he d a ta ty p e . It c a n ho ld a n y ty p e o f v a lu e s su c h a s n u m b e rs,

strin g s e t c . Fo r e xa m p le :

1. v a r a = 4 0 ;// ho ld in g n u m be r

2. v a r b= "R a hu l";/ /h o ld in g st rin g

I. A rith m e t ic o p e ra to rs a n d o p e ra to r P re c e d e n c e

A r it hm e tic o p e ra t o rs p e rfo r m a rith m e t ic o n n u m b e rs (lite ra ls o r v a ria b le s).

22
 O p e ra D e sc rip tio n

tor

+ A d d it io n

- Su b t ra c t io n

* M u lt ip lic a tio n

** E xp o n e n t ia tio n ( ES 2 0 1 6)

/ D ivisio n

% M o d u lu s ( R e m a in d e r )

++ In c re m e n t

-- D e c re m e n t

Arithmetic Operations

A t y p ic a l a rith m e t ic o p e ra tio n o p e ra t e s o n t w o n u m b e rs. T he t w o n u m b e rs c a n b e lite ra ls:

le t x = 1 0 0 + 50 ;

3.3 JavaScript Operator Precedence

O p e ra t o r pr e c e d en c e d e sc ribe s th e o rd e r in w hic h o p e ra t io n s a re p e rf o rm e d in a n

a rit hm e t ic e xp re ssio n .

M u lt ip lic a t io n ( *) a n d d ivisio n ( /) ha ve h ig he r p re c e d e n c e Th e n a d d it io n ( +) a n d

su bt ra c t io n ( -).

Objects, Arrays and Functions JavaScript Objects

Y o u ha ve a lre a d y le a r n e d t ha t Ja v a S c rip t v a ria b le s a re c o n ta in e rs f o r d a t a v a lu e s.

Th is c o d e a ssig n sa sim p le v a lu e (F ia t) to a v a ria ble n a m e d c a r: le t c a r = "Fia t";

23
 O bje c t s a re v a r ia ble s t o o. B u t o bje c t s c a n c o n t a in m a n y v a lu e s. Th is c o d e a ssign s m a n y

va lu e s( Fia t , 5 0 0 , w hite ) to a v a ria ble n a m e d c a r: c o n st c a r =

{ty p e : “ Fia t", m o d e l:"5 0 0 ", c o lo r: “ w hit e "} ;

3.4 JavaScript Arrays

A n a rra y is a sp e c ia l va ria ble , w hic h c a n ho ld m o re th a n o n e va lu e : c o n st c a rs =

["Sa a b ", "V o lv o ","B M W "] ; Why

Use Arrays?

If y o u ha ve a list o f ite m s (a list o f c a r n a m e s, fo r e xa m p le ) , st o rin g t he c a rs in sin gle

va ria ble s c o u ld lo o k lik e th is:

Let ca r1="Sa ab"; let car2="V o lv o ” ; let car3="BM W ";

A n a rra y c a n h o ld m a n y v a lu e s u n de r a sin g le n a m e, a n d y ou c a n a c c e ss t h e v a lu e s b y

re fe rr in g to a n in d e x n u m be r .

3.5 JavaScript Functions

A Ja v a S c rip t f u n c tio n is a blo c k o f c o d e d e sign e d to p e rf o rm a p a rtic u la r t a sk . A Ja v a Sc rip t

fu n c t io n is e xe c u t e d w h e n "so m e t h in g " in v o k e s it (c a lls it) .

// F u n c tio n t o c o m p u t e th e p ro d u c t o f p 1 a n d p 2 f u n c t io n m y F u n c tio n (p 1 , p 2 ) { r e tu rn p 1

* p2;

3.6 JavaScript String

Th e Ja va Sc rip t st rin g is a n o b je c t t ha t re p re se n t s a se q ue n c e o f c ha ra c t e rs. Th e re a re 2

w a y st o c r e a t e st rin g in Ja va Sc rip t

24
 1. B y str in g lit e ra l

2. B y str in g ob je c t ( u sin g n e w k e y w o rd )

C o n d itio n a l St a t e m e n t s a n d L o o p s C o n d itio n a l St a t e m e n t s

V er y o f t e n w h e n y o u w rit e c o d e , y o u w a n t to p e rf o rm d iff e re n t a c tio n s f o r d if fe re n t

d e c isio n s. Y o u c a n u se c o n d it io n a l sta te m e n ts in y ou r c o d e t o d o t his. In Ja va Sc rip t

w e h a v e t h e f o llo w in g c o n d itio n a l st a t e m e n t s:

3.7 JavaScript Loops

L o o ps a re ha n d y , if y o u w a n t t o ru n t he sa m e c o d e o ve r a n d ov e r a ga in , e a c h t im e w it h a

d if f e re n tv a lu e . O ft e n th is is t he c a se w he n w o rk in g w it h a rra y s.

Th e re a re fo u r t y p e s o f lo o ps in Ja va Sc r ip t .

1. f o r lo o p

2. w hile lo o p

3. d o -w hile lo o p

4. f o r-in lo o p

JavaScript Switch

Th e Ja v a S c rip t sw it c h sta te m en t is u se d to e xe c u te o n e c o d e f ro m m u lt ip le

e xp re ssio n s. I t is ju st lik e e lse if sta t em e n t t h a t w e ha ve le a rn e d in p re v io u s p a g e .

B u t it is c o n ve n ie n t th a n if… e lse ... I f b e c a u se it c a n be u se d w it h n u m be rs,

c ha ra c t e rs e tc .

25
 Type Conversion and Essential set MethodsJavaScript Type Conversion
Ja va Sc rip t v a r ia ble s c a n be c o n v e rte d t o a n e w v a ria b le a n d a n o t he r d a t a t y p e :

• B y th e u se o f a Ja v a Sc rip t fu n c t io n

• A u to m a t ic a lly b y Ja va Sc rip t it se lf Essential Set Methods

Method Description

New Creates a new Set

Set()
add() Adds a new element to the Set

delete Removes an element from a Set

()
has() Returns true if a value exists in the

3.8 Exception Handling in JavaScript

A n e xc e p t io n s ig n if ie s th e p re se n c e o f a n a bn o rm a l c o n dit io n w h ic h re q uire s

sp e c ia l o p e ra ble t e c hn iqu e s. In p r o gra m m in g t e rm s, an e xc e p t io n is t he

a n o m a lo u s c o d e t ha t b re a k s t h e n o r m a l flo w o f t he c o d e . Su c h e xc e p tio n s re q u ire

sp e c ia liz e d p ro g ra m m in g c o n st ru c ts f o r it s e xe c u tio n .

What is Exception Handling

In progra m m ing, except io n h and ling is a pro ce ss or m eth od u sed for

ha ndling the a b norm al sta tem ent s in th e co de and execu t ing them . It

also ena b les to ha ndle th e flow control of th e code/ program . F or

ha ndling th e code , va riou s ha ndlers a re u sed th a t process the

exce ption and execu te the cod e. F or e xa m p le , the D ivision of a

nonzero va lu e w ith zero w ill resu lt into infinity a lw a ys, and it is a n

26
 exce ption. Th u s, w ith the help of exception ha ndling, it an In except io n

ha ndling

A t hr ow st a t e m e n t is u se d to ra ise a n e xc e p t io n . It m e a n s w he n a n a bn o rm a l c o n d it io n

o c c u rs, a n e xc e p t io n is th ro w n u sin g th ro w .

Ja va Sc rip t t ry … c a tc h

A t ry … c a tc h is a c o m m o n ly u se d st a t e m e n t in va riou s p ro g ra m m in g la n gu a ge s.

B a sic a lly ,it is u se d to h a n d le t he e rro r-p ro n e pa rt o f th e c o d e . It in it ia lly t e st s t he

c o d e f o r a ll p o ssible e rro rs it m a y c o n t a in , th e n it im p le m e n ts a c t io n s t o t a c k le

th o se e rro rs ( if o c c u r ). A g o o d p ro gra m m in g a p p ro a c h is t o k e e p t he c om p le x c od e

w it hin th e t ry … c a t c h sta t e m e n ts. L e t's d isc u ss each blo c k of st a t e m e n t

in d iv id u a lly : try{} statement a n y e rr o r o c c u r, it p a sse s t o t he c a t c h{} blo c k fo r

ta k in g su it a b le a c t io n s a n d h a n d le th e e rro r. O t h e rw ise , it catch{} statement: Th is

blo c k ha n d le s t he e rro r o f t h e c o d e by e xe c u t in g th e s et o f st a t e m e n t s w rit te n

w it hin th e blo c k . Th is b lo c k c o n t a in s e it he r t he u se r-d e fin e d

CHAPTER-4

BOOTSTRAP

4.1 Bootstrap Introduction

• B o o tst ra p is t he m o st p o p u la r H T M L , C SS a n d Ja v a Sc r ip t f ra m e w o rk fo r d e ve lo p in g

re sp o n sive a n d m o bile f rie n d ly w e bsit e .

• It is a bso lu te ly fr ee t o d ow n lo a d a n d u se .

27
 • It is a f ro n t -e n d f ra m e w o rk u se d f o r e a sie r a n d f a st e r w e b d e ve lo p m e n t .

• It in c lu d e s H T M L a n d C S S ba se d d e sign te m pla te s fo r t y p o gra p hy , f o rm s, bu t t o n s, t a ble s,

n a viga tio n , m o d a ls, im a ge c a ro u se ls a n d m a n y o th e rs.

• It c a n a lso u se Ja va Sc rip t p lu g-in s.

• It fa c ilita t es y o u t o c r e a t e re sp o n siv e d e sig n s.

4.2 Button, Grid, Table, Form

Th e re a re se v e n st y le s t o a d d a bu t to n in B o o tst ra p . U se t he fo llo w in g c la sse s to a c h iev e

th e d if f e re n t b u tt o n sty le s:

• .bt n -d e fa u lt

• .bt n -p rim a ry

• .bt n -su c c e ss

• .bt n -in f o

• .bt n -w a rn in g

• .bt n -d a n g e r

• .bt n -lin k

GRID
A g rid is a st ru c t ur e ( u su a lly tw o -d im e n sio n a l) m a d e u p o f a se rie s o f in te r se c tin g

stra igh t ( ve rt ic a l, ho riz o n ta l) lin e s u se d to st ru c tu r e t he c o n t e n t. It is w id e ly u se d

to d es ig n la y o u t a n d c o n t e n t stru c t u re in p r in t d e sign . In w e b d e sign , it is a v e ry

e ff e c tiv e m e th o d to c re a t e a

28
 Bootstrap Tables

W e c a n c re a t e d if fe re n t ty p e s o f B o o t st ra p ta ble s by u sin g d iff e re n t c la sse s to st y le t he m .

Bootstrap Basic Table

Th e ba sic B o o t stra p t a b le ha s a ligh t p a d d in g a n d o n ly ho rizo n t a l d iv id er s. Th e .t a b le c la ss

issu e d t o a d d ba sic st y lin g to a t a b le .

Bootstrap Forms

In B o o t st ra p , t he re a re t h re e t y p e s o f f o rm la y o u t s:

• V e rt ic a l f o rm ( th is is d e fa u lt )

• H o rizo n t a l fo rm

• In lin e f o rm

• B o o tst ra p F o rm R u le s

• Th e re a re t hre e st a n d a rd r ule s f o r t h e se 3 f o rm la y o u t s:

• A lw a y s u se < f o rm ro le= "f o rm "> ( he lp s im p ro ve a c c e ssib ilit y f o r p e o p le u sin g sc re e n re a de r s)

• W ra p la b e ls a n d f o rm c o n t ro ls in <d iv c la ss= "f o rm -gr ou p "> ( n e e d e d fo r o p t im u m sp a c in g)

• A d d c la ss. f o rm -c o n t ro l t o a ll t e xtu a l < in p ut > , <t e xt a re a >, a n d < se lec t> e le m e n t s

4.3 Badges, Labels and PanelsBootstrap Badges

Bo o tstrap B ad ges are nu m erica l ind ica tors u sed to sh o w th at h o w ma ny item s a re

a sso ciated w ith the s pecific link . Ba d ges a re u sed to hig h ligh t new o r unread item s. Th e

c lass. ba d ge w ith in the <spa n> el em ent is u sed to crea te bad g es

29
 Bootstrap Labels

B o o t st ra p la b e ls a re us ed t o sp e c if y t he a d d it io n a l in f o rm a t io n a bo u t so m e t hin g

lik e o f fe rin g c o u n t s, tip s, o r o t he r m a k e u p fo r p a g e s. T he c la ss. la b e l is u se d to

d isp la y t he la b e ls.

Bootstrap Panels

In B o o t str a p , a p a n e l is a bo rd e re d bo x w it h so m e p a d d in g a ro u n d it s e le m en t . T he p a n e l

c o m p o n e n tsa re u se d w h e n y o u w a n t t o p u t y o u r D O M c o m p o n e n t in a b o x.

Th e c la s s. p a n e l is u se d w ith in t h e < d iv> e le m e n t to c re a te B o o tst ra p p a n e ls.

Th e c o n t e n t in sid e th e p a n e l h a s a . p a n e l-bo d y c la ss.

4.4 Images, Progress bar, List Group and DropdownsBootstrap

Images B o o t str a p su p p o rt s f o r im a g e s. Th e re a re t hre e c la sse s in B o o tst ra p t ha t c a n

be u se d t o a p p ly so m e sim p le st y le t o th e im a g e s.

Bootstrap Progress Bar

Th e p ro g re ss ba r sho w s ho w f a r a u se r is in a p ro c e ss. In B o o tst ra p , t h e re a re se ve ra l t y p e s

o fp ro g re ss ba rs.

Th e c la ss. p ro g re ss w ith in a <d iv > e le m e n t is u se d t o c re a te a d e f a u lt p ro g re ss ba r in

bo o t stra p .

30
 Bootstrap Dropdowns

D r o pd o w n m e n u s a re t o gg lea ble , c o n te xt u a l m e n u s, u se d fo r d isp la y in g lin k s in a

list f o rm a t. It fa c ilit a t e s u se rs t o c ho o se o n e va lu e f ro m a p re d e fin e d list . T his c a n

be m a d e in t er a c t iv e w it h t he d ro p d o w n Ja va Sc rip t plu g in .

Y o u ha ve to w ra p d ro p d o w n m e n u w ith in t he c la ss .d ro p d o w n
to c re a te B o o tst ra p D ro p d o w n

Bootstrap List Groups

B o o t st ra p list g ro u p is u se d to c re a t e a g ro u p o f list w it h list it e m s. Th e m o st ba sic list

gro u p isa n u n o rd e re d list c o n t a in in g list ite m s.

Th e c la ss ".list -gro u p " w it hin t he < u l> e le m e n t a n d t he c la ss ".list -g ro u p -it e m " w ith in t he

<li>e le m e n t a re u se d to c re a t e a ba sic list g ro u p .

4.5 Alert, wells, Collapse, Pagination, PagesBootstrap Alerts

B o o t st ra p A le rts a re u se d to p ro v id e a n e a sy w a y t o c re a te p re d e f in e d a le rt m e ssa ge s.

A le rt a d d sa st y le t o y o u r m e ssa g e s to m a k e it m o re a p p e a lin g t o th e u se rs.

Th e re a re fo u r c la sse s t ha t a re u se d w ith in < d iv> e le m e n t fo r a le rt s.

• .a le rt -su c c e ss

• .a le rt -in f o

• .a le rt -w a rn in g

• .a le rt -d a n ge r

31
Bootstrap Wells

In B o o t st ra p , w e lls a re u se d to a d d a ro u n d e d bo rd e r a r o un d a n e le m e n t w it h a gra y

ba c k g ro u n d c o lo ra n d so m e p a d d in g . I t is lik e a c o n t a in e r t ha t d isp la y s th e c o n t e n t .

Th e c la s s. w e ll, is u se d w it h < d iv > e le m e n t t o a d d w e ll.

Bootstrap Collapse

B o o t st ra p c o lla p se is u se d w he n y o u w a n t t o hid e a n d sho w la rg e a m o u n t o f c o n te n t .

Th e “ . c o lla p se " c la ss is u se d to sp e c ify t he c o lla p sible e le m e n t .

Bootstrap Pagination

P a g in a t io n is u se d t o so rt t he w e b p a g e s o f y o u r w e b site in a n o r ga n iz e d
m a n n e r. It b e c o m e sve r y n e c e ssa ry if y o u r w e bsit e h a s a lo t o f w e b p a g e s.
Fo llo w in g is a list o f c la sse s t ha t B o o t stra p p ro vid e s to ha n d le p a gin a t io n

Class Description

.p a g in a t io n A d d t his c la ss to g e t t he p a g in a t io n o n y o u r p a g e .

.d isa b le , Y o u c a n c u st o m ize lin k s b y u sin g .d is a ble fo r

.a c tiv e u n c lic k a ble lin k s a nd .a c t iv e to in d ic a te t he

c u rre n t p a ge .

.p a g in a t io n -lg, U se t he se c la sse s t o g e t d if fe re n t siz e it e m s.

.p a g in a t io n sm

Bootstrap Pager: B o o t str a p p a g e r is a f o rm o f p a gin a t io n . It is u se d t o

c re a t e pr e vio u s a n d n e xt b u tt o n s (lin k s) . T he ".pa ge r " c la ss is u se d w ith in t h e

<u l> e le m e n t t o c re a t e th e p r e vio u s / n e xt b u tt o n .

Using Sass

32
 W hile B o o t st ra p is b u ilt o n L e ss, it a lso h a s a n o f f ic ia l S a ss p o rt. W e m a in t a in it in a
se p a ra t e G itH u b re p o sit o ry a n d ha n d le u p d a t e s w it h a c o n ve rsio n sc rip t.

What's included
S in c e t he Sa ss p o rt h a s a se p a ra t e r e po a n d se rv e s a slig ht ly d if f e re n t a u d ie n c e , t he
c o n t e n ts o f th e p ro je c t d if f er g re a t ly fro m t he m a in B o o t str a p p ro je c t . Th is e n su re s t he
S a ssp o rt is a s c o m p a t ib le w ith a s m a n y S a ss-b a se d sy st e m s a s p o ssible

CHAPTER-5

React JS

5.1 Introduction React Js

R e a c t .js, o f t e n re f e rre d t o a s R e a c t, is a JavaScript library f o r b u ild in g fa st,

in t e ra c tive u se r in t e rf a c e s f o r w e b a n d m o bile a p p lic a t io n s. D e v e lo p e d a n d

m a in t a in e d by F a c e b o o k , R e a c t h a s b e c o m e o n e o f th e m o st w id ely u se d libra rie s

d u e t o it s e ff ic ie n c y a n d f le xibilit y .

History and Background

• Initial Release: M a rch 2013.

• Creator: Jo rd an W alke, a so ftw are eng ineer a t Fa cebo o k.

• Current Version: React 18 (a s o f 202 4).

33
• React w as d esig ned to so lv e the ch alleng es of b u ild ing d yna mic, d a ta-d riv en u ser interfa ces

efficiently.

Key Features of React.js

1 . Component-Based Architecture:

o Rea ct applica tio ns are bu ilt u sing s ma ll, reu sab le co m po nents tha t encapsu late U I lo gic and

rend ering.

2 . Virtual DOM:

o Rea ct u ses a lig htw eigh t in-m emo ry representatio n o f th e a ctua l DO M , ca lled th e V irtua l

D OM , to optim ize u pd ates a nd im pro ve perfo rm ance.

3 . JSX (JavaScript XML):

o A synta x th at allo w s w riting H TM L-like co d e w ithin Jav aS cript. o Ex am pl e:

co n st e l em en t = < h 1 >H e l lo , R e a ct!< /h 1 >;

4 . Declarative UI:
o D ev elo pers desc rib e h o w th e UI sh o uld lo o k , a nd React h and les u pd ates au to m atically wh en

th e d ata c hang es.

5.One-Way Data Binding : o D ata flo w s in a s ingle d irectio n, m aking

d ebu g ging a nd trac king state c hang es eas ier.

6.React Hooks: o E nable fu nctio nal c om po nents to us e s ta te and lifecycle

m etho d s. o E xa m ples: u se St a te , u se E ffe ct .

4. Core Concepts in React.js

34
• Functional Components: Lig h tw eig ht a nd u se Reac t ho o k s fo r s ta te and lifecy cle.

fu n ct io n G r e et in g () { r et ur n

<h 1 > H el lo , W o rl d !< /h 1 > ;

• Class Components: U sed befo re React h o o ks, h av e state a nd lifecycle meth o ds .

cl a ss G re e tin g e xte n d s R e a ct.C om po n e n t { r e n d er () { r e tu rn

<h 1 > H el lo , W o rl d !< /h 1 > ;

• Sh o rt fo r "pro perties."

• Us ed to pass d a ta fro m parent to ch ild co m po nents.

• E xam ple:

fu n ct io n W e lco m e (p r op s) { re tu r n

<h 1 > H el lo , { p ro p s.n a m e} !</ h1 > ;

• A lo cal da ta sto re for co m po nents , u sed to ma nag e d ynam ic da ta.

• E xam ple:

co n st [c ou n t, se tC o un t ] = u se S ta te (0 );

35
 • Fo r class co mpo nents, Reac t pro vides meth o ds like co m p on e n tD id M o u n t and

co m p o n e n tW il lU n m o u n t .

• Fu nctio na l co m ponents u se ho o k s lik e u se Ef fe ct .

• React u ses synth etic ev ents , wh ich w o rk co nsistently a cro ss bro w sers.

• E xam ple:

fu n ct io n ha n dl e C lick ()

{ a le r t('B u tt on c lick e d !');

< bu tt on o n C lick ={h a n d le C l ick }> C l ick M e </ bu tto n > ;

• Us ed for m anag ing g lob al state and a vo id ing "pro p d rilling ." E xam ple:

jsx

C o p y co d e co n st T he m e C o n te xt =

R e a ct .cr ea te C on t ex t('lig ht');

5.2 Advantages of React.js

1. Reusable Components : S peed s u p d ev elo pm ent and ensu res co nsistent U I.

2 . Improved Performance: V irtu al D O M ensu res efficient upd ates.

3. Large Ecosystem: A w id e ra nge o f libra ries a nd to o ls (e.g ., R edu x, React Ro u ter).

4. SEO-Friendly: Co m patib le with s erver-sid e rend ering fo r better SE O .

5 . Rich Tooling: D ev elo per to o ls fo r d ebu g ging and pro filing .

6. Limitations

36
1. Learning Curve: JS X a nd co m po nent-b ased d ev el opm ent ca n be c halleng ing fo r b eginners.

2 . Fast-Paced Updates: React evo lv es q u ickly , requ iring d evelo pers to stay upd a ted .

3. Complex Setup: Requ ires co nfig u ratio n with to o ls lik e W eb pack o r B ab el fo r fu ll a ppl icatio ns.

7. React Ecosystem

• Redux: Centralized sta te ma nag ement.

• Context API: N ativ e state-sh aring s olu tio n.

• Recoil: Simplified state m anag ement fo r co m plex apps.

• CS S-in-J S lib ra ries: Styl ed -c om po nents, E m otion.

• Utility-firs t CSS : Tailwind C SS.

• Axios: Po pul ar H TT P client for fetching d a ta.

• React Query: Ad v anced d a ta -fetching a nd cach ing lib rary.

• Apollo Client: Fo r Graph QL-based APIs.

• React Router: Fo r nav iga tio n and ro uting in SPA s.

• Jest, E nzym e, React T esting Library.

37
 8. Popular Use Cases

1. Single-Page Applications : D ash bo a rd s, CRM system s.

2 . Progressive Web Applications (PWAs).

3. Mobile Applications: Using Rea ct N ative.

4. Real-Time Apps : M essa ging a pps , so cial med ia platfo rm s.

9. Example Code

jsx

C o p y co d e im p o rt R e a ct f ro m

'r e a ct'; im po r t R e a ctD O M fr om

'r e a ct-d o m '; fu n ctio n A p p () { re tu r n

< d iv >

< h 1> W e lco m e to R e a ct.js!< /h 1>

< p > Th is is a sim p le R ea ct a p p .< /p >

< /d iv >

);

R e a ct D O M .re n d e r(< A p p /> , d o cu m e n t.g e tE le m e n tB y Id('ro o t'));

10. Conclusion

R e a c t .js r e vo lu tio n ize d f ro n t-e n d d e ve lo p m e n t b y in t ro d u c in g a c o m po n e n t b a se d

a rc h it e c t u re a n d e ff ic ie n t re n d e rin g. It s f le xib ilit y , p e rfo rm a n c e , a n d v a st e c o sy st e m

m a k e it a n e xc e lle n t c ho ic e fo r bu ild in g m o d e rn w e b a n d m o b ile a p p lic a t io n s.

38
 React Hooks
1. Introduction

R e a c t H o o k s a re sp e c ia l f u n c t io n s in t ro d u c e d in React 16.8 t ha t a llo w d e v e lo p e rs

to u se state a n d o t h er R e a c t fe a tu re s in functional components. H o o k s e n a b le

fu n c t io n a l c o m p o n e n t s t o h a v e fe a t ur e s t ha t w e re p re vio u sly e xc lu sive t o c la ss

c o m p o n e n ts, su c h a s m a n a g in g sta te a n d h a n d lin g lif e c y c le m e th o d s.

2. Why Use Hooks?

• Simplify Code: E lim inate th e need fo r co mplex c lass c om po nents.

• Reusable Logic: S ha re statefu l lo g ic b etween co m po nents u sing cu sto m h oo k s.

• Clean and Readable: A vo id cu m berso me lifecycle m etho d s and ma ke co d e ea sier to read

and m ainta in.

• Functional Paradigm: H o o ks lev era ge th e fu nctiona l pro gram m ing pa rad ig m , wh ich alig ns

with Rea ct’ s d eclarativ e natu re.

3. Commonly Used React Hooks

• Used fo r m anag ing state in a fu nctio nal co mpo nent.

• Synta x:

co n st [s ta te , se tS ta te ] = u se Sta te (in itia lV a lu e );

39
• H and les side effects lik e d ata fetch ing , su bscriptio ns, o r ma nua lly c hang ing the DO M .

• Synta x:

• Acc es ses context values prov id ed b y th e R e a ct.c re a te C o n te xt A PI.

• Creates a mutable reference to a n elem ent or v alu e th at persists acro ss rend ers.

• M anag es co m plex state logic us ing a red u cer fu nctio n.

• O ptimizes performance by m emo izing expensiv e co m pu ta tio ns.

• 4. Advanced Hooks

1 . useImperativeHandle:

o Cu sto m izes the instance v alu e expo sed w h en u sing R e a ct.f or w a rd R e f .

2 . useLayoutEffect:

o S imilar to us eE ff ec t , bu t fires sy nchro nou sly after all D O M m uta tio ns.

3 . useDebugValue:

o A d d s d ebu g info rm atio n fo r cu sto m ho o k s in R ea ct D evelo per T o o ls.

5. Custom Hooks

• Dev elo pers ca n crea te their o wn ho o k s to encapsu la te and reu se log ic.

• E xam ple:

im p o rt { us eS ta te , u se E ffe ct } fr om 're a ct '; fu n ctio n us eF e tch (ur l)

40
 { c on s t [da ta , se tD a ta ] =

us eS ta te (n u ll );

u se E ffe ct(() => { f et ch(u r l)

.t he n ((r es po n se ) => re sp o n se .jso n ())

.t he n (se tD a ta );

} , [u rl ]);

6. Advantages of Hooks

1. Simplifies co mpo nent lo g ic b y elim ina ting th e need fo r class co mpo nents.

2 .E nco u rag es th e u se o f fu nctio nal co mpo nents.

3.E nab les sh aring a nd reu se o f lo g ic w ith cu sto m ho o k s.

4.M ak es co m ponents easier to test and d eb ug .

7. Limitations of Hooks

1. Can be d ifficu lt to ma nag e fo r v ery larg e applica tio ns w itho u t d is cipline.

2. O veru se o f ho o k s can ma ke c od e h ard er to fo llo w (e.g ., to o m any u se Ef fe ct calls ).

3. Req uires u nd ersta nding o f clo su res a nd func tio nal pro g ra mm ing co ncepts.

R e a c t .js h a s e m e rg e d a s o n e of th e m o st p o w e rf u l a n d p o p u la r t o o ls f o r bu ildin g

m o d e rn , d y n a m ic , a nd sc a la ble w eb a p p lic a tio n s. It s c o m p o n en t -ba se d

a rc h it e c t u re , e ff ic ie n t V irtu a l D O M , a n d ro b u st e c o sy st e m e n a b le d e v e lo p e rs t o

c re a t e in t e ra c t ive a n d h igh p e rfo rm a n c e us er in te rf a c e s w ith e a se . B y sim p lify in g

c o m p le x U I d e ve lo p m e n t a n d e n su rin g m a in ta in a ble c o d e st ru c t u re s, R e a c t .js ha s

be c o m e t he f ra m e w o rk o f c h o ic e f o r p ro je c ts ra n gin g f ro m sim p le w e b site s t o

e n te rp rise -le v e l a p p lic a tio n s.

41
 W it h it s stro n g c om m u n ity su p p o rt , c o n t in u o u s u p d a t e s, a n d c o m p a t ibilit y w it h

m o bile d e ve lo p m e n t th ro u gh R e a c t N a tiv e, R e a c t.js o f fe rs a fu t u re -p ro o f so lu t io n

fo r d e v e lo p e rs lo o k in g t o d e live r e xc e p t io n a l u se r e xp e rie n c e s.

CHAPTER 6

MongoDB
6.1IntroductiontoMongoDB

M o n go D B is a n o p e n -so u rc e , N o SQ L d a t a b a se t ha t u se s a d o c u m e n t -o rie n t e d a p p ro a c h f o r d a t a
st o ra g e . U n lik e t ra d it io n a l re la t io n a l d a t a ba se s, M o n go D B s to re s d a t a in fle xible , JS O N -lik e
d o c u m e n t s c a lle d B SO N , e n a b lin g fa st a n d d y n a m ic sc h e m a d es ig n . It is w id e ly u se d f o r m od e r n
a p p lic a t io n s re q u irin g sc a la b ilit y , fle xibilit y , a n d h igh p e rf o rm a n c e .

M o n go D B e xc e ls in m a n a g in g u n st ru c t u re d o r se m i-stru c t u re d d a t a , m a k in g it a p e rf e c t c ho ic e
f o r a p p lic a t io n s lik e c o n t e n t m a n a g e m e n t , Io T, a n d b ig d a t a p ro c e ssin g . A s p a rt o f t he
M E A N / M E R N sta c k ( M o n go D B , E xp re ss, A n gu la r/ R e a c t, N o d e .js) , it p la y s a p iv o ta l r o le in
m o d e rn w e b d e v e lo p m e n t .

42
6.2AdvantagesofMongoDB

1. SchemaFlexibility: M o n g o D B a llo w s d ev e lo p e rs to c ha n ge d a ta str u c tu re s w it ho u t d o w n tim e .

Th is is p a rt ic u la r ly u se f u l f o r a p p lic a t io n s th a t e vo lv e ra p id ly , a s t he re ’ s n o n e e d t o p re d e fin e
t a b le sc h e m a s.

2. Scalability: It s h o riz o n t a l sc a lin g t hro u g h sh a rd in g e n su re s c o n sist e n t p e rf o rm a n c e a s y o u r

d a t a gro w s. M o n go D B sh a rd s c o lle c t io n s a c ro ss m u lt ip le n o d e s, ha n d lin g m a ssiv e d a t a se t s
se a m le ssly .

3. High Performance: O p t im iz e d f o r w rite -he a vy w o rk lo a d s, M o n g o D B su p p o rts high t hro u g hp u t

a n d lo w la te n c y . Fo r e xa m p le, ba t c h w rit e s a n d in -m e m o ry s to ra ge im p ro ve e f fic ie n c y .

4. Replication for Reliability: W it h bu ilt-in re p lic a tio n , M o n g o D B m a in ta in s d a ta a va ila bilit y

e v en d u rin g n o d e f a ilu re s, en s ur in g th a t a p p lic a tio n s re m a in o p e ra tio n a l.

6.3CRUDOperations
C R U D o p e ra tio n s re p re se n t t he f u n d a m e n t a l in te ra c tio n s w ith a d a t a b a se :

□ Create: In se rt in g n e w d o c u m e n t s in t o a c o lle c t io n u sin g in se rtO n e () o r in se rt M a n y ( ):

db.users.insertOne({name:"Alice",age:25,city:"NewYork"}); Read: Q u e ry in g d a t a
u sin g f in d ( ) :

db.users.find({city:"NewYork"});
□ Update: M o d if y in g docu m ents u sin g u pdateO ne() or u p d a t e M a n y ( ):
db.users.updateOne({name:"Alice"},{$set:{ age:26}}); Delete: R e m o v in g
docu m ents w it h d e le te O n e () or d e le t e M a n y ( ):
db.users.deleteOne({name:"Alice"});

6.4DataModelinginMongoDB
M o n go D B ’ s sc h e m a d e sign is h ig hly fle xible , bu t f o llo w in g be st p ra c t ic e s e n su re s o p t im a l
p e rf o rm a n c e :

EmbeddedDocuments: Fo r d a t a w it h a o n e -to -o n e re la t io n sh ip :

{
"name":"Alice",

43
 "address":{"city":"NewYork","zip":"10001"}
}
ReferencingDocuments: Fo r o n e -to -m a n y r ela tio n ship s:
{
"_id":1,
"name":"Shopkeeper",
"products":[1001,1002,1003]
}

6.5AggregationFramework
M o n go D B ’ s p o w e rf u l a gg re g a t io n f ra m e w o rk p ro c e sse s a n d tr a n sf o rm s d a t a in p ip e lin e s:

Example: Fe t c h in g th e a ve ra ge a ge o f u se rs in e a c h c it y :
db.users.aggregate([
{$group:{_id:"$city",avgAge:{$avg:"$age"}}}
]);

6.6IndexinginMongoDB
In d e xe s im p ro ve q u e ry p er fo rm a n c e by re d u c in g t he t im e t o lo c a te d a ta :

CreatingIndexes:
db.users.createIndex({name:1 });
CompoundIndexes: C o m b in e m u lt ip le f ie ld s:

db.users.createIndex({city:1,age:-1});

Chapter 7

44
 Node.js

7.1 Introduction to Node.js

N o d e .js is a c ro ss-p la tf o rm , o p e n -so u rc e ru n tim e e n v iro n m e n t t ha t a llo w s d e v e lo p e rs t o e xe c u te
Ja v a S c rip t c o d e se rv e r-sid e . B u ilt o n G o o g le C hro m e 's V 8 Ja va Sc rip t e n gin e , N o d e .js is k n ow n f o r
its e f fic ie n c y , sc a la bilit y , a n d e v e n t-d rive n a rc hit e c tu re .

7.2 Advantages of Node.js

Non-Blocking I/O: H a n d le s m u lt ip le re q u e sts sim u lt a n e o u sly w it ho u t blo c k in g t he m a in t hre a d ,
id e a l fo r h ig h-c o n c u rre n c y sc e n a rio s.

JavaScript Everywhere: U se Ja va Sc rip t a c ro ss t he f u ll st a c k , m in im iz in g c o n t e xt-sw itc h in g b e tw e e n

la n g u a g e s.

Rich Ecosystem: T he n p m re g istry p ro v id e s o ve r a m illio n p a c k a g e s, ra n g in g f ro m d a t a b a se

c o n n e c t o rs to u tilitie s fo r b u ild in g ro b u st a p p lic a t io n s.

7.3 Core Concepts

Event Loop: M a n a g e s a sy n c hr o n o us o p e ra t io n s lik e file I/ O o r H TT P re qu e st s, e n su rin g sm o o th
e xe c u t io n o f t a s k s.

7.4 Building RESTful APIs

N o d e .js, c o m bin e d w it h E xp re ss.js, is w id e ly u se d f o r c r e a t in g A P Is:

Se t t in g u p a n E xp re ss S e rv e r:

45
7.5 Real-Time Applications
R e a l-t im e a p p lic a tio n s lik e c ha t o r c o lla bo ra tive t o o ls le ve ra ge W e bS o c k e t s in N o d e .js:

7.6 Integration with MongoDB

In t e gra tin g N o d e .js w it h M o n go D B sim p lif ie s se rv e r-sid e d e ve lo p m e n t :

7.7 Error Handling

Sy n c hro n o u s E rro rs: U se t ry -c a t c h b lo c k s:

Asynchronous Errors: H a n dle p ro m ise s w it h .c a tc h () :

46
 CHAPTER-8
ABOUT PROJECT

8.1 Introduction:

Tranzy is a n in n o va tiv e w e b -b a se d p la tf o rm d e sign e d to stre a m lin e t he tra n sp o rt a t io n

e xp e rie n c e fo r c o lle ge st u d e n t s, f a c u lt y , a n d sta ff . It se rv e s a s a c e n t ra lize d h u b fo r
a c c e ssin g r ea l-t im e in fo rm a t io n a bo u t c o lle g e bu s ro u t e s, t ra c k in g t he p re c ise lo c a t io n
o f b u se s, a n d o b ta in in g e sse n t ia l d e ta ils a bo u t b u s d rive r s. W it h it s u se r-f rie n d ly
in t e rf a c e a n d p o w e rf u l f u n c tio n a lity , T ra n z y e n h a n c e s c o n ve n ie n c e a n d e f f ic ie n c y in
c a m p u s c o m m ut in g.

K e y fe a tu r e s o f Tra n zy in c lu de :

• Real-time Bus Tracking: P ro v id e s live u p d a t e s o n bu s loc a t io n s t o h e lp u se rs p la n t he ir

jo u rn e y s e f fe c t ive ly .

• Route Information: D isp la y s d e ta ile d b u s ro u t e s, en s ur in g t ha t stu d e n t s c a n e a s ily

n a vig a t e b e t w e e n c o lle g e fa c ilit ie s a n d n e a rby a r e a s.

• Driver Information: O f f er s q u ic k a c c e ss t o d riv e r d e ta ils f o r a d d e d s a f e ty a n d re lia b ility .

• User-friendly Portal: Sim p lifie s a c c e ss t o t ra n sp o rta tio n -re la t e d d a ta , m a k in g it e a sy f o r

st u d e n t s a n d sta ff to st a y in fo rm e d .

47
 B y in t e gr a t in g te c h n o lo gy in t o e v e ry d a y tra n sp o rt a t io n , Tra n zy c o n t ribu t e s to a m o re
o rga n iz e d a n d h a ssle -fre e c o m m u t in g e xp e rie n c e , m a k in g it a n e sse n t ia l to o l f o r m o d e rn
c o lle ge c a m p u se s.

8.2 Background:

T he B us -E c ru p la t fo rm , a va ila ble a t b u s-e c ru .v e rc e l.a p p , is a w e b-b a se d a p p lic a tio n

d e sig n e d to e n ha n c e c a m pu s tr a n sp o rt a t io n . It p ro vid e s re a l-t im e G P S t ra c k in g of
b u se s, in t e ra c tiv e ro u t e m a p p in g, a n d e sse n tia l d rive r in fo r m a t io n , e n su rin g a
se a m le ss c o m m u tin g e xp e rie n c e f o r s tu d e n t s, f a c u lt y , a n d sta ff . H o st e d o n Ve r c e l, t he
p la t f o rm d e liv e rs re lia b le p e rf o rm a n c e a n d u se r-fr ie n d ly fe a tu re s, a d d re ssin g c o m m o n
c h a lle n ge s lik e ro u te c o n fu sio n a n d d e la y s. B u s-E c ru sim p lifie s c a m p u s m o bilit y ,
m a k in g it a n e sse n t ia l to o l f o r e f fic ie n t a n d c o n n e c t e d t ra v e l w it hin e d u c a tio n a l
in st itu t io n s.

8.3 Objective

Th e pr im a ry o bje c t iv e s o f t he B u s-E c ru p la tf o rm a re a s f o llo w s:

• Provide Real-Time Bus Tracking : E n a b le u se rs t o t ra c k bu se s a c c u ra t e ly a n d m in im iz e

w a it in g tim e s.

• Simplify Route Navigation: O ff e r c le a r a n d in te ra c tiv e m a p s o f b u s ro u t e s fo r e a sy

n a v iga tio n a c ro ss c a m p u s.

• Enhance Transparency and Safety: P ro vid e a c c e ssib le d rive r p ro file s a n d bu s d et a ils t o b u ild
t ru st a m o n g u se rs.

• Improve Commuting Efficiency: R e d u c e d e la y s a n d o p t im iz e t ra n sp o rt a t io n sc h e du le s f o r

st u d en t s, f a c u lt y , a n d st a f f.

48
 • Promote Smart Transportation: In t e gra te t e c hn o lo gy t o m o d e rn ize c a m p us m o bilit y a n d
e n ha n c e th e c om m u t in g e xp er ie n c e .

• Ensure User-Friendly Accessibility: D e live r a sim p le a n d in t u itiv e p la t f o rm a c c e ssib le t o a ll

u se rs w it h m in im a l e f fo rt .

• Support Sustainability Goals: E n c o u ra g e t he e f fic ie n t u se o f sh a re d t ra n sp o rt a tio n re so u rc e s

t o re d u c e t he c a m p u s's e n v ir o n m e n ta l im p a c t.

8.4 Purpose

Th e pu r p os e o f th e B u s-E c ru p la t fo rm in c lu d e s:

• Tr a n sp o rt a t io n M a n a g e m e n t : M a in t a in o r ga n iz e d a n d d et a ile d re c o rd s of b u s ro u t e s,
sc he d u le s, a n d d rive r in f or m a t io n t o e n su re sm o o th o p e ra t io n .

• R e a l-T im e B u s T ra c k in g : P ro vid e u se rs w it h liv e u p d a t e s o n bu s lo c a tio n s, e n su rin g

tim e ly c o m m u t in g a n d re d u c in g w a it in g tim e s.

• R o u t e a n d Sc h e d u le In f o rm a tio n : O f fe r u se rs c le a r a n d u p -t o -d a te d e t a ils a bo u t bu s
ro u te s, st o p s, a n d t im in g s fo r b e tt e r p la n n in g.

• U se r A u th e n t ic a tio n a n d A c c e ss C o n t ro l: E n su re se c u re a c c e ss to t h e p la tf o rm w ith
ro le -b a se d a u t he n t ic a t io n f o r stu d e n t s, st a f f, a n d a d m in istra to r s.

8.5 Scope
Th e B u s-E c ru p la t fo rm is d e sig n e d t o a d d re ss t h e tra n sp o rt a t io n n ee d s o f st u d e n t s,
fa c u lty , a n d st a f f a c r o ss t he e n tire c a m p u s. It p ro v id e s re a l-t im e G P S tra c k in g f o r
bu se s, a llo w in g u se rs t o m o n it o r live lo c a tio n s a n d e st im a t e a rr iv a l t im e s
a c c u ra te ly . Th e p la t f o rm su p p o rts c o m p re h e n sive ro u t e m a n a g e m e n t , c o ve rin g a ll
c a m pu s ro u te s, st o p s, a n d sc h e d ule s, w hile a lso o f fe r in g d e t a iled d rive r in f o rm a tio n
to e n su re t ra n sp a re n c y a n d sa f e ty . W ith ro le -ba se d a c c e ss, it a c c o m m o d a te s v a rio u s
u se r t y p e s, in c lu d in g st u d e n ts, st a f f, a d m in ist ra t o rs, a n d d riv e rs, e n su rin g se c u re
a n d p e rso n a lize d in te ra c t io n s. A c c e ssible t h ro u gh a n y w e b-e n a b le d d e vic e , B u s-E c ru
bo a sts a u se r-fr ie n d ly in t e rf a c e th a t s im p lifie s n a v ig a t io n a n d c o m m u tin g . It s
sc a la b le d e sign a llo w s f o r f u t u re e xp a n s io n to in c lu d e a d dit io n a l c a m p u se s,
ve h ic le s, o r ro u t e s, a n d it c a n b e e n h a n c e d w ith a d v a n c e d fe a tu re s su c h a s

49
 au tom ated n o t if ic a t io n s and d a ta a n a ly tic s for im p ro v e d e ff ic ie n c y and
e n viro n m e n t a l im p a c t tra c k in g .

8.6 F ea tu res a nd Fu nct io nality

Th ere a re tw o m a in a ctors of the B u s-E cru pla tform w ho intera ct directly

w ith th e app lica tion: A d m in a nd U sers (St u dents, Fa cu lty, and D rive rs).

A dm in Fea tu res:

• U ser M ana g em ent: o A dm in ca n view a ll reg ist ered u sers (stu dents,

facu lty, and driv ers) in th e system . o A dm in ca n A DD , D E LE TE , or U PD A T E

u ser profiles a nd m a na ge a ccess rig hts.

• Rou te a nd S ch edu le M a nag em ent :

o C re ate, edit, or rem ove bu s rou tes a nd sched u les as p er ca m pu s

requ irem ents.

o M onitor adh erence t o sch edu les and optim iz e rou t es for efficiency.

• Driv er a nd Veh icle O v ersig ht:

o M a nag e driv er deta ils, inclu d ing licenses a nd av aila bility.

o M onitor the sta tu s a nd condition of vehicles.

• Rep orting a nd A na lytics:

50
 o G enera te repo rts on bu s u t iliza tion, u ser activ ities, a nd pla tform

perform a nce. o A nalyze d ata to im prove tra nsportat io n efficiency a nd

identify area s for im provem ent.

• Cont ent M ana gem ent:

o U pda te pla tform inform at io n, inclu ding a nnou ncem ents, e m ergency a lerts,

a nd gu idelines for u sers.

U ser F ea tu res:

1. Stu de nt a nd Fa cu lty Fea tu res:

o View B u s R ou te s: B row se a nd sea rch for a va ilab le ro u tes and schedu les. o

T ra ck B u s Loca tion: U se G P S track ing to m onitor live b u s loca tions

a nd estim ate d a rriv al tim es. o P la n C om m u tes: A ccess u p-to-da te

rou te inform at ion to sched u le t ra vel efficiently.

o R eceive N otifications: G et alerts for rou te ch ang es, dela ys, or

ca nce lla tions. o Provide F eedb ack : Ra te and review bu s services a nd

report issu es for im prov em ent.

2. Driv er F ea tu re s:

o View A ssigned Ro u tes: A ccess deta iled inf orm ation ab ou t ro u tes,

stops, and sch edu les. o M a rk T rip P rog re ss: U pdat e b u s statu s du ring

51
 rou tes, su ch as a rriva l a t stops or com p letion of trips. o R eceiv e

N otifications: G et a lert s for rou te u pda tes, em erg encies, or spe cia l

instru ct ions fro m a dm in. o P rovide F eedb a ck : Sh are inpu t a bou t ro u te

conditions or ve hicle sta tu s for system im prov em ent.

Benefits and Disadvantages of the Bus-Ecru Platform

B e n e fit s

1. Im p ro v e d E ff ic ie n c y :

o R e a l-t im e G P S t ra c k in g re d u c e s w a itin g t im e s a n d e n su re s tim e ly c o m m u t e s f o r

st u d e n ts a n d st a f f .

o O p t im ize d ro u te s a n d sc h e d u le s im p ro v e o ve ra ll tr a n sp o rt a t io n e f fic ie n c y .

2. E n ha n c e d Tra n sp a re n c y :

o U se rs c a n a c c es s d e t a ile d in f o rm a tio n a b ou t bu s ro u t e s, sc he d u le s, a n d d riv er d e t a ils,

fo st e rin g t ru st a n d r e lia b ilit y .

3. U se r C o n v e n ie n c e :

o Th e p la t fo r m 's u se r-frie n d ly d e sig n m a k e s it e a sy t o n a viga te a n d a c c es s re le v a n t

t ra n sp o rt a t io n in f o rm a tio n fro m a n y d e vic e .

4. Sa f e ty A ssu ra n c e:

o P r ov id in g d rive r d e ta ils a n d re a l-t im e up d a te s e n su re s a sa fe r c o m m u tin g e xp e rie n c e .

5. R e d u c e d E n v iro n m e n ta l Im p a c t :

o E n c o u ra g e s t he u se o f sha re d t ra n sp o rt a t io n , p o t e n tia lly re d u c in g th e c a r bo n

f o o tp rin t o f c a m p u s t ra v e l.

52
6. Sc a la b ility a n d C u sto m iz a t io n :

o Th e p la tf o rm c a n e xp a n d t o a c c o m m o d a t e a d d itio n a l u se rs, ro u te s, o r c a m p u se s, a n d
f e a t u re s c a n be t a ilo r ed t o sp e c if ic n e e d s.

7. D a t a -D rive n Im p r ov e m e n t s:

o A n a ly t ic s a n d re p o rt s e n a ble a d m in ist ra t o rs t o m a k e in f o rm e d d e c isio n s to e n h a n c e

t ra n sp o rt a t io n se r vic e s.

Disadvantages

1. In it ia l S e tu p C o st s:

o Im p le m e n tin g t he p la tf o rm m a y re q u ire sign ific a n t in v e st m e n t in so f tw a re , ha rd w a re ,

a n d t ra in in g.

2. D e p e n d e n c e o n In t e rn e t C o n n e c tiv it y :

o U se rs a n d d rive rs m u st ha ve c o n sis te n t in te r n et a c c e ss t o f u lly ut iliz e t he p la tf o rm 's

f e a t u re s.

3. Te c h n ic a l G lit c h e s:

o B u gs, se rv e r d o w n t im e s, o r G P S in a c c u ra c ie s c o u ld d isru p t t he se rvic e te m p o ra rily ,

c a u sin g in c o n v e n ie n c e .

4. D a t a S e c u rit y C o n c e rn s:

o C o lle c t in g a n d sto rin g u se r a n d d r iv e r d a t a p o se s p o te n t ia l risk s o f b re a c h e s if se c u r it y

m e a su re s a re in a d e qu a te .

5. A d a p t a t io n C ha lle n g e s:

o U se rs u n f a m ilia r w it h d ig it a l to o ls m a y f a c e d if fic u ltie s a d o p t in g th e p la tf o rm in it ia lly .

6. M a in te n a n c e R e qu ire m e n t s:

53
 o R e g u la r u p d a t e s a n d m o n it o rin g a re e sse n t ia l to e n su re sm o o t h f u n c tio n in g, w h ic h c a n
a d d t o o p e ra t io n a l c o st s.

8.7 Technology Used:

• H TM L

• CSS

• Ja v a S c rip t

• B o o tst ra p

• R e a c t.js

• V e rc e l ( H o stin g )

Software/Hardware Required:

• Software:

o V S C o de ( o r a n y c o d e e d it o r) o W in d o w s O S (o r

e qu iv a le n t O S w it h R e a c t .js su p p o rt )

• Hardware:

o M in im u m P ro c e sso r: In te l i5 / R y z e n 5

o M in im u m R A M : 8 G B

54
 CHAPTER-9

CONCLUSION
Th e B u s-E c ru p la t f o rm is a tra n sf or m a t ive so lu t io n f o r m a n a g in g c a m p u s tra n sp o rt a t io n
e ff ic ien t ly a n d e ff e c t iv e ly . B y o f fe rin g re a l-t im e bu s tra c k in g , d e t a iled ro u te m a n a ge m en t ,
a n d a u se r-f rie n d ly in te r fa c e , it e n h a n c e s th e c o m m u tin g e xp e rie n c e f o r stu d e n t s, fa c u lt y ,
and st a f f . W it h f e a t u re s lik e se c u re u se r a u t he n t ic a t io n , ro le -b a se d a c c e ss, and
c o m p re h e n siv e re p o rtin g , it e n su re s tra n sp a re n c y , s a f e ty , a n d o p e ra t io n a l e f fic ie n c y .

W hile th e re m a y be in itia l se tu p c ha lle n ge s a n d m a in t e n a n c e re q u ire m e n t s, t he p la tf o rm ’ s

be n e f its— su c h a s im p ro ve d tra n sp o rt a t io n ef f ic ie n c y , re d u c e d e n v iro n m e n ta l im p a c t , a n d
sc a la b ilit y — m a k e it a su st a in a b le a n d m od e r n a p p ro a c h t o c a m p us m ob ilit y . A s t e c hn o lo gy
c o n tin u e s t o e v o lv e , B u s-Ec ru c a n be e xp a n d e d a n d e n ha n c e d to m e e t fu t u re de m a n d s,
e n su rin g it re m a in s a v a lu a ble a sse t f o r e d u c a t ion a l in st it u t io n s.

55
 \\

SCREENSHOTS
• Landing page

56
• Sign UP PAGE

• Login page

57
• Home Page For New user

• Bus Routes for studens

58
• User Profile

59