100% found this document useful (1 vote)

723 views248 pages

Ui Techonolgy

The document provides information about Durgasoft's full stack web development training using Python and Django. It discusses the following: 1. A one month fast track course that provides videos, study materials, and a course completion certificate. Projects covered include building web applications. 2. The basics of building a web application including front-end and back-end components. Front-end technologies covered are HTML, CSS, JavaScript, Bootstrap, and jQuery. Back-end includes Python, Django framework, and databases. 3. An overview of HTML including headings, paragraphs, bold and italics tags, lists, and comments.

Uploaded by

divyam singh

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

100% found this document useful (1 vote)

723 views248 pages

Ui Techonolgy

Uploaded by

divyam singh

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

DURGASOFT

Full Stack web developement by using Python and Django

Python + UI Technologies + Django

Fast track one month:

Videos

Study Materials
Videos ---> 6 months access
Course completion certificate
projects-->covered
2 to 4 years of exp

web application:
----------------
The application which will provide services over the web

gmail.com
facebook.com

1. Front end
2. Back end

1. Front end:
-------------

1
It represents what end user is seeing on the website.
We can develop front end components by using :
HTML,CSS,JS,BootStrap,jQuery etc

HTML,CSS,JS --->Basic Front end technologies

BootStrap,jQuery -->Advanced Front end libraries

HTML-->Hyper text markup language

------------------------------------
It is mandatory to develop web applications.
It represents the structure of web page

CSS --->Cascading Style Sheets

-------------------------------
To makeup our html components like adding colors,fonts,borders etc
optional...

Java Script:
-----------
To add functionality to our html components

HTML --->meant for only static response

HTML+JS --->meant for dynamic response

Can we say, JavaScript is like dancing after drinking Beer(Action)?

2
static response: won't be changed from person to person and time to
time.
Dynamic response: will be changed from person to person and time to
time.

Bootstrap and jQuery

2. Back end:
------------
It is technology which is used to decide what to show to end user on
the front end.

List of trains from Hyderabad to Delhi

-------------------------------------
1.
2.
3.

back end is responsible to generate required response

That response should be displayed to the end user by using front end.

back end: 3 components

3
1. Language: Java,Python,....
2. Framework: 70 to 90% of activities (Struts, JSF,Spring MVC
etc),Django,Flask,Pyramid etc
3. Database: MongoDB,Oracle,MySQL etc

Biryani
We can prepare on our own(writing everything on your own without
using any framework)
We can order online(using framework)

web application
front end--->What we are seeing
HTML,CSS,JS
back end-->generates what we have to see
Language-->Python
Framework: Django
Database-->

Rest api ????

9:15PM to 10:30 PM

[email protected]
8885252627
8096969696

4
Session-1: https://www.youtube.com/watch?v=bNjNNtpfLQw

Python(Core Python and Advanced Python)

Web development side:

---------------------
UI Technologies
Django
Django Rest Framework

web application : gmail.com

facebook.com, amazon.in

1. Front-End
2. Back-End

1. Front-End: What user is seeing on the website

HTML,CSS,JS
Bootstrap,jQuery

2. Back end:
-----------

5
1. Language: Python
2. Framework: Django,Flask,Pyramid etc 70% to 90%
3. Database: SQLite,Oracle,MongoDB etc

Java people
Python + Django

HTML:
-----

gmail.com

HTML:
-----
Hypertext markup language.
compulsory technology
amazon.in
spicejet.com

The main purpose of html is to define structure of the page.

6
Structure of HTML Page:
------------------------
2 parts

1. Head
2. Body

1. Head:
It contains meta data like title,description,author,keywords etc
Here only we have to provide links to css files, js files

2. Body: Original data

PDF file--->Adobe Reader

HTML --->Browser(Chrome)

test.py
test.html

7
</html>

HTML Comments:
--------------
# This is python comment

// This is java single line comment

Heading tags:
--------------
6 heading tags
<h1> This is h1 Heading </h1>
<h2> This is h2 Heading </h2>
<h3> This is h3 Heading </h3>
<h4> This is h4 Heading </h4>
<h5> This is h5 Heading </h5>
<h6> This is h6 Heading </h6>

<!doctype html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>

8
<h1> This is h1 Heading </h1>
<h2> This is h2 Heading </h2>
<h3> This is h3 Heading </h3>
<h4> This is h4 Heading </h4>
<h5> This is h5 Heading </h5>
<h6> This is h6 Heading </h6>

</body>
</html>

cant we write bigger then that

Paragraph tag:
-------------
<p> This is my first paragraph</p>

<!doctype html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1> This is h1 Heading </h1>
<p> This is my first paragraph This is my first paragraphThis is my
first paragraphThis is my first paragraphThis is my first paragraphThis
is my first paragraphThis is my first paragraphThis is my first

9
paragraphThis is my first paragraphThis is my first paragraphThis is my
first paragraphThis is my first paragraphThis is my first paragraphThis
is my first paragraphThis is my first paragraphThis is my first
paragraphThis is my first paragraph</p>

<p>This is second paragraphThis is second paragraphThis is

second paragraphThis is second paragraphThis is second
paragraphThis is second paragraphThis is second paragraphThis is
second paragraphThis is second paragraphThis is second
paragraphThis is second paragraphThis is second paragraphThis is
second paragraphThis is second paragraphThis is second
paragraphThis is second paragraphThis is second paragraphThis is
second paragraph</p>

</body>
</html>

can we increse decrese paragrph text font

case-1:
<p> This is First Line
This is Second Line
This is Third Line
This is Fourth Line
</p>

10
Total data will come in a single line, because we are using only one
paragraph tag.

case-2:
-------
<p> This is First Line</p>
<p> This is Second Line</p>
<p> This is Third Line</p>
<p> This is Fourth Line</p>

4 lines

case-3:
--------
<p> This is First Line</p> <p> This is Second Line</p><p> This is Third
Line</p><p> This is Fourth Line</p>
4 lines

Note: IN HTML identation is not important, but tags are important.

Blocking is also takes care by html tags only.

<p>This is First LineThis is First LineThis is First LineThis is First

LineThis is First LineThis is First LineThis is First LineThis is First
LineThis is First LineThis is First LineThis is First LineThis is First
LineThis is First LineThis is First LineThis is First LineThis is First

11
LineThis is First LineThis is First LineThis is First LineThis is First
Line</p>

[email protected]
8885252627
8096969696

Session-1: https://www.youtube.com/watch?v=bNjNNtpfLQw
Session-2: https://www.youtube.com/watch?v=l6eKrr8CJQA
Session-3: https://www.youtube.com/watch?v=md-Ztt-QUEk

https://drive.google.com/drive/folders/1GoWlJyZ3P2AWjca0XuIfozgl
y5Gs6j3j?usp=sharing

How many people are employees???

How many are waiting for job???
current academic students...

12
How to plan our life???
How to plan career??

Poor will become more Poor--->Time Limit

Rich will become more Rich

Employee: 12 * 60*365= 2,62,800 Hours===>

IBM: 8 Lakhs hours time per day60365

17520000000===>How much money will be generated
50% for operations

1 L ---> 3Lakh employees

Microsoft 30L

Poor person always selling his time for rich people

Technical Labour

Rich people always buying others time....

100 employees 1 crore

13
200 employees 2 crores
10L --->

Ambani| Adhani--->24 hours only+others time

You --->24 hours only--->Sell your time

Wash your clothes

Wash clothes-->B.Tech/M.Tech/MCA

but how can we expect everything from others as we Are from middle
class

Poor Dad and Rich Dad-->Robert

60 years

25 years
35 years * 365 days

12775 days on the earth

14
SHROLAN-MH2
S-->Speed
H--->Highest result work
R--->Reusable
O--->One time activitiy but continuous results
L--->Less efforts More results
A--->Automation
N--->New Activity for the next level
M--->Money
H--->Health
H-->Happiness

The Structure of HTML:

----------------------
<html>
<head>
title
description
keywords
css and js files information
</head>

15
<body>
original data which should be displayed to end user
</body>
</html>

comments:

heading tags:
-------------
<h1> .... to <h6>

paragraph tag
<p>
dskajfklsajlfkjsalkjflkdjsaljldsafkj
dskajfklsajlfkjsalkjflkdjsaljldsafkj
dskajfklsajlfkjsalkjflkdjsaljldsafkj
dskajfklsajlfkjsalkjflkdjsaljldsafkj
dskajfklsajlfkjsalkjflkdjsaljldsaf
</p>

Bold and Italic tags:

16
---------------------
HTML: <b> which is legacy
HTML 5: <strong> instead of <b>

<!doctype html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p> <strong>This is first line </strong></p>
<p> This is <b>first line</b> </p>
</body>
</html>

HTML: <i> is legacy

HTML 5: <em> emphasis tag

<!doctype html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p> <em><strong>This is first line </strong></em></p>

17
<p> <i>This is <b>first line</b></i> </p>
</body>
</html>

HTML Lists:
-----------
2 types of lists:
-----------------
1. Ordered List(ol)
2. Unordered List(ul)

The available courses:

1. Python
2. Django
3. DataScience

The available courses:

. Python
. Django
. DataScience

<ol>
<li> Python </li>
<li> Django </li>
<li> Data Science </li>

18
<li> DRF </li>
</ol>

<!doctype html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1> The Available Courses: </h1>
<ul>
<li> Python </li>
<li> Django </li>
<li> Data Science </li>
<li> DRF </li>
</ul>
</body>
</html>

Nested Lists:
-------------
We can use list inside a list

<!doctype html>

19
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1> THe Menu Items: </h1>
<ol>
<li> Food </li>
<ul>
<li> Chicken Biryani</li>
<li> Mutton Biryani</li>
<li> Fish Biryani</li>
</ul>
<li> Drinks </li>
<ul>
<li> KF</li>
<li> KO</li>
<li> RC</li>
</ul>

<li> Cigars </li>

</ol>
</body>
</html>

Attributes:
-----------

20
We can pass attributes to the tags, which will provide some extra
information.

Setting Image inside HTML:

--------------------------
<img src="walrus_operator.jpg">

src is the source of image

alt is alternate.

Note: We have to open the tag and we are not required to close, such
type of tags are called self closing tags.
<img>

<!doctype html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1> The Walrus Operator is because of this animal (:=) </h1>
<img src="walrus_operator1.jpg" alt="Oops image is missing,
will be uploaded soon ">

21
</body>
</html>

Note: Image from the google

<!doctype html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1> Happy Colorful Holi Wishes from DURGASOFT!!! </h1>
<img src="https://images.unsplash.com/photo-1610313898425-
a5c637a940db?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8aG9saXxlb
nwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="Oops
image is missing, will be uploaded soon ">
</body>
</html>

<!doctype html>
<html>
<head>
<title>Sample Page</title>
</head>

22
<body>
<h1> Oye...Still you are Leanring Python....</h1>
<img
src="C:\Users\lenovo\Desktop\wonderful\20210103_105938.jpg"
alt="Oops image is missing, will be uploaded soon ">
</body>
</html>

Creating Hyperlinks by using anchor tag:

----------------------------------------
<a> Click here to get more vidoes </a>

<!doctype html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1> DURGASOFT</h1>
<a
href="https://www.youtube.com/channel/UCbjozK_PYCTLEluFlrJ8UZ
g"> Click here to get more vidoes </a>

</body>
</html>

23
Mini Project:
-------------

<!doctype html>
<html lang="en">
<head>
<title>Durga Bar and Restaurant</title>
</head>
<body>
<h1> Welcome to Durga Bar and Restaurant</h1>
<img src="dbar.jpg" alt="will be uploaded soon...">
<p>We are very specialized for Chilled Beer. We have virtual rain
environment with all facilities so that 100% guarantee for the Kick.
We have almost around 1000 brands like takela..We are very
specialized for Chilled Beer. We have virtual rain environment with all
facilities so that <strong>100% guarantee</strong> for the Kick. We
have almost around <strong>1000 brands</strong>like
takela..</p><p>We are very specialized for Chilled Beer. We have
virtual rain environment with all facilities so that 100% guarantee for
the Kick. We have almost around 1000 brands like takela..We are very
specialized for Chilled Beer. We have virtual rain environment with all
facilities so that 100% guarantee for the Kick. We have almost around
1000 brands like takela..</p>

<h2>Our Brand Ambassodor is : Sunny Leone</h2>

24
<h3> Our offered brands are:</h3>
<ol>
<li> King Fisher</li>
<li> Knock Out</li>
<li> Royal Stag</li>
<li> 100 Pipers</li>
<li> Foster</li>
<li> Teachers Choice</li>
</ol>
<h1> Offer of the Day: <em>BUY ONE GET ONE FREE</em></h1>
<p> View Our Profile</p>
<a href="http://youtube.com"> Youtube</a>
<a href="http://facebook.com"> Facebook</a>
<a href="http://twitter.com"> Twitter</a>
</body>
</html>

sir if we click on that link directly it is going to that page directly.... but
if we want to open that in new tab how to do that sir

Youtube
youtube.com/durgasoftware

sir how can I understand use p or h for adding some sentences

25
para
heading

https://drive.google.com/drive/folders/1GoWlJyZ3P2AWjca0XuIfozgl
y5Gs6j3j?usp=sharing

Comment:

header tags <h1> to <h6>
paragraph tag <p>
bold <b> or <strong>
italic <i> or <em>
lists <ol> , <ul> <li>
img <img src='sunny.jpg' alt='video is missing will be uploaded
soon'>
anchor <a href='http://youtube.com' > text </a>

Div and Span tags:

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

26
div means division

We can use <div> tag to group related tags into a single unit.
So that we can define styling for all these tags

<!doctype html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<title>Durga Bar and Restaurant</title>
</head>
<body>
<div>
<h1> UI Technologies are very important in web
development </h1>
<h2> UI Technologies are very important in web
development </h2>
<h3> UI Technologies are very important in web
development </h3>
<h2> UI Technologies are very important in web
development </h2>
<h1> UI Technologies are very important in web
development </h1>
</div>

<h1> UI Technologies are very important in web development

</h1>

27
<div>
<h1> UI Technologies are very important in web
development </h1>
<h2> UI Technologies are very important in web
development </h2>
<h3> UI Technologies are very important in web
development </h3>
<h2> UI Technologies are very important in web
development </h2>
<h1> UI Technologies are very important in web
development </h1>
</div>
</body>
</html>

span tag:
---------
life span
For inline styling : span tag

28
<h1> The 3 important viruses for the human being: <span>Drinking,
Gambling and Extra Curricular Activities..</span> These are very
dangerous than corona also </h1>

Table Creation:
---------------
<table> to create table
<thead> to specify head row
<th> to specify column data in head row(column name)
<tr> to insert a row in the table
<td> to specify column data in the row/record.

<!doctype html>
<html>
<head>
<title>Sample HTML</title>
</head>
<body>
<h1> DURGASOFT Employees Data</h1>
<table border='2'>
<thead>
<th>ENO</th>
<th>ENAME</th>
<th>ESAL</th>

29
<th>EADDR</th>
</thead>
<tr>
<td>100</td>
<td>Sunny</td>
<td>1000</td>
<td>Mumbai</td>
</tr>
<tr>
<td>100</td>
<td>Sunny</td>
<td>1000</td>
<td>Mumbai</td>
</tr>
<tr>
<td>100</td>
<td>Sunny</td>
<td>1000</td>
<td>Mumbai</td>
</tr>
<tr>
<td>100</td>
<td>Sunny</td>
<td>1000</td>
<td>Mumbai</td>
</tr>
<tr>
<td>100</td>

30
<td>Sunny</td>
<td>1000</td>
<td>Mumbai</td>
</tr>
</table>

</body>
</html>

Oscar Awards Winners List for 2021:

<!doctype html>
<html>
<head>
<title>Sample HTML</title>
</head>
<body>
<h1> Oscar Awards Winners List for 2021</h1>
<table border='2'>
<thead>
<th>S.NO</th>
<th>WINNER</th>

31
<th>WINNER PIC</th>
<th>CATEGORY</th>
<th>COUNTRY FLAG</th>
<th>VIEW PROFILE</th>
</thead>
<tr>
<td>1</td>
<td>Sunny</td>
<td><img src='sunny.jpg' alt='image not available'
width='300' height='200'></td>
<td>Best Actress</td>
<td><img
src='https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.
svg' width='300' height='200'></td>
<td><a href='http://youtube.com/durgasoftware'>View
Profile</a></td>
</tr>
<tr>
<td>2</td>
<td>Deepika</td>
<td><img src='Deepika.jpg' alt='image not available'
width='300' height='200'></td>
<td>Best Actress</td>
<td><img src='uk.png' width='300' height='200'></td>
<td><a href='http://youtube.com/durgasoftware'>View
Profile</a></td>
</tr>
<tr>

32
<td>3</td>
<td>Priya</td>
<td><img src='priya.jpeg' alt='image not available'
width='300' height='200'></td>
<td>Best Actress</td>
<td><img src='us.png' width='300' height='200'></td>
<td><a href='http://youtube.com/durgasoftware'>View
Profile</a></td>
</tr>

</table>

</body>
</html>

https://attendee.gotowebinar.com/register/5368769457292403467

Creation of HTML Forms:

-----------------------
login form
registration form
feedback form

<form>

</form>

33
<!doctype html>
<html>
<head>
<title>Sample HTML</title>
</head>
<body>
<h1> Student Registration Form</h1>

<form action='result.html' method='GET'>

Name: <input type='text' name='', value=''>
<input type='submit' value='login'>
</form>

</body>
</html>

Within the form we have to collect end user input.

To collect end user input, we have to use <input> tag.

<input type='text' name='' value='' >

type attribute represents the type of input

34
text
email
password
radio
checkbox
color

username contain number no sir

<input type='text' name='' value='' >

<input type='text' name='' value='Enter Name' >

Name attribute represents the name of input tag. By using this in the
next target page we can access its value.

value attribute represents default value will be displayed in the form.

type

35
name
value--->To provide default value.
placeholder --->attribute is just to provide hint but not default value.

Recommended is placeholder

required attribute:
--------------------
Name2 <input type='text' name='name2' placeholder='Enter Name2'
required>

Creation of Labels for HTML Elements:

--------------------------------------
<label for="name"> Enter Name:</label>
<input id='name' type='text' name='uname' value='Enter Name'>

The value of for attribute should be same as id attribute value.

Implementing Radio Button:

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

<h3> Are You Married:</h3>

36
eg:
<h3> Gender</h3>
<label for="m">Male</label>
<input id='m' type='radio' name='gender' value='male'>

<label for="fm">Female</label>
<input id='fm' type='radio' name='gender'
value='female'>

<label for="t">Transgender</label>
<input id='t' type='radio' name='gender'
value='transgender'><br>

sir my question is that when we develop any web application so

mostly html webpage write in edit plus.

sir why name is written as => Name: and why not Password: ??

https://drive.google.com/drive/folders/1GoWlJyZ3P2AWjca0XuIfozgl
y5Gs6j3j?usp=sharing

37
COMMENTS
Header tags
paragraph
div
span
ol and ul
tables
images
anchor tag
forms
-----
<form action='second.html'>
<input type='text' ....>
<input type='email' ....>
<input type='password' ....>
<input type='color' ....>
<input type='radio' ....>
<input type='submit' ....>

</form>

<input type='text' name='byusingthisname' value='defaultvalue'>

value--->To provide default value
placeholder--->just to provide guidelines to the end user
required

38
<label for='name'>Name</label>
<input id='name' type='text' name='username' value=''>

page inspection
css styling also

file:///D:/django26/result.html?username=Sunny

In GET method, the data will be appended to the url and send to the
next page.
In Post method, the data will be encapsulated inside request body
and not visible in the url.

file:///D:/django26/result.html

How to place multiple submit buttons in the same form?

------------------------------------------------------
file:///D:/django26/result.html?username=Sunny&action=ADD
file:///D:/django26/result.html?username=Sunny&action=REMOVE
file:///D:/django26/result.html?username=Sunny&action=UPDATE

<!doctype html>

39
<html>
<head>
<title>Sample HTML</title>
</head>
<body>
<h1> Student Registration Form</h1>

<form action='result.html' method='GET'>

Name: <input type='text' name='username' value=''><br>
<input type='submit' name='action' value='ADD'><br>
<input type='submit' name='action'
value='REMOVE'><br>
<input type='submit' name='action' value='UPDATE'>
</form>

</body>
</html>

action = request.getParameter('action')
if action == 'ADD':
perform add functionality
elif action == 'REMOVE':
perform remove functionality
elif action == 'UPDATE':
perform update functionality

40
<input type='text' ....>
<input type='email' ....>
<input type='password' ....>
<input type='color' ....>
<input type='radio' ....>
<input type='submit' ....>

Gender: Male Female

Online exam webapplication:

---------------------------
Q1. Question (Select only one option)
A. sdklfjdsa
B. klsadjflksad
C. ksdjflkjsa
D. sdlkf;lsk

Several options are available but we have to select only one option:
radio button

<h1> Q1. This is Sample Question</h1>

41
<input type='radio' name='q1' value='b'> B<br>
<input type='radio' name='q1' value='c'> C<br>
<input type='radio' name='q1' value='c'> D<br>
<input type='submit' value='Submit Exam'>

file:///D:/django26/result.html?q1=a&q1=c
file:///D:/django26/result.html?q1=a&q1=c&q1=d

<!doctype html>
<html>
<head>
<title>Sample HTML</title>
</head>
<body>

<form action='result.html' method='GET'>

<h1> Q1. This is Sample Question (Choose all valid options)</h1>
<input type='checkbox' name='q1' value='a'> A<br>
<input type='checkbox' name='q1' value='b'> B<br>
<input type='checkbox' name='q1' value='c'> C<br>
<input type='checkbox' name='q1' value='d'> D<br>
<input type='submit' value='Submit Exam'>
</form>

</body>
</html>

42
<!doctype html>
<html>
<head>
<title>Sample HTML</title>
</head>
<body>

<form action='result.html' method='GET'>

<h1> Choose Your Known Languages</h1>
<input type='checkbox' name='language' value='eng'>
English
<input type='checkbox' name='language' value='tel'>
Telugu
<input type='checkbox' name='language' value='tamil'>
Tamil
<input type='checkbox' name='language' value='hindi'>
Hindi<br>

<input type='submit' value='Submit'>

</form>

</body>
</html>
file:///D:/django26/result.html?language=eng&language=tel&langua
ge=tamil

43
<input type='checkbox' name='language' value='hindi' checked>
Hindi<br>

Choose Your Country

Choose Your State

How to implement Dropdown box/select box:

-----------------------------------------
file:///D:/django26/result.html?state=ka
file:///D:/django26/result.html?state=mh

file:///D:/django26/result.html?state=ap&state=up&state=mh

<h1> Choose Your State</h1>

<select name='state' multiple>
<option value='ap'>Andhra Pradesh</option>
<option value='ka'>Karnataka</option>
<option value='ts'>Telangana</option>
<option value='tn'>Tamil Nadu</option>
<option value='up'>Uttara Pradesh</option>
<option value='mp'>Madya Pradesh</option>
<option value='mh'>Maharastra</option>
</select>

Radio vs checkbox vs select box:

44
---------------------------------
If few options are available and we have to choose only one option:
radio
If few options are available and we can select any number of options:
checkbox
If very huge number of options are available and we can select any
number of options: dropdown box/select box

Out of 5 options you have to choose only 3 then what we have to do

sir
expecting some functionality--->js

textarea:
----------

<!doctype html>
<html>
<head>
<title>Sample HTML</title>
</head>
<body>

<form action='result.html' method='GET'>

<h1> Enter Feedback</h1>
<textarea name='feedback' rows='8' cols='80'>
</textarea><br>

45
<input type='submit' value='Submit'>
</form>

</body>
</html>

if form have textbox, radio button , dropdown , checkbox, then on

submit click , all the data go through the URL ( in case of GET method)

sir I want to hide data in URL leak in url shall i use POST method

GET vs POST:
------------
If we want to get information from the server-->GET
Download movie but we have to provide movie name-->get

If we want to post information to the server--->

upload student information
upload student feedback ------>POST

URL query string--->4000+ characters

sir why not use post for everything?

46
https://www.youtube.com/watch?v=E-Y5CeeYJxU
https://www.youtube.com/

atom.io

https://drive.google.com/drive/folders/1GoWlJyZ3P2AWjca0XuIfozgl
y5Gs6j3j?usp=sharing

Durgamatrimonial app:
----------------------

Styling is missing
Functionality is missing- Backend is required

ctrl+shift+d--->print current line again

sir in dropdown i want to keep default value as "select any one"

Good,if I select 2 what boss like...is possible

file:///D:/django26/durgamatrimonial1/thankyou.html?username=D
urga&email=info%40subjectroom.com&age=60&dating=Yes&expecta
tions=tamanna&nom=3&alchol=yes&name=No+special+preferences

47
GET Method(Default Method)
POST

file:///D:/django26/durgamatrimonial1/thankyou.html

sir is there anyway we can verify if provided email id is valid or not

here ?

name attribute is same for the all tags so how can we differentiate in
backend which name attribute is belongs to tag sir...?
name attribute is the same but value is different

[email protected]
8885252627
8096969696

https://www.youtube.com/playlist?list=PLd3UqWTnYXOkA-
bkmcwkbY1iJkcU4aM1r

48
h1,h2,h3...,h6
p
div
span
or,ul
text
submit
radio
password
email
color
checkbox
textarea
b or strong
i or em
dropdown box
table
<br>

HTML Validations:
-----------------
1. email
2. required
3. min and max length
4. only digits are allowed
5. only lower case alphabet symbols are allowed
etc

49
Case-1: The value should contain minimum 5 characters and
maximum 10 characters.

<input type="text" name="val" value="">

In Regular Expressions:
-----------------------
[0-9] --->Any digit (\d)
[a-z] --->Only lower case alphabet symbol
[A-Z] --->Only upper case alphabet symbol
[a-zA-Z] --->Any alphabet symbol
[a-zA-Z0-9] --->Any alphanumeric character (\w)
. --->Any character
[abc] --->either a or b or c

a* --->Any number of a's including zero number

a+ --->Atleast one a

Case-1: The value should contain minimum 5 characters and

maximum 10 characters.
-------
.{5,10}

50
<input type="text" name="val" value="" pattern="" title="msg">

Case-2: The value should contain only digits, exactly 10 digits only
allowed.
pattern='[0-9]{10}'

Case-3: The value should contain only digits, exactly 10 digits only
allowed.
But first digit should be either 6 or 7 or 8 or 9.
pattern='[6-9][0-9]{9}'

[6-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]
[6-9][0-9]{9}
9898989897
6786786789
4564564567

case-4:
password atleast 8 characters must be required.
The first character should be upper case alphabet symbol
remaining any alpha numeric.

[A-Z][a-zA-Z0-9]{7}[a-zA-Z0-9]*

51
sir we can put first Letter Uppercase and remaing 2 letter is small and
last character is special symbol
[A-Z][a-z]{2}[^a-zA-Z0-9]

[abc]--->either a or b or c
[a-zA-Z0-9]--->any alphanumeric character
[^abc] --->Except a and b and c any other character
[^a-zA-Z0-9] --->Any character except alpha numeric character

[A-Z][a-z]{2}[^a-zA-Z0-9]

mailid validation regular expression

How to include spaces in HTML:

------------------------------
1. &nbsp to add a single space
2. &ensp to add 2 spaces
3. &emsp to add 4 spaces

4. <br> to add a line break

5. <hr>

Basic Idea about HTML

52
CSS(Cascading Style Sheets):
----------------------------
The main objective of CSS is to add styles to HTML.
CSS describes how html elements are displayed on web page.
Styling includes colors,fonts,size,borders etc

sir with html we can create only structure of the webpage but by the
css we can develop beautiful webpage i am correct sir

Atom shortcuts:
----------------
ctrl+shift+d --->Duplicate current line
ctrl+shift+c --->To copy current page full path
ctrl+/ --->to comment/uncomment
File-->Settings-->Editor--->Softwrap =====>word wrapping

Various Ways to define style for HTML Elements:

-----------------------------------------------
3 ways

1. In Line
2. By using style tag
3. By using external CSS file

1. In Line:
-----------

53
<h1 style="color:red"> This is for CSS Demo</h1>

2. By using style tag:

----------------------
<style>

<head>
<style>
h1{
color:red;
}
</style>
<meta charset="utf-8">
<title>Sample Page</title>
</head>

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style>
h1{
color:blue;
}
</style>
<meta charset="utf-8">

54
<title>Sample Page</title>
</head>
<body>

<h1> This is for CSS Demo</h1>

</body>
</html>

3. By using external CSS file:

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

55
<h1> This is for CSS Demo</h1>
<h1> This is for CSS Demo</h1>
<h1> This is for CSS Demo</h1>
</body>
</html>

sir...I want diffrent color for both page..then how we can show.?

Basic Structure of CSS File:

-----------------------------
tagname{
property:value;
}

h1{
color:orange;
}

Demo Application-1:
-------------------

56
https://www.youtube.com/playlist?list=PLd3UqWTnYXOkA-
bkmcwkbY1iJkcU4aM1r

Various Possible ways to specify color:

--------------------------------------
1.
h1{
color:red;
}

color:rgb(0,0,0) ---->Black
color:rgb(255,255,255) ---->White

r--->Red
g-->Green
B-->Blue

Universal colors

The allowed range of values: 0 to 255

3. 6-digit hexa decimal code

color: #f44e42

57
4. rgba

color:rgba(255,255,255)

a means alpha--->Transparency
0.0 to 1.0

0.0 means full light

1.0 means full dark

Red

Setting background:
--------------------
background:
background-color:

color vs background-color
--------------------------
color-->text color
background color--->

How to set background image:

-----------------------------
body{

58
background:
url(https://www.remove.bg/images/remove_image_background.jpg);
background-repeat: no-repeat;
background-size: cover;
}

Note:
------

/*
This is css comment
*/

How to set Border:

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

img{
border-color: red;
border-width: 20px;
border-style:groove;
}

shortcut way:
-------------

59
img{

border: 30px dashed blue;

}

border: red 20px groove;

Here order is not important

Basic CSS Selectors:

--------------------
1. Element Selectors
2. ID Selectors
3. Class Selectors

1. Element Selectors:
---------------------
Selects all instances of given element and apply the style.

h1{
color: red;
}

2. ID Selectors:
----------------
Selects an element with given Id. But within HTML, ID should be
unique.

60
#specialh1{
color:blue;
}

3. class selectors:
-------------------
selects all elements with the given class and apply styling.
.special{
color: red;
}

For every instance of specified tag===>Element selectors

For only one tag instance===>ID selectors
For multiple tags (may be different tags) -->class selectors

100 h1 tags
for all 100 h1 tags red color===>element selectors
only one h1 tag should be displayed in blue color==>id selector
just 15 h1 tags shoould be displayed in orange color===>class selector

element{
property: value;
}

61
#element{
property: value;
}

.element{
property: value;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sample Page</title>
<link rel="stylesheet" href="s1.css">
</head>
<body>
<h1>The Importance of CSS</h1>
<h1 class='special'>The Importance of CSS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>

62
<h1>The Importance of CSS</h1>
<h1 id="specialh1">The Importance of CSS</h1>
<p class='special'>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1 class='special'>The Importance of CSS</h1>

</body>
</html>

Basic CSS Selectors:

--------------------
1. Element selectors---->All instances
2. ID selectors--->Only for one instance(unique)
3. class selectors--->Multiple instances but not all

Select multiple instances of div tag(but not all div tags) and apply style
class selectors

<div>
to group tags
to group tags
to group tags

63
to group tags
</div>

Advanced CSS Selectors:

-----------------------
1. * selector
2. Descendant selector
3. Adjacent selector
4. Attribute Selector
5. nth of type selector

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sample Page</title>
<link rel="stylesheet" href="s1.css">
</head>
<body>
<h1>Advanced Selectors Demo</h1>
<a href="http://google.com">Click Here to goto Google</a>
<ul>
<li>CAT</li>
<li>RAT</li>

64
<li>ANT</li>
<li>DOG</li>
<li>TIGER</li>
</ul>
<h4>List of Movies:</h4>
<ul>
<li>Bahubali</li>
<li>VakeelSab</li>
<li>KGF-2</li>
<li>F2</li>
<li>F3</li>
</ul>
<h4>List of top websites:</h4>
<ul>
<li> <a href="http://amazon.com">AMAZON</a> </li>
<li> <a href="http://flipkart.com">FLIPKART</a> </li>
<li> <a href="http://paytm.com">PAYTM</a> </li>
<li> <a href="http://durgasoftonline.com">DURGASOFT</a> </li>
</ul>
</body>
</html>

1. * selector:

65
--------------
* means everything
This style is applicable for every tag in the web page

*{
color:blue;
background: yellow;
}

2. Descendant Selector:
-----------------------
sub level-->child tag

p span{
color: red;
}
Style is applicable only for span tags which are present inside p tag.

li a{
color: red;
}
Style is applicable only for anchor tags which are present inside li tag.

body ul li a{

66
color:blue;
background: yellow;
}

child need not be immediate child.

3. Adjacent Selectors:
-----------------------

h1+a{
color:blue;
background:yellow;
}

select all anchor tags which are adjacent to h1 and apply styling.

div+p{
color:red;
}

apply style for p tags which are adjacent to div tag.

h4+ul{
color:white;
background:red;
}

67
h1+h4{
}

div ul+a{
}

select all anchor tags which are adjancent to ul and that ul present
inside div tag.

* selector
Descendant selector
Adjacent selectors

1. Problems(ofcourse viruses) are very common. We have to take

much care and we have to drive our life very carefully. Feeling sad is
time waste activity.

2. Everyone has his own problems. There is no person in this world

without any problem.

3. Every problem is best guru for us. It will provide n number of

lessons.
4. Happiness in our life is the most important thing, we should not
miss any time this one.

68
5. Identify small small situations to celebrate.

Corona how worst it is in our life???

10 (good points) lessons from corona???

problems, sadness, angryness, worry, lack of money, job related

problems, family problems ---->Your own feelings

Happiness, pleasantness, smile --->

CSS Selectors:
--------------
To style/makeup html elements(h1,p,div,...)

We have to select html elements and we have to apply styling. To

select html elements we have to use css selectors.

Basic CSS Selectors:

--------------------
1. element selectors
h1{
color:red;

69
}

2. id selectors:
----------------
#special{
color:red;
}

3. class selectors:
-------------------
.special{
color: red;
}

Advanced CSS Selectors:

-----------------------
1. * selctor
*{
color:red;
}

2. Descendant Selectors:
-----------------------
p c{
color: red;
}

ul a{

70
color: red;
}

3. Adjacent Selectors:
-----------------------
ul+a{
color: red;
}

4. Attribute selector:
----------------------
We can define style based on attribute also.

input[type='password']{
background:yellow;
}

<input type='text'
<input type='password'
<input type='email'
<input type='text'

input[type='password']{
background: yellow;
}

71
a[href="http://flipkart.com"]{
background: red;
}

5. nth of type selectors:

-------------------------
<ul>
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
</ul>

ul:nth-of-type(2){
background: red;
color:white;

72
}

li:nth-of-type(even){
background: red;
color:white;
}

in li for first and second one color and for thrid and fourth another
color like that we will do in css sir

Basic: 3 (element,id,class)
Advanced: 5(*,descendant,adjacent,attribute,nth of type)

CSS Inheritance:
----------------
What every styles parent tag has, bydefault will be available for child
tags also.

CSS Specificity:
---------------

73
If multiple styles are available for element, then the most specific
style will be considered.

parent-->style1
child--->style2

sir if we want for every list different color then what sir

Assignment-1:
-------------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS Assignment</title>
</head>
<body>
<h1>This is h1 Data</h1>
<h2>This is h2 tag</h2>
<h2>This is h2 tag</h2>
<h2>This is h2 tag</h2>
<h3>The important Brands are:</h3>
<ul>

74
<li>King Fisher</li>
<li>Royal Challenge</li>
<li>Foster</li>
</ul>
<p class="hello">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p id="special">Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<label for="name">Name</label>
<input type="text" id="name" name="username"
value=""><br><br>
<label for="pwd">Password</label>
<input id="pwd" type="password" name="password"
value=""><br><br>

<a href="http://www.gmail.com">Gmail</a>
<a href="http://www.youtube.com">Youtube</a>

75
<a href="http://www.facebook.com">Facebook</a>

<h3>Select Your Favourate Heroine:</h3>

<ul>
<li>Sunny: <input type="checkbox" name="" value="" > </li>
<li>Mallika: <input type="checkbox" name="" value="" > </li>
<li>Veena Malik: <input type="checkbox" name="" value="" >
</li>
</ul>
</body>
</html>

Cases:
------
1. Set body tag background color with #bdc646

body{
background
2. Set h1 text color with #9b79b8
3. Make all h2 tags with yellow color
4. Make all <li> elements with blue color,but consider hexa code
5. Change background for every paragraph with white color
6. Make all inputs have a 5px border with red color
7. Set blue background with class attribute hello
and text color as white
8. Give 10px orange solid border for id attribute "special"
9. Make only inputs with type 'text' have a green background

76
10. Make all "checked" check boxes have a left margin of 50px
11. Make the <label> elements all UPPERCASE without changing in
html
12. Make the first letter of the element with id "special" with green
color and 100 px font-size
13. Make <h1> element color change to white when hovered and give
10px solid red border
14. Make all <a> elements that have been visited with yellow color

/* 1. Set body tag background color with #bdc646 */

body{
background: #bdc646;
}
/* 2. Set h1 text color with #9b79b8 */
h1{
color:#9b79b8;
}

/* 3. Make all h2 tags with yellow color */

h2{
color:yellow;
}
/* 4. Make all <li> elements with blue color,but consider hexa code */
li{
color:#2515d1;
}

77
/* 5. Change background for every paragraph with white color */
p{
background: white;
}

/* 6. Make all inputs have a 5px border with red color */

input{
border: 5px red groove;
}

/* 7. Set blue background with class attribute hello

and text color as white */
.hello{
background: blue;
color:white;
}

/* 8. Give 10px orange solid border for id attribute "special" */

#special{
border: 10px orange solid;
}

/* 9. Make only inputs with type 'text' have a green background */

input[type='text']{
background: green;
}

78
/* 10. Make all "checked" check boxes have a left margin of 50px */
input:checked{
margin-left: 250px;
}
/* 11. Make the <label> elements all UPPERCASE without changing in
html */
label{
text-transform: uppercase;
}

/* 12. Make the first letter of the element with id "special" with green
color and 100 px font-size */
#special:first-letter{
color:green;
font-size: 50px;
}

/* 13. Make <h1> element color change to white when hovered and
give 10px solid red border */

h1:hover{
color:white;
border: 10px solid red;

79
/* 14. Make all <a> elements that have been visited with yellow color
*/
a:visited{
color:yellow;
}

https://drive.google.com/drive/folders/1GoWlJyZ3P2AWjca0XuIfozgl
y5Gs6j3j?usp=sharing

sir, can you show the background color for every 2nd row in <li> tag
once again.

CSS Selectors:
-------------
1. element selector
h1{
color: red;
}

2. ID selectors
#specialid{
color: red;
}

3. class selector

80
.classname{
color: red;
}

4. * selector
*{
color: red;
}

5. Descendant Selector:
-----------------------
div p {
color: red;
}

6. Adjacent Selectors
div+p{
}

7. Attribute selectors:

input[type='password']{

8. nth of type selector:

81
p:nth-of-type(3){
color:red;
}

CSS Inheritance:
----------------
CSS Specificity:
-----------------

82
</bodu>

Assignment2.html:
-----------------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="assignment2.css">
<title></title>
</head>
<body>
<p>This Para is outside of div. <em> Duis aute irure dolor in
reprehenderit</em> in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. </p>

<div>
<p>This Para is inside of first div. <em> em tag inside first
div</em> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

83
<p>This Para is inside of first div. <em> em tag inside first
div</em> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

<p>This Para is inside of first div. <em> em tag inside first

div</em> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>

<div>
<p>This Para is inside of Second div. <em> em tag inside Second
div</em> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

<p>This Para is inside of Second div. <em> em tag inside Second

div</em> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

<p>This Para is inside of Second div. <em> em tag inside Second

div</em> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>

<div>
<p>This Para is inside of Third div. <em> em tag inside Third
div</em> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

84
<p>This Para is inside of Third div. <em> em tag inside Third
div</em> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

<p>This Para is inside of Third div. <em> em tag inside Third

div</em> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
<p>This Para is outside of div. <em> Duis aute irure dolor in
reprehenderit</em> in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. </p>
</body>
</html>

assignment2.css:
----------------
/* Case-1: Make all <p>s That are nested inside div with 25px font-size
*/
div p{
font-size: 25px;
}

/* Case-2: Give all <p>s in side 3rd div blue background and text color
is white */
div:nth-of-type(3) p{
background: blue;
color: white;

85
}

/* Case-3: Give 2nd <p> inside 3rd div, 5px red solid border */
div:nth-of-type(3) p:nth-of-type(2){
border: 5px solid red;
}

/* Case-4: Make <em> tag in the 2nd <div> with white color 30 px
font-size and green background */

div:nth-of-type(2) em{
color: white;
font-size: 30px;
background: green;

Fonts and Text in css:

-----------------------
1. font-family
2. font-size
3. font-weight
4. line-height
5. text-align
6. text-decoration

1. font-family:

86
---------------
cssfontstack.com

2. font-size:
-------------

font-size: 2.0em;
2.0 em units-->Dynamic font size (relative font size)

body
p
span

p{
font-size: 30px;
}
span{
font-size: 0.5em;
}

3. font-weight:
---------------
100 to 900

87
100 means light
900 means too much bold

4. line-height:
---------------
The space between 2 lines

5. text-align:
--------------

6. text-decoration:
-------------------

durga
-----

------

88
durga

durga

cssfontstack.com

How to use custom fonts in css:

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

1. copy link tags and paste inside head part of html

2. add css property

h1{
font-family: 'Bungee Shade', cursive;

89
}

The Box Model:

--------------
Every HTML Element is a represented as a rectangular box.

Each box has 4 edges.

1. Content
2. Padding
3. Border
4. Margin

padding: 20px 40px 60px 80px;

top: 20px
Right: 40px
Bottom: 60Px
Left: 80Px

vibgyor Application:
--------------------
v-->violet

90
html
----
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vibgyor Implementation</title>
<link rel="stylesheet" href="vibgyor.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Original+Surfer&dis
play=swap" rel="stylesheet">
</head>
<body>
<h1>VIBGYOR Implementation</h1>
<table>
<tr>
<td id='one'></td>
<td id='two'></td>
<td id='three'></td>
<td id='four'></td>
<td id='five'></td>
<td id='six'></td>
<td id='seven'></td>
</tr>
</table>
</body>
</html>

91
css:
----
h1{
text-align: center;
font-family: 'Original Surfer', cursive;
}
table{
margin:auto;
}
td{
height: 300px;
width: 150px;
border:6px solid white;
}
#one{
background: #9400D3;
}
#two{
background: #4B0082;
}
#three{
background: #0000FF;
}
#four{
background: #00FF00;
}

92
#five{
background: #FFFF00;
}
#six{
background: #FF7F00;
}
#seven{
background: #FF0000;
}

Chess Board Implementation:

---------------------------
html:
----
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Chess Board Implementation</title>
<link rel="stylesheet" href="chess.css">
</head>
<body>
<h1>Chess Board Implementation</h1>
<table>
<tr>
<td class='white'></td>
<td class='black'></td>

93
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
</tr>
<tr>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
</tr>
<tr>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
</tr>
<tr>

94
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
</tr>
<tr>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
</tr>
<tr>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>

95
</tr>
<tr>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
</tr>
<tr>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
<td class='black'></td>
<td class='white'></td>
</tr>
</table>

</body>
</html>

css:

96
---
h1{
text-align: center;
}
td{
height: 60px;
width: 60px;
}
.white{
background: white;
}
.black{
background: black;
}
table{
border: 10px solid black;
margin: auto;
}

Application-3: Tic-Tac-Toe Implementation:

------------------------------------------
html:
----
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tic Tac Toe Game</title>

97
<link rel="stylesheet" href="ttt.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Coda+Caption:wght
@800&display=swap" rel="stylesheet">
</head>
<body>
<h1>Tic Tac Toe Game</h1>
<table>
<tr>
<td></td>
<td class='vertical'></td>
<td></td>
</tr>
<tr>
<td class='horizontal'></td>
<td class='vertical horizontal'></td>
<td class='horizontal'></td>
</tr>
<tr>
<td></td>
<td class='vertical'></td>
<td></td>
</tr>
</table>

</body>
</html>

98
css:
----
td{
height: 100px;
width: 100px;
}
.vertical{
border-left: 5px solid blue;
border-right: 5px solid blue;
}
.horizontal{
border-top: 5px solid blue;
border-bottom: 5px solid blue;
}
table{
margin:auto;
}
h1{
text-align: center;
margin-bottom: 50px;
font-family: 'Coda Caption', sans-serif;
}
td:hover{
background: yellow;
}

99
web applications--->Python Based Framework (Django)

Durga's Favourite Photo Album

-----------------------------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Durga's Favourite Photo Album</title>
<link rel="stylesheet" href="dpalbum.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=New+Tegomin&displ
ay=swap" rel="stylesheet">
</head>
<body>
<p>Durga's Favourite Photo Gallery</p>
<img src="divine1.jpg" alt="">
<img src="divine2.jpg" alt="">
<img src="divine3.jpg" alt="">
<img src="original1.jpg" alt="">
<img src="original2.jpg" alt="">
<img src="original3.jpg" alt="">
<img src="original4.jpg" alt="">
<img src="original5.jpg" alt="">
<img src="original6.jpg" alt="">
<img src="original7.jpg" alt="">

100
<img src="original8.jpg" alt="">
<img src="original9.jpg" alt="">
</body>
</html>

css:
----
img{
height: 300px;
width: 20%;
float:left;
margin: 2.5%;
}
/* img:hover{
border: 3px groove red;
} */
p{
text-align: center;
font-size: 25px;
font-weight: 900;
font-family: 'New Tegomin', serif;
border-bottom: 2px solid red;
padding-bottom: 20px;
}

101
https://drive.google.com/drive/folders/1GoWlJyZ3P2AWjca0XuIfozgl
y5Gs6j3j?usp=sharing

1. Vibgyor
2. Chess
3. TTT
4. Photo Album
5. Durga Gambling Website
6. Blog app

5. Durga Gambling Website:

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

gambling.html:
--------------
<!DOCTYPE html>
<html lang="en" dir="ltr">

102
<head>
<meta charset="utf-8">
<title>DURGA GAMBLING GROUP</title>
<link rel="stylesheet" href="gambling2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Krona+One&display
=swap" rel="stylesheet">
</head>
<body>
<h1>DURGA GAMBLING GROUP</h1>
<h2>India's No.1 Gambling Group</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<h2>Are You Interested to Join This Group:</h2>
<form action='thankyou2.html' method='post'>

103
<label for='name'> Enter Name:</label><br>
<input id='name' type='text' name='name' value=''><br>
<label for='mail'> Enter Mail Id:</label><br>
<input id='mail' type='email' name='mail' value=''><br>
<label for='mno'> Enter Mobile Number:</label><br>
<input id='mno' type='text' name='mno' value=''><br>
<input id='button' type="submit" name="" value="Join Us">

</form>
</body>
</html>

thankyou.html:
--------------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Thank You Page</title>
<link rel="stylesheet" href="gambling2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Krona+One&display
=swap" rel="stylesheet">
</head>
<body>

104
<h2>Thanks for your interest on Gambling</h2>
<h3>Our Experts will contact you soon !!!!</h3>

</body>
</html>

css file:
---------
body{
background: #011627;
color:#fdfffc;
text-align: center;
border: 40px solid #2EC486;
border-top: 0px;
margin: 0px;
font-family: 'Krona One', sans-serif;
}
p{
padding-left: 20%;
padding-right: 20%;
padding-top: 5%;
}
form{
font-size: 1.5em;
margin: 20px;
}
#button{

105
height: 70px;
width: 140px;
margin: 10px;
font-size: 1.5em;
background: orange;
border-radius: 25px;
}

sir please clarify ? if we provide 2 links .. then the first link will be
overwridden right ? then how 2 links r working?

6. Blog app:
------------
<div>
A group of tags
</div>

margin: 10px 20px 30px 40px

margin: 10px 20px
margin: 10px

https://css-tricks.com/examples/hrs/

html:
----

106
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>DURGA Blog</title>
<link rel="stylesheet" href="blog2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Orelega+One&displa
y=swap" rel="stylesheet">
</head>
<body>
<div class="post">
<div class='date'>Apr 30th 2021</div>
<h2>This is Python Related Post</h2>
<p class="mainp">Bacon ipsum dolor amet tongue boudin bacon
ball tip. Bresaola tenderloin shank short loin fatback tail. Doner
venison prosciutto, tri-tip strip steak ham hock ball tip tongue
tenderloin salami ham beef ribs short loin swine hamburger. Flank
bresaola venison turkey, picanha ground round tongue salami
shoulder short loin boudin cupim spare ribs leberkas pancetta. Chuck
andouille venison sausage pig porchetta doner. Flank ball tip tongue
brisket cupim shoulder pig ground round short ribs buffalo tenderloin
meatball pork chop pastrami biltong. Tenderloin pork beef, jowl
swine turkey t-bone.
</p>

<p>

107
Ball tip ham jerky picanha landjaeger. Ribeye ball tip shankle short
ribs jerky shank strip steak cupim picanha bacon drumstick. Buffalo
burgdoggen ham hock landjaeger. Pastrami turducken chicken
andouille shank swine pork tenderloin, alcatra turkey frankfurter
shankle hamburger rump short ribs. Buffalo chicken rump, capicola
porchetta pastrami beef ribs ham hock.
</p>

<p>
Jerky kevin bacon, filet mignon ball tip picanha pancetta biltong
andouille short ribs leberkas. Pastrami jerky turkey rump beef ribs
venison, turducken pork loin leberkas swine spare ribs brisket. Spare
ribs beef ribs fatback tongue prosciutto cupim bacon pastrami ham
jerky short loin. Venison pork belly drumstick cow corned beef
capicola tail jowl porchetta. Corned beef swine filet mignon short ribs
beef ribs ball tip, rump salami jerky tri-tip tail burgdoggen pig ham
pork chop.
</p>
<hr>
</div>
<div class="post">
<div class='date'>May 30th 2021</div>
<h2>This is Django Related Post</h2>
<p class="mainp">Bacon ipsum dolor amet tongue boudin bacon ball
tip. Bresaola tenderloin shank short loin fatback tail. Doner venison
prosciutto, tri-tip strip steak ham hock ball tip tongue tenderloin
salami ham beef ribs short loin swine hamburger. Flank bresaola
venison turkey, picanha ground round tongue salami shoulder short

108
loin boudin cupim spare ribs leberkas pancetta. Chuck andouille
venison sausage pig porchetta doner. Flank ball tip tongue brisket
cupim shoulder pig ground round short ribs buffalo tenderloin
meatball pork chop pastrami biltong. Tenderloin pork beef, jowl
swine turkey t-bone.
</p>

<p>
Ball tip ham jerky picanha landjaeger. Ribeye ball tip shankle short
ribs jerky shank strip steak cupim picanha bacon drumstick. Buffalo
burgdoggen ham hock landjaeger. Pastrami turducken chicken
andouille shank swine pork tenderloin, alcatra turkey frankfurter
shankle hamburger rump short ribs. Buffalo chicken rump, capicola
porchetta pastrami beef ribs ham hock.
</p>

109
<div class="post">
<div class='date'>June 30th 2021</div>
<h2>This is Data Science Related Post</h2>
<p class="mainp">Bacon ipsum dolor amet tongue boudin bacon ball
tip. Bresaola tenderloin shank short loin fatback tail. Doner venison
prosciutto, tri-tip strip steak ham hock ball tip tongue tenderloin
salami ham beef ribs short loin swine hamburger. Flank bresaola
venison turkey, picanha ground round tongue salami shoulder short
loin boudin cupim spare ribs leberkas pancetta. Chuck andouille
venison sausage pig porchetta doner. Flank ball tip tongue brisket
cupim shoulder pig ground round short ribs buffalo tenderloin
meatball pork chop pastrami biltong. Tenderloin pork beef, jowl
swine turkey t-bone.
</p>

110
ribs beef ribs fatback tongue prosciutto cupim bacon pastrami ham
jerky short loin. Venison pork belly drumstick cow corned beef
capicola tail jowl porchetta. Corned beef swine filet mignon short ribs
beef ribs ball tip, rump salami jerky tri-tip tail burgdoggen pig ham
pork chop.
</p>
<hr>
</div>
</body>
</html>

css:
----
body{
border: 20px solid #bdc3c7;
padding:20px;
width:800px;
margin:20px auto;
font-family: 'Orelega One', cursive;
}
.mainp{
border-left: 5px solid #bdc3c7;
padding-left: 5px;
}
.date{
color:#3498db;

111
text-transform: uppercase;
letter-spacing: 5px;
}
h2{
color:blue;
font-size: 2.0em;
}
.post{
margin-bottom: 20px;
}
hr {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

HTML ---->Structure of Web Page

CSS--->To do styling for HTML elements

Bootstrap:
----------

bootstrap.css
----------------
.container{
container related styling
}

112
.jumbotron{
jumbotron related styling
}

<form action='' method>

Name:
dljfalsjldfjas
>

Bootstrap is the most commonly used framework for front end

development.
Bottstrap provides several predefined libraries for css and javascript.

readymade libraries we will get in bootstrap using html,css,javascript

getbootstrap.com

How to connect Bootstrap with HTML:

-----------------------------------
2 ways

113
1. By using CDN (Content Delivery Network)
2. Locally

bootstrap.min.css

bootstrap.css:
--------------
.container{
background: red;
color: white;
}

bootstrap.min.css:
-----------------
.container{ background: red; color: white;}

1. By using CDN (Content Delivery Network)

-------------------------------------------
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootst
rap.min.css" integrity="sha384-

114
B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCj
EUQouq2+l" crossorigin="anonymous">

Note: To use CDN approach, Internet must be available.

2. Locally:
-----------

https://getbootstrap.com/docs/4.6/getting-started/download/

but sir if we have some specific requirements like a particular

background then how can we use bootstrap???

99%-->bootstrap+ 1% you can define your own css file

1. Buttons
2. Forms
3. Navbar
4. GRID

115
Bhavani
[email protected]
99 2737 2737

https://drive.google.com/drive/folders/1GoWlJyZ3P2AWjca0XuIfozgl
y5Gs6j3j?usp=sharing

1. Buttons
2. Jumbotron
3. Forms
4. Navbar
5. Grid

1. Buttons:
-----------

buttons, anchor tags

predefined buttons provided by bootstrap.

<button type="button" class="btn btn-primary">Primary</button>

2. Jumbotron:
-------------
show case

116
3. Forms:
---------
login form, registration form, enquiry form etc

form-group: grouping label and input in good format

form-control:

bootstrap will do 99% work we just need to do 1% finishing only

too good..loved bootsrap ready made template html

Developing Sample Form:

-----------------------
<form>

<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never
share your email with anyone else.</small>
</div>

117
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password">
</div>

<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>

<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">

118
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>

<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea"
rows="3"></textarea>
</div>

<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile"
aria-describedby="fileHelp">
<small id="fileHelp" class="form-text text-muted">This is some
placeholder block-level help text for the above input. It's a bit lighter
and easily wraps to a new line.</small>
</div>

119

<fieldset class="form-group">
<legend>Radio buttons</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optionsRadios" id="optionsRadios1" value="option1"
checked>
Option one is this and that—be sure to include why it's
great
</label>
</div>

<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect
option one
</label>
</div>

120
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optionsRadios" id="optionsRadios3" value="option3"
disabled>
Option three is disabled
</label>
</div>

</fieldset>

<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

121
1. Buttons
2. Jumbotron
3. Forms

4. Navbar:
----------
Navigation Bar

SORRY I WAS DEPRESSED YESTERDAY SO I DONT ATTENDED THE

CLASS
SIR THINKING ABOUT JOB
SIR I AM 2017 MCA PASSED OUT
2017,2018,2019

2020--->Fresher
2017--->4 Years
3+ Years of Exp

1 or 2 calls
4 to 10 calls

70% of real time employees are fake

consultancy

122
3 Years Ameerpet experience is more worthy than 3 Years original
real time exp.
To get job several things are required, But to do the job nothing is
required.

Exception--->Fresher/Ameerpet Student
If they want to change the company

Infosys-->
Intermediate but not 10th class
Degree

Joined in the company: M.Tech

Telecom project-->Elisa
Resume
Siva

5+ years
telecom
some projects also

FAQs:

Keeping FAKe

Freshers:
---------

123
1. The chance of getting job is very very low
2. The chance of getting project is very very low
3. 14th player in cricket team
4. The chance of getting onsite opportunity is very very low. almost
impossible.
5. Salary hikes are very low

Experienced with God's gift:

-----------------------------
1. The chance of getting job is very very high
2. The chance of getting project is very very high
3. 14th player in cricket team---->not there
4. The chance of getting onsite opportunity is very very high.
5. Salary hikes are very high

For any person whether experienced or fresher---->New project is

always new
MCA Freshers-->BSc + 3 Years of expe

MCA --->BSc + 3 Years

M.Tech --->B.Tech+ 2 Years

4. Navbar:
---------
Navbar--->Navigation Bar

124
How to create Navbar Template:
-------------------------------
Default:
--------
<nav class="navbar navbar-expand-lg navbar-light bg-light">
</nav>

Color Schemes:
--------------
<nav class="navbar navbar-dark bg-dark">

</nav>

<nav class="navbar navbar-dark bg-primary">

</nav>

<nav class="navbar navbar-light" style="background-color: red;">

</nav>

How to add brand to the Navbar:

--------------------------------
anchor
Heading
Image

125
Image and Text

Anachor:
--------
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand"
href="https://www.durgasoftonline.com/">DURGASOFT</a>
</nav>

Heading:
--------

<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Image:
------
<a class="navbar-brand" href="https://www.durgasoftonline.com/">
<img src="D.JPG" width="30" height="30" alt="">
</a>

https://www.durgasoftonline.com/logo.png

Image and Text

--------------
<a class="navbar-brand" href="#">

126
<img src="D.JPG" width="30" height="30" class="d-inline-block
align-top" alt="">
DURGASOFT
</a>

How to add remaining items to the Navbar:

------------------------------------------
We can add remaining items to the navbar by using unordered list.
Each list item acts as Navbar item.

<ul class='navbar-nav mr-auto'>

<li class='nav-item'> <a class='nav-link' href="#">Home</a> </li>
<li class='nav-item'> <a class='nav-link' href="#">About Us</a>
</li>
<li class='nav-item'> <a class='nav-link' href="#">Gallary</a> </li>
<li class='nav-item'> <a class='nav-link' href="#">Services</a> </li>
</ul>

These items added bydefault on the left hand side.

How to add items to the Right Hand Side:

----------------------------------------
<ul class='navbar-nav ml-auto'>
<li class='nav-item'> <a class='nav-link' href="#">Contact Us</a>
</li>
<li class='nav-item'> <a class='nav-link' href="#">Logout</a> </li>
</ul>

127
How to position navbar items properly:
--------------------------------------
We have to take all navbar items inside container.

<div class='container'>
navbar items
</div>

How to fix position of navbar:

-------------------------------
default:
-------
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Default</a>
</nav>

fixed top:
----------
We have to add fixed-top class.
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>

fixed bottom:
------------
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed bottom</a>

128
</nav>

Sticky top:
-----------
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>

How to implement Hamburger:

---------------------------
step-1:
-------
We have to enclose the collapsed items inside the following div tag.

<div class="collapse navbar-collapse" id="navbarSupportedContent">

collapsed items
</div>

step-2:
-------
To add hamburger, we have to add the following <button> tag after
brand.

<button class="navbar-toggler" type="button" data-toggle="collapse"

data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

129
</button>

Note: To work bootstrap hamburger, compulsory bootstrap

javascript(js) must be required. But to work bootstrap javascript,
compulsory jquery is required.
Hence we have to add js cdn and jQuery cdn in our html, but first
jQuery cdn and then js cdn.

Bootstrap

Buttons
Jumbotron
Forms
Navbar

GRID System:

130
------------
LCD
Desktop
Laptop
Tab
Mobile

To display our application layout properly on multiple devices of

multiple screen sizes, Grid concept.

large screen--->more space and more number of items

small screen--->less space and less number of items

12X1 --->12 elements and each element is of 1 column length

6X2 --->6 elements and each element is of 2 column length
4X3 --->4 elements and each element is of 3 column length

e1X 3 columns + e2 X 4 columns + e3 X 5 columns = 12 columns

How to implement Grid:

----------------------
By using 2 classes
1. row: to define row
<div class='row'>

131
2. Within the row we can define columns by using
col-screensize-noOfColumns

The allowed screen sizes:

lg --->Large Size (Like Desktop screen)

md --->Medium Size (Like Laptop screen)
sm --->Small Size (Like Tab screen)
xs --->Extra Small size(Like Mobile Screen)

xl --->Extra Large (like lcd) introduced in Bootstrap 4

Extra small (xs)

Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)--->in Bootstrap 5

<div class='row'>
<div class='col-lg-3'>Element1</div>
</div>

132
On large screen each element has to take 3 columns length.

<div class='row'>
<div class='col-lg-3'>Element1</div>
<div class='col-lg-3'>Element2</div>
<div class='col-lg-3'>Element3</div>
<div class='col-lg-3'>Element4</div>
</div>

case-1: 3 elements
e1--->3 columns
e2--->6 columns
e3--->3 columns

<div class='row'>
<div class='col-lg-3'>Element1</div>
<div class='col-lg-3'>Element2</div>
<div class='col-lg-3'>Element3</div>

</div>

case:
For medium or large screens each row should contain 4 elements

133
<div class='col-md-3 box'>Element1</div>
<div class='col-md-3 box'>Element2</div>
<div class='col-md-3 box'>Element3</div>
<div class='col-md-3 box'>Element4</div>
</div>

For all screens per row only 3 elements:

----------------------------------------
xs,sm,md,lg,xl,xxl

<div class='row'>
<div class='col-4 box'>Element1</div>
<div class='col-4 box'>Element2</div>
<div class='col-4 box'>Element3</div>
</div>

xs means either xs or higher

Note: In bootstrap 4 col-xs is replaced with col-
<div class='col-4 box'>Element1</div>

How to define grid for multiple screens simultaneously:

------------------------------------------------------
For large screen 6 elements
For medium screen 4 elements
For small screen 3 elements
For extra small screen 2 elements

134
col-lg-2 col-md-3 col-sm-4 col-xs-6

<div class='row'>
<div class='col-lg-2 col-md-3 col-sm-4 col-xs-6
box'>Element1</div>
<div class='col-lg-2 col-md-3 col-sm-4 col-xs-6
box'>Element2</div>
<div class='col-lg-2 col-md-3 col-sm-4 col-xs-6
box'>Element3</div>
<div class='col-lg-2 col-md-3 col-sm-4 col-xs-6
box'>Element4</div>
<div class='col-lg-2 col-md-3 col-sm-4 col-xs-6
box'>Element5</div>
<div class='col-lg-2 col-md-3 col-sm-4 col-xs-6
box'>Element6</div>
</div>

https://drive.google.com/drive/folders/1GoWlJyZ3P2AWjca0XuIfozgl
y5Gs6j3j?usp=sharing

Buttons
Jumbotron
Forms
Navbar and Hamburger
GRID

135
Nested GRID:
------------
Grid inside Grid

<div class="container">
<div class='row'>
<div class='col-6 box'>
<div class="row ">
<div class='col-3 box'>Element1A</div>
<div class='col-3 box'>Element1B</div>
<div class='col-3 box'>Element1C</div>
<div class='col-3 box'>Element1D</div>
</div>
</div>
<div class='col-6 box'>
<div class="row ">
<div class='col-4 box'>Element2A</div>
<div class='col-4 box'>Element2B</div>
<div class='col-4 box'>Element2C</div>
</div>
</div>
</div>

Bootstrap Photo Gallary:

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

136
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootst
rap.min.css" integrity="sha384-
B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCj
EUQouq2+l" crossorigin="anonymous">

large screen-->4 images

remaining cases --->2 images

sir class=" col-lg-3 col-6 " explain this sir once again ?

DURGA BAR Application by using Bootstrap - Navbar, Jumbotron, Grid

and font awesome icons

137
HTML
CSS
Bootstrap

Durga Dating App

----------------
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+O
rCXaRkfj" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap
.bundle.min.js" integrity="sha384-
Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfG
II0yAns" crossorigin="anonymous"></script>

unsplash

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

138
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<h2>We are very specialized for</h2>
<ul>
<li>Late Marriages</li>
<li>Early Marriages</li>
<li>xyz Marriages</li>
<li>abc Marriages</li>
<li>zzz Marriages</li>
</ul>

https://www.w3schools.com/howto/
i want to ask that we have already java python and other languages
.then what is the requirement of the scripting laguages??

HTML
CSS
Bootstrap
----------
Java Script:
------------
To add functionality to the HTML components

139
Full Stack---->Any database+Front+Java|Django
MEAN Stack---->MongoDB+Express JS+Angular+Node
MERN Stack----->MongoDB+Express JS+React+Node

Full stack web development with Python and Django

1. Java Script Developer's console

2. 5 Basic java script primitive data types
3. Declare variables

4. The 3 most commonly used js functions

1. Java Script Developer's console:

----------------------------------
10+20

snippets-->Java Script Developer's console

Python Shell
Python IDLE

How to launch:
Browser-->Right click-->Inspect--->Console

140
ctrl+shift+j or F12

To clear console: clear() or ctrl+l

2. 5 Basic java script primitive data types

--------------------------------------------
1. number

10
10.5
-10

10+20
10-20
20/10
20*10
10**2

2. string:
----------

141
any sequence of characters either within single quotes or double
quotes
'durga'
"durga"

+ operator===>concatenation

'durga'+'soft'--->durgasoft
'durga'+10--->durga10
'durga'+true--->durgatrue

If both arguments are number type then + operator acts as arithmetic

addition operator.

If atleast one argument is string type, then concatenation oeprator

We can use escape characaters also

'durga\nsoft'
'durga\tsoft'

How to find length of the string:

---------------------------------
s.length

How to access character of a string:

------------------------------------
index

142
s[2]
s[10]

boolean:
-------
true/false
True/False

number
string
boolean

x = 10

var name = 'durga'

var age = 60
var isMarried = true

Dynamically Typed Language

variable naming convention in javascript:

-----------------------------------------
studentMobileNumber--->camel case(java|Javascript)

143
student_mobile_number-->snake case(Python)
student-mobile-number--->Kebab Case(LISP)

1. number
2. string
3. boolean
4. undefined

Variables are declared but not initialized or if the value is not

available -->undefined

5. null
null means nothing
If the value of a variable is null means it is not pointing to any value.

var currentplayer = 'durga'

game completed

currentplayer = null

https://flowup.000webhostapp.com/ --->Ram
https://manishp.000webhostapp.com/ --->Manish
https://jalapic-orifices.000webhostapp.com/admins/login

144
The 3 most commonly used methods of java script:
------------------------------------------------
1. alert()
2. console.log()
3. prompt()

1. alert():
-----------
To display alerts to the end user.

alert('Hello Good Evening')

alert(100)
alert(true)

alert('Friends,,,priortize your activities... short cut for success:'+100)

alert(100+250)

sir alert('10'+'20') here concat or arithmetic

2. console.log()
----------------
To print messages to the developers console

console.log('Hello Friends...')

145
console.log(10*20)

console messages not meant for end user.

3. prompt()
-----------
name = input('Enter Your Name:')--->Python

To get input from the end user...

var name = prompt('Enter Your Name:')

var quote = prompt('Enter Your Favourite Quotation:')
alert('Hello'+name+', Thanks for your caption:\n'+quote)

1. alert()
2. console.log()
3. prompt()

separate file: .js file

How to write javascript code to a separate file and connecting to

HTML:

146
-----------------------------------------------------------------------
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap
.bundle.min.js" integrity="sha384-
Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfG
II0yAns" crossorigin="anonymous"></script>

<link type href='demo.css'>

<link rel="stylesheet" href="dating1.css">

<script type='text/javascript' src='test.js'></script>

Inside head--->first js code and then html body

inside body--->it will be executed with body

https://annaamma.000webhostapp.com/

https://lawless-screens.000webhostapp.com/

147
today i have completed app to my client in upwork sir and completed
and got psymeny sir

http://techbetainfo.rf.gd/sayikumar.html used lightbox for image

view sir

Sir please look at the webpages I made at http://www.hazeinfo.net

Operators:
----------
1. Arithmetic Operators:
+,-,*,/,%,**

//--->acts as a comment but not floor division operator

2. Comparison oeprators:
------------------------
<,<=,>,>=,==,!=, ===

10<20
10<=20
10>20
10>=20
10==20
10 !=20

148
Difference between == and ===:
------------------------------
== operator is equality operator
=== operator is strict equality operator

10 == 10
10 == '10'
10 == 10.0

Here only values are important but not type.

Both values and type are important

10 === 10
10 === '10'
10 === 10.0

== operator is equality operator where values are important but not

types
=== operator is strict equality operator where both types and values
are important

=== recommended to use.

true == '1'
false == '0'
null == undefined

149
true === '1'
false === '0'
null === undefined

NaN( Not a Number)

------------------
0/0 --->NaN

10<NaN
10<=NaN
10>NaN
10>=NaN
10 == NaN
NaN == NaN

In all these cases we will get false

10 != NaN
NaN != NaN
true answer

0/1 == NaN

Logical Operators:
-----------------
&& --->AND

150
|| -->OR
! ---->NOT

x && y --->if both are true then only it returns true.

x || y --->if atleast one is true then it returns true

For logical operators:

zero --->false
non-zero --->true
empty string --->false
non-empty string --->true
null,undefined,NaN --->false

x = 10
y = 20

x<10 && x!= 5 --->false

y>9 || x==10 ---->true
!(x == y) ---->true
!(x == '10' || x === y)&& !(y != 8 && x<= y) --->false

Conditional statements:
-----------------------
1. if
2. if -else
3. if-else if

151
Syntax:
-----
if (b){
action if b is true
}
else{
action if b is false
}

x = prompt('Enter Any number to check:')

if (x == 10)

number('10')+'20'

'The given Number is:'+x+' It is Odd'--->string

console.log(string)
console.log('The given Number is:'+x+' It is even')

'The given Number is:'+10+' It is even'

'The given Number is:10'+' It is even'
'The given Number is:10 It is even'

152
Matrimonial website:
--------------------
age from the end user

18 to 60 years

var age = Number(prompt('Enter Your age:'))

if (age >60 ){
alert('Please wait some more time, definitely you will get best
match...')
}
else if(age<18){
alert('Your age already crossed marriage age, no chance of getting
marriage')
}
else{
alert('Thanks for registration...You will get match details soon by
email')
}

-----------------------
read brand from the end user and provide meaningful message.

var brand = prompt('Enter Your Favourite Brand:')

if (brand == 'KF'){
alert('It is childrens brand')
}
else if(brand == 'KO'){

153
alert('It is too light')
}
else if(brand == 'RC'){
alert('It is not that much kick')
}
else if(brand == 'FO'){
alert('Buy one get One FREE')
}
else{
alert('Other brands are not recommended')
}

Q. Number Guess application

read a number form the end user
var sno=4
var num = Number(prompt('Enter Your Guess between 1 to 9:'))
if (num > sno){
alert('It is too high.. Guess Again')
}
else if (num < sno){
alert('It is too Low...Guess Again')
}
else{
alert('Congratulation...Your Guess is right')
}

Iterative Statements:

154
---------------------
to execute a group of statements iteratively... iterative statements

DRY Principle: Don't Repeat Yourself

2 iterative statements
1. while loop
2. for loop

1. while loop:
-------------
as long as some condition is true, then we should go for while loop.

Syntax:
while(condition){
body
}

eg-1: To print hello 10 times to the console

eg-2: To print first 10 numbers

eg-3: To print each character present in the given string?

durga
d

155
u
r
g
a

var s = prompt('Enter Any String:')

var i =0
while (i< s.length){
console.log('The Character Present at index:'+i+' is:'+s[i])
i++
}

eg: To print nth table?

2X1=2
2X2=4

var n = Number(prompt('Enter n value:'))

var i =1
while (i <= 10){
console.log( n+' X '+i+' = '+(n*i))
i++
}

Q. To print all numbers divisible by 3 And 5 between 5 and 100.

var n = 5

156
while (n <= 100){
if( n%3 == 0 && n%5 == 0){
console.log(n)
}
n++
}

If we don't know number of iterations in advance: while loop

Iterative Statements: for loop

-------------------------------
If we know number of iterations in advance then we should go use for
loop.

Syntax:
------
for(initialization_section;conditional_check;increment_decrement_se
ction){
body
}

eg-1: To print 'Hello' 10 times.

for(var i = 0;i<10; i++){

157
console.log('Hello')
}

eg-2: To print numbers from 1 to 10???

for(var i = 1;i<=10; i++){

console.log(i)
}

eg-3: To print all numbers which are divisible by 7 from 1 to 100?

for(var i = 1;i<=100; i++){
if(i%7 == 0){
console.log(i)
}
}

eg-4: To print each character from the given string?

'durga'
0,1,2,3,4 length-->5

var str = prompt('Enter Any String:')

for(var i =0; i< str.length; i++){
console.log(str[i])
}

while vs for:
-------------

158
If we dont know number of iterations in advance and as long as some
condition is true, execute body...while loop

If we know number of iterations in advance--->for loop

Secret Agent Application:

------------------------
Rules:

1. The first character of the name should be 'd'

2. The last character of favourite actor should be 'r'
3. The lucky number should be 7.
4. The length of favourite dish(no of characters) should be >=6

'7' == 7

ameer
5
0,1,2,3,4
actor[4]

159
var name = prompt('Enter Your Name:')
var actor = prompt('Enter Your Favourite Actor Name:')
var lucky = prompt('Enter Your Lucky Number:')
var dish = prompt('Enter Your Favourite Dish:')

var nameCondition = false

var actorCondition = false
var luckyCondition = false
var dishCondition = false

if (name[0] == 'd'){
nameCondition = true
}

if (actor[actor.length -1] == 'r'){

actorCondition = true
}

if (lucky == 7){
luckyCondition = true
}

if (dish.length >= 6){

dishCondition = true
}
alert('Hello '+name+'\nThanks for your information!!!')
if( nameCondition && actorCondition && luckyCondition &&
dishCondition ){

160
console.log('Hello Secret Agent, Our next operation is:')
console.log('We have to kill atleast 10 sleeping students in the class
roon because these people are burdent to the country')
}

sir actor.length-1 one time tell

actor = 'ameer'
actor.length --->5
actor[0] --->a
actor[1] --->m
actor[2] --->e
actor[3] --->e
actor[4] --->r

actor[actor.length-1] ---->last character of actor

actor[0]

Functions:
-----------
function functionName(arguemnts){
line-1
line-2
line-3

161
line-4
line-5
}

functionName()
functionName()
functionName()
functionName()

Code reusability

Syntax:
function functionName(arguemnts){
body
return value
}

eg-1: To print Good evening

Function with arguments:

------------------------
inputs to the function.

eg: to wish person by name

function wish(name){
console.log('Hello '+name+'... Good Evening!!!')

162
}

wish('Durga')
wish('Veeru')

Function with default arguments:

--------------------------------
function wish(name='Guest'){
console.log('Hello '+name+'... Good Evening!!!')
}

wish()
wish('Veeru')

Function with return values:

----------------------------
1. To find square of given number???

function squareIt(num){
return num*num
}

var result = squareIt(10)

console.log('The Square of 10 is:'+result)
console.log('The Square of 20 is:'+squareIt(20))

163
2. to take 2 numbers as arguments and return sum???

function sum(num1,num2){
return num1+num2
}

console.log('The sum of 10 and 20:'+sum(10,20))

console.log('The sum of 100 and 200:'+sum(100,200))

3. WAJF to take a string as argument and return capitalized string?

durga ===>Durga

function capitalize(str){
result = str[0].toUpperCase()+str.slice(1)
return result
}

console.log(capitalize('apple'))

4. WAJF to check whether the given number is even or not????

function isEven(num){
if (num%2 == 0){
return true
}
else{
return false

164
}
}

console.log(isEven(15))
console.log(isEven(10))

WAJF to find factorial of given number?

function factorial(num){
result = 1
for(var i = 2; i<= num; i++){
result = result*i
}
return result
}

console.log('The factorial of 4 is:'+factorial(4))

console.log('The factorial of 5 is:'+factorial(5))

WAJF to convert from snake case to kebab case?

durga_soft_solutions
durga-soft-solutions

function snakeToKebad(str){
var newStr = str.replaceAll('_','-')
return newStr

165
}

console.log(snakeToKebad('durga_software_solutions'))

Java Script Scopes:

-------------------
1. Global scope
2. Local scope

The variables are which are declared outside of function are having
global scope and available for all functions.

The variables are which are declared inside function are having local
scope and available only for that function.

var x = 777 //Global variable

function f1(){
x=10 // It is not new declaration and it refers gloabl copy
console.log(x)
}
function f2(){
console.log(x)
}

166
f1()
f2()

Q. If local and global variables having same name then within the
function local variable will get high priority. How to access global
variable value??

x = 777 //Global variable

function f1(){
var x=10
console.log(x) //10
console.log(????) //777
}
f1()

Higher Order functions:

-----------------------
The functions which can take another function as argument, such type
of special functions are called higher order functions.

setInterval(function, time_in_milliseconds)

clearInterval(1)

Anonymous functions:
--------------------
nameless function

167
just for instant use

setInterval(function(){console.log('Anonymous function');}, 4000)

x = 777
function f1()
{
var x = 10
console.log(x)
console.log(this.x)
}
f1()

x = 777
function f1()
{
var x = 10
console.log(x)
console.log(this.x)
console.log(window.x)
}
f1()

168
How to access global variables inside a function, if both global and
local variables have same name?

x = 777
function f1()
{
var x = 10
console.log(x)
console.log(this.x)
console.log(window.x)
}
f1()

Coding Examples :
----------------
Problem-1: sleep_in

Write a function called sleep_in that takes 2 boolean parameters:

weekday and vacation.

The parameter weekday is True if it is a weekday, and the parameter

vacation is True if we are on vacation. We sleep in if it is not a
weekday or we're on vacation. Return True if we sleep in.

sleep_in(false, false) --> true

sleep_in(true, false) --> false
sleep_in(false, true) --> true
sleep_in(true, true) --> true

169
function sleep_in(weekday,vacation){
if (weekday == false) {
return true
}
else if(vacation == true){
return true
}
return false
}
console.log('Is Employee Sleeping:'+ sleep_in(true,true)) //true
console.log('Is Employee Sleeping:'+ sleep_in(true,false))//false
console.log('Is Employee Sleeping:'+ sleep_in(false,true))//true
console.log('Is Employee Sleeping:'+ sleep_in(false,false))//true

2nd way:
function sleep_in(weekday,vacation){
return !weekday || vacation
}
console.log('Is Employee Sleeping:'+ sleep_in(true,true)) //true
console.log('Is Employee Sleeping:'+ sleep_in(true,false))//false
console.log('Is Employee Sleeping:'+ sleep_in(false,true))//true
console.log('Is Employee Sleeping:'+ sleep_in(false,false))//true

Problem-2: monkey_trouble:
--------------------------

170
We have two monkeys, a and b, and the parameters a_smile and
b_smile indicate if each is smiling. We are in trouble if they are both
smiling or if neither of them is smiling. Return True if we are in
trouble.

monkey_trouble(true, true) --> true

monkey_trouble(false, false) --> true
monkey_trouble(true, false) --> false

function monkey_trouble(a_smile, b_smile){

if ((a_smile == true && b_smile == true) || (a_smile == false &&
b_smile == false)){
return true
}
else{
return false
}
}
console.log('Is Person in trouble:'+monkey_trouble(true,true)); //true
console.log('Is Person in trouble:'+monkey_trouble(false,false));
//true
console.log('Is Person in trouble:'+monkey_trouble(true,false));//false

171
2nd way:
--------
function monkey_trouble(a_smile, b_smile){
return (a_smile && b_smile) || (!a_smile && !b_smile)
}
console.log('Is Person in trouble:'+monkey_trouble(true,true)); //true
console.log('Is Person in trouble:'+monkey_trouble(false,false));
//true
console.log('Is Person in trouble:'+monkey_trouble(true,false));//false

Problem-3: string_times :
-----------------------------------
Given a string and a non-negative int n, return a larger string that is n
copies of the original string. ie string repeatition operator.

string_times('Hi', 2) --> 'HiHi'

string_times('Hi', 3) --> 'HiHiHi'
string_times('Hi', 1) --> 'Hi'

function string_times(str,n){
result=''
count=1
while (count <= n){
result = result+str
count++
}

172
return result
}
console.log(string_times('durga',3));
console.log(string_times('hello',2));
console.log(string_times('hi',1));

function string_times(str,n){
result=''
for (var i = 0; i < n; i++) {
result += str
}
return result
}
console.log(string_times('durga',3));
console.log(string_times('hello',2));
console.log(string_times('hi',4));

Problem-4: lucky_sum :
--------------------------------
Given 3 int values, a b c, return their sum. However, if one of the
values is 13 then it does not count towards the sum and values to its
right do not count. So for example, if b is 13, then both b and c do not
count.

lucky_sum(1, 2, 3) --> 6

173
lucky_sum(1, 2, 13) --> 3
lucky_sum(1, 13, 3) --> 1
lucky_sum(13, 13, 3) --> 0

ternary operator:
-----------------
result = (condition)? x: y

174
if condition is true then x value will be considered else y value will be
considered.

2nd way:
function lucky_sum(a,b,c){
return (a==13)? 0:(b==13)?a:(c==13)?a+b:a+b+c
}
console.log(lucky_sum(1, 2, 3)); //6
console.log(lucky_sum(1, 2, 13));//3
console.log(lucky_sum(1, 13, 3));//1
console.log(lucky_sum(13, 13, 3));//0
console.log('Superb way!!!');

Problem-5: caught_speeding
-------------------------------------
You are driving a little too fast, and a police officer stops you. Write
code to compute the result, encoded as an int value: 0=no ticket,
1=small ticket, 2=big ticket. If speed is 60 or less, the result is 0. If
speed is between 61 and 80 inclusive, the result is 1. If speed is 81 or
more, the result is 2. Unless it is your birthday -- on that day, your
speed can be 5 higher in all cases.

caught_speeding(60, False) --> 0

175
caught_speeding(65, False) --> 1
caught_speeding(65, True) --> 0

function caught_speeding(speed, isBirthday){

if (isBirthday){
speed = speed-5
}
if (speed <= 60){
return 0
}
else if (speed >= 61 && speed <= 80) {
return 1
}
else{
return 2
}
}
console.log('Getting Ticket with number:'+caught_speeding(60,false));
//0
console.log('Getting Ticket with
number:'+caught_speeding(65,false));//1
console.log('Getting Ticket with
number:'+caught_speeding(65,true));//0

60--->no ticket
65--->no ticket if birthday

176
JavaScript Arrays:
------------------
An indexed collection of elements.

x=10
y=20
z=30

numbers = [10,20,30]

Accessing elements of array by using index:

-------------------------------------------
var friends = ['sunny','bunny','chinny','vinny','pinny']

var friends = ['sunny','bunny','chinny','vinny','pinny']

console.log(friends[0]);//sunny
console.log(friends[2]);//chinny
console.log(friends[30]);

if we are trying to access array element with out of range index, then
we won't get any error and just we will get undefined.
negative indexing is not supported.

update array elements by using index:

-------------------------------------
var friends = ['sunny','bunny','chinny','vinny','pinny']

177
friends[0] = 'durga'

How to add new elements to the array by using index:

----------------------------------------------------
var friends = ['sunny','bunny','chinny','vinny','pinny']

var friends = ['sunny','bunny','chinny','vinny','pinny']

friends[5]='ravi'
friends[40]='shiva'
console.log(friends);

How to create an empty array:

-----------------------------
var numbers = []
var numbers = new Array()

How to find length of array:

----------------------------
length variable

numbers.length

Note: javascript array can contain heterogeneous elements also.

var numbers = [10,'durga',10.5,null]

console.log(numbers);

178
Important methods related to javascript arrays:
-----------------------------------------------
1. push()
2. pop()
3. unshift()
4. shift()
5. indexOf()
6. slice()

1. push()
---------
We can use push() method to add elements at the end of array. After
addding this element it returns the length of the array.

var numbers = [10,20,30,40,50]

console.log(numbers.push(9999))
console.log(numbers);

2. pop():
---------
To remove and return last element of the array.
var numbers = [10,20,30,40,50]
console.log(numbers.pop())
console.log(numbers.pop())
console.log(numbers.pop())
console.log(numbers);

179
3. unshift():
-------------
To add element at beginning of the array. counter part of push
operation.

var numbers = [10,20,30,40,50]

numbers.unshift(9999)
console.log(numbers);

4. shift:
--------
counter part to pop operation.
To remove and return first element from the array.

var numbers = [10,20,30,40,50]

console.log(numbers.shift());
console.log(numbers);

5. indexOf():
-------------
We can use indexOf() to find index of specified element.
if the element present multiple times then it will return index of first
occurrence.

If the specified element is not available then -1

180
var numbers = [10,20,30,40,50,30]
console.log(numbers.indexOf(70));

6. slice():
----------
To get part of the array
slice(begin,end)---->returns array elements from begin index to end-1
index.
slice()---->returns all elements.

var numbers = [10,20,30,40,50,60,70,80]

num1 = numbers.slice(1,5);
console.log(num1)
num2 = numbers.slice()
console.log(num2);

1. push() --->To add element at end of the array

2. pop() --->To remove and returns last element
3. unshift() --->To add element at beginning of the array
4. shift() --->To remove and return first element
5. indexOf()--->To return index of first occurrence of the given
element
6. slice()--->to get part of the array from begin index to end-1 index.

Multi dimensional arrays/Nested arrays

181
--------------------------------------
var numbers = [[10,20,30],[40,50,60],[70,80,90]]
console.log(numbers);
console.log(numbers[0][2]);
console.log(numbers[2][1]);

Book Management Application:

----------------------------
books = []
input = prompt('Which operation you want to
perform[add|list|exit]:')
while (input != 'exit'){
if (input == 'add'){
newBook = prompt('Enter Name of the book to add:')
books.push(newBook)
}
else if(input == 'list'){
console.log('The List of available books:');
console.log(books);
}
else{
console.log('Invalid Option');
}
input = prompt('Which operation you want to
perform[add|list|exit]:')
}
console.log('Thanks for using our application');

182
How to retrieve elements of the array:
--------------------------------------
We can retrieve elements of the array by using the following ways:
1. while loop
2. for loop
3. for-of loop
4. forEach loop

https://chavans.000webhostapp.com/ sir check this website

just want to know she has any prior knowledge ?

https://register5566.000webhostapp.com/

How to retrieve elements of the array:

--------------------------------------
We can retrieve elements of the array by using the following ways:
1. while loop
2. for loop
3. for-of loop
4. forEach method

1. while loop:
--------------
nums = [10,20,30,40,50]
var i =0
while(i<nums.length){

183
console.log(nums[i]);
i++; // i = i+1
}

2. for loop:
------------
nums = [10,20,30,40,50,60]
for (var i = 0; i < nums.length; i++) {
console.log(nums[i])
}

3. for-of loop:
---------------
nums = [10,20,30,40,50,60,70]
for (num of nums) {
console.log(num)
}

4. forEach() method:
---------------------
It is specially designed method to retrieve elements of array.

arrayObject.forEach(function)

heroines = ['sunny','mallika','katrina','kareena','kajal']
function printElement(element) {

184
console.log('********************');
console.log(element);
console.log('********************');
}
heroines.forEach(printElement)
// for each element present in the heroines array, printElement
function will be executed by passing that element as argument.

eg-2:
heroines = ['sunny','mallika','katrina','kareena','kajal']

heroines.forEach(function(element) {
console.log('********************');
console.log(element);
console.log('********************');
})
// for each element present in the heroines array, printElement
function will be executed by passing that element as argument.

heroines = ['sunny','mallika','katrina','kareena','kajal']
heroines.forEach(console.log)
// for each element present in the heroines array, concole.log()
function will be executed by passing that element as argument.

185
heroines = ['sunny','mallika','katrina','kareena','kajal']
heroines.forEach(alert)
// for each element present in the heroines array, alert() function will
be executed by passing that element as argument.

for loop vs forEach():

----------------------
1. for loop is general purpose loop and applicable everywhere. But
forEach() function is applicable only for arrays.

2. By using for loop, we can move either in the forward direction or in

the backward direction. But by using forEach() method we can move
only in forward direction.

heroines = ['sunny','mallika','katrina','kareena','kajal']
for (var i = 0; i < heroines.length; i++) {
console.log(heroines[i])
}
console.log('****************');
for (var i = heroines.length-1; i >= 0; i--) {
console.log(heroines[i])
}

How to delete elements based on index:

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

186
splice() function

arrayobject.splice(index,number of elements)
arrayobject.splice(2,1)
arrayobject.splice(2,2)

heroines = ['sunny','mallika','katrina','kareena','kajal']
heroines.splice(2,2)
console.log(heroines);

heroines[2]='xyz'

How to insert elements at specified index:

heroines = ['sunny','mallika','katrina','kareena','kajal']
heroines.splice(2,0,'xyz','aaa')
console.log(heroines.indexOf('xyz'));//2
console.log(heroines.indexOf('aaa'));//3

Immutability vs mutability:
---------------------------
arrays are mutable. vs but string objects are immutable.

Once we creates an array, we can perform any changes in that object.

187
Once we creates string object, we are not allowed to change its
content in the existing object. If we are trying to change, with those
changes a new object will be created.

heroines = ['sunny','mallika','katrina','kareena','kajal']
heroines[0]='xyz'
console.log(heroines);

name = 'sunny'
name[0]='B'
console.log(name);

name = 'sunny'
name.toUpperCase()
console.log(name);

Mutability means changeable where as immutability means non-

changeable.

Q1. Write a javascript function to take an array as argument and print

its elements in reverse order?

function reverse(array) {

188
for (var i = array.length-1; i >=0; i--) {
console.log(array[i]);
}
}
reverse([10,20,30,40])
reverse(['A','B','C','D','E'])

Q2. Write a javascript function to take an array as argument and

checks whether elements are identical or not?

function identical(array) {
first=array[0]
for (var i = 1; i < array.length; i++) {
if (array[i] != first) {
return false
}
}
return true
}
console.log(identical([10,10,10,10]))
console.log(identical([10,10,10,30,10,10]))

Q3. Write a javascript function to take an array as argument and finds

max value?

function findMax(array) {

189
max=array[0]
for (var i = 1; i < array.length; i++) {
if (array[i] > max) {
max = array[i]
}
}
return max
}
console.log(findMax([10,5,4,15,9]))

To find min and max present in the given number?

function findMinMax(num) {
max=num.charAt(0)
min=num.charAt(0)
for (var i = 1; i < num.length; i++) {
if(num.charAt(i) < min){
min=num.charAt(i)
}
if(num.charAt(i) > max){
max=num.charAt(i)
}
}
alert('The Min is:'+min+'\nThe Max is:'+max)
}
num = prompt('Enter Any Number:')
findMinMax(num)

190
Book Management Application:
----------------------------
books = []
input = prompt('Which Operation You want to
perform[add|delete|list|exit]')
while (input != 'exit'){
if (input == 'add'){
addBook();
}
else if( input == 'list' ){
listBooks();
}
else if(input == 'delete'){
deleteBook();
}
else{
console.log('Invalid Option, Please Enter Valid Option');
}
input = prompt('Which Operation You want to
perform[add|delete|list|exit]')
}

191
console.log('Thanks for using our application');

JavaScript Objects:
-------------------

192
xml
json/yaml

import requests
r=requests.get('https://api.coindesk.com/v1/bpi/currentprice.json')
data=r.json()
print('Hello Friends, If you required bit coin price,please contact me')
print(f"As on {data['time']['updated']}, Bitcoin price:
${data['bpi']['USD']['rate']}")

JavaScript Objects:
-------------------
Array--->we can store a group of individual objects.
Object--> A group of key-value pairs

Syntax:
var variableName = {
key1:value1,
key2:value2,
key3:value3,
...
}

var movie={
name:'Bahubali',

193
year:2016,
hero:'Prabhas',
latest_movie
latestMovie
}
console.log(typeof(movie))
console.log(movie)

How to access values from Object:

---------------------------------
1. obj["key"]
eg: movie['name']

2. obj.key
eg: movie.name

How to create and initialize javascript objects?

------------------------------------------------
var nums={}
var nums = new Object()

To add key-values to this object:

1st way:
nums['fno']=100
nums['sno']=200

194
nums['tno']=300

2nd way:
nums.fno=400
If the specified key is already available, then old value will be replaced
with new value.

How to update values:

--------------------
nums['fno']=700
nums.fno=800

Iterating Objects:
------------------
var nums = {fno:100,sno:200,tno:300}
for(key in nums){
//console.log(key) //only keys
//console.log(nums[key]); only values
console.log(key+'----->'+nums[key]);
}

Nested Objects and Arrays:

--------------------------
Inside objects--->arrays
Inside arrays --->objects

195
var movies = [
{name:'Bahubali',year:2016,hero:'Prabhas'},
{name:'Spider',year:2017,hero:'MaheshBabu'},
{name:'Sanju',year:2018,hero:'Ranveer'}
]

movies[0].name

movies[3].hero

movies.name
which name displayed sir

var numbers = {
fg: [10,20,30],
sg: [40,50,60],
tg: [70,80,90]
}

numbers.sg[1]

Object Methods:
---------------

196
Inside object, we can take methods also.

var myObj={
A:'Apple',
B:'Banana',
m1:function(){
console.log('Object Method')
}
}

myObj.m1()

this keyword:
-------------
this means current object

var myObj={
A:'Apple',
B:'Banana',
m1:function(){
console.log('First Fruit:'+this.A)
console.log('Second Fruit:'+this.B)
}
}

It is possible to refer already existing function as object method.

197
function demo(){
console.log('Demo Function');
}

var movie={
name:'Bahubali',
year:2016,
hero:'Prabhas',
getInfo:demo
}

movie.getInfo() //demo() function will be executed.

Inside demo we can access the properties of object.

function demo(){
console.log('Movie Name:'+this.name);
console.log('Year of Release:'+this.year);
console.log('Hero Name:'+this.hero);
}

var movie={

198
name:'Bahubali',
year:2016,
hero:'Prabhas',
getInfo:demo
}

movie.getInfo()

demo()

var movie={
name:'Bahubali',
year:2016,
hero:'Prabhas',
getInfo: function demo(){
console.log('Movie Name:'+this.name);
console.log('Year of Release:'+this.year);
console.log('Hero Name:'+this.hero);
}
}

199
var movie={
name:'Bahubali2',
year:2018,
hero:'Prabhas',
getInfo(){
console.log('Movie Name:'+this.name);
console.log('Year of Release:'+this.year);
console.log('Hero Name:'+this.hero);
}
}

var movie={
name:'Bahubali2',
year:2018,
hero:'Prabhas',
getInfo(a){
console.log('Movie Name:'+this.name);
console.log('Year of Release:'+this.year);
console.log('Hero Name:'+this.hero);
console.log('Rating:'+a);
}
}

200
movie.getInfo(5)

I watched Bahubali and Movie is Hit!!!

I have not seen Sanju and Movie is Hit!!!
I watched Spider and Movie is Flop!!!

result='I '

var fruits=['Apple','Banana','Orange']
fruits.forEach(function(fruit){
if (fruit=='Apple')
{
console.log('It is too good for health')
}

})

Mini Application:

201
-------------------
var movies =[
{name:'Bahubali',isWatched:true,isHit:false},
{name:'Sanju',isWatched:true,isHit:false},
{name:'Spider',isWatched:true,isHit:false},
{name:'VakeelSab',isWatched:true,isHit:true},
]

movies.forEach(function(movie){
result ='I '
if (movie.isWatched) {
result=result+'watched '
}
else{
result=result+'have not seen '
}
result=result+movie.name+' and Movie is '
if (movie.isHit) {
result=result+'Hit!!!'
}
else{
result=result+'Flop!!!'
}
console.log(result);
})

202
HTML
CSS
Bootstrap
JS
---------------
DOM
---
DOM--->Document Object Model

3000

PAPER ADD-->IAS OFFICER, 10+YEARS

title = document.querySelector('title')

links = document.querySelectorAll('a')
for (link of links){
link.textContent='Sunny Leone';
link.style.color='white';
link.style.background='red'
}

Browser will constructor DOM. All HTML tags will be stored as

javascript objects.

203
If javascript required any html component, then it will contact DOM,
which provides the corresponding element.

To display document to the console:

-----------------------------------
document

To display dom objects on the console:

--------------------------------------
console.dir(document)

How to grab HTML elements from the DOM:

---------------------------------------
Important DOM attributes for this:
----------------------------------
document.URL--->This is the original url of the website
document.body--->It returns everything inside body
document.head--->It returns head of the page
document.links----->It returns list of all links on the page

Important methods of DOM:

-----------------------
To grab html components, we have the following methods.

document.getElementById()
Returns element with the specified id

204
document.getElementsByClassName()
Returns list of elements belongs to the specified class

document.getElementsByTagName()
Returns list of all elements with the specified tag

document.querySelector()
Returns the first object matching CSS style selector

document.querySelectorAll()
Returns aa objects matching CSS style selector

<h1> ---1
<h2> --->2
<li> --->9

class first--->2
id special--->1

.first{
color:red;
}

#special{
color:blue;
}

205
h1+p{
}

document.getElementById('special')
document.getElementsByClassName('first')
document.getElementsByClassName('first')[0]

document.getElementsByClassName('first')[0]
document.getElementsByTagName('h2')

document.querySelector('#special')
document.querySelector('.first')
document.querySelectorAll('.first')
document.querySelectorAll('.first')[0]

document.querySelector('h1+p')
document.getElementsByTagName('p')

206
if i hv both id as well as class for tag , then what to take in
queryselector()?

<h1>This is h1 tag data</h1>

<p id='first' class='special'>This is first paragraph</p>
<p class='special'>This is second paragraph</p>
<p>This is third paragraph</p>
<p id='last'>This is fourth paragraph</p>

To grab first paragraph:

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

1. document.getElementById('first')
2. document.getElementsByClassName('special')[0]
3. document.getElementsByTagName('p')[0]
4. document.querySelector('#first')
5. document.querySelector('.special')
6. document.querySelectorAll('#first')[0]
7. document.querySelectorAll('.special')[0]
8. document.querySelector('h1+p')
9. document.querySelectorAll('h1+p')[0]
10. document.querySelector('p#first')

document.getElementById()
Returns element with the specified id

207
document.getElementsByClassName()
Returns list of elements belongs to the specified class

document.getElementsByTagName()
Returns list of all elements with the specified tag

document.querySelector()
Returns the first object matching CSS style selector

document.querySelectorAll()
Returns aa objects matching CSS style selector

Color Changer Application:

--------------------------
'0123456789ABCDEF'--->16

Math.random()--->from [0,1)
#035efc

0*16--->0
max--->0.99*16--->15.84
floor(15.84)--->15

test.html:

208
----------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is My Title</title>
</head>
<body>
<h1>Important Methods and Attributes of DOM</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<h2>Favourite Food:</h2>
<ul>
<li class='first'>Chicken</li>
<li>Mutton</li>
<li>Fish</li>
<li id='special'>Any animal including human being</li>
</ul>
<h2>Favourite Drink:</h2>
<ul>
<li class='first'>KingFisher</li>
<li>Knock out</li>
<li>Milk</li>

209
<li>Thumsup</li>
<li>Blood</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<a href="https://www.youtube.com/durgasoftware">View
profile</a>
<script type='text/javascript' src='test.js'></script>
</body>
</html>

test.js:
--------
var h1 = document.querySelector('h1')
var p1 = document.querySelectorAll('p')[0]
var p2 = document.querySelectorAll('p')[1]
var h21 = document.querySelectorAll('h2')[0]
var h22 = document.querySelectorAll('h2')[1]
var ul1 = document.getElementsByTagName('ul')[0]
var ul2 = document.getElementsByTagName('ul')[1]

function getRandomColor(){

210
letters = '0123456789ABCDEF'
color = '#'
for (var i = 0; i < 6; i++) {
r = Math.floor(Math.random()*16)
color = color+letters[r]
}
return color
}

function changeColor(){
h1.style.color = getRandomColor()
p1.style.color = getRandomColor()
p2.style.color = getRandomColor()
h21.style.color = getRandomColor()
h22.style.color = getRandomColor()
ul1.style.color = getRandomColor()
ul2.style.color = getRandomColor()
document.body.style.background=getRandomColor()
}
setInterval(changeColor,1000)

How to change color of element:

-------------------------------
element.style.color='red'

DOM for content interaction:

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

211
BY using DOM, we can change text,html code and attributes.

How to change text:

--------------------
var myh1 = document.querySelector('h1')
myh1.textContent='DURGA SOFTWARE SOLUTIONS'

var myh2 = document.querySelector('h2')

myh2.textContent='<a
href="https://www.youtube.com/durgasoftware">Free Videos</a>'

How to change inner HTML Code:

-------------------------------
var myh2 = document.querySelector('h2')
myh2.innerHTML='<a
href="https://www.youtube.com/durgasoftware">Free Videos</a>'

How to change attributes:

--------------------------
element.getAttribute('attributeName')
anchor = document.querySelector('a')
anchor.getAttribute('href')
anchor.setAttribute('href','https://www.durgasoftonline.com')

document.body.style.background='red'

212
How to change logo:
-------------------
https://www.durgasoftonline.com/logo.png

logo = document.querySelector('img')
logo.setAttribute('src','https://www.durgasoftonline.com/logo.png')

link = document.querySelector('a')
link.setAttribute('href','https://www.durgasoftonline.com')

Event Handling By using DOM:

-----------------------------
Event--->somthing which is happend
eg: button click, dblclick,mouseover, mouseout

Listener--->listens events
whenever a particular event occurs automatically listener will perform
required activity.

How to implement event handling:

--------------------------------
element.addEventListener(event,function)

eg1: To change color of h1 on single click operation:

-----------------------------------------------------
myh1 = document.querySelector('h1')

213
myh1.addEventListener('click',colorChanger)

eg2: To change color of h1 on Double click operation:

-----------------------------------------------------
myh1 = document.querySelector('h1')
myh1.addEventListener('dblclick',colorChanger)

eg3: To change color of h1 on mouse over operation:

-----------------------------------------------------
myh1 = document.querySelector('h1')
myh1.addEventListener('mouseover',colorChanger)

eg4: To change color of h1 on mouse out operation:

-----------------------------------------------------
myh1 = document.querySelector('h1')
myh1.addEventListener('mouseout',colorChanger)

eg5: To change content as HYDERABAD and color as blue on mouse

over operation
To change content as BANGALORE and color as red on mouse out
operation

myh1 = document.querySelector('h1')
myh1.addEventListener('mouseover',function(){
myh1.textContent='HYDERABAD'

214
myh1.style.color='blue'
})

myh1.addEventListener('mouseout',function(){
myh1.textContent='BANGALORE'
myh1.style.color='red'
})

Body Color Changer Application:

-------------------------------
test.html:
----------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is My Title</title>
</head>
<body>
<h1>Body Color Changer Application</h1>
<button type="button" name="button">Click Here to change Body
Color</button>
<script type='text/javascript' src='test.js'></script>
</body>
</html>

215
test.js:
--------
function getRandomColor(){
letters = '0123456789ABCDEF'
color = '#'
for (var i = 0; i < 6; i++) {
r = Math.floor(Math.random()*16)
color = color+letters[r]
}
return color
}
var b = document.querySelector('button')
b.addEventListener('click',function(){
document.body.style.background=getRandomColor()
})

Demo Application for Random Names and Random Colors:

-----------------------------------------------------
mouseover and mouseout events

test.html:
---------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is My Title</title>

216
</head>
<body>
<h1>Name and Color Changer Application</h1>
<script type='text/javascript' src='test.js'></script>
</body>
</html>

test.js:
---------
function getRandomColor(){
letters = '0123456789ABCDEF'
color = '#'
for (var i = 0; i < 6; i++) {
r = Math.floor(Math.random()*16)
color = color+letters[r]
}
return color
}
function getRandomName(){
names = ['SUNNY
LEONE','MALLIKA','KATRINA','KAREENA','DEEPIKA','PRIYANKA','SAMA
NTHA']
index = Math.floor(Math.random() * names.length)
return names[index]
}

myh1 = document.querySelector('h1')

217
myh1.addEventListener('mouseover',function(){
myh1.textContent = getRandomName()
myh1.style.color = getRandomColor()
})
myh1.addEventListener('mouseout',function(){
myh1.textContent = getRandomName()
myh1.style.color = getRandomColor()
})

Q. Names should be displayed with specified color only like Katrina

always with red color.

function getRandomColor(){
letters = '0123456789ABCDEF'
color = '#'
for (var i = 0; i < 6; i++) {
r = Math.floor(Math.random()*16)
color = color+letters[r]
}
return color
}
function getRandomName(){
names = ['SUNNY
LEONE','MALLIKA','KATRINA','KAREENA','DEEPIKA','PRIYANKA','SAMA
NTHA']
index = Math.floor(Math.random() * names.length)
return names[index]
}

218
myh1 = document.querySelector('h1')
myh1.addEventListener('mouseover',function(){
name = getRandomName()
if (name == 'SUNNY LEONE') {
color='pink'
} else if (name == 'MALLIKA') {
color='orange'
}
else if (name == 'KATRINA') {
color='red'
}
else if (name == 'KAREENA') {
color='blue'
}
else if (name == 'DEEPIKA') {
color='cyan'
}
else if (name == 'PRIYANKA') {
color='magenta'
}
else if (name == 'SAMANTHA') {
color='green'
}
myh1.textContent = name
myh1.style.color = color
})

219
myh1.addEventListener('mouseout',function(){
name = getRandomName()
if (name == 'SUNNY LEONE') {
color='pink'
} else if (name == 'MALLIKA') {
color='orange'
}
else if (name == 'KATRINA') {
color='red'
}
else if (name == 'KAREENA') {
color='blue'
}
else if (name == 'DEEPIKA') {
color='cyan'
}
else if (name == 'PRIYANKA') {
color='magenta'
}
else if (name == 'SAMANTHA') {
color='green'
}
myh1.textContent = name
myh1.style.color = color
})

<h1>Name and Color Changer Application</h1>

220
myh1.textContent='DURGASOFT'

<h1>DURGASOFT</h1>

myh1.innerHTML='<h2>Hello Friends</h2>'

<h2>Hello Friends</h2>

TIC TAC TOE Implementation:

---------------------------
On empty cell-->If we click then X should be placed.
If cell contains already X-->if we click then O should be placed.
If cell contains already O-->if we click then empty that cell.

If we click restart button, then all cells will be cleared.

ttt.html:
---------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>DURGASOFT TTT Game</title>
<link rel="stylesheet" href="tt.css">

221
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootst
rap.min.css" integrity="sha384-
B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCj
EUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>DURGASOFT TIC TAC TOE GAME</h1>
<p>Be Ready to play to Improve Logical thinking</p>
<button id="b" type="button" name="button" class="btn btn-
primary btn-large">Restart Game</button>
</div>
</div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>

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

<script type="text/javascript" src='ttt.js'></script>

</body>
</html>

tt.css:
------
.container .jumbotron{
background: red;
color:yellow;
text-align: center;
}
table{
margin: auto;
}
td{
height: 100px;
width: 100px;
border: 5px solid red;
font-size: 50px;
text-align: center;
}

ttt.js:

223
-------
var restartbutton = document.getElementById('b')
var cells = document.querySelectorAll('td')
function clearAllCells(){
for (var i = 0; i < cells.length; i++) {
cells[i].textContent=''
}
}
restartbutton.addEventListener('click',clearAllCells)

function changeContent(){
content=this.textContent
if (content == '') {
this.textContent='X'
}
else if (content=='X') {
this.textContent='O'
}
else if (content == 'O') {
this.textContent=''
}
}
for (cell of cells) {
cell.addEventListener('click',changeContent)
}

224
For mini project on ttt developement:
https://www.geeksforgeeks.org/simple-tic-tac-toe-game-using-
javascript/

HTML
CSS

Bootstrap--->Ready made styles which can be used directly

JS
DOM

var h1tags = document.querySelectorAll('h1')

for(h1 in h1tags){
h1.style.color='red'
}

jQuery:
-------
jquery.com

jQuery is a fast, small, and feature-rich JavaScript library. It makes

things like HTML document traversal and manipulation, event

225
handling, animation, and Ajax much simpler with an easy-to-use API
that works across a multitude of browsers. With a combination of
versatility and extensibility, jQuery has changed the way that millions
of people write JavaScript.

The main advantage of jquery is, it provides several methods and

objects in the form of javascript file, so that developer can use
directly and his life will be simplified.

plain old javascript code: Vanilla javascript.

Sample code to change color of every h1 tag:

--------------------------------------------
var allh1s = document.querySelectorAll('h1')
for (var h1 of allh1s) {
h1.style.color='red'
}

jQuery:
-------
$('h1').css('color','red')

connect jQuery to html:

-----------------------
2 ways

1. locally or 2. By CDN

226
Limitations of jQuery:
----------------------
1. jQuery won't do any extra activity.
2. performance problems

Because of these limitations, some part of developers community

won't recommend jQuery usage.

youmightnotneedjquery.com

jQuery Selectors:
-----------------
Vanilla Java script:
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()

in jQuery we have only one way to select html element: $ symbol

$ ===>querySelectorAll()

$('h1') ===>document.querySelectorAll('h1')

227
Manipulate HTML Elements:
-------------------------
element selector
id selector
class selector

* selector
Descendant selector
Adjucent selector
attribute selector
nth-of-type selector

Once we grab elements by using $ symbol, we can manipulate by

using css() method.

$(selector).css(property,value)

$('h1').css('color','white')
$('h1').css('background','red')
$('h1').css('border','5px solid green')

We can save selected html element by using variable.

var x = $('h1')
x.css('color','white')
x.css('background','red')

228
x.css('border','5px solid green')

Instead of passing parameters one by one, we can create object and

pass that object directly.

var x = $('h1')
var myCSS={
color: 'white',
background: 'green',
border: '5px solid red'
}
x.css(myCSS)

$('h1').css({
color: 'white',
background: 'green',
border: '5px solid red'
})

***Note: We can use $() to select html elements, and css() to

manipulate html elements.

$('h1')--->querySelectorAll()

229
How to select a particular HTML element instead of all matched
elements:
------------------------------------------------------------------------
$('element')---->All matched html elements.

$('element:first')--->only first matched

$('element:last')--->only last matched
$('element:first-of-type')--->only first matched
$('element:nth-of-type(2)')--->only 2nd matched
$('element:nth-of-type(even)')--->only evenly matched
$('element:nth-of-type(odd)')--->only odd matched

eg:
$('h1').css('color','red')--->Select all h1 tags
$('h1:first').css('color','red')--->selects only first h1
$('h1').first().css('color','red')--->selects only first h1
$('h1:first-of-type').css('color','red')--->selects only first h1
$('h1:nth-of-type(1)').css('color','red')--->selects only first h1
$('h1:nth-of-type(3)').css('color','red')--->selects only 3rd h1
$('h1:last').css('color','red')--->selects only last h1
$('h1').last().css('color','red')--->selects only last h1
$('h1:nth-of-type(even)').css('color','red')--->selects only even h1
$('h1:nth-of-type(odd)').css('color','red')--->selects only odd h1

Q1. Write Vanilla java script and jQuery code to change all h1 tags text
color as white and background as red?

230
Vanilla java script:
--------------------
var allh1= document.querySelectorAll('h1')
for(h1 of allh1){
h1.style.color='white';
h1.style.background='red';
}

jQuery code:
-----------
var mystyle={
color:'white',
background:'red'
}
$('h1').css(mystyle)

Instead of this
$('h1').css({
color:'white',
background:'red'
})

Q2. Write vanilla javascript and jquery code to set all li tags font size
as 20px?

Vanilla java script:

--------------------
var allli= document.querySelectorAll('li')

231
for(li of allli){
li.style.fontSize='50px';
}

jQuery:
-------
$('li').css('fontSize','50px')

Demo Application:
------------------
demo.html:
----------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-
u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>
</head>
<body>
<p> This is the first paragraph</p>
<p id='second'> This is the second paragraph</p>
<p class="remaining"> This is the third paragraph</p>

232
<p class="remaining"> This is the fourth paragraph</p>
</body>
</html>

Q1. Select all p tags and set background as green?

$('p').css('background','green')

Q2. Select all p tags with class 'remaining' and make them 200px
width

$('p').css('background','green')
$('.remaining').css('width','200px')

Q3. Select all <p> tags with id='second' and give red solid 10px
border?
$('#second').css('border','10px solid red')

Q4. Select only third <p> tag and change font size as 30px?
$('p:nth-of-type(3)').css('fontSize','30px')

The Most commonly used jQuery Methods:

--------------------------------------
1. text()--->textContent
2. html()
3. attr()
4. val()
5. addClass()
6. removeClass()

233
7. toggleClass()

1. text():
----------
We can use this method to get or set text content of matched
elements.
It acts as both getter and setter method.

text()---->getter method to get content

text(content)--->setter method to set content.

eg-1: To get content of h1 tag

$('h1').text()
"This is h1 tag"

eg-2: To get text of all li tags

To set h1 content as 'DURGASOFT'

$('h1').text('DURGASOFT')

2. html()
---------
Get the HTML contents of the first element in the set of matched
elements or set the HTML contents of every matched element.

234
$('h1').html()
$('li').html()

$('li').html('<a href="https://amazon.com">Amazon</a>')

<a href='https://amazon.com'>Amazon</a>

3. attr():
----------
attr --->attribute

Get the value of an attribute for the first element in the set of
matched elements or

set one or more attributes for every matched element.

attr(attributename) --->To get the value of the specified attribute of

the first matched element.

attr(attributename,attributevalue)--->If the specified attribute

already available then old value will be repalced with new value in
every matched element.

235
If the specified attribute is not already available then this new
attribute will be set.

element.text()--->returns text content of specified html

element(getter method)
element.text('newcontent')--->sets newcontent (setter method)
-------------------------------------
element.html()--->get inner html of specified element(getter method)
element.html('html code')--->set inner html of specified
element(setter)
---------------------------------------------------------------------
element.attr(attributename)--->Returns the value associated with
sepcified attribute in the given html element.(getter method)

element.attr(attributename,attributevalue)--->setter method

$('img').attr('src')--->durga.jpg
$('img').attr('src','sunny.jpg')
$('img').attr('height',50px)

$('img').css({height:'150px',width:'150px'})

236
1. To get src attribute value of the first image:
$('img').attr('src')

2. To set src attribute of all images with our new image.

$('img').attr('src','https://images.unsplash.com/photo-
1583499871880-
de841d1ace2a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDV8fGFuaW1h
bHN8ZW58MHx8MHx8&ixlib=rb-
1.2.1&auto=format&fit=crop&w=500&q=60')

3. To change only first image scr attribute value:

------------------------------------------------
$('img').first().attr('src','https://images.unsplash.com/photo-
1583499871880-
de841d1ace2a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDV8fGFuaW1h
bHN8ZW58MHx8MHx8&ixlib=rb-
1.2.1&auto=format&fit=crop&w=500&q=60')

Get the value of an attribute for the first element in the set of
matched elements or set one or more attributes for every matched
element

$('img')
$('#first')
In css:

237
1. element selectors
2. id selectors
3. class selectors

4> * selector
5. adjacent selector
6. descendant selector
7. nth of type selector

Demo for getting and setting type attribute of input tag:

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

User Input: <input type='text' name='' value=''>

tag name: input

attribute name: type

eg-1: To get value of type attribute of input tag

$('input').attr('type')

eg-2: To set the value of type attribute with color:

-----------------------------------------------------
$('input').attr('type','color')

eg-3: To set the value of type attribute with 'checkbox':

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

238
$('input').attr('type','checkbox')

1. text()
2. html()
3. attr()
4. val():
---------
Get the current value of the first element in the set of matched
elements or set the value of every matched element.

eg:
value entered in the text box
which radio button selected
which value selected from the dropdown box

Enter Name: <input type='text' name='user1' >

1. To get value provided by enduser for the first input tag?

$('input').val()

239
2. To get value provided by enduser for the second input tag?

$('input:nth-of-type(2)').val()

3. To set for all input tags as sunny as the value

$('input').val('sunny')

$('input:nth-of-type(2)').val('sunny')

$('select').val('datascience')

addClass()--->To add specified class to the set of matched elements

removeClass()--->To remove specified class from the set of matched
elements
toggleClass()--->add/remove

css class

eg-1: Add high class for every li tag

$('li').addClass('high')

240
eg-2: For every even li, remove high class

$('li:nth-of-type(even)').removeClass('high')

eg-3: For 2nd li add class completed

$('li:nth-of-type(2)').addClass('completed')
$('li:nth-of-type(2)').addClass('low')

eg-4: toggle class high for every li tag:

-----------------------------------------
$('li').toggleClass('high')

Event Handling by using jQuery:

-------------------------------
To make html elements interactive.
jQuery defines several methods for event handling.

https://api.jquery.com/category/events/

3 top most commonly used methods in jQuery Event handling:

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

1. click()
2. keypress()
3. on()--->general purpose method

1. click():
----------

241
We can use click() method to add click listener to the element.

eg-1: To raise alert message when ever we click h1 tag?

$('h1').click(function(){
alert('h1 tag got clicked')
})

eg-2: To raise alert message and to change background color of button

on click event

$('button').click(function(){
alert('Hello dont sleep');
$(this).css('background','red');
})

demo.html:
-----------
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-

242
u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>
</head>
<body>
<h1>jQuery Event Handling Demo</h1>
<button type="button" name="button">Dont Sleep First
Warning</button>
<button type="button" name="button">Dont Sleep Second
Warning</button>
<button type="button" name="button">Dont Sleep Third
Warning</button>
<script type="text/javascript" src='demo.js'></script>
</body>
</html>

demo.js:
--------
$('h1').click(function(){
alert('Click any button, you will get greetings message')
})

$('button:first').click(function(){
alert('Hello Dont Sleep')
$(this).css('background','yellow')
})

$('button:nth-of-type(2)').click(function(){

243
alert('Hello Dont Sleep, I will beat you')
$(this).css('background','orange')
})

$('button:last').click(function(){
alert('Hello Stupid, dont sleep, I will kill you')
$(this).css('background','red')
})

2. keypress():
--------------
We can use this method to add key press listener to elements.

eg:
Enter Name: <input type='text'>

character --->key code

x or X

X 88
x IS 120

$('input').keypress(function(event){

244
console.log(event)
})

$('input').keypress(function(event){
if(event.which == 88 || event.which == 120){
alert('Hello you are pressing x or X, You are under monitoring!!!')
}
})

To raise alert message when ever we press enter key:

----------------------------------------------------
$('input').keypress(function(event){
if(event.which == 13 ){
alert('Hello you just pressed enter key and your typed content
is:'+$(this).val())
}
})

3. on():
--------
It is similar to vanilla javascript addEventListener()

eg-1: Whenever mouseover event happend, the text of h1 tag should

be changed to 'Bangalore City' with red background and white text?

245
$('h1').on('mouseover',function(){
$(this).text('BANGALORE CITY')
$(this).css({background:'red',color:'white',fontSize:'25px'})
})

$('h1').on('mouseout',function(){
$(this).text('HYDERABAD CITY')
$(this).css({background:'green',color:'white',fontSize:'50px'})
})

eg: for button:

---------------
single click: alert message as 'Hello Stupid dont clik me!!!'
Double Click: alert message as 'Hello Animal, I will kill you!!!'

$('button:first').on('click',function(){
alert('Hello Stupid, dont clik me!!!')
})

$('button:last').on('dblclick',function(){
alert('Hello Animal, I will kill you!!!')
})

jQuery Effects:
----------------

246
jQuery provides several inbuilt effects. The main important effects
are:

1. Fading effects
2. Sliding effects

1. Fading effects:
------------------
fadeOut():
hide the matched elements by fading them to transparent.
fadeIn():
Display the matched elements which are fadeout

fadeToggle()
Fadeout--->FadeIn
FadeIn--->FadeOut

$('button').on('click',function(){
$('div').fadeOut(2000);
})

$('button').on('click',function(){
$('div').fadeToggle(3000);
})

247
2. Sliding effects:
-------------------
.slideDown()
Display the matched elements with a sliding motion.

.slideToggle()
Display or hide the matched elements with a sliding motion.

.slideUp()
Hide the matched elements with a sliding motion.

Bootstrap:
xs removed.

jquery: until 3.5 version

248

Sudhakar Sharma UI Notes
100% (5)
Sudhakar Sharma UI Notes
495 pages
Reactjs by Sudhakar Sir
No ratings yet
Reactjs by Sudhakar Sir
407 pages
120 Advanced JavaScript Interview Questions
From Everand
120 Advanced JavaScript Interview Questions
Hernando Abella
No ratings yet
UI Technologies PDF
60% (5)
UI Technologies PDF
158 pages
Django by Durga
100% (2)
Django by Durga
199 pages
OpTransactionHistoryUX510 05 2023
No ratings yet
OpTransactionHistoryUX510 05 2023
8 pages
Web Development-FrontEnd
100% (2)
Web Development-FrontEnd
138 pages
HTML Notes by HEERA
No ratings yet
HTML Notes by HEERA
111 pages
Web Services Material - Sriman Latest PDF
No ratings yet
Web Services Material - Sriman Latest PDF
300 pages
HTML Notes by Subba Raj Sir PDF
No ratings yet
HTML Notes by Subba Raj Sir PDF
208 pages
Css Notes
100% (1)
Css Notes
27 pages
CRT PDF
67% (3)
CRT PDF
107 pages
JDBC
No ratings yet
JDBC
121 pages
Bca Ecr
100% (1)
Bca Ecr
7 pages
Simple Way CSS PDF
No ratings yet
Simple Way CSS PDF
36 pages
Java Script Sudhakar Sharma
0% (1)
Java Script Sudhakar Sharma
111 pages
ANDROID - UI - Material by MR Mahesh at DurgaSoft
33% (6)
ANDROID - UI - Material by MR Mahesh at DurgaSoft
52 pages
NareshIT HTML5 Training Notes SubbaRaju
83% (6)
NareshIT HTML5 Training Notes SubbaRaju
93 pages
Javascript Notes by Heera Singh Bellary
100% (2)
Javascript Notes by Heera Singh Bellary
133 pages
Subba Raju Sir (HTML 5) PDF
No ratings yet
Subba Raju Sir (HTML 5) PDF
270 pages
PYTHON Durga PDF
No ratings yet
PYTHON Durga PDF
368 pages
Full Stack Web Development With Python and DJango - Java Script PDF
100% (2)
Full Stack Web Development With Python and DJango - Java Script PDF
40 pages
Angular Bits
100% (1)
Angular Bits
182 pages
Angular JS
75% (4)
Angular JS
183 pages
HTML Material
100% (2)
HTML Material
17 pages
Javascript Notes
No ratings yet
Javascript Notes
108 pages
ReactJS Handwritten Notes
No ratings yet
ReactJS Handwritten Notes
89 pages
JavaScript Notes
No ratings yet
JavaScript Notes
30 pages
Python Class Links From Naresh IT
No ratings yet
Python Class Links From Naresh IT
3 pages
Hadoop - The Final Product
100% (2)
Hadoop - The Final Product
42 pages
Bootstrap
67% (3)
Bootstrap
24 pages
Nagoor Babu Pirnted Advance Java
No ratings yet
Nagoor Babu Pirnted Advance Java
352 pages
Maven by Nagoor Babu PDF
No ratings yet
Maven by Nagoor Babu PDF
49 pages
NareshIT JavaScript CSS3
75% (4)
NareshIT JavaScript CSS3
148 pages
Design Patterns
No ratings yet
Design Patterns
8 pages
NareshIT JavaScript CSS3 Training Notes SubbaRaju PDF
No ratings yet
NareshIT JavaScript CSS3 Training Notes SubbaRaju PDF
148 pages
Wokring With Python Django-Web Framework Define Statement
No ratings yet
Wokring With Python Django-Web Framework Define Statement
78 pages
The Java Server Pages (JSP) Technology Model
50% (2)
The Java Server Pages (JSP) Technology Model
39 pages
Adv Javascript Notes
No ratings yet
Adv Javascript Notes
68 pages
Adv - Java Means Durga Sir... : Durgasoft, Plot No: 202, Iind Floor, Huda Maitrivanam, Ameerpet, Hyderabad-500038
No ratings yet
Adv - Java Means Durga Sir... : Durgasoft, Plot No: 202, Iind Floor, Huda Maitrivanam, Ameerpet, Hyderabad-500038
14 pages
Generics by Durga Sir
No ratings yet
Generics by Durga Sir
19 pages
J2EE Ashok PDF
100% (1)
J2EE Ashok PDF
189 pages
React JS
0% (1)
React JS
93 pages
Core Java Material
No ratings yet
Core Java Material
118 pages
Java Means Durgasoft: DURGA SOFTWARE SOLUTIONS, 202 HUDA Maitrivanam, Ameerpet, Hyd. PH: 040-64512786
0% (2)
Java Means Durgasoft: DURGA SOFTWARE SOLUTIONS, 202 HUDA Maitrivanam, Ameerpet, Hyd. PH: 040-64512786
16 pages
Durgasoft Core Java Latest1111
75% (8)
Durgasoft Core Java Latest1111
440 pages
Advance Java Natraz
No ratings yet
Advance Java Natraz
485 pages
ReactJS Handwritten Notes
No ratings yet
ReactJS Handwritten Notes
17 pages
Node JS Notes
0% (1)
Node JS Notes
316 pages
CSS Notes by Vikas Kadakkal
100% (1)
CSS Notes by Vikas Kadakkal
119 pages
Advance Java Notes
No ratings yet
Advance Java Notes
70 pages
Opp. Satyam Theatre, Durga Bhavani Plaza, Ameerpet, Hyd-16: A) Spring Boot Core
No ratings yet
Opp. Satyam Theatre, Durga Bhavani Plaza, Ameerpet, Hyd-16: A) Spring Boot Core
4 pages
WebServices Notes PDF
No ratings yet
WebServices Notes PDF
94 pages
Java Core Interview in Australia. Questions and Answers. Tech interviewer’s notes
From Everand
Java Core Interview in Australia. Questions and Answers. Tech interviewer’s notes
John Edward Cooper Berg
No ratings yet
Core Java: Made Simple: A popular language for Android smart phone application, favoured for edge device and
From Everand
Core Java: Made Simple: A popular language for Android smart phone application, favoured for edge device and
Som Prakash Rai
No ratings yet
Java servlet Second Edition
From Everand
Java servlet Second Edition
Gerardus Blokdyk
No ratings yet
Mastering Spring Boot 3.0: A comprehensive guide to building scalable and efficient backend systems with Java and Spring
From Everand
Mastering Spring Boot 3.0: A comprehensive guide to building scalable and efficient backend systems with Java and Spring
Ahmet Meric
No ratings yet
Web Design vs. Web Development: Website or Web Application
No ratings yet
Web Design vs. Web Development: Website or Web Application
41 pages
Web Development
No ratings yet
Web Development
39 pages
Fundemental Notes On HTML
No ratings yet
Fundemental Notes On HTML
5 pages
It Skills Chapter 2
No ratings yet
It Skills Chapter 2
20 pages
Hyper Text Markup Language
No ratings yet
Hyper Text Markup Language
20 pages
Mini Project Synopsis: On Web Development
100% (1)
Mini Project Synopsis: On Web Development
11 pages
FULLTEXT02
No ratings yet
FULLTEXT02
89 pages
Fitsum Helina: Software Engineer
No ratings yet
Fitsum Helina: Software Engineer
1 page
300+ TOP HTML & WEB PAGE DESIGNING Questions and Answers
No ratings yet
300+ TOP HTML & WEB PAGE DESIGNING Questions and Answers
45 pages
Google Maps Add API (JSON Format) :: Sample Body
No ratings yet
Google Maps Add API (JSON Format) :: Sample Body
3 pages
02a - PPT2 - DW Components - R0
No ratings yet
02a - PPT2 - DW Components - R0
17 pages
Lecture 15
No ratings yet
Lecture 15
23 pages
Orca Share Media1575780332098
No ratings yet
Orca Share Media1575780332098
56 pages
Portfolio Website
No ratings yet
Portfolio Website
10 pages
Html5 Css Bootstrap Javascript Typescript Json Jquery Angularjs and Nodejs (Pdfdrive)
No ratings yet
Html5 Css Bootstrap Javascript Typescript Json Jquery Angularjs and Nodejs (Pdfdrive)
197 pages
Wad
No ratings yet
Wad
155 pages
XXXXXXXXXX1125
No ratings yet
XXXXXXXXXX1125
11 pages
Free Ki Majduri
No ratings yet
Free Ki Majduri
39 pages
First Button : For Type Name Id
No ratings yet
First Button : For Type Name Id
9 pages
TNG Ewallet Transactions
No ratings yet
TNG Ewallet Transactions
6 pages
Statement 1711729792106
No ratings yet
Statement 1711729792106
3 pages
Digital Marketing Intro
No ratings yet
Digital Marketing Intro
57 pages
Raj Ranpara Resume
No ratings yet
Raj Ranpara Resume
2 pages
Front-End Training: 1. Day 1-2: HTML Introduction
No ratings yet
Front-End Training: 1. Day 1-2: HTML Introduction
3 pages
XXXXXXX 4172
No ratings yet
XXXXXXX 4172
8 pages
Web Developer Khanh Van
No ratings yet
Web Developer Khanh Van
3 pages
Rômulo Rodrigues: Contact
No ratings yet
Rômulo Rodrigues: Contact
2 pages
IT 237: Web Technology I: Course Objectives
No ratings yet
IT 237: Web Technology I: Course Objectives
2 pages
Awp Lab Manual
No ratings yet
Awp Lab Manual
67 pages
PDF Manual de Medicina Psicosomatica Haynal y Pasini - Compress
No ratings yet
PDF Manual de Medicina Psicosomatica Haynal y Pasini - Compress
12 pages
ISM402
No ratings yet
ISM402
2 pages
HTML - CSS Notes
No ratings yet
HTML - CSS Notes
6 pages
MIS8 CH 04
No ratings yet
MIS8 CH 04
41 pages