0% found this document useful (0 votes)

9 views485 pages

Web Application Development Overview

The document provides an introduction to web applications, covering network types, the internet, and web architecture. It details the evolution of HTML, the setup of a web application environment, and the structure of HTML pages, including static and dynamic pages. Additionally, it outlines the necessary tools and steps for creating a web project using Node.js and Visual Studio Code.

Uploaded by

Arvind Biradar

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

9 views485 pages

Web Application Development Overview

Uploaded by

Arvind Biradar

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

Introduction to Web

Web Applications
1. Network
- A computer network comprises of group of computers connecting with each other for sharing of
information and devices.
- ARPANET is the first computer network introduced by US-DOD.
[Advanced Research Projects Agency Network]

2. Types of Network
a) LAN [Local Area Network]
b) MAN [Metro politan Area Network]
c) WAN [Wide Area Network]

3. Internet
- Internet is a WAN that connects computer all over the world.

4. Web
- Web is a portion of internet with restricted access.
- CERN labs architect - Tim Berners Lee - Introduced Web. - 1990
- W3C maintains Web Standards.
[Word Wide Web Consortium]
- Web Version is "3" [web-3]

[Link]
Web Application Architecture

1. Data Center
- Database : MongoDB
2. Application Center
- Application : Node JS
- Middleware: Express JS
3. Presentation Center
- Application
HTML
CSS
Bootstrap
Sass
JavaScript
jQuery

Browser Engine

Sudhakar Sharma

May 26, 2023

- Data Center
Database
MongoDB
- Application Center
Server Side App
NodeJS
Express
- Presentation
HTML, CSS, JS, JQ, Sass

HTML
[Hyper Text Markup Language]
- Hyper means Beyond.
- Markup means preparing for presentation.
- HTML is a language used for presentation. It can present the content on browser.
- HTML is a presentation language.

Evolution of HTML:

- CERN labs introduced a language called GML [Generic Markup Language] for presentation.
- CERN introduced SGML [Standard Generic Markup Language] which is more advanced to GML.
- In the early 1990's "Tim Berners Lee" introduced HTML as language.
- A group called "IETF" [Internet Engineering Task Force] developed HTML versions upto 3.1.
- In 2004 WHATWG took the responsibility of HTML.
- HTML is now evolved and maintained by WHATWG.
- WHATWG introduced HTML 4 and HTML 5 Versions. [2014]
[Web Hyper text Application Technology Work Group]

HTML 5
Summary:
GML => SGML => HTML => IETF HTML 3.1 => WHATWG 4.0 => WHATWG HTML 5

Browser Architecture
- Browser is a software tool used by clients in order to access the websites and view on their devices.
- Various Browsers
chrome, edge, firefox, opera, safari etc..
- Browsers are controlled by using Engines

Chrome => V8
Safari => Webkit
FireFox => Gecko, Spider Monkey
Edge => Chakra, Chromium

1. Browser UI
2. Browser Engine
3. Rendering Engine
4. Network
5. JavaScript Interpreter
6. Backend
7. Data Persistance.

HTML Parsing

Setup Environment of Web Application May 27, 2023

Environment Setup for Building Web Application:

1. Download and Install "NodeJS" on your PC

- We are installing Node JS for a package manager called "NPM".

- Package manager is a software, which is used to download and install libraries
that are required for a project.
- There are various package managers
a) NPM
b) Yarn
c) Bower
d) NuGet
e) Ruby GEMS etc..

[Link]

- Download and Install

18x version

- Open your windows command prompt

C:\> node -v
C:\> npm -v

2. Download and Install "Visual Studio Code Editor"

- Editor is a software used for building , debugging , testing and deploying.

- It provides and IDE [Integrated Development Environment].

[Link]

3. Download and Install Extentions for VS Code

- Live Server [Ritwick Dey]

- vscode-icons
- IntelliSense for CSS class name in HTML

Creating a new Project

------------------------------
1. Open any location on your PC and create a new folder
D:\erp-project
2. Open your project folder in Visual Studio Code

File Menu => Open Folder => "D:\erp-project"

3. Open Terminal
Terminal Menu => New Terminal

>npm init -y

- This will generate "[Link]"

- [Link] comprises of project meta-data.
- Information about your project
version
author
name
dependencies etc..
4. Add following folders into project

a) public
b) src

public : It is used to keep all static resources, like images, html, text, pdf, audio, video..
src : It is used to keep all dynamic resources, like css, js, ts, scss etc..
5. Add a new file into project root folder "[Link]"
6. Click on "Go Live" in status bar
7. Open any browser and request your project URL
[Link]
[Link]
Note: Always use only "command prompt" instead of Power Shell.

HTML Introduction - Static and Dynamic Pages Jun 5, 2023

Fullstack Web Development - Web Application

1. Front End
HTML
CSS
Bootstrap
Sass
JavaScript
jQuery
2. Back End
Node JS
Express JS
MongoDB

1. Download and Install a software "Node JS" on your PC.

[Link]
2. Download and Install "Visual Studio Code".
[Link]
3. Install Live Server Extention in Visual Studio Code
Create a new Project
1. Open any location on your PC and create a new folder for project
D:\online-store
2. Open Visual Studio Code and open your project folder.
File Menu => Open Folder => D:\online-store
3. Add following folders into project
a) public
b) src
public folder contains all static resources: html, text, video, audio, pdf etc..
src folder contains all dynamic resources: css, javascript, typescript, sass etc..
4. Every project must contain a file called "[Link]". It contains project meta data.
Information about project.
a) Open Terminal [ Ctrl + ` ] => Terminal Menu => New Terminal
b) Run the command

> npm init -y => [Link]

HTML Page StructureJun 6, 2023

HTML Page Structure

1. Every static page must have extention
".html or .htm"

2. Every HTML page must start with "Document Declaration"

- Every browser have a browser engine

- Browser engine have a parser, which is used to translated HTML.
- Developer have to tell the parser about the verision of HTML using
"Document Declaration"
- HTML 5 provides document declaration

<!DOCTYPE html>

3. Every HTML page have a document scope which is defined using:

<html> start
</html> end

4. Document scope must define the language type for content in page.

<html lang="en-in"> en-us, en-gb, en-fr, en-gn

</html>

Syntax:
<!DOCTYPE html>
<html lang="en-in">

</html>

5. Inside Document HTML page contains 2 sections.

a) Head <head> </head>

b) Body <body> </body>

Head:
- It defines the content which is intended to load into browser memory and then later delivered to
browser.
- It is good for reusing the content.
- A typical web page in head section comprises of following contents

a) title
b) link
c) meta
d) script
e) style

title:
- It defines a title for page, which is displayed in browser title bar.
- Title is used in SEO [Search Engine Optimization]
- Title is used in booking the page.

Syntax:
<!DOCTYPE html>
<html lang="en-in">
<head>
<title> Online Store - Shopping Online </title>
</head>
</html>

link:
- It is used to link any external document to web page.
- It can link CSS document or Shortcut icon.

Ex: Creating Short cut icon

1. Add a new folder in you project public

"images"

2. Add a new file by name "[Link]" into images folder

3. Right click => Open with File Explorer

4. Right Click on image => Open With MsPaint

5. File Menu => Image Properties => Size : 32x32 pixels

6. Draw icon and Save [Ctrl + S]

7. Go to HTML page and link the icon

- Every web application comprises of

a) Static Page
b) Dynamic Page

Static Page:
- Static refers to contineous memory.
- Memory allocated for first object will continue for next object.
- Static page contains same information to display across requests.
- Static page have extention ".html or .htm"

Ex:
[Link]
[Link]

Dynamic Page:
- A dynamic page contains information that changes according to the request.
- It contains information customized for every client request.
- Dynamic page have extentions: .jsp, .php, .asp, .aspx

Ex:
[Link]
[Link]

Note: To design both static and dynamic pages you need HTML.

Static Page composition

- HTML
- CSS
- JavaScript
- jQuery

Dynamic Page Composition

- HTML
- CSS
- JavaScript
- jQuery
- Java [JSP]
- C# [[Link]]
- PHP

HTML for Static Page

- Hyper Text Markup Language
- Hyper mean Beyond.
- Markup is the process of preparing for presentation.
- HTML is a presentation language.

FAQ: What is difference between programming language and presentation?

Ans: Programming language can interact with user.
Presentation language is used only for presenting the content.

- HTML introduced in early 1990 by "Tim Berners Lee".

- IETF developed HTML upto versions 3.1
- WHATWG started evolving and maintaining HTML from 2004 with version 4.0.
- Latest version of HTML is HTML 5.

Structure of HTML Page:

1. Every HTML page must have extention
.html
.htm

HTML Page Structure Jun 6, 2023

1. Every static page must have extention

".html or .htm"

2. Every HTML page must start with "Document Declaration"

- Every browser have a browser engine

- Browser engine have a parser, which is used to translated HTML.
- Developer have to tell the parser about the verision of HTML using
"Document Declaration"
- HTML 5 provides document declaration

<!DOCTYPE html>

3. Every HTML page have a document scope which is defined using:

<html> start

</html> end

4. Document scope must define the language type for content in page.
<html lang="en-in"> en-us, en-gb, en-fr, en-gn

</html>

Syntax:
<!DOCTYPE html>
<html lang="en-in">

</html>

5. Inside Document HTML page contains 2 sections.

a) Head <head> </head>

b) Body <body> </body>

Head:
- It defines the content which is intended to load into browser memory and then later deliverd to
browser.
- It is good for reusing the content.
- A typical web page in head section comprises of following contents

a) title
b) link
c) meta
d) script
e) style

title:
- It defines a title for page, which is displayed in browser title bar.
- Title is used in SEO [Search Engine Optimization]
- Title is used in booking the page.

Syntax:
<!DOCTYPE html>
<html lang="en-in">
<head>
<title> Online Store - Shopping Online </title>
</head>
</html>

link:
- It is used to link any external document to web page.
- It can link CSS document or Shortcut icon.

Ex: Creating Short cut icon

1. Add a new folder in you project public

"images"
2. Add a new file by name "[Link]" into images folder

3. Right click => Open with File Explorer

4. Right Click on image => Open With MsPaint

5. File Menu => Image Properties => Size : 32x32 pixels

6. Draw icon and Save [Ctrl + S]

7. Go to HTML page and link the icon

HTML Body Section and Semantics

[Link] Declaration
[Link] Scope
[Link] Section
a) title
b) link
c) meta
4. Body Section

Attributes:
1. bgcolor : It sets background color
2. text : It sets text color

a) color name
d) color shade
c) hexa decimal code
#rgb, #rrggbb [0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f]
Syntax:
<body bgcolor="#f00" text="#fff">

3. background : It is used to set a background image for page.

Syntax:
<body background="public/images/[Link]">

</body>

Styles for Background Image:

background-size
background-position
background-attachment
background-repeat

<head>
<style>
body {
background-size: height, width;
background-position: left, center, right, top, center, bottom;
background-attachment: fixed, scroll;
background-repeat: no-repeat, repeat, repeat-x, repeat-y;
}
</style>
</head>

Ex:
<!DOCTYPE html>
<html lang="en-in">
<head>
<title>Online Store - Shopping Online</title>
<style>
body {
background-size: 800px 800px;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
</style>
</head>
<body background="public/images/[Link]">
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.

</body>
</html>

4. align : It aligns the body content left, center, right or justify.

Syntax:
<body align="justify">
</body>

5. alink : It sets color for active links in page.

6. vlink : It sets color for visited links in page.

Syntax:
<body alink="red" vlink="gray">
<a href="[Link] Amazon </a>

</body>

7. leftmargin ]
8. rightmargin ] It sets space between your content and browser window.
9. topmargin ]
10. bottommargin ]

Syntax:
<body leftmargin="350" rightmargin="350" topmargin="50" bottommargin="50">

</body>

Body Semantics
- HTML upto version 4 used "tables" for presenting body content.
- Tables are not SEO friendly.
- Tables lead to a situation called "Kiss-of-Death".
- HTML 5 introduced several new semantics to make the body section more SEO friendly and
responsive.
- The semantic elements used for designing layout of page are:

1. header
2. footer
3. section
4. main
5. nav
6. aside
7. article
8. dialog
9. figure
10. figcaption
11. menu
12. div
13. span
14. address

HTML Header Section and other semantics

Body Semantics
1. header
- It specifies the content to display at the top margin of page.
- Typically header comprises of
brand name
brand logo
short cut button
search panel
navbar etc...

[Link]
2. div
- It is a container used for division of content in page.

Ex:
<!DOCTYPE html>
<html lang="en-in">
<head>
<title>Home</title>
<style>
div {
border: 1px solid black;
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
Web Technologies
<div>
Front End
<div>
HTML <br>
It is a markup language.
</div>
<div>
CSS <br>
It is used for styles.
</div>
</div>
<div>
Back End
<div>
MongoDB <br>
It is a database.
</div>
<div>
Node JS <br>
It is server side scripting.
</div>
</div>
</div>
</body>
</html>
3. span:
- It is used to define inline embedded content.
- It is a inline container.

Syntax:
It is a <span> markup </span> language.

Ex:
<!DOCTYPE html>
<html lang="en-in">
<head>
<title>Home</title>
<style>
div {
border: 1px solid black;
padding: 10px;
margin-bottom: 20px;
}
span {
color:blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div>
Web Technologies
<div>
Front End
<div>
HTML <br>
It is a <span>markup</span> language.
</div>
<div>
CSS <br>
It is used for styles.
</div>
</div>
<div>
Back End
<div>
MongoDB <br>
It is a database.
</div>
<div>
Node JS <br>
It is server side scripting.
</div>
</div>
</div>
</body>
</html>

Setup Bootstrap Icons for your project:

1. Open Terminal in your VS code

2. Switch to "Command Prompt"

3. Run the following command

> npm install bootstrap-icons --save

4. A folder is added by name "node_modules".

5. Icons are present in a CSS file

node_modules/bootstrap-icons/font/[Link]

6. In order to use icons you have to link the CSS file to webpage.

7. Every icon is present with reference of class name

<span class="bi bi-facebook">

Ex:
<!DOCTYPE html>
<html lang="en-in">
<head>
<title>Home</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<span class="bi bi-cart"></span>
<span class="bi bi-person"></span>
<span class="bi bi-house-door"></span>
</body>
</html>
4. nav : It defines navigation area in page.

5. article : It defines the highlights of your page content.

Ex: [Link]

Footer, Section and Main

Sudhakar Sharma

Jun 10, 2023

Body Semantics
-header
-div
-span
-nav
-article

footer
- It defines the content to display at the bottom margin of page.
- Usually footer comprises of
Copyrights
Address
Quick Links
Partners
Services etc..
address
- It is used to keep contact details SEO friendly.
Note: In css you can divide content into multiple columns by using "display:grid"

Syntax:
{
display:grid;
grid-template-columns: [share among 12 fr or 1200 px]
}

EX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopper</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
header {
display: flex;
justify-content: space-between;
font-size: 20px;
font-family: Arial;
padding: 15px;
}
span{
margin-right: 20px;
}
.brand-name {
font-size: 30px;
font-weight: bold;
}
article {
background-color: black;
color:white;
font-size: 16px;
padding: 10px;
text-align: center;
margin-top: 10px;
font-family: Arial;
}
.bi-lightning-fill {
color:gold;
}
section{
height: 200px;
}
footer {
background-color: black;
color:white;
font-size: 15px;
font-family: Arial;
padding: 10px;
display: grid;
grid-template-columns: 2.4fr 2.4fr 2.4fr 2.4fr 2.4fr;
}
.footer-brand-name {
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.title {
font-weight: bold;
margin-bottom: 20px;
}
.title~div {
margin-bottom: 15px;
}
</style>
</head>
<body>
<header>
<div>
<span class="brand-name">Shopper.</span>
</div>
<div>
<nav>
<span>Home</span>
<span>Catalog</span>
<span>Shop</span>
<span>Pages</span>
<span>Blog</span>
<span>Docs</span>
</nav>
</div>
<div>
<span class="bi bi-search"></span>
<span class="bi bi-person"></span>
<span class="bi bi-heart"></span>
<span class="bi bi-cart4"></span>
</div>
</header>
<article>
<span class="bi bi-lightning-fill"></span>HAPPY HOLIDAY DEALS ON EVERYTHING <span class="bi
bi-lightning-fill"></span>
</article>
<section>
</section>
<footer>
<div>
<div class="footer-brand-name">
<span>Shopper.</span>
</div>
<div>
<span class="bi bi-facebook"></span>
<span class="bi bi-twitter"></span>
<span class="bi bi-instagram"></span>
<span class="bi bi-youtube"></span>
</div>
</div>
<div>
<div class="title">SUPPORT</div>
<div>Contact Us</div>
<div>FAQs</div>
<div>Size Guide</div>
<div>Shipping & Returns</div>
</div>
<div>
<div class="title">SHOP</div>
<div>Men's Shopping</div>
<div>Women's Shopping</div>
<div>Kids' Shopping</div>
<div>Discounts</div>
</div>
<div>
<div class="title">COMPANY</div>
<div>Our Story</div>
<div>Careers</div>
<div>Terms & Conditions</div>
<div>Privacy & Cookie policy</div>
</div>
<div>
<div class="title">CONTACT</div>
<address>
<div>1-202-555-0105</div>
<div>1-202-555-0106</div>
<div>help@[Link]</div>
</address>
</div>
</footer>
</body>
</html>

Ex: Flipkart Footer

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flipkart</title>
<style>
footer{
background-color: black;
color:white;
font-size: 20px;
padding: 10px;
display: grid;
grid-template-columns: 6fr 6fr;
height: 300px;
}
.left-panel {
display: grid;
grid-template-columns: 3fr 3fr 3fr 3fr;
}
.right-panel {
display: grid;
grid-template-columns: 6fr 6fr;
border-left: 2px solid white;
padding-left: 20px;
}
</style>
</head>
<body>
<footer>
<div class="left-panel">
<div>col-1</div>
<div>col-2</div>
<div>col-3</div>
<div>col-4</div>
</div>
<div class="right-panel">
<div>col-1</div>
<div>col-2</div>
</div>
</footer>
</body>
</html>

Ex: Amazon Footer - Your Task

Summary
- header
- footer
- div
- span
- nav
- article
- address

section
- It defines the content to display between header and footer.

Syntax:
<header> </header>
<section> </section>
<footer> </footer>

main
- It is considered as entry point.
- User start using the application from main area.
- Usually main comprises of actions like register or login.

Note: CSS have a color method called "rgba()"

r-red 0 to 255
g-green 0 to 255
b-blue 0 to 255
a-alpha 0 to 1

rgba(255,0,0,0); red

Ex: Netflix Design

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-size: cover;
}
.shade {
height: 700px;
background-color: rgba(0,0,0,0.5);
margin-top: -20px;
margin-left: -20px;
width: 102%;
}
header {
padding: 30px;
display: flex;
justify-content: space-between;
}
.brand-name {
font-size: 40px;
color:red;
font-family: Arial;
font-weight: bold;
}
.language {
font-size: 20px;
color:white;
}
.signin {
background-color: red;
color:white;
width: 60px;
font-size: 20px;
padding: 5px;
border-radius: 3px;
margin-left: 10px;
height: 23px;
}
.right-panel {
display: flex;
}
section {
color:white;
margin-left: 50px;
}
.title {
font-size: 60px;
font-weight: bold;
font-family: Arial;
margin-top: 100px;
width: 800px;
}
.sub-title {
font-size: 30px;
font-weight: bold;
font-family: Arial;
margin-top: 25px;
}
.email {
height: 25px;
width: 300px;
background-color: black;
color:white;
padding: 10px;
font-size: 20px;
}
.get-started {
background-color: red;
height: 25px;
padding: 10px;
font-size: 20px;
width: 150px;
margin-left: 10px;
}
main {
margin-top: 50px;
}
.main-controls {
display: flex;
margin-top: 20px;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body background="images/[Link]">
<div class="shade">
<header>
<div>
<span class="brand-name">NETFLIX</span>
</div>
<div class="right-panel">
<div class="language"><span class="bi bi-globe"></span>Language</div>
<div class="signin">Signin</div>
</div>
</header>
<section>
<div class="title">Unlimited movies, TV shows and more</div>
<div class="sub-title">Watch anywhere. Cancel anytime.</div>
<main>
<div>Ready to watch? Enter your email to create or restart your membership.</div>
<div class="main-controls">
<div class="email">Your email address</div>
<div class="get-started">Get Started <span class="bi bi-chevron-right"></span> </div>
</div>
</main>
</section>
</div>
</body>
</html>

Aside, Dialog and Font Styles

Sudhakar Sharma

Jun 12, 2023

Summary
- header
- footer
- section
- nav
- article
- div
- span
- address
- main

Aside
- It is a container that comprises of information, which is not relative to current context.
- It navigates the user aside the current page.

Syntax:
<aside>
...your ads..
</aside>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inox</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
aside {
position: fixed;
right: 10px;
bottom:10px;
font-size: 25px;
color:darkcyan;
width: 25px;
padding: 3px;
background-color: white;
}
</style>
</head>
<body>
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have an
FAQ page ([Link] that provides
more information, including what Microsoft products and services it covers. Whenever we make
changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.

Dialog

- It is used to create a pop-up window.

- Pop-up is controlled using JavaScript or jQuery.
- Dialog is default hidden on page, you can define "open" attribute to display.

Syntax:
<dialog open>
... your content...
</dialog>

</style>
</head>
<body>
<dialog open>
May I Help you ?
</dialog>
</body>
</html>

Nav, Menu, Details, Summary

- Nav is used for creating a navigation area.

- Menu contains categories of navigation.
- Details and Summary are used to show and hide the content in navigation.

Details :
- It is used to create expandable and collapsable content in page.
- The title is defined using "Summary".

Syntax:
<details>
<summary> Title </summary>
........your content...........
</details>

- Details is by default collapsed in state, you can set "open".

Syntax:
<details open>

Headings
- Headings in page are defined using "<hn>" element.
- "n" refers to level number from 1 to 6.

Syntax:
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
................
<h6> Heading 6 </h6>

- Headings are used in page to make the topics SEO friendly.

EX:
<body>
<h1>Web Technologies</h1>
<h2>HTML</h2>
It is a markup language.
<h2>CSS</h2>
It defines styles.
<h2>JavaScript</h2>
It manipulates DOM.
</body>

Note:
- Don't use too many headings in a page, it may SPAM your page.
- Don't use headings to highlight any word or sentence in page.
FAQ: How to remove the heading styles for heading element?
Ans: By using CSS inheritance attribute value "unset".

Syntax:
h1 {
font-weight:unset;
}

h1 {
all : unset;
}

FAQ: Can we change the font size and styles for heading?
Ans: Yes.

Syntax:
h1 {
font-family : Brush Script MT;
font-size: 60px;
}

FAQ: Can we display headings side by side?

Ans: Yes. By using display:flex and by keeping all headings in one container.
[Flex can't be appied if elements are not in one container]

Syntax:
nav{
display:flex;
justify-content:space-between;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings</title>
<style>
nav {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<nav>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>
</nav>
</body>
</html>

HTML Paragraph, Blockquote, Text formatting,

Sudhakar Sharma

Jun 13, 2023

Paragraphs and Blockquotes

- <p> element is used for paragraph.
- <blockquote> is similar to paragraph, but contains left and right indents. It is used
to summarize your content and make SEO friendly.

Syntax: Not Good

<div>
HTML
<div> It is a markup language </div>
<div> It is used for presentation </div>
</div>

Syntax: Good Code

<div>
HTML
<div>
<p> It is a markup language </p>
<p> It is used for presentaiton </p>
</div>
</div>

Syntax:
<blockquote>
... summary ....
</blockquote>
<p> Para-1 </p>
<p> Para-2 </p>
<p> Para-3 </p>

- <p> & <blockquote> can use "align" attribute

align="left | center | right | justify"

Text Formatting Elements

-----------------------------------
<font> It changes the font family, size and color
<b> <strong> bold
<i> <em> Italics
<u> <ins> Underline
<strike> <del> Strikeout
<sup> Super Script
<sub> Sub Script

Syntax:
<font face="" size="" color=""> Text </font>

face : It defines font family name

size : It defines text size from 1 to 7 levels.
color : It defines text color.

Ex:
<font face="Magneto" size="6" color="#f00">

Welcome to HTML

</font>

Ex:
<p><font size="7" face="Magneto" color="#f00">Welcome to HTML</font></p>

FAQ: What are web safe fonts?

Ans: The fonts available across all devices.
a) serif
b) sans-serif
c) monospace

FAQ: What is difference between <b> & <strong> elements?

Ans: <b> is used for designing
<strong> is used for reviewing

Note: Finally at the time of publishing website page can't have review tags.

Design Mode elements: <b> <i> <strike> <u>

Review Mode elements: <strong> <em> <del> <ins>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings</title>
<style>
blockquote {
margin-left: 300px;
margin-right: 300px;
font-style: italic;
}
</style>
</head>
<body>
<div>
Celebrating 12<sup>th</sup> Anniversary
</div>
<div>
H<sub>2</sub>O
</div>
<div>
Font style <b>Bold</b> is similar to <strong>Strong.</strong>
</div>
<div>
Font style <i>Italics</i> is similar to <em>Emphasized.</em>
</div>
<div>
Font Effect <u>Underline</u> is same as <ins>Inserted</ins>.
</div>
<div>
<strike>Strikeout</strike> is same as <del> Deleted. </del>
</div>
</body>
</html>

FAQ: How to set first line indent in paragraph?

Ans: By using CSS attribute "text-indent"

Syntax:
p{
text-indent : 50px;
}

FAQ: How to set space between chars, words and lines?

Ans: By using CSS attributes:
line-height space between lines
letter-spacing space between letters
word-spacing space between words

Syntax:
p{
line-height : 20px;
letter-spacing: 5px;
word-spacing: 10px;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings</title>
<style>
p{
text-indent: 50px;
line-height: 30px;
letter-spacing: 2px;
word-spacing: 10px;
}
</style>
</head>
<body>
<p align="justify">
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
</p>
</body>
</html>

FAQ: How to design a Drop Cap?

Ans: By using CSS classes and attributes

::first-letter It will access the first letter in paragraph

font-size It changes the height and width.
float:left It keeps the first letter floating on left of paragraph.

Syntax:
p :: first-letter {
font-size : 50px;
float:left;
color:red;
font-weight:bold;
font-family:Arial;
}
HTML Orderd and Unordered List

Sudhakar Sharma

Jun 14, 2023

Ordered List and Unordered List

- Ordered list a auto numbering style for a list of items.

<ol> for list

<li> for item in list.

Syntax:
<ol>
<li>Item-1</li>
<li>Item-2</li>
</ol>

Attributes:
type It defines numbering type: 1, A, a, i, I

start It defines the level number to start numbering.

<ol type="1" start="101">

reversed It sets reversed numbering, to display latest first.

<ol type="1" reversed">

Ex:
<body>
<h2>Web Technologies</h2>
<ol type="1" reversed start="2">
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
<li>JavaScript</li>
</ol>
</body>

- You can create nested ordered list.

Syntax:
<ol type="1">
<li> Item-1
<ol type="a">
<li> Child-1 </li>
<li> Child-2 </li>
</ol>
</li>
</ol>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings</title>
<style>

</style>
</head>
<body>
<h2>Web Technologies</h2>
<ol type="1">
<li>HTML
<ol type="a">
<li>Document Declaration</li>
<li>Document Scope</li>
</ol>
</li>
<li>CSS
<ol type="a">
<li>Selectors</li>
<li>Units
<ol type="i">
<li>Relative Units</li>
<li>Absolute Units</li>
</ol>
</li>
<li>Colors</li>
</ol>
</li>
</ol>
</body>
</html>

- Unordered list is defined by using

<ul> bulleted list , is a list of symbols.

<li> list item

Attribute:
type disc, circle, square

FAQ's:
1. How to display list item side-by-side?
A. By using CSS display-flex.

Syntax:
ol {
display:flex;
}

EX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings</title>
<style>
.options-list {
display: flex;
margin-top: 10px;
}
.options-list li {
margin-right: 50px;
}
</style>
</head>
<body>
<ol type="1">
<li>What is the role of CSS?
<ol type="a" class="options-list">
<li>DOM Manipulation</li>
<li>DOM Presentation</li>
<li>Responsive DOM</li>
<li>None</li>
</ol>
</li>
</ol>
</body>
</html>

2. How to display list items in multiple columns?

A. By using
a) Display-Grid [side by side numbering]
b) Columns [numbering orientation is down]

Syntax:
ol {
display:flex;
grid-template-columns: 6fr 6fr;
}

ol {
columns: 2;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings</title>
<style>
.options-list {
columns:2;
margin-top: 10px;
}
.options-list li {
margin-right: 50px;
}
</style>
</head>
<body>
<ol type="1">
<li>What is the role of CSS?
<ol type="a" class="options-list">
<li>DOM Manipulation</li>
<li>DOM Presentation</li>
<li>Responsive DOM</li>
<li>None</li>
</ol>
</li>
</ol>
</body>
</html>
3. How to create scrollable list?
A. By defining border, height and overflow.

Syntax:
ol {
border: 1px solid gray;
width:100px;
height:55px;
overflow: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings</title>
<style>
ol {
border:1px solid gray;
width: 100px;
height: 55px;
overflow: auto;
}
</style>
</head>
<body>
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
<li>Sass</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Angular</li>
<li>React</li>
</ol>
</body>
</html>

4. How to remove numbering or bullets for list?

A. By configuring "list-style" attribute with "none" as value.

Syntax:
ol , ul {
list-style : none;
}
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings</title>
<style>
footer {
background-color: black;
color:white;
padding: 20px;
display: grid;
grid-template-columns: 3fr 3fr 3fr 3fr;
}
ol {
list-style: none;
}
li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<footer>
<ol>
<h4>Get to Know Us</h4>
<li>About Us</li>
<li>Careers</li>
<li>Press Releases</li>
<li>Amazon Science</li>
</ol>

</footer>
</body>
</html>

5. How to set custom bullet symbol?

A. By using bootstrap icons you can define custom symbols.
By using CSS attribute "list-style-image" you can set custom image as bullet.

Syntax:
<li class="bi bi-tag"> </li>

ul {
list-style-image: url("images/[Link]");
}
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings</title>
<style>
ul {
list-style-image: url("images/[Link]");
font-size: 34px;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<footer>
<ul>
<li > About Us</li>
<li > Careers</li>
<li > Press Releases</li>
<li > Amazon Science</li>
</ul>

</footer>
</body>
</html>

6. Can a define a bullet symbol of ordered list?

A. Yes. You can also define numbering for unordered list.

Syntax:
ol {
list-style-type : circle|disc|square;
}

ul {
list-style-type: number|upper-alpha|lower-roman;
}

</div>
<div>
<h3>realme C55 (Rainforest, 128 GB)</h3>
<div>
<span class="rating">4.4 <span class="bi bi-star-fill"></span></span> <span class="ratings-
count"><b><font color="gray">12,315 Ratings & 661 Reviews</font></b></span>
</div>
<ul type="disc">
<li>8 GB RAM | 128 GB ROM | Expandable Upto 1 TB</li>
<li>17.07 cm (6.72 inch) Full HD+ Display</li>
<li>64MP + 2MP | 8MP Front Camera</li>
<li>5000 mAh Battery</li>
<li>Helio G88 Processor</li>
<li>1 Year Manufacturer Warranty for Phone and 6 Months Warranty for In the Box
Accessories</li>
</ul>
</div>
<div class="right-panel">
<div> <font face="Arial" size="6"><b>₹ 13,999</b></font> </div>
<div>
<strike><font color="gray"><b>₹ 15,999</b></font></strike> <font
color="green"><b> 15% Off</b></font>
</div>
<div>
Free delivery by <b>Today</b>
</div>
<div>
<b><font color="green">Saver Deals</font></b>
</div>
<div>
Upto <b>₹ 13,000 </b> off on exchange
</div>
</div>
</div>
</body>
</html>

HTML Images

Sudhakar Sharma

Jun 15, 2023

Images in HTML
- Images in computer technologies are of various types.
- Web will not support all types of images.
- Web supports following types of images

PNG, APNG HD, More Pixels, More space

Use this format for keeping images in a website, which
user can download and use.
[.png, .apng] [80m color shades]
JPEG HD, More pixels [less when compared to PNG]
Compressed Image format [less memory space]
You can use for on-screen presentation.
[.jpg, .jpeg, .jfif]

GIF Only 256 colors, Size same as JPG|PNG

You can use for logo, bullets, lines, background patterns,
buttons etc..
GIF can be animated.
[.gif]

TIFF It is sliced image format.

HD, more space, but sliced.
It is used for scanned documents.
[.tiff]

BMP Binary Image Format

[image is stored in bytes - 1000101010101]
You can use BMP for storing in database.
[Object - Binary - Object] COM marshaling.
[Common Object Model]
[.bmp]

ICO Shortcut icons

[.ico]

SVG It is vector graphics. Not pixel based.

It is XML format image.
[Extensibile Markup Language]
You can use for Maps, Architectural diagrams, layouts.
[.svg]

Webp Embedded image in page.

You can't save image. It will save entire page.

- Images are emebedded into page by using <img> element.

Attributes:
1. src It defines the image path and name
2. alt It defines the alternate text to display when image fails to load.
3. title It defines the tip to display when mouse is over image.
4. width & height Sets width and height for image
5. border It sets border by specified pixels
6. align It aligns image left or right. It is used for content beside image.
7. vspace It defines vertical space ] between text
8. hspace It defines horizontal space ] and image
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img align="left" vspace="10" hspace="10" src="images/[Link]" width="150" height="150">
<img align="right" src="images/[Link]" width="150" height="150">
<p>Depending on how you obtained the Windows software, this is a license agreement between
(i) you and the device manufacturer or software installer that distributes the software with your
device; or (ii) you and Microsoft Corporation (or, based on where you live or, if a business, where
your principal place of business is located, one of its affiliates) if you acquired the software from a
retailer. Microsoft is the device manufacturer for devices produced by Microsoft or one of its
affiliates, and Microsoft is the retailer if you acquired the software directly from Microsoft. Note that
if you are a volume license customer, use of this software is subject to your volume license
agreement rather than this agreement.</p>

<p>Depending on how you obtained the Windows software, this is a license agreement between
(i) you and the device manufacturer or software installer that distributes the software with your
device; or (ii) you and Microsoft Corporation (or, based on where you live or, if a business, where
your principal place of business is located, one of its affiliates) if you acquired the software from a
retailer. Microsoft is the device manufacturer for devices produced by Microsoft or one of its
affiliates, and Microsoft is the retailer if you acquired the software directly from Microsoft. Note that
if you are a volume license customer, use of this software is subject to your volume license
agreement rather than this agreement.</p>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flipkart</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
.product {
font-family: Arial;
display: grid;
grid-template-columns: 3fr 6fr 3fr;
column-gap: 20px;
margin-bottom: 20px;
border-bottom: 3px solid gray;
}
h3 {
color:blue;
}
.rating{
background-color: green;
color:white;
padding: 2px;
border-radius: 5px;
}
ul {
margin-left: -30px;
}
li {
color:gray;
margin-bottom: 10px;
}
.right-panel div {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="product">
<div>
<img title="25% OFF - Offer valid upto 18-June-2023" alt="realme mobile - images blocked on
your browser" width="100%" height="300" src="images/[Link]">
</div>
<div>
<h3>realme C55 (Rainforest, 128 GB)</h3>
<div>
<span class="rating">4.4 <span class="bi bi-star-fill"></span></span> <span class="ratings-
count"><b><font color="gray">12,315 Ratings & 661 Reviews</font></b></span>
</div>
<ul type="disc">
<li>8 GB RAM | 128 GB ROM | Expandable Upto 1 TB</li>
<li>17.07 cm (6.72 inch) Full HD+ Display</li>
<li>64MP + 2MP | 8MP Front Camera</li>
<li>5000 mAh Battery</li>
<li>Helio G88 Processor</li>
<li>1 Year Manufacturer Warranty for Phone and 6 Months Warranty for In the Box
Accessories</li>
</ul>
</div>
<div class="right-panel">
<div> <font face="Arial" size="6"><b>₹ 13,999</b></font> </div>
<div>
<strike><font color="gray"><b>₹ 15,999</b></font></strike> <font
color="green"><b> 15% Off</b></font>
</div>
<div>
Free delivery by <b>Today</b>
</div>
<div>
<b><font color="green">Saver Deals</font></b>
</div>
<div>
Upto <b>₹ 13,000 </b> off on exchange
</div>
</div>
</div>

<div class="product">
<div>
<img title="25% OFF - Offer valid upto 18-June-2023" alt="realme mobile - images blocked on
your browser" width="100%" height="300" src="images/[Link]">
</div>
<div>
<h3>realme C55 (Sunshower, 128 GB)</h3>
<div>
<span class="rating">4.4 <span class="bi bi-star-fill"></span></span> <span class="ratings-
count"><b><font color="gray">12,315 Ratings & 661 Reviews</font></b></span>
</div>
<ul type="disc">
<li>8 GB RAM | 128 GB ROM | Expandable Upto 1 TB</li>
<li>17.07 cm (6.72 inch) Full HD+ Display</li>
<li>64MP + 2MP | 8MP Front Camera</li>
<li>5000 mAh Battery</li>
<li>Helio G88 Processor</li>
<li>1 Year Manufacturer Warranty for Phone and 6 Months Warranty for In the Box
Accessories</li>
</ul>
</div>
<div class="right-panel">
<div> <font face="Arial" size="6"><b>₹ 13,999</b></font> </div>
<div>
<strike><font color="gray"><b>₹ 15,999</b></font></strike> <font
color="green"><b> 15% Off</b></font>
</div>
<div>
Free delivery by <b>Today</b>
</div>
<div>
<b><font color="green">Saver Deals</font></b>
</div>
<div>
Upto <b>₹ 13,000 </b> off on exchange
</div>
</div>
</div>
</body>
</html>

Advanced Image Attributes:

1. crossorigin : It is defined for images, which are access from remote servers
[API]
a) allow-anonymous
b) use-credentials

Cards Design with Images

Sudhakar Sharma

Jun 16, 2023

Images in HTML
- Various Image Types
- Purpose of different types
- Basic Attributes
src, alt, title, width, height, border, align, vspace, hspace.
- Advanced Attributes

1. crossorigin

Syntax:
<img crossorigin="allow-anonymous | use-credentials" src="...">

2. decoding : It defines how image loads along with other content in page.
It have the values "async | sync | auto"

Syntax:
<img decoding="async | sync | auto" src="....">

3. importance: It sets the priority for image in page.

It have values low, medium, high, auto.

Syntax:
<img importance="low|high|medium|auto" src="..">

4. srcset : It defines a set of images to display.

Images can change according to media queries.
Syntax:
<img srcset="path1, path2, path3...">

Note: To keep the images in page SEO friendly you can use the semantic elements
<figure>
<figcaption>

Syntax:
<figure>
<img src="images/[Link]" width="200" height="300">
<figcaption> Realme - Summer Offer 50% OFF </figcaption>
</figure>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
figure {
padding: 10px;
border:1px solid gray;
width: 250px;
}
figcaption {
width: 60%;
font-style: italic;
}
</style>
</head>
<body>
<figure>
<img importance="high" src="images/[Link]" width="100" height="100">
<figcaption>Realme - 50% OFF - Summer Offer</figcaption>
</figure>
</body>
</html>

FAQ: How to design fluid images?

Ans: Fluid image is defined with width as "%". It can adjust according its parent size.

<img width="100"> not fluid

<img width="100%"> fluid

Ex: Cards Design

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
.card {
width: 200px;
padding: 5px;
margin: 20px;
box-shadow: 2px 2px 2px gray;
}
.card-header {
height: 150px;
}
.card-body {
height: 110px;
text-align: center;
}
.card-body p {
font-weight: bold;
font-size: 20px;
font-family: Arial;
}
.rating {
color:goldenrod;
}
.card-footer {
text-align: center;
padding: 10px;
}
.btn {
background-color: black;
color:white;
padding: 5px;
}
.container {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<img src="images/[Link]" width="100%" height="150">
</div>
<div class="card-body">
<p>Digital Marketing</p>
<div class="rating">
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
</div>
</div>
<div class="card-footer">
<div class="btn">
Join Course
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<img src="images/[Link]" width="100%" height="150">
</div>
<div class="card-body">
<p>[Link]</p>
<div class="rating">
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
</div>
</div>
<div class="card-footer">
<div class="btn">
Join Course
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<img src="images/[Link]" width="100%" height="150">
</div>
<div class="card-body">
<p>Android Training</p>
<div class="rating">
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
</div>
</div>
<div class="card-footer">
<div class="btn">
Join Course
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<img src="images/[Link]" width="100%" height="150">
</div>
<div class="card-body">
<p>PHP Training</p>
<div class="rating">
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
</div>
</div>
<div class="card-footer">
<div class="btn">
Join Course
</div>
</div>
</div>

</div>
</body>
</html>

Ex: Amazon-Cards

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon Cards</title>
<style>
section {
display: grid;
grid-template-columns: 3fr 3fr 3fr 3fr;
margin-top: -300px;
}
.card {
height: 450px;
margin: 5px;
padding: 5px;
background-color: white;
box-shadow: 2px 2px 2px gray;
}
.card-header {
font-size: 20px;
font-family: Arial;
font-weight: bold;
}
.card-footer {
color:blue;
font-size: 16px;
}
.row-1 {
font-size: 20px;
font-weight: bold;
font-family: Arial;
}
.row-2, .row-3 {
display: grid;
grid-template-columns: 6fr 6fr;
column-gap: 10px;
}
.row-4 {
font-size: 16px;
color:blue;
}
</style>
</head>
<body>
<header>
<img src="images/[Link]" width="100%">
</header>
<section>
<div class="card">
<div class="card-header">
<p>Bluetooth Calling Smartwatch starts at...</p>
</div>
<div class="card-body">
<img src="images/[Link]" height="300">
</div>
<div class="card-footer">
<p>see more</p>
</div>
</div>
<div class="card">
<div class="row-1">
<p>Appliances for your home | Up to 55% off</p>
</div>
<div class="row-2">
<div>
<img src="images/[Link]" width="100%">
<p>Air Conditioners</p>
</div>
<div>
<img src="images/[Link]" width="200">
<p>Refrigrators</p>
</div>
</div>
<div class="row-3">
<div>
<img src="images/[Link]" width="200">
<p>Microwave Oven</p>
</div>
<div>
<img src="images/[Link]" width="200">
<p>Washing Machine</p>
</div>
</div>
<div class="row-4">
see more
</div>
</div>
<div class="card">
<div class="row-1">
<p>Appliances for your home | Up to 55% off</p>
</div>
<div class="row-2">
<div>
<img src="images/[Link]" width="100%">
<p>Air Conditioners</p>
</div>
<div>
<img src="images/[Link]" width="200">
<p>Refrigrators</p>
</div>
</div>
<div class="row-3">
<div>
<img src="images/[Link]" width="200">
<p>Microwave Oven</p>
</div>
<div>
<img src="images/[Link]" width="200">
<p>Washing Machine</p>
</div>
</div>
<div class="row-4">
see more
</div>
</div>
<div class="card">
<div class="row-1">
<p>Appliances for your home | Up to 55% off</p>
</div>
<div class="row-2">
<div>
<img src="images/[Link]" width="100%">
<p>Air Conditioners</p>
</div>
<div>
<img src="images/[Link]" width="100%">
<p>Refrigrators</p>
</div>
</div>
<div class="row-3">
<div>
<img src="images/[Link]" width="200">
<p>Microwave Oven</p>
</div>
<div>
<img src="images/[Link]" width="200">
<p>Washing Machine</p>
</div>
</div>
<div class="row-4">
see more
</div>
</div>
</section>
</body>
</html>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tempalte Cards</title>
<style>
.container {
display: flex;
justify-content: space-around;
}
.card {
width: 300px;
box-shadow: 2px 2px 2px gray;
border:1px solid black;
padding: 5px;
}
.card-img {
width: 100px;
height: 100px;
padding-right: 10px;
}
.card-header {
display: flex;
}
.card-body {
font-family: Arial;
color:gray;
line-height: 25px;
}
.card-footer {
color:gray;
font-weight: bold;
font-family: Arial;
}
.card:hover {
height: 350px;
background-color: black;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<img src="images/[Link]" class="card-img">
<div>
<p>Shoes</p>
<h4>Low top Sneakers</h4>
</div>
</div>
<div class="card-body">
<p>The Microsoft Services Agreement is an agreement between you and Microsoft (or one
of its affiliates) that governs your use of Microsoft consumer online products and services.</p>
</div>
<div class="card-footer">
Logan Edwards, 16 Jun 2023
</div>
</div>
<div class="card">
<div class="card-header">
<img src="images/[Link]" class="card-img">
<div>
<p>Shoes</p>
<h4>Low top Sneakers</h4>
</div>
</div>
<div class="card-body">
<p>The Microsoft Services Agreement is an agreement between you and Microsoft (or one
of its affiliates) that governs your use of Microsoft consumer online products and services.</p>
</div>
<div class="card-footer">
Logan Edwards, 16 Jun 2023
</div>
</div>

<div class="card">
<div class="card-header">
<img src="images/[Link]" class="card-img">
<div>
<p>Shoes</p>
<h4>Low top Sneakers</h4>
</div>
</div>
<div class="card-body">
<p>The Microsoft Services Agreement is an agreement between you and Microsoft (or one
of its affiliates) that governs your use of Microsoft consumer online products and services.</p>
</div>
<div class="card-footer">
Logan Edwards, 16 Jun 2023
</div>
</div>
</div>
</body>
</html>

Body Semantics

Sudhakar Sharma

Jun 17, 2023

Body Semantics and Entities

1. Line Break <br>

2. Blank Space  
3. Pre Formatted <pre>
4. Code Snippet <code>
5. Sample Text <samp>
6. Variables <var>
7. Big & Small Text Content <big> <small>

FAQ: What is difference between <br> & <br /> ?

Ans: There is no <br /> in HTML.

Note: HTML is a set of elements, which are classified into 5 groups

1. Normal Elements
2. Void Elements
3. RC Data Elements
4. Raw Text Elements
5. Foreign Elements

Normal Elements:
- These are the elements that return a presentation directly on callback.
- They doesn't require additional attributes.
- They start presentation but will not stop the presentation.
- You have to explicitly stop by using end token.

Ex:
<b> start token
</b> end token

Void Elements:
- These are the elements that discard the return values.
- Void refers to "discard return value". [no return]
- These elements doesn't require end token.
- They return any presentation only by using additional attributes.

Ex: <img>
RC Data Elements:
- These are Rich Content data elements.
- They will not allow to present any another element with in the context.
- They are ment for only plain text content.

Ex: <textarea> </textarea>

Raw Text Elements:

- These are the elements presented without a token [tag]
- Raw text is used for presentation.

Ex: © > ₹

Foreign Elements:
- These are HTML elements, but not native to browser.
- We have to enable plugin's explicitly to use these elements.
- They need additional library to enable and use.

Ex: SVG, Canvas, MathML

Syntax:
H     T M L <br>
It is a markup language.

Ex: Pre Formatted

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
pre {
background-color: black;
color:white;
padding: 10px;
width: 400px;
}
</style>
</head>
<body>
<h3>Sample C Program</h3>
<div>
<pre>
#include <stdio.h>
main()
{
printf("Welcome to C programming");
}
</pre>
</div>
</body>
</html>

Ex: Code, Variables, Sample Text

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

</style>
</head>
<body>
<h3>Find the Largest among 3</h3>
<h5>Explanation:</h5>
<samp>
<b>Test Case 1 :</b> Write a function that take 3 values. <br>
<b>Test Case 2 :</b> Write a condition to evaluate largest of 3.
</samp>
<h5>Your Code</h5>
<code>
<pre>
function FindLargest(<var>a</var>, <var>b</var>, <var>c</var>)
{

}
</pre>
</code>
</body>
</html>

Ex:
<big>Large</big>
<small>Small</small>

Note : Web-3 recommends not to use <font> element in page.

Hyper Links

Links in HTML
Sudhakar Sharma

Jun 19, 2023

Hyperlinks in HTML
- Link is clickable text, picture or graphic that navigates the user to any specific location when clicked.
- Navigation is the process of re-directing the user from one location to another.
- Hyper mean's beyond.
- A Hyperlink provides content beyond what you see, which can be accessed by clicking on link.
- Hyperlinks are created in HTML by using "anchor" <a> element.

Syntax:
<span> Home </span> Normal Text
<span> <a> Home </a> </span> Hyperlink
<a> Text | Picture | Graphic </a> Hyperlink

- Hyperlinks are classiffied into 2 types

1. Intra Document Links

2. Inter Document Links

Intra Document Links:

- These are hyperlinks that navigate the user from one location to another within the same page.
- To handle intra document navigation the topics in page must have a reference ID.

- You can reach to any reference ID by accessing "# id reference name" from address bar.

[Link]

- You can create a Hyperlink that sets the URL with "# and ID reference".

<a href="#home"> Home </a>

href => It is a path setter

src => It is a path getter

<h2 id="men">Men's Fashion</h2>

<img src="images/[Link]" width="200" height="300">
<div class="btn-back">
<a href="#home">Back to Top</a>
</div>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<h2 id="women">Women's Fashion</h2>
<img src="images/[Link]" width="200" height="300">
<div class="btn-back">
<a href="#home">Back to Top</a>
</div>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<h2 id="kids">Kids's Fashion</h2>
<img src="images/[Link]" width="200" height="300">
<div class="btn-back">
<a href="#home">Back to Top</a>
</div>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<figure id="offer">
<img src="images/[Link]" width="100" height="200">
<figcaption>Realme Offers</figcaption>
</figure>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>

</main>
</section>
</body>
</html>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intra Links</title>
<style>
header {
background-color: darkcyan;
color:white;
padding: 5px;
text-align: center;
}
section {
display: grid;
grid-template-columns: 3fr 9fr;
}
ul {
list-style: none;
margin-left: -40px;
}
li {
width: 150px;
background-color: darkcyan;
color:white;
font-size: 20px;
padding: 3px;
margin-bottom: 20px;
}
main {
height: 400px;
overflow: auto;
}
nav a {
color:white;
text-decoration: none;
}
.btn-back {
width: 200px;
background-color: black;
color:white;
padding: 3px;
text-align: center;
}
.btn-back a {
color:white;
text-decoration: none;
}
.header-nav {
display: flex;
justify-content: center;
}
.header-nav img {
margin-right: 30px;
border:2px solid white;
box-shadow: 2px 2px 2px gray;
}

</style>
</head>
<body>
<header>
<h2>Shopper</h2>
<div class="header-nav">
<div>
<a href="#men"><img src="images/[Link]" width="50" height="50"></a>
</div>
<div>
<a href="#women"> <img src="images/[Link]" width="50" height="50"></a>
</div>
<div>
<a href="#kids"> <img src="images/[Link]" width="50" height="50"></a>
</div>

</div>
</header>
<section>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#men">Men's Fashion</a></li>
<li><a href="#women">Women's Fashion</a></li>
<li><a href="#kids">Kid's Fashion</a></li>
</ul>
</nav>
<main>
<h2 id="home">Home</h2>
<p>We understand that <span><b><a href="#offer">Realme Offers</a></b></span> you may
have questions about the Microsoft Services Agreement. We have an FAQ page
([Link] that provides more
information, including what Microsoft products and services it covers. Whenever we make changes,
we provide a summary of the most notable changes to the current Microsoft Services Agreement.
We will also continue to provide a summary of the changes to the previous version, and a link to the
previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>

<h2 id="men">Men's Fashion</h2>

</main>
</section>
</body>
</html>

FAQ: How to highlight the target if page contents are not scrollable?
Ans : By using CSS class called "target". It can identify the target location and apply effects using ID
reference.

Syntax:
div {
// effects on normal state
}
div:target {
// effects on target
}

Note: To make the div as target if must have a reference ID.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intra Links</title>
<style>
.topic {
width: 300px;
background-color: lightgray;
border:1px solid black;
box-shadow: 2px 2px 2px gray;
padding: 5px;
margin: 20px;
}
.topic:target {
background-color: black;
color:white;
font-size: 25px;
transition: 2s;
}
.container {
display: flex;
}
ul {
list-style: none;
display: flex;
}
li {
margin-right: 100px;
background-color: black;
color:white;
padding: 5px;
width: 100px;
text-align: center;
font-size: 20px;
}
nav {
display: flex;
justify-content: center;
}
a{
color:White;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#js">JavaScript</a></li>
</ul>
</nav>
<div class="container">
<div class="topic" id="html">
<h2>HTML</h2>
<p>It is a markup language.</p>
<p>It is used for presentation.</p>
</div>
<div class="topic" id="css">
<h2>CSS</h2>
<p>It configures styles.</p>
<p>Styles make interactive design.</p>
</div>
<div class="topic" id="js">
<h2>JavaScript</h2>
<p>It is a programming language.</p>
<p>It manipulates DOM.</p>
</div>
</div>
</body>
</html>

FAQ: How to remove underline for hyperlink?

Ans: By using "text-decoration" style set to "none"

a{
text-decoration: none;
}

FAQ: How to change color for visited links?

Ans: a) Using HTML <body> "vlink" attribute
b) Using CSS "visited" class

a:visited {
color:gray;
}

FAQ: How to change normal link color?

Ans: By using "link" class

a:link {
color:white;
}
a{
color:white;
}
Inter Document Links

Sudhakar Sharma

Jun 20, 2023

Inter Document Links

- Configuring links that navigate to any file, url or application.

Syntax: File
<a href="[Link]"> Text </a>

- You can link any type of file. [ image, doc, ppt, xls, pdf, avi, mp3, mp4..]

Note: Every file type can't open in browser. It requires special "plugin's" to open various types of
files. If plugin is not installed in browser, then the linked document will download.

FAQ: How to configure a document with hyperlink so that it is always downloaded?

Ans: You can download any linked file just by using "download" attribute for <a> element.

<a href="./images/[Link]" download> ASP </a>

Syntax: URL

<a href="[Link] Amazon </a>

Syntax: Application

<a href="some@[Link]"> Text </a> Link to email

<a href="[Link] Call </a> Link to phone app
<a href="skype:hr_nareshit@[Link]"> Link to skype
<a href="[Link]

91 = country code

FAQ: How to open linked document in a new browser tab?

Ans: By using <a> attribute "target=_blank"

Syntax:
<a href="./images/[Link]" target="_blank"> Realme </a>

FAQ: How to open linked document in a new window?

Ans: By using "javascript" [Link]() method.

Syntax:
<a href="javascript:[Link]('path', 'title', 'features')">

Ex:
<a href="javascript:[Link]('./images/[Link]', 'RealMe', 'width=300 height=400')">
Realme </a>

FAQ: How to open linked document in the same window along with existing content?
Ans: By using <iframe> from HTML 5.

- Iframe is introduced into HTML 5.

- It is used to embed any content into page.
- It can embed dynamic contents into page.

Syntax:
<iframe name="refName" src="path" width="" height=""> </iframe>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inter Document Link</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
section {
display: grid;
grid-template-columns: 4fr 8fr;
}
iframe {
border:none;
}
</style>
</head>
<body>
<section>
<nav>
<ol>
<li><a href="./[Link]">Courses</a></li>
<li><a href="javascript:[Link]('./images/[Link]','RealMe','width=300
height=400')" >Realme</a></li>
<li><a href="./images/[Link]" target="framebody">Realme-1</a></li>
<li><a href="./docs/[Link]" target="_blank">Arrays PDF Tutorial</a></li>
<li><a href="./docs/Complete [Link]">Array Word Document</a></li>
<li><a href="./images/[Link]" download="asp-net">[Link]</a></li>
<li><a href="[Link] HTML</a></li>
<li>Contact : <a href="hr@[Link]">hr@[Link]</a></li>
<li>Call : <a href="[Link]
<li>Skype : <a href="skype:hr_nareshit@[Link]"><span class="bi
bi-skype"></span></a></li>
<li>Whatsup : <a href="[Link]
<li><a href="[Link]
target="framebody">AWS Training Video</a></li>
<li><a href="[Link] target="framebody">DS
Training</a></li>
</ol>
</nav>
<main>
<iframe name="framebody" width="100%" height="400"></iframe>
</main>
</section>
</body>
</html>

[Link]
[Link]
[Link]
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<figure>
<iframe width="300" src="[Link]
height="300"></iframe>
<figcaption>AWS</figcaption>
</figure>
<figure>
<iframe width="300" height="300"
src="[Link]
<figcaption>DS Training</figcaption>
</figure>
</body>
</html>

HTML Links Example - YouTube

Sudhakar Sharma

Jun 21, 2023

Summary
- Hyperlink
- Intra document
- Inter document

HTML Datalist, Fieldset and Tables

Sudhakar Sharma

Jun 22, 2023

Data List with Terms and Definitions

- Data list is defined by using <dl>

- List comprises of terms and definitions
- Terms are defined by using <dt>
- Definitions are defined by using <dd>

Syntax:
<dl>
<dt> Term-1 </dt>
<dd> Definition </dd>
<dt> Term-2 </dt>
<dd> Definition </dd>
</dl>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
dt {
background-color: gray;
color:white;
font-weight: bold;
padding: 5px;
margin-bottom: 10px;
text-align: left;
}
</style>
</head>
<body>
<h2>Web Technolgoies</h2>
<dl>
<dt>HTML</dt>
<dt>Markup</dt>
<dd> It is a markup language. </dd>
<dd> It is used for presentation.</dd>
<dt>CSS </dt>
<dd>It defines styles. </dd>
<dt>JavaScript </dt>
<dd>It manipulates DOM. </dd>
</dl>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
dt {
background-color: gray;
color:white;
font-weight: bold;
padding: 5px;
margin-bottom: 10px;
text-align: left;
}
dl {
display: grid;
grid-template-columns: 2fr 10fr;
}
dd {
background-color: darkcyan;
color:white;
padding: 5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd>some name</dd>
<dt>Age</dt>
<dd>some age</dd>
<dt>Address</dt>
<dd>some contact</dd>
<dt>Email</dt>
<dd>some@[Link]</dd>
</dl>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
dt {
background-color: black;
color:white;
width: 150px;
padding: 5px;
position: sticky;
top: 0px;
}
</style>
</head>
<body>
<h1>Shopper.</h1>
<dl>
<dt>Electronics</dt>
<dd>Mobiles</dd>
<dd>Televisions</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>Televisions</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>Televisions</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>Televisions</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>Televisions</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>Televisions</dd>
<dd>Watches</dd>
<dt>Footwear</dt>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dd>Casuals</dd>
<dd>Boots</dd>
<dd>Sneakers</dd>
<dt>Fashion</dt>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>
<dd>Kids</dd>
<dd>Men</dd>
<dd>Women</dd>

</dl>
</body>
</html>

Fieldset and Legend

- Fieldset defines a frame for your content.

- Legend sets caption for frame.

Syntax:
<fieldset>
<legend> Title </legend>
....................
...................
</fieldset>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
dl {
display: grid;
grid-template-columns: 2fr 8fr;
}
dt {
background-color: darkcyan;
color: white;
padding: 5px;
margin-bottom: 5px;
}
dd {
background-color: gray;
color:white;
padding: 5px;
margin-bottom: 5px;
}
fieldset {
margin-bottom: 25px;
box-shadow: 4px 4px 2px black;
}
legend {
background-color: darkcyan;
color:white;
text-align: center;
padding: 5px;
font-weight: bold;
box-shadow: 2px 2px 2px gray;
width: 120px;
border-radius: 20px;
}
</style>
</head>
<body>
<fieldset>
<legend>Personal Details</legend>
<dl>
<dt>User Name</dt>
<dd>some name</dd>
<dt>Age</dt>
<dd>some age</dd>
<dt>Date of Birth</dt>
<dd>some date</dd>
</dl>
</fieldset>
<fieldset>
<legend>Contact Details</legend>
<dl>
<dt>Address</dt>
<dd>some contact</dd>
<dt>Email</dt>
<dd>some@[Link]</dd>
<dt>Mobile</dt>
<dd>4999919293</dd>
</dl>
</fieldset>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
legend {
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
fieldset {
width: 50%;
border-left: none;
border-right: none;
border-bottom: none;
}
</style>
</head>
<body>
<fieldset>
<legend> New to Amazon? </legend>
</fieldset>
</body>
</html>

Tables in HTML

- Tables can arrange your content in rows and columns.

- HTML 4 uses table for designing page layout.
- Layout in table is not SEO friendly and leads to a situation called "Kiss-of-Death".
- Always use tables in HTML 5 for presenting data, not for layout design.
- Tables are popular in modern web for "Grids". It is a component which allows to present the data
and handle manipulations on data. [filter, search, sort etc..]
- Table in HTML 5 have following elements:

<table> Table container

<caption> Caption to make table SEO friendly
<colgroup> Groups columns for styles
<thead> Header
<tbody> Body
<tfoot> Footer
<tr> Table Row
<th> Heading Cell
<td> Normal Cell

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<style>
td img {
border-radius: 50px;
}
</style>
</head>
<body>
<table width="500" border="1">
<caption>Product List</caption>
<colgroup span="3" style="background-color: yellow;"></colgroup>
<thead>
<tr>
<th>Preview</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/[Link]" width="50" height="50">
</td>
<td>Watches</td>
<td>₹ 1000 to ₹ 40,000</td>
<td>Available</td>
</tr>
<tr>
<td>
<img src="images/[Link]" width="50" height="50">
</td>
<td>AC</td>
<td>₹ 1000 to ₹ 40,000</td>
<td>Available</td>
</tr>
<tr>
<td>
<img src="images/[Link]" width="50" height="50">
</td>
<td>Refrig</td>
<td>₹ 1000 to ₹ 40,000</td>
<td>Available</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td>Copyright</td>
<td>2023</td>
<th> </th>
</tr>
</tfoot>
</table>
</body>
</html>

Table Attributes:
1. frame, rules & border

frame : It is defined for table.

It contains the values: box, rhs, lhs, above, below, void

<table frame="box | void | rhs ..">

rules : It is defined for rows, columns and groups in table.

It contains values : all, rows, cols, groups, none.

<table rules="all | cols | rows ..">

border : It is defined for cells.

It contains 0=false, 1=true.

You can't set border if rules are defined in table.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<style>
td img {
border-radius: 50px;
}
</style>
</head>
<body>
<table width="500" border="1" frame="void">
<caption>Product List</caption>
<colgroup span="3"></colgroup>
<thead>
<tr>
<th>Preview</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/[Link]" width="50" height="50">
</td>
<td>Watches</td>
<td>₹ 1000 to ₹ 40,000</td>
<td>Available</td>
</tr>
<tr>
<td>
<img src="images/[Link]" width="50" height="50">
</td>
<td>AC</td>
<td>₹ 1000 to ₹ 40,000</td>
<td>Available</td>
</tr>
<tr>
<td>
<img src="images/[Link]" width="50" height="50">
</td>
<td>Refrig</td>
<td>₹ 1000 to ₹ 40,000</td>
<td>Available</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td>Copyright</td>
<td>2023</td>
<th> </th>
</tr>
</tfoot>
</table>
</body>
</html>

Table Attributes and Layouts

Sudhakar Sharma

Jun 23, 2023

Table Elements
<table>
<caption>
<colgroup>
<thead>
<tbody>
<tfoot>
<tr>
<td>
<th>

Table Attributes
1. frame, rules and border

2. cellspacing and cellpadding

cellspacing : It sets space between cells.

cellpadding : It sets space between cellborder and content in cell.

<table border="1" frame="void" cellspacing="10" cellpadding="5">

3. bgcolor and background

bgcolor : It sets background color for table, group, row, cell.

background : It sets background image for table, group, row, cell.

Note: You can't manipulate HTML table using columns.

4. align and valign

align : It sets horizontal alignment left, center, right or justify.

valign : It sets vertical alignment top, center, bottom.

5. width and height

width : It can be defined for only <th>, <td> or <table>

It can manage width for entire column.
You can't define Jagged columns.

height : It can be defined for only <tr> <td> or <table>

Note: Height and Valign are not available for table as properties. They are configured
only as attributes.

<table width="300" height="100">

6. rowspan and colspan

rowspan : It can merge all rows into one cell.

colspan : It can merge all columns into one cell.

Note: You can define rowspan and colspan only for <td> or <th>.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<font face="Arial">
<table width="100%" border="1" cellspacing="5" cellpadding="5">
<thead>
<tr>
<th colspan="2">Name</th>
<th colspan="3">Address</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>State</th>
<th>Postal Code</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td rowspan="6" align="center">D<br>E<br>L<br>H<br>I</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="center">© copyright 2023</td>
</tr>
</tfoot>
</table>
</font>
</body>
</html>

Summary:
1. frame
2. border
3. rules
4. cellspacing
5. cellpadding
6. bgcolor
7. background
8. align
9. valign
10. width
11. height
12. rowspan
13. colspan

Ex: Layout Design using Table

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="100%" cellspacing="10" cellpadding="5" border="1" frame="void">
<tr height="100">
<td colspan="3">header</td>
</tr>
<tr height="400">
<td width="200">
<table height="300" width="200" cellpadding="5" cellspacing="20" border="1"
frame="void">
<tr align="center">
<td><a href="[Link]" target="framebody">Home</a></td>
</tr>
<tr align="center">
<td>Men</td>
</tr>
<tr align="center">
<td>Women</td>
</tr>
</table>
</td>
<td><iframe width="100%" name="framebody" src="[Link]"
height="400"></iframe></td>
<td width="50">Aside</td>
</tr>
<tr height="50">
<td colspan="3"></td>
</tr>
</table>
</body>
</html>

Forms

Forms in HTML

Sudhakar Sharma

Jun 24, 2023

Forms in HTML

- Form provides an UI that allows the user to interact with our application.
- Interaction is the process where user inputs a value, application will process the request and
generates a response customized for every client request.
- Form is a container with set of elements like
button
textbox
checkbox
radio
listbox
dropdown etc..
- HTML form is designed by using <form> element. It is a container element.
- It can collect the input from user and submit to server.

Form Attributes:
1. id : It is a unique reference given for form.
2. name : It is a reference name given for form, which is not unique.
3. class : It defines a CSS class, which sets effects for element.
4. method : It defines the actions performed by form element.
Every form have only 2 methods to perform
a) GET
b) POST

Note: Http methods or verbs are various types

GET
POST
PUT
PURGE
PATCH
DELETE

FAQ: What is difference between GET and POST?

Ans:
GET
- It is a method used by form to fetch data from server.
- It is the default method.
- You can submit data on GET request method but it is not recommended.
- The data that you submit will be appended into URL as query string.
- Every user can view your data.
- It is not safe.
- It is easy to hack your data.
- You can't submit complex data like binary.
- There is limit for submitting data, which is 2048 chars.
- The data is stored in browser logs [history]
- It can be bookmarked.
- It saves round trips by caching the data.
[caching = storing in temporary memory]

POST
- It is a request method used to submit data.
- The data submitted on POST will be in "Form Body".
- Form Body is not visible to all users.
- It is safe.
- It is hard to hack your data.
- It is not stored in browser logs.
- It can't be bookmarked.
- There is no limit for submitting data.
- You can submit any type of complex data i.e binary.
- It can't cache the data.

5. Action : It defines where to submit the data. Usually it is a server side

technology. [asp, php, jsp etc..]

Syntax:
<form method="post" action="[Link]|asp..">

</form>

Form Attributes and Textbox Element

Sudhakar Sharma

Jun 26, 2023

HTML Form Attributes

1. id
2. name
3. class
4. method
5. action
6. novalidate : It is used to by-pass the default HTML validations.

HTML 5 provides default validations, which may not suite your

requirements, hence you have to define custom validations.

If custom validation is defined then you can skip the default

validation by using "novalidate".

syntax:
<form method="get" novalidate>

Email : <input type="email"> <button> Register </button>

</form>

FAQ's
1. Can a page have multiple forms?
A. Yes.

2. Can we define nested forms?

A. No. You can implement pseudo nested forms using AJAX.

Form Elements
- A form comprises of various elements like
textbox, checkbox, radio, listbox, dropdown, etc..

- To create elements in form HTML provides the following tokens

<input>
<textarea>
<select>
<option>
<optgroup>
<datalist>
<progress>
<meter> etc...

TextBox
- It is an input element that allows the user to view, edit and input a value.
- Textbox is used for "string" input.
- String is a literal with group of chars : alphabet, number, special chars.
- Textbox marks every input as string.
10 => "10"
- To design textbox element HTML provides "<input>" token with "type" as text.

Note: <input> is element and type defines data type for input, string type is "text".

Syntax:
<input type="text">

Attributes:
1. id
2. name
3. class

Note: Form can't submit the value of any element if "name" is not defined.
Hence name is mandatory for every element in form.
Attributes don't have any order dependency.

Syntax:
<input type="text" id="uname" class="form-control" name="UserName">

You can't submit any element value if its idefined outside form container.

FAQ: Can we define form elements without <form> container?

Ans: Yes. But you can't submit the form elements to server.

4. value : It defines the default value to display in textbox.

5. readonly : It will not allow to change the value but can submit the value.

6. disabled : It will not allow to change and submit value.

Syntax:
<input type="text" name="UserId" value="john_nit" disabled>
<input type="text" name="UserName" value="john" readonly>

7. size : It defines the width for textbox. Not the limit.

Syntax:
<input type="text" name="OTP" size="6">

8. placeholder : It defines the watermark text for textbox. It is displayed only when
value is not defined.

Syntax:
<input type="text" size="40" placeholder="Search [Link]">

9. autofocus : It sets focus to the element automatically at the time of loading

page.

Syntax:
<input type="text" autofocus name="UserName">

10. required : It is a validation attribute, which will not allow to submit if value
is not defined.
Syntax:
<input type="text" name="UserName" required>

11. minlength : It validates the lower bound value in a range.

Range: 10 to 20
10 is lowerbound
20 is upperbound

12. maxlength : It restricts the maximum length of chars to upperbound in range.

Syntax:
<input type="text" name="UserName" required minlength="4" maxlength="10">

13. list : It defines a datalist for input element, which is displayed as

autocomplete text.

Datalist is defined by using the elements

a) <datalist>
b) <option>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
dt {
font-weight: bold;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<form method="get">
<div align="center">
<h1>Google</h1>
<p>
<input type="text" name="search" size="40" list="terms">
<datalist id="terms">
<option>JavaScript Examples</option>
<option>CSS Examples</option>
<option>HTML Tutorial</option>
<option>JavaScript Tutorial</option>
<option>HTML Projects</option>
<option>CSS Projects</option>
</datalist>
</p>
<p>
<button>Search</button>
</p>
</div>
</form>
</body>
</html>

14. pattern

Patterns and Regular Expressions

Sudhakar Sharma

Jun 27, 2023

Summary
id, name, class, size, value, readonly, disabled, placeholder, autofocus, required, minlength,
maxlength, list

pattern

- It is used to verify the format of input value.

- Pattern uses a regular expression that verifies the format of input value.
- Regular expression is built by using meta characters and quantifiers.

Meta Characters:

? zero or one occurance of a character.

Syntax:
pattern="colou?r" => color, colour

* zero or more occurances of a character.

Syntax:
pattern="colou*r" => color, colour, colouur, colouuur..

+ one or more occurances of a character.

Syntax:
pattern="colou+r" => colour, colouur,...

. any single character, alphabet, number or special char

Syntax:
pattern=".at" => cat, bat, rat, #at, 6at
pattern=".o." => cow, dos, 8o$

| logical "OR", it defines multiple chars or words. [pipe]

Syntax:
pattern="red|blue|green" => only specified words

[] It defines range of characters.

Syntax:
pattern="[A-Z]"
pattern="[0-9]"
pattern="[A,D,S]"
pattern="[a,d,s,A,D,S]"
pattern="[a-z, A-Z]"
pattern="[$,%,#]"

() It defines union in expression.

Syntax:
pattern="(?=.*)"

\ It defines escape sequence character.

It transforms a character into meta character and vice versa.

Syntax:
pattern="gmail\.com"
pattern="\+91"

\^ Expression starts with

$ Expression ends with

Syntax:
pattern="\^ your expression $"

^ It refers to excluding characters. [charat]

Syntax:
pattern="[^A,D,S]" => all chars other than A,D,S

\d It refers to any single digit number

Syntax:
pattern="\d" => 1,2,3,4,..
pattern="\d\d" => 10, 20, 11, 23
pattern="\d\d?" => 1, 10,

\D It refers to any single char other than number.

[non-numeric]

Syntax:
pattern="\D" => a, A, @, #
pattern="\D\d" => A2, $2,

\w It refers to word chars. [A-Z,a-z,0-9, _ ]

Syntax:
pattern="\w"
pattern="\w\d"

\W It refers to all special characters, non-word chars

Syntax:
pattern="\W"
pattern="\W\w"

\s It refers to single blank space character.

Syntax:
pattern="\d\s\D" => 4 $, 4 A, 4 a
\i It is used to ignore the capitalization of string.
[ignore case]

Syntax:
pattern="colou?r\i" => color, Color

[A-Z] only upper case letters

[A-Za-Z] both upper and lower case
[0-9] ony number
[A-Za-z0-9] alpha numeric
[#@$%^] only specified special chars
[A,D,S] only specified chars
[A-D, a-d] only chars in specified range
[^a,d,s] excluding specified chars

Quantifiers
{n} It refers exactly specified number of chars

Syntax:
pattern="\d{2}"
pattern="\w{4}"
pattern="\d{2}\D{1}

{n,m} It refers the range. Minimum-n, Maximum-m

Syntax:
pattern="\d{4,8}"

{n, } It refers to minimum-n and maximum-any

Syntax:
pattern="\d{4, }"

Q: Write a pattern to validate SBI - IFSC code?

SBIN0044742

pattern="SBIN00\d{5}"

Q. Write a pattern to validate mobile number starting with +91 and 10 digits.

pattern="\+91\d{10}"
pattern="\+91[0-9]{10}"

Q. Write a pattern to validate username 4 to 15 chars? [alpha numberic with _ ]

pattern="\w{4,15}"
[Link] a pattern to validate US mobile format
+(1)(425) 555-0100

pattern="\+$1$$\d{3}$\s\d{3}-\d{4}"

Form Elements

Sudhakar Sharma

Jun 28, 2023

Patterns
- Regular Expression
- Meta Characters
- Quantifiers

Password
- It is similar to text box but it can mask the chars with "*"
- All attributes are same as textbox but not supported with "list" attribute.
- You can design password input by using the type as "password".

Syntax:
<input type="password" id="pwd" name="password" placeholder="Min 4 chars" minlength="4"
maxlength="15" required pattern="[A-Z]{4,15}">

Number
- It allows only numeric values to input.
- The additional attributes for number type

min lower bound value

max upper bound value
step value to increment and decrement
value default value

Syntax:
<input type="number" name="Age" min="15" max="30" value="22" step="1">
<input type="number" name="Rate" min="10.45" max="18.45" value="10.45" step="0.01">

Range
- It is similar to number input, but displays a slider instead of numeric selector.
- Attributes
min
max
value
step

Syntax:
<input type="range" name="Rate" min="10.45" max="18.45" step="0.01">
Email
- It is an input element that validates the email address.
- You can use all textbox attributes.

Syntax:
<input type="email" name="Email" required>

- Email is verified only when it is defined with "@".

URL
- It validates the URL input.
- Every URL must have protocol and domain address.
http://
https://

Syntax:
<input type="url" name="url" required>

[Link] => invalid

[Link] => valid

Color
- It can display a color picker, so that user can select any color.
- It can use only 6 char hexa decimal code for colors.
- You can set default color using "value" attribute.

Syntax:
<input type="color" name="color" value="#ff0000">

File
- It can add a file browser, which allows the user to select a file from client machine.
- It is not a file uploader. It is just a file selector.

Syntax:
<input type="file" name="photo">

- You can set filter for selecting files by using "accept" attribute.

Syntax:
<input type="file" name="photo" accept=".jpg">
<input type="file" name="photo" accept=".jpg, .png, .gif">

- You can allow to select more than one file by using "multiple" attribute.

Syntax:
<input type="file" name="photos" accept=".jpg" multiple>
Date and Time
- It can display a date or time picker, so that user select choose date and time.
- There are various types for date and time

date
datetime-local
time
month
year
week
- It will not allow to select range of dates.
- You can set restriction of date range by using the attributes "min & max".
- The default date format in any computing system is "year-month-day".

Syntax:
<input type="date" name="date" min="2023-06-28" max="2023-07-14">

Radio Buttons
- A radio button allows user to select one or multiple options from a group of choices.
- Radio button once checked can't be unchecked.
- To handle radio buttons you have to implement "Mutex" mechanism.
[Mutual Exclusion]
- To define mutex all radios in one category must have same name.

Syntax:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

- You can make any radio selected by default by using "checked"

<input type="radio" name="gender" checked> Male

- Every radio button submit "on" as value.

- Every radio must have a value to submit.

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

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

Form Elements continued..

Sudhakar Sharma

Jun 29, 2023

Form Elements
- TextBox
- Password
- Number
- Range
- Color
- Email
- File
- URL
- Date, DateTime-Local, Month, Year
- Radio [name, value, checked]

CheckBox
- It allows the user to check and uncheck any option.
- User can select one or multiple from a group of choices.
- All attributes are same like radio, but common name will not add "Mutex".

Syntax:
<input type="checkbox" name="course" value="Web Design" checked> Web Design

Ex: Checkbox List

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
border:1px solid gray;
padding: 10px;
width: 100px;
height: 50px;
overflow: auto;
}
</style>
</head>
<body>
<form method="get">
<dl>
<dt>Select Course</dt>
<dd>
<ul>
<li><input type="checkbox" name="Course" value="UI"> Web UI</li>
<li> <input type="checkbox" name="Course" checked value="Oracle"> Oracle</li>
<li><input type="checkbox" name="Course" value=".NET"> .NET </li>
<li><input type="checkbox" name="Course" value="Java"> Java </li>
</ul>
</dd>
</dl>
<button>Submit</button>
</form>
</body>
</html>

Dropdown List
- It can display a list of options from where user can choose any one option.
- It provides a dropdown menu that expands when user clicks on menu button.
- The elements used for dropdown

Syntax:
<select>
<option> Choose Item </option>
<optgroup label="Title">
<option> Item-1 </option>
<option> Item-2 </option>
</optgroup>
</select>

- Every <option> is RC data type, It can display only plain text, number, special char.
It can't display complex formats and elements inside.

- Every <option> comprises of 4 attributes

a) value : It defines the value to submit

b) selected : It select the option automatically on page load.
c) disabled : It will not allow to select option
d) text [accessible in script] : It is the text to display for option.

<option value="" selected disabled> Text </option>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<form method="get">
<h3><span class="bi bi-person-fill"></span> Register User</h3>
<dl>
<dt>Select Airport</dt>
<dd>
<select name="Airport">
<option>Select Airport</option>
<option value="RGI">Rajiv Gandhi Int. Airport [Hyd]</option>
</select>
</dd>
<dt>Select City</dt>
<dd>
<select name="City">
<option>Select Your City</option>
<option>Delhi</option>
<option>Hyd</option>
</select>
</dd>
<dt>Select Product</dt>
<dd>
<select name="Product">
<option>Select Product</option>
<optgroup label="Electronics">
<option>Televisions</option>
<option selected>Mobiles</option>
</optgroup>
<optgroup label="Fashion">
<option>Kids</option>
<option disabled>Men's</option>
<option>Women's</option>
</optgroup>
</select>
</dd>
</dl>
<button>Submit</button>
</form>
</body>
</html>

ListBox

- It allows the user to select one or multiple options from a group of choices.
- A dropdown list is transformed into listbox by using the attributes:
a) multiple
b) size
- Elements are same
<select>
<optgroup>
<option>

Syntax:
<select size="2">
<select multiple size="3">

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">

</head>
<body>
<form method="get">
<dl>
<dt>Select Product</dt>
<dd>
<select name="Product" size="3" multiple>
<optgroup label="Electronics">
<option>Televisions</option>
<option selected>Mobiles</option>
</optgroup>
<optgroup label="Fashion">
<option>Kids</option>
<option disabled>Men's</option>
<option>Women's</option>
</optgroup>
</select>
</dd>
</dl>
<button>Submit</button>
</form>
</body>
</html>

Textarea
- It is used for multiline text.
- It is similar to textbox but can display text in multiple lines.
- It is RC data type.
- Attributes
name, readonly, disabled, rows, cols
Syntax:
<textarea rows="4" cols="40"> </textarea>
<textarea rows="4" cols="30" readonly>
.... your text....
</textarea>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">

</head>
<body>
<form method="get">
<fieldset>
<legend>Your Comments</legend>
<textarea rows="4" cols="40"></textarea>
<p>
<button>Post Comment</button>
</p>
</fieldset>
<fieldset>
<legend>Terms of Service</legend>
<textarea rows="3" cols="40" disabled>Read our terms of service...</textarea>
<p><input type="checkbox"> I Accept </p>
</fieldset>
</form>
</body>
</html>

Meter
- It is used to display a grade meter.
- It is controlled dynamically by using script.
- It have attributes
min
max
value
low
high

Syntax:
<meter min="1" max="100" value="100"> </meter>
<meter min="1" max="100" value="20"> </meter>
<meter min="1" max="100" value="100" low="60" high="80"> </meter> RED
<meter min="1" max="100" value="100" low="40" high="80"> </meter> Gold

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
meter {
width: 200px;
height: 20px;
}
meter+span {
color:gray;
}
ul {
list-style: none;
}
li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<form method="get">
<ul>
<li>5 <span class="bi bi-star-fill"></span> <meter min="1" value="5" max="5"></meter>
<span>10,206</span> </li>
<li>4 <span class="bi bi-star-fill"></span> <meter min="1" max="5" value="4"></meter>
<span>2,206</span> </li>
<li>3 <span class="bi bi-star-fill"></span> <meter min="1" low="40" high="80" max="100"
value="100"></meter> <span>206</span> </li>
<li>2 <span class="bi bi-star-fill"></span> <meter min="1" low="60" high="80" max="100"
value="100"></meter> <span>16</span> </li>
</ul>
</form>
</body>
</html>

progress
- It is used to display the status of any task performed in page, like downloading, copying, uploading,
installing etc..
- Attributes
min
max
value

Syntax:
<progress min="1" max="100" value="20"> </progress>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
progress {
width: 300px;
height: 40px;
}
</style>
</head>
<body>
<form method="get">
<dl>
<dt>Preparing for Download</dt>
<dd><progress></progress></dd>
<dt>40% Completed</dt>
<dd><progress min="1" max="100" value="40"></progress></dd>
<dt>80% Completed</dt>
<dd><progress min="1" max="100" value="80"></progress></dd>
<dt>Download Completed</dt>
<dd><progress min="1" max="100" value="100"></progress></dd>
</dl>
</form>
</body>
</html>

Label
- It is used to display titles and caption for any element, which makes the element SEO friendly.

Syntax:
<label for="fieldName"> Text </label>
<div>
<input type="text" name="fieldName">
</div>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
form {
border:1px solid gray;
padding: 20px;
box-shadow: 2px 2px 2px black;
font-family: Arial;
width: 200px;
}
.form-group {
margin-bottom: 20px;
}
input, button {
width: 100%;
height: 25px;
}
button {
background-color: black;
color:white;
}
label {
font-weight: bold;
margin-bottom: 3px;
}
</style>
</head>
<body>
<form method="get">
<h3><span class="bi bi-person-fill"></span>User Login</h3>
<div class="form-group">
<label for="UserName">User Name</label>
<div>
<input type="text" name="UserName">
</div>
</div>
<div class="form-group">
<label for="Password">Password</label>
<div>
<input type="password" name="Password">
</div>
</div>
<div class="form-group">
<button>Login</button>
</div>
</form>
</body>
</html>

Buttons and Bootstrap Classes for Forms

Sudhakar Sharma

Jun 30, 2023

Buttons
- User can confirm any action by using buttons.
- HTML buttons are classified into 2 types
a) Generic
b) Non Generic

- Generic buttons have pre-defined functionality.

- Non Generic buttons are normal static buttons without any pre-defined functionality.

Submit ] Generic
Reset ] Buttons

Button ] Normal static button

- You can design and add buttons into page using versions
a) HTML 4
b) HTML 5

- HTML 4 Buttons [RC Data Type]

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method="get">
<dl>
<dt>User Name</dt>
<dd><input type="text" name="User"> </dd>
<dt>Course</dt>
<dd>
<input type="checkbox" checked name="course"> HTML <br>
<input type="checkbox" name="course"> JavaScript <br>
</dd>
</dl>
<input type="submit" value="Register">
<input type="reset" value="Cancel">
<input type="button" value="Print">
</form>
</body>
</html>

- HTML 5 Buttons support complex data, which includes formats and images.

<button type="submit"> Text | Icon | Image </button>

<button type="reset"> Text | Icon | Image </button>
<button type="button"> Text | Icon | Image </button>

Note: If type is not defined for HTML 5 <button> then the default is "Submit" type.

<button> Text | Icon | Image </button>

Summary
<form>
<input> [text, password, number, email, url, range, file, color, button, checkbox, radio]
<select>
<option>
<optgroup>
<datalist>
<textarea>
<meter>
<progress>
<button>
<label>

Bootstrap Classes for Form Elements

- Install Bootstrap library in your project.

>npm install bootstrap --save

- Link [Link] to your page

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">

- Bootstrap provides various CSS classes for presenting different types of HTML components.

1. Container Classes
.container mobile
.container-sm tab
.container-lg pc
.container-xl laptop [1200px]
.container-xxl wide screen laptop [1600px]
.container-fluid changes according to device

2. Margins
.m margin all directions
.ms left margin
.me right margin
.mt top margin
.mb bottom margin

.m-{size} 1 to 4

<div class="mt-4 ms-2 me-2 mb-4">

3. Padding
.p padding all directions
.ps padding left
.pe padding right
.pt padding top
.pb padding bottom

.p-{size} 1 to 4

4. Border
.border
.border-{size} 1 to 3
.border-{contextual} => primary, dark, secondary, danger, success, warning, info
.rounded [border radius]
.rounded-{size} 1 to 3
.rounded-circle
.rounded-pill

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
</head>
<body class="container-fluid">
<img src="images/[Link]" class="m-4 rounded-circle" width="100" height="100">
<form method="get" class="mt-4 ms-4 border border-3 border-primary rounded rounded-3 p-4 w-
25">
<dl>
<dt>User Name</dt>
<dd><input type="text" name="User"> </dd>
<dt>Course</dt>
<dd>
<input type="checkbox" checked name="course"> HTML <br>
<input type="checkbox" name="course"> JavaScript <br>
</dd>
</dl>
<button class="me-4" type="submit"><span class="bi bi-person"></span> Register</button>
<button class="me-4" type="reset"><span class="bi bi-c-circle"></span>Cancel</button>
</form>
</body>
</html>

5. Buttons

.btn
.btn-{contextual}
.btn-outline-{contextual}
.btn-sm
.btn-lg
.btn-group
.btn-group-vertical
.btn-toolbar
.btn-link
.btn-close

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
</head>
<body class="container-fluid">
<h2>Navigation</h2>
<nav class="btn-toolbar bg-danger justify-content-between">
<div class="btn-group">
<button class="btn btn-danger">Shopper.</button>
</div>
<div class="btn-group">
<button class="btn btn-danger">Home</button>
<button class="btn btn-danger">Pages</button>
<button class="btn btn-danger">Shop</button>
<button class="btn btn-danger">Blog</button>
</div>
<div class="btn-group">
<button class="btn btn-danger"><span class="bi bi-person-fill"></span></button>
<button class="btn btn-danger"><span class="bi bi-heart"></span></button>
<button class="btn btn-danger"><span class="bi bi-bell"></span></button>
</div>
</nav>
<h2>Buttons</h2>
<dl>
<dt>Button Base Class</dt>
<dd><button class="btn">Submit</button></dd>
<dt>Contextual</dt>
<dd>
<button class="btn btn-primary">Insert</button>
<button class="btn btn-warning">Update</button>
<button class="btn btn-danger">Delete</button>
</dd>
<dt>Outline Contextual</dt>
<dd>
<button class="btn btn-outline-primary">Insert</button>
<button class="btn btn-outline-warning btn-sm">Update</button>
<button class="btn btn-outline-danger btn-lg">Delete</button>
</dd>
<dt>Button Group</dt>
<dd class="btn-group-vertical">
<button class="btn btn-danger"><span class="bi bi-facebook"></span></button>
<button class="btn btn-danger"><span class="bi bi-twitter"></span></button>
<button class="btn btn-danger"><span class="bi bi-instagram"></span></button>
</dd>
<dt>Special Button</dt>
<dd>
<button class="btn btn-link">Signout</button>
<button class="btn-close"></button>
</dd>
</dl>
</body>
</html>

Bootstrap Form , Input Group and CSS Validations

Sudhakar Sharma

Jul 1, 2023

6. Form Classes
.form-control text,number,password, url, date, email, textarea
.form-range range
.form-check-input radio, checkbox
.form-label label
.form-check-label label for radio and checkbox
.form-select select element
.form-control-color color
.form-control-file file
.form-switch switch style for checkbox and radio [defined for container]
(It is for container that contains radio and checkbox)
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 700px;
}
</style>
</head>
<body class="container-fluid">
<form class="border border-2 border-primary p-3 rounded w-25">
<h4>Register Product</h4>
<div class="mb-3">
<label class="form-label">Product Name</label>
<div>
<input type="text" class="form-control">
</div>
</div>
<div class="mb-3">
<label class="form-label">Price</label>
<div>
<input type="number" class="form-control">
</div>
</div>
<div class="mb-3">
<label class="form-label">Shipped To</label>
<div>
<select class="form-select">
<option>Choose City</option>
<option>Delhi</option>
<option>Hyd</option>
</select>
</div>
</div>
<div class="mb-3">
<label class="form-label">Rating</label>
<div>
<input class="form-range" type="range" min="1" max="5" value="1">
</div>
</div>
<div class="mb-3">
<label class="form-label">Stock</label>
<div class="form-switch">
<input type="checkbox" class="form-check-input"> <label class="form-check-
label">Available</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">Select Color</label>
<div>
<input type="color" class="form-control-color">
</div>
</div>
<div class="mb-3">
<button class="btn btn-primary w-100">Register</button>
</div>
</form>
</body>
</html>

6. Input Group

.input-group
.input-group-lg
.input-group-text

Syntax:
<div class="input-group">
<span class="input-group-text"> Text </span>
<input type="text" class="form-control">
<span class="input-group-text"> Text </span>
</div>

Ex:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Group</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body class="container-fluid">
<h3>Amazon Search Bar</h3>
<div class="w-50">
<div class="input-group">
<select class="input-group-text">
<option>All</option>
<option>Mobiles</option>
</select>
<input class="form-control" type="text" placeholder="Search [Link]">
<button class="btn btn-warning">
<span class="bi bi-search"></span>
</button>
</div>
</div>
<h3>Netflix Register</h3>
<div class="w-50 bg-dark p-4">
<div class="input-group input-group-lg">
<input type="email" class="form-control" placeholder="Your email address">
<button class="ms-2 btn btn-danger">
Get Started <span class="bi bi-chevron-right"></span>
</button>
</div>
</div>
<h3>Verify Password</h3>
<div class="w-50">
<div class="input-group">
<span class="bi bi-key-fill input-group-text"></span>
<input type="password" class="form-control">
<span class="bi bi-check-circle input-group-text"></span>
</div>
</div>
<h3>Verify User</h3>
<div class="w-50">
<div class="input-group">
<span class="bi bi-person-fill input-group-text"></span>
<input type="text" class="form-control">
<span class="bi bi-check-circle input-group-text"></span>
</div>
</div>
</body>
</html>

7. Text and Background colors

.text-{contextual}
.bg-{contextual}

CSS Validation Classes for Form elements

:required It defines effects for element when required attribute is specified.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:required+span {
display: inline;
color:red;
}
input+span{
display: none;
}
</style>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text" required><span>*</span></dd>
<dt>Password</dt>
<dd><input type="password" ><span>*</span></dd>
<dt>Age</dt>
<dd><input type="number" required><span>*</span></dd>
</dl>
<button>Register</button>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:required+span {
display: block;
color:red;
}
input+span{
display: none;
}
</style>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text" ><span>Name Required</span></dd>
<dt>Password</dt>
<dd><input type="password" required ><span>Password Required</span></dd>
<dt>Age</dt>
<dd><input type="number"><span>Age Required</span></dd>
</dl>
<button>Register</button>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:required+span {
display: block;
color:red;
}
input:required {
border:1px solid red;
}
input+span{
display: none;
}
</style>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text" required ><span>Name Required</span></dd>
<dt>Password</dt>
<dd><input type="password" required ><span>Password Required</span></dd>
<dt>Age</dt>
<dd><input type="number"><span>Age Required</span></dd>
</dl>
<button>Register</button>
</body>
</html>

:in-range sets effects when value in within specified range.

:out-of-range sets effects when value is out of range.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:required+span {
display: block;
color:red;
}
input:required {
border:1px solid red;
}
input+span{
display: none;
}
#Age:in-range+span {
display: none;
}
#Age:out-of-range+span {
display: block;
color:red;
}
</style>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text" required ><span>Name Required</span></dd>
<dt>Password</dt>
<dd><input type="password" required ><span>Password Required</span></dd>
<dt>Age</dt>
<dd><input type="number" id="Age" min="15" max="30"><span>Age 15 to 30
only</span></dd>
</dl>
<button>Register</button>
</body>
</html>

:valid It defines effects if all validations are passed.

:invalid It defines effects if any validation fails.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

#Age:in-range+span {
display: none;
}
#Age:out-of-range+span {
display: block;
color:red;
}
#Password:invalid+span {
display: block;
color:red;
}
#Password:valid+span {
display: none;
}
#UserName:valid+span{
display: none;
}
#UserName:invalid+span{
display: block;
color:red;
}
</style>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text" id="UserName" required><span>User Name Required</span></dd>
<dt>Password</dt>
<dd><input type="password" id="Password" pattern="[A-Z]{4,10}"><span>Password 4 to 10
Uppercase only</span></dd>
<dt>Age</dt>
<dd><input type="number" id="Age" min="15" max="30"><span>Age 15 to 30
only</span></dd>
</dl>
<button>Register</button>
</body>
</html>

Multimedia and Styles

Sudhakar Sharma
•

Jul 3, 2023

FAQ: How to configure a form field, which is not displayed in page but can submit a value?
Ans : By using <input type="hidden">

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h3>Edit User Details</h3>
<dl>
<dt><input type="hidden" name="UserId" value="john_nit"></dt>
<dt>User Name</dt>
<dd><input type="text" value="John" name="UserName"></dd>
<dt>Age</dt>
<dd><input type="number" value="22" name="Age"></dd>
</dl>
<button>Save</button>
</form>
</body>
</html>

Multimedia
- It refers to audio, video and animations.
- HTML provides few multi-media elements like
<marquee>
<audio>
<video>
<embed>

Marquee
- It is used to display scrolling and sliding content in page.

Syntax:
<marquee>
... your content .....
</marquee>

Attributes:
1. scrollamount : It controls the marquee scrolling speed from 1 to 100.
<marquee scrollamount="20"> your content </marquee>

2. direction : It controls the scrolling direction: left, right, up, down.

<marquee direction="right" scrollamount="20">

3. behavior : It changes the behavior of marquee from direction to alternate.

4. width & height : It defines width and height for marquee content.

<marquee width="400" height="100">

5. loop : It defines the number of times to display after page load.

6. bgcolor : It sets background color for marquee area.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<marquee scrollamount="20" loop="3">
Season End Sale <img src="images/[Link]" width="50" height="50"> 70% off on select products
</marquee>
<marquee direction="up" width="100" height="400" bgcolor="yellow">
<div>
<img src="images/[Link]" width="100" height="100">
</div>
<div>
<img src="images/[Link]" width="100" height="100">
</div>
<div>
<img src="images/[Link]" width="100" height="100">
</div>
<div>
<img src="images/[Link]" width="100" height="100">
</div>
</marquee>
</body>
</html>

video & audio

- HTML 5 introduced the new elements to embed audio and video content into page.
- The video types supported for internet are
.mp4
.avi
.mov
.mkv
.ogg etc..

Syntax:
<video src="path" controls poster="[Link]"> </video>
[width , height]
<embed src="path"> HTML 4 version

- The audio types supported for internet are

.mp3
.midi
.wav etc..

Syntax:
<audio src="path" controls poster="[Link]"> </audio>

Ex:
<body>
<h2>Class Video</h2>
<video src="videos/[Link]" poster="images/[Link]" controls width="300"
height="300"></video>
</body>

Styles

- Styles are additional attributes defined for HTML elements to make them more interactive and
responsive.

- Styles are defined for HTML elements in 3 ways

1. Inline Styles
2. Embedded Styles
3. External Style Sheets

Inline Styles:
- The style attributes are defined with in the element start tag by using "style" attribute.
Syntax:
<h2 style="color:red; background-color:yellow; border:1px solid black">

- It is faster in rendering output.

- Inline styles are not re-usable.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color:red; background-color: yellow; text-align: center;">HTML</h1>
<h1>JavaScript</h1>
<h1>Bootstrap</h1>
</body>
</html>

Embedded Styles:

- The styles are defined in a <style> container.

- These styles are reusable.
- They are slow in rendering.

Syntax:
<head>
<style>
... your attributes...
</style>
</head>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background-color: yellow;
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>HTML</h1>
<h1>JavaScript</h1>
<h1>Bootstrap</h1>
</body>
</html>

Embedded and External Files

Sudhakar Sharma

Jul 4, 2023

1. Inline Styles
2. Embedded

FAQ's:
1. Where to embed the styles, in <head> or <body> section?
A. You can embed styles in both head and body.

2. What is difference between styles in head and styles in body?

A. Styles in head are intended to load into browser memory and then loaded into page
when ever requested.
Styles in body are intended to load directly at the time of loading page.

3. What is the MIME type of style container?

[Multipurpose Internet Mail Extentions]
A. "text/css"

Syntax:
<style type="text/css">

</style>

4. What is the media type for styles?

A. It is used to control your styles for various devices, which include
a) screen
b) print
c) speech
d) all

Syntax:
<style type="text/css" media="print | screen | speech | all">

</style>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css" media="screen">
.ticket {
border:1px solid red;
box-shadow: 2px 2px 2px yellow;
padding: 20px;
background-color: lightcyan;
}
.ticket h2 {
text-align: center;
font-size: 30px;
font-family: Arial;
color:blue;

}
dl {
display: grid;
grid-template-columns: 6fr 6fr;
}
dt,dd {
background-color: darkcyan;
color:white;
padding: 4px;
margin-bottom: 10px;
}
.offer {
position: absolute;
top: 50px;
right: 50px;
background-color: red;
color:white;
width: 100px;
padding: 20px;
border-radius: 20px;
}
</style>
<style type="text/css" media="print">
.ticket {
background-color: none;
border:none;
box-shadow: none;
}
dl {
display: grid;
grid-template-columns: 12fr;
}
dt, dd {
background-color: black;
color:white;
margin-bottom: 10px;
}
.offer, marquee {
display: none;
}
</style>
</head>
<body>
<div class="offer">Offer 70% Off</div>
<div class="ticket">
<h2>Ticket</h2>
<dl>
<dt>Departure Time</dt>
<dd>07:30 PM</dd>
<dt>Boarding Point</dt>
<dd>Hyd Airport</dd>
</dl>
<marquee bgcolor="yellow">Please carry a soft copy of your ticket</marquee>
</div>
</body>
</html>

Note: Issue with embedded technique is, the styles are not accessible to other pages.
You can reuse only within the page not accross pages.

3. Styles from External Style Sheet

- You can define style a separate style sheet that have the extention ".css"
- So that you can access styles from various pages.
- It uses Cascading technique, which is often known as "Cascading Style Sheet"
- Using external style sheet will increase the number of requests for page, hence it increases the
page load time.

Ex:
- Create a new folder "src\styles"
- Add a new file
"[Link]"

.ticket {
border:1px solid red;
box-shadow: 2px 2px 2px yellow;
padding: 20px;
background-color: lightcyan;
}
.ticket h2 {
text-align: center;
font-size: 30px;
font-family: Arial;
color:blue;

- Link the stylesheet to HTML page

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../src/styles/[Link]">
</head>
<body>
<div class="offer">Offer 70% Off</div>
<div class="ticket">
<h2>Ticket</h2>
<dl>
<dt>Departure Time</dt>
<dd>07:30 PM</dd>
<dt>Boarding Point</dt>
<dd>Hyd Airport</dd>
</dl>
<marquee bgcolor="yellow">Please carry a soft copy of your ticket</marquee>
</div>
</body>
</html>

FAQ's:
1. How to link a stylesheet to page?
A. By using <link> element

<link rel="stylesheet" href="../src/styles/[Link]">

2. Where to link the stylesheet in head or body ?

A. You can link in both locations.

3. What is Minification?
A. It is a programming technique used by developers to compress the CSS code
and reduce the file size.
You can minify the code using various minification tools:

[Link]

Ex:
1. Open any minification tool online
[Link]

2. Paste your actual css code and click Minify

3. Copy the minified code

4. Goto your project "src/styles" folder

5. Add a new file "[Link]"

6. Paste the minified code and link the minified file to page.

<link rel="stylesheet" href="../src/styles/[Link]">

Note: Always use uncompressed or unminified file for "Development" and

minified code for "Production".

4. Can we edit the minified file directly?

A. Yes. But not recommended
5. What is CDN?
A. Content Delivery Network
The styles are kept is a remote location and they are accessed directly without
download.

CSS Rules and Selectors

Sudhakar Sharma

Jul 5, 2023

Various Integration Techniques

- Inline
- Embedded
- External File
What is Minification?
What is CDN?

Rules
1. If styles are defined to any element by using all 3 techniques, then which set of styles are applied?
A.
- If same attributes are defined then it will apply according to priority
1st Inline
2nd Embedded
3rd External File
- If different attributes are defined then all will apply.

2. If styles are defined to any element using multiple style containers in head and body then which
set of styles are applied?
A.
-If same attributes are defined then the latest will apply.
- If different attributes are defined then all will apply.

How styles are defined for HTML element? How a browser selects HTML element and applies the
styles?
A.
- If styles are written inline then they will apply only for current element.
- If styles are written embedded or in external file then the selectors will decide where to apply the
effects.

Syntax:
<style type="text/css">
selector
{
attribute : value;
attribute: value;
}
</style>

CSS Selectors
- A selector is responsible for identifying any element in page and apply the given set of styles.
- The selectors are classified into various groups

1. Primary Selectors
2. Rational Selectors
3. Dynamic Pseudo classes
4. Structural Pseudo classes
5. Element State Pseudo classes
6. Element Validation State Pseudo classes
7. Universal Selector
8. Root Selector
9. Language Selector
10. Behavioural Selectors

Primary Selectors
1. Type Selector
2. ID Selector
3. Class Selector

Type Selector:
- It refers any HTML element by its "node" name.
<div> Element [Token]
div Node
- It will apply styles for every occurance in page.
- You can't ignore for any specific occurance in page.

Syntax:
h1 { img { td {

} } }

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../src/styles/[Link]">
<style>
h1
{
color:red;
background-color:yellow;
text-align:center;
}
</style>
</head>
<body>
<h1>Web Technologies</h1>
<h1>HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
</body>
</html>

ID Selector:
- You can define styles using an ID reference.
- ID reference is configured using "#someId"

Syntax:
#id_ref
{

- You can apply effects to any specific element by accessing "id" reference.

Syntax:
<div id="id_ref"> </div>

- Every element in HTML can use the reference of only one ID.
- You can't apply styles form multiple ID references.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text-style
{
text-align: center;
color:red;
}
#border-style
{
border:2px double red;
padding: 5px;
}
#back-style
{
background-color: yellow;
}
</style>
</head>
<body>
<h1 id="text-style">Web Technologies</h1>
<h1 id="border-style">HTML</h1>
<h1 id="back-style">CSS</h1>
<p>It defines styles for HTML.</p>
<h1>JavaScript</h1>
</body>
</html>

Class Selector:
- A class selector is configure using ".className".
- It is accessed by using the attribute "class".

Syntax:
.className
{
}

<div class="className"> </div>

- Every element can implement multiple classes.

- All classes are separated with blank space.

<div class="class1 class2 class3...">

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text-style
{
text-align: center;
color:red;
}
.border-style
{
border:2px double red;
padding: 5px;
}
.back-style
{
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="text-style back-style border-style">Web Technologies</h1>
<h1 class="border-style text-style">HTML</h1>
<h1>CSS</h1>
<p>It defines styles for HTML.</p>
<h1>JavaScript</h1>
</body>
</html>

Rules

1. If any element is defined with type, id and class then which set will apply?
A.
- If different attributes are defined then all will apply.
- If same attribute is defined then the priority is used,
1st Id selector
2nd Class selector
3rd Type selector

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color:red;
border:3px double red;
}
#heading {
color:green;
}
.head-style {
color:blue;
background-color: yellow;
text-align: center;
}
</style>
</head>
<body>
<h1 class="head-style" id="heading" >Styles in HTML</h1>
</body>
</html>

2. You can group the selectors to apply effects for multiple elements. A group of selectors is defined
by separating them with ", "

Syntax:
h1, p {
font-family:"Arial";
}

h1, #para2 {

#para2, .p1 {

h1, h4, #para2, #para4, .p4 {

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1, #css, .html{
font-family: Arial;
}
</style>
</head>
<body>
<h1>Styles in HTML</h1>
<h2>Container Styles</h2>
<p id="css">CSS selectors for version 3.</p>
<p class="html">HTML version 5.</p>
</body>
</html>
Dynamic Pseudo Classes
- Dynamic allows to change the appearence of element according state and situation.
- Pseudo is a false appearence defined for element, It is a false representation for element.
- In computer programming class is a template.
- A template comprises of pre-defined data and logic, which you can implement and customize
according to requirement.

CSS Selectors Continued

Sudhakar Sharma

Jul 6, 2023

CSS Selectors
1. Primary Selectors
Type
Id
Class
2. Dynamic Pseudo Classes

:hover It defines actions on mouse over.

:active It defines actions on mouse down.
:link It defines actions for hyperlink.
:visited It defines effects for hyperlink if visited.
:target It defines effects for container or element when it is target of any
hyperlink.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 100px;
height: 100px;
transition: 5s;
}
img:active {
width: 200px;
height: 200px;
transition: 2s;
}
a:link {
text-decoration: none;
}
a:visited {
color:green;
}
a:hover {
text-decoration: underline;
}
</style>

</head>
<body>
<img src="../public/images/[Link]">
<p>
<a href="../public/[Link]">Amazon</a>
</p>
</body>
</html>

3. Element State Pseudo Classes

:read-only
:disabled
:checked
:focus
:blur [not available for all versions]

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#UserName:read-only {
cursor: not-allowed;
}
button:disabled {
border:goldenrod;
background-color: gold;
}
</style>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text" id="UserName" value="John" readonly></dd>
</dl>
<button disabled>Submit</button>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#Terms+span {
color:red;
}
#Terms:checked+span {
color:green;
}
#Terms~button {
display: none;
}
#Terms:checked~button {
display: block;
}
#UserName+div {
display: none;
}
#UserName:focus+div {
display: block;
color:red;
}
</style>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text" pattern="[A-Z]{4,10}" id="UserName"><div>Name in Block
Letters</div></dd>
<dt>Terms of Service</dt>
<dd>
<textarea rows="4" cols="40" disabled>License Aggrement</textarea>
</dd>
<dd>
<input type="checkbox" id="Terms"> <span>I Agree</span>
<br><br>
<button>Submit</button>
</dd>
</dl>
</body>
</html>

4. Element Validation State Pseudo Classes

:required
:in-range
:out-of-range
:invalid
:valid

5. Rational Selectors

Child Selector parent child { } It set effects for all child elements
Direct Child Selector parent > child { } It sets only for direct child elements.
General Siblings A_Selector~B_Selector It sets effects for all elements after the
specified.

Adjacent Siblings A+B It sets only for adjacent element.

Note: + First occurance after the current.

~ All occurances after the current

Ex-1:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container > p {
color:red;
}
</style>
</head>
<body>
<div class="container">
<p>Para-1</p>
<p>Para-2</p>
<div><p>Para-3</p></div>
<p>Para-4</p>
</div>
<p>Para-5</p>
</body>
</html>

Ex:
<style>
h2~p {
color:red;
}
</style>
<body>
<h2>heading</h2>
<p> Para-1 </p>
<p> Para-2 </p>
</body>

6. Attribute Selectors

element [ attribute = value ] { } It sets effects for all elements that match
the attribute value.

element [attribute] It sets effects for all elements that have

given attribute.

element[attribute=value] Equal, It refers to exact match.

element[attribute^=value] Starts with
element[attribute$=value] Ends with
element[attribute|=value] Starts with or Starts and separated with "-"
element[attribute~=value] Starts, ends or any position individual.
[separated with space]

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type="button"] {
background-color: yellow;
}
</style>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text"></dd>
<dt>Mobile</dt>
<dd><input type="text"></dd>
</dl>
<input type="button" value="Submit">
<input type="button" value="Cancel">
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p[id]{
color:red;
}
</style>
</head>
<body>
<p>Para-1</p>
<p id="p2">Para-2</p>
<p>Para-3</p>
<p id="p4">Para-4</p>
</body>
</html>

EX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p[class~="Effect"] {
color:red;
}
</style>
</head>
<body>
<p class="Effect">Para-1</p>
<p class="ParaEffect">Para-2</p>
<p class="EffectPara">Para-3</p>
<p class="TextEffectPara">Para-4</p>
<p class="Effect-Para">Para-5</p>
<p class="Para-Effect">Para-6</p>
<p class="Effect Para">Para-7</p>
<p class="Para Effect">Para-8</p>
<p class="Text Effect Para">Para-9</p>
</body>
</html>

7. Structural Pesudo classes

:first-child : First Child Element

:last-child : Last Child Element
:nth-child() : Specific Child Element: Number, Even, Odd
.nth-of-type() : Form top every nth occurance
.nth-last-of-type() : From bottom event nth occurance

Syntax:
li : nth-child(4) {

li : nth-child(even) { => even occurance [you can also use odd]

li: nth-of-type(3n) { => every 3rd occurance starting with 3

li:nth-of-type(3n+1) { => every 3rd starting with 1

}

li:nth-last-of-type(3n+1) { => every 3rd starting from bottom 1

8. Behavioural Selectors & Occurance Selectors

::first-letter
::first-line
::selection
::before
::after
::placeholder

: Inheritance
: contract [interface]

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::first-letter {
font-size: 30px;
float: left;
}
p::first-line {
color:blue;
}
p::selection {
background-color: yellow;
}
</style>
</head>
<body>
<p>We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::first-letter {
font-size: 30px;
float: left;
}
p::first-line {
color:blue;
}
p::selection {
background-color: yellow;
}
input::placeholder {
color:green;
}
</style>
</head>
<body>
<input type="text" placeholder="Name min 4 chars">
<p>We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
display: flex;
}
li::after {
content: " / ";
}
li:last-child::after {
content: "";
}
li:last-child {
color:gray;
}

</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Electronics</li>
<li>Mobiles</li>
<li>Realme</li>
<li>C16</li>
</ul>
</body>
</html>

CSS Rules, Inheritance, Colors, Units

Sudhakar Sharma

Jul 7, 2023

9. Universal Selector
- It selects all elements in page.

*{
font-family:Arial;
}

10. Root Selector

- It selects the highest hierarchy of parent in page.
- It refers to "<html>"

:root {
font-family:Arial;
}

11. Language Selector

- It defines effects based on the "lang" attribute.

:lang(en) {

EX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:lang(en-us){
color:red;
}

</style>
</head>
<body>
<div lang="en-us">
<p>Hello ! World</p>
</div>
<div lang="en-fr">
<p>Bonjour! Monde</p>
</div>
<div lang="en-ger">
<p>Hallo! Welt</p>
</div>
</body>
</html>

CSS Rules

- Priority between inline, embedded and external

- Priority between type, id and class.

CSS Inheritance

- Inheritance is the mechanism where the styles of parent are adapted by child elements.
- The default inheritance will not apply all parent features to its child.
- You can define inheritance manually by using 3 attribute values

a) inherit
b) initial
c) unset

- Inherit : It adapts the styles defined for parent.

- Initial : It sets initial styles that are configured for element before implementing its
parent.
- unset : It removes any default style defined for element.

Syntax:
h2{
font-weight:unset;
}

h2 {
all:unset;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border:3px dashed red;
font-family: Arial;
color:red;
padding: 20px;
}
h2{
border:inherit;
padding: inherit;
color:initial;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome to CSS</h2>
</div>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border:3px dashed red;
font-family: Arial;
color:red;
padding: 20px;
}
h2{
all:inherit;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome to CSS</h2>
</div>
</body>
</html>
CSS Colors
1. Color Name
2. Color Shade Name
3. Hexa Decimal
4. rgb()
5. rgba()
6. hsl()
7. hsla()
8. Gradient
a) linear-gradient
b) radial-gradient

Color Name:

h2 {
color:red;
}

Color Shade Name:

h2 {
color:lightyellow;
}

Hexa Decimal:

#RGB or #RRGGBB
R, G, B = 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

h2 {
color:#f00;
}

h2 {
color:#ff0000
}

RGB Method:
- rgb() is a set of 3 colors which range value from 0 to 255.

rgb(redValue, greenValue, blueValue);

rgb(0,255,0);

- rgba() is a set of 3 colors with alpha channel set to 0 to 1.

rgba(255,0,0,0.5);
HSL Method:
- It configures "hue, saturation and lighting".
- Hue is an angle for colors from 0 to 360 deg.
- Saturation is "gray" percentage in color. [0 to 100%]
- Lighting is brightness from 0 to 100%

hsl(hue, sat, light)

hue => 0 to 120 => Red, 120 to 240 => Green, 240 to 360 => Blue
sat => 0 % to 100%
light => 0% to 100%

hsl(150deg, 50%, 60%);

hsla(hue, sat, light, alpha);

hsla(150deg, 50%, 60%, 0.6);

Gradient Colors
- You can set gradient color only by using "background-image" attribute.
- CSS supports
a) linear-gradient [to various directions]
b) radial-gradient [to center]

Syntax:
{
background-image:linear-gradient(direction, color1, color2,...);
}

Ex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image: linear-gradient(to top right,red 50%, yellow, green);
height: 400px;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome to CSS</h2>
</div>
</body>
</html>

Ex:
<style>
body{
background-image: radial-gradient(red 10%, yellow, green);
height: 400px;
}
</style>

CSS Units

- Units are defined for configuring dimensions.

- CSS units are categorized into 2 types
1. Absolute Units
2. Relative Units

Absolute Units:
- They are individual with specified dimension, which is not effected by its parent.
- They have fixed size.

cm
mm
Q
in
pc
pt
px

Relative Units:
- They are configured based on the parent element.
- They change according to parent, they don't have fixed size.
- CSS relative units

em element size
rem root element size
% fluid - responsive [parent]

Syntax:
parent {
font-size: 20px;
}
child {
font-size: 0.5em;
}
child {
font-size: 0.5rem;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
font-size: 30px;
}
p{
font-size: 1.5rem;
}
</style>
</head>
<body>
Web Techologies
<div class="container">
Styles in HTML
<p>Welcome to styling pages.</p>
</div>
</body>
</html>

Summary
1. Integrating Styles into Page
2. CSS Selectors
3. CSS Rules
4. CSS Inheritance
5. CSS Colors
6. CSS Units

CSS Box Model

1. Margin
2. Padding
3. Border
4. Border Radius
5. Width
6. Height

CSS Box Model and Positions

Sudhakar Sharma
•

Jul 8, 2023

CSS Box Model

1. Margins

margin : It sets margin all directions. [short hand]

syntax:
margin: top right bottom left;
margin: 10px 0px 10px 0px; [top & bottom]

margin-left
margin-right
margin-top
margin-bottom

2. Padding

padding : It sets padding all directions.

padding-left
padding-right
padding-top
padding-bottom

Syntax:
padding:20px 0px 20px 0px;

3. Border

border : It is short hand for all values.

Syntax:
border: width style color;
border: 3px solid red;

border-width : It sets only size

border-style : It sets style : solid, double, dotted, dashed, groove..
border-color : It sets color

border-left : It is short hand for left border

border-left-width
border-left-style
border-left-color

..similar for all directions... [left, right, top, bottom]

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
padding: 20px;
border-left: 3px solid red;
border-top: 3px solid red;
border-right: 3px double blue;
border-bottom: 3px double blue;
}
</style>
</head>
<body>

<div class="container">
Styles in HTML
<p>Welcome to styling pages.</p>
</div>
</body>
</html>

border-image : It sets image as border.

Syntax:
{
border: 10px solid transparent;
border-image: url("path") style offset;
}
style => space, stretch
offset => 0 to 100

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
padding: 20px;
border: 10px solid transparent;
border-image: url("../public/images/[Link]") stretch 80;
}
</style>
</head>
<body>

<div class="container">
Styles in HTML
<p>Welcome to styling pages.</p>
</div>
</body>
</html>

4. Border Radius

border-radius : It is short hand for all directions

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
border-top-left-radius: 150px;
border-bottom-right-radius: 150px;
}
</style>
</head>
<body>
<img src="../public/images/[Link]" width="300" height="400">
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
display: flex;
list-style: none;
}
li {
background-color: black;
color:white;
font-family: Arial;
padding: 5px;
margin-right: 100px;
border-radius: 100px;
width:30px;
height: 30px;
font-size: 25px;
text-align: center;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<ul>
<li><span class="bi bi-cart4"></span></li>
<li><span class="bi bi-credit-card"></span></li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>

5. width & height

CSS Positions
1. Static
2. Absolute
3. Fixed
4. Relative
5. Sticky

Static:
- It keeps the element according to normal flow of document.
- You can't move the element by using left, top, right or bottom attributes.
- It have fixed location.
- It is the default position for element.

Absolute:
- It removes element from normal flow of document.
- You can move the element using left, right, top and bottom attributes.
- The element is fixed to the content in page not to browser.
- It moves along with content.

Fixed:
- It removes element from normal flow.
- You can move element using left, top, right, bottom
- It is attached to browser not to page.
- It will not move along with content.
- It is fixed in position.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.offer {
border:1px solid black;
background-color: yellow;
color:red;
width: 100px;
position: fixed;
top: 120px;
right: 20px;
}
.container {
border:2px solid black;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<div class="container">
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.

<div class="offer">Offer 50%</div>

</div>
</body>
</html>

Sticky
- It keeps element according to normal flow.
- It locks scrolling and fixed to browser after reaching specific position top, left, right or bottom.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.offer {
border:1px solid black;
background-color: yellow;
color:red;
width: 100px;
position: fixed;
top: 120px;
right: 20px;
}
.container {
border:2px solid black;
}
h1 {
position: sticky;
top: 0px;
}
.nav-container {
display: flex;
justify-content: space-around;
}
nav {
background-color: rgba(0,0,0,0.5);
color:white;
padding: 10px;
position: sticky;
top: 0px;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<div class="container">
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
<nav>
Quick Booking
<div class="nav-container">
<div>
<select>
<option>Select Movie</option>
</select>
</div>
<div>
<select>
<option>Select Cinema</option>
</select>
</div>
<div>
<select>
<option>Select Date</option>
</select>
</div>
<div>
<select>
<option>Select Time</option>
</select>
</div>
<div>
<select>
<option>Select Seats</option>
</select>
</div>
<div>
<button>Book</button>
</div>
</div>
</nav>
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.
We understand that you may have questions about the Microsoft Services Agreement. We have
an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.

<div class="offer">Offer 50%</div>

</div>
</body>
</html>

Relative:
- It is the position defined for parent element to keep the child elements with in the context of
parent.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#count {
position: absolute;
top:-10px;
right: -10px;
}
button {
position: relative;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
</head>
<body class="container-fluid">
<h3>Shopping</h3>
<button class="btn btn-primary">
<span class="bi bi-cart4"></span> Your Cart
<span id="count" class="badge bg-danger rounded-circle">4</span>
</button>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fashion {
width: 300px;
height: 400px;
background-image: url("../public/images/[Link]");
background-size: cover;
position: relative;
}
.save {
background-color: red;
color:white;
width: 70px;
height: 70px;
border-radius: 100px;
text-align: center;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 10px;
right: 10px;
}

</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
</head>
<body class="container-fluid mt-3">
<div class="fashion">
<div class="save">
<div><font size="3">Save</font></div>
<div>30%</div>
</div>
</div>
</body>
</html>

CSS Z Index and Display

Sudhakar Sharma

Jul 10, 2023

CSS Positions
- Static
- Absolute
- Fixed
- Sticky
- Relative

CSS Z-Index
- It is used to place element
a) front
b) forward
c) back
d) backward
- If elements are overlapping then you can change the placement order by using
"z-index".
- It is a number starts with 0 = back

Syntax:
div {
z-index: 0;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z-Index</title>
<style>
div {
width: 300px;
height: 200px;
border:2px solid black;
position: absolute;
}
.card-red {
background-color: red;
margin-left: 20px;
margin-top: 20px;
z-index: 2;
}
.card-blue {
background-color: blue;
margin-left: 40px;
margin-top: 40px;
z-index: 1;
}
.card-yellow {
background-color: yellow;
margin-left: -60px;
margin-top: 60px;
z-index: 0;
}
</style>
</head>
<body>
<div class="card-red">

</div>
<div class="card-blue">

</div>
<div class="card-yellow">

</div>
</body>
</html>

CSS Display
1. none
2. block
3. inline
4. inline-block
5. flex
6. grid

display:none
- It is used to hide element on page.
- It removes the allocated space for element in page.

FAQ: What is difference between "display:none & visibility:hidden" ?

Ans: display:none will hide element and removes the space allocated for element on
page.

visitibilty:hidden will hide element but keeps the space allocated for element on
page.

Syntax:
h1 {
visibility:hidden;
}
h1 {
display:none;
}

display:inline
- It is used to keep elements side by side.
- It is defined for element directly.
FAQ: What is difference between inline and flex?
Ans: Inline is defined for element individually.
flex is defined for container that contains elements.

Syntax:
ul {
display: inline; => invalid
}

li {
display: inline; => valid
}

Inline-Block
- Inline content can't change their width and height.
- <span> is default inline and you can't control its width and height.
- To change the width and height of inline content, you can set "inline-block".

Syntax:
nav span {
width:100px; => width & height are not applied
height:20px;
border:1px solid black;
}

nav span {
width:100px; => It can set width and height
height:20px;
border:1px solid black;
display:inine-block;
}

Display Block
- It can arrange inline elements into columns.

Syntax:
nav span {
display:block;
width:100px;
height:30px;
border:1px solid black;
}

Display Grid
- It is used for creating responsive layout.
- It allows to change the position of content dynamically with media queries.
- Display Grid styles provides various attributes

grid-template-columns
grid-row
grid-column
grid-gap

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout</title>
<style>
header, nav, main, aside, footer {
border:1px solid black;
margin: 5px;
padding: 10px;
}
@media screen and (orientation:landscape){
body {
display: grid;
grid-template-columns: 2fr 8fr 2fr;
}
header {
grid-row: 1;
grid-column: 1/4;
}
nav {
grid-row: 2;
grid-column: 1;
}
main {
grid-row: 2;
grid-column: 2;
height: 400px;
background-image: url("../public/images/[Link]");
background-size: cover;
}
aside {
grid-row: 2;
grid-column: 3;
}
footer {
grid-row: 3;
grid-column: 1/4;
}
}
@media screen and (orientation:portrait) {
body{
display: grid;
grid-template-columns: 12fr;
}
header {
grid-row: 1;
position: relative;
}
nav {
grid-row: 1;
width: 50px;
position: absolute;
right: 10px;
background-color: black;
color:White;
}
main {
grid-row: 3;
height: 400px;
background-image: url("../public/images/[Link]");
background-size: cover;
}
aside {
grid-row: 4;
display: none;
}
footer {
grid-row: 5;
}
}
</style>
</head>
<body>
<header>
Header
</header>
<nav>
Nav
</nav>
<main>
Main
</main>
<aside>
Aside
</aside>
<footer>
Footer
</footer>
</body>
</html>

CSS Display Grid and Flex

Sudhakar Sharma

Jul 11, 2023

Display Grid

grid-template-columns : It defines the number of columns to display.

Units are defined in "fr" to make responsive.
[fr is fraction range from 1 to 12]

grid-gap : Sets gap between columns by specified pixels

grid-row : It defines the row number for content in grid.

grid-column : It defines the column number for content.

Syntax:
body {
display : grid;
grid-template-columns: 6fr 6fr;
grid-gap: 20px;
}

header{
grid-row : 1; It starts and ends at 1.
}
header {
grid-column: 1; It starts and ends at 1.
}
header {
grid-column: 1/4; It starts at 1 and ends at 3.
}

FAQ: What is difference between "display:grid" and "columns" in CSS?

Ans: "grid" will add disconnected columns, the content of one column will not span to
the next column.

"columns" will add connected columns, the content of one column will span to
next.

Columns

columns : It defines the number of columns to add.

column-gap : It sets space between columns.
column-width : It sets size for column.
column-rule : It sets line between columns.
column-span : It merges all columns into one.

Syntax:
body {
columns : 5;
column-gap: 20px;
column-rule: 2px dotted black;
}
.container {
column-span: all;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News</title>
<style>
header {
font-size: 40px;
background-color: black;
color:white;
font-weight: bold;
text-align: center;
padding: 5px;
}
section {
columns:5;
column-gap: 20px;
column-rule: 2px dotted black;
margin-top: 20px;
text-align: justify;
}
.banner {
column-span: all;
}
</style>
</head>
<body>
<header>
THE HINDU
</header>
<section>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<div class="banner">
<img src="../public/images/[Link]" width="100%">
</div>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>

</section>
</body>
</html>
Display Flex
- It is used for container that contains elements to display in page.
- It can set orientation for content in container, which includes
flex-row
flex-row-reverse
flex-column
flex-column-reverse
- It can control the wrapping
flex-wrap
flex-norwap
- It can control the space between elements
justify-space-between
justify-space-evenly
justify-space-around
justify-flex-start
justify-flex-end
center

Syntax:
.container {
display:flex;
flex-direction: row | row-reverse ...;
flex-wrap: nowrap | wrap;
justify-content: space-between, ...;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex</title>
<style>
nav div {
width: 100px;
height: 30px;
border:2px solid black;
margin: 5px;
text-align: center;
background-color: yellow;
}
@media screen and (orientation:landscape) {
nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
border:2px solid black;
padding: 10px;
}
}
@media screen and (orientation:portrait) {
nav {
display: flex;
flex-direction: column;
justify-content: space-between;
border:2px solid black;
padding: 10px;
width: 100px;
height: 400px;
}
.nav-item {
display: none;
}
nav div {
border-radius: 30px;
width: 40px;
font-size: 30px;
padding: 5px;
}
nav div:hover .nav-item {
display: inline;
}
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<nav>
<div> <span class="bi bi-house"></span> <span class="nav-item">Home</span></div>
<div> <span class="bi bi-cart3"></span> <span class="nav-item">Shop</span></div>
<div> <span class="bi bi-bell"></span> <span class="nav-item">Contact</span> </div>
<div> <span class="bi bi-twitter"></span> <span class="nav-item">Blog</span></div>
</nav>
</body>
</html>

- Flex can control vertical alignment in flex-box by using

align-items-baseline
align-items-center
align-items-end

FAQ: How to keep any content exactly center screen?

Ans: By using following styles
display-flex
justify-content:center
align-items:center
height

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
img {
border-radius: 200px;
height: 300px;
width: 300px;
}
body {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
height: 600px;
}
</style>
</head>
<body>

<div>
<img src="../public/images/[Link]">
<p>Offer 50% OFF</p>
</div>

</body>
</html>

Ex: Shopper Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopper</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
header {
display: flex;
justify-content: space-between;
font-size: 20px;
font-family: Arial;
padding: 15px;
}
span{
margin-right: 20px;
}
.brand-name {
font-size: 30px;
font-weight: bold;
}
article {
background-color: black;
color:white;
font-size: 16px;
padding: 10px;
text-align: center;
margin-top: 10px;
font-family: Arial;
}
.bi-lightning-fill {
color:gold;
}
section{
margin-top: 5px;
margin-bottom: 50px;
}
footer {
background-color: black;
color:white;
font-size: 15px;
font-family: Arial;
padding: 10px;
display: grid;
grid-template-columns: 2.4fr 2.4fr 2.4fr 2.4fr 2.4fr;
}
.footer-brand-name {
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.title {
font-weight: bold;
margin-bottom: 20px;
}
.title~div {
margin-bottom: 15px;
}
main div {
opacity: 0.6;
}
main div:hover {
opacity: 1;
}
.women {
background-image: url("images/[Link]");
background-size: cover;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
font-size: 40px;
color:white;
}
.men {
background-image: url("images/[Link]");
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
font-size: 40px;
color:white;
background-size: cover;
}
.kids {
background-image: url("images/[Link]");
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
font-size: 40px;
color:white;
background-size: cover;
}
main {
display: grid;
grid-template-columns: 4fr 4fr 4fr;
grid-gap: 5px;
}
h1 {
text-shadow: 2px 2px 2px black;
}
button {
width: 200px;
height: 40px;
font-size: 20px;
}
</style>
</head>
<body>
<header>
<div>
<span class="brand-name">Shopper.</span>
</div>
<div>
<nav>
<span>Home</span>
<span>Catalog</span>
<span>Shop</span>
<span>Pages</span>
<span>Blog</span>
<span>Docs</span>
</nav>
</div>
<div>
<span class="bi bi-search"></span>
<span class="bi bi-person"></span>
<span class="bi bi-heart"></span>
<span class="bi bi-cart4"></span>
</div>
</header>
<article>
<span class="bi bi-lightning-fill"></span>HAPPY HOLIDAY DEALS ON EVERYTHING <span class="bi
bi-lightning-fill"></span>
</article>
<section>
<main>
<div class="women">
<div>
<h1>Women</h1>
<button>Shop Women <span class="bi bi-arrow-right"></span> </button>
</div>
</div>
<div class="men">
<div>
<h1>Men</h1>
<button>Shop Men <span class="bi bi-arrow-right"></span> </button>
</div>
</div>
<div class="kids">
<div>
<h1>Kids</h1>
<button>Shop Kids <span class="bi bi-arrow-right"></span> </button>
</div>
</div>
</main>
</section>
<footer>
<div>
<div class="footer-brand-name">
<span>Shopper.</span>
</div>
<div>
<span class="bi bi-facebook"></span>
<span class="bi bi-twitter"></span>
<span class="bi bi-instagram"></span>
<span class="bi bi-youtube"></span>
</div>
</div>
<div>
<div class="title">SUPPORT</div>
<div>Contact Us</div>
<div>FAQs</div>
<div>Size Guide</div>
<div>Shipping & Returns</div>
</div>
<div>
<div class="title">SHOP</div>
<div>Men's Shopping</div>
<div>Women's Shopping</div>
<div>Kids' Shopping</div>
<div>Discounts</div>
</div>
<div>
<div class="title">COMPANY</div>
<div>Our Story</div>
<div>Careers</div>
<div>Terms & Conditions</div>
<div>Privacy & Cookie policy</div>
</div>
<div>
<div class="title">CONTACT</div>
<address>
<div>1-202-555-0105</div>
<div>1-202-555-0106</div>
<div>help@[Link]</div>
</address>
</div>
</footer>
</body>
</html>

Shopper Template and CSS Float Style

Sudhakar Sharma

Jul 12, 2023

Horizontal Line:
<hr size="" width="" noshade color="">

Ex: Shopper Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopper</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
header {
display: flex;
justify-content: space-between;
font-size: 20px;
font-family: Arial;
padding: 15px;
}
span{
margin-right: 20px;
}
.brand-name {
font-size: 30px;
font-weight: bold;
}
article {
background-color: black;
color:white;
font-size: 16px;
padding: 10px;
text-align: center;
margin-top: 10px;
font-family: Arial;
}
.bi-lightning-fill {
color:gold;
}
section{
margin-top: 5px;
margin-bottom: 50px;
}
footer {
background-color: black;
color:white;
font-size: 15px;
font-family: Arial;
padding: 10px;
display: grid;
grid-template-columns: 2.4fr 2.4fr 2.4fr 2.4fr 2.4fr;
}
.footer-brand-name {
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.title {
font-weight: bold;
margin-bottom: 20px;
}
.title~div {
margin-bottom: 15px;
}
main div {
opacity: 0.6;
}
main div:hover {
opacity: 1;
}
.women {
background-image: url("images/[Link]");
background-size: cover;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
font-size: 40px;
color:white;
}
.men {
background-image: url("images/[Link]");
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
font-size: 40px;
color:white;
background-size: cover;
}
.kids {
background-image: url("images/[Link]");
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
font-size: 40px;
color:white;
background-size: cover;
}
main {
display: grid;
grid-template-columns: 4fr 4fr 4fr;
grid-gap: 5px;
}
h1 {
text-shadow: 2px 2px 2px black;
}
button {
width: 200px;
height: 40px;
font-size: 20px;
}
.site-features {
margin-top: 20px;
display: grid;
grid-template-columns: 3fr 3fr 3fr 3fr;
margin-bottom: 50px;
}
.bi-truck, .bi-arrow-left-right, .bi-tag, .bi-bag {
color : red;
}
.feature-text {
font-family: Arial;
color:gray;
margin-left: 35px;
margin-top: 10px;
}
.site-highlights {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
text-align: center;
font-family: Arial;
}
.sh-title {
font-size: 35px;
font-weight: bold;
margin-top: 20px;
}
.sh-subtitle {
color:gray;
font-weight: bold;
}
.sh-text {
font-size: 18px;
width: 600px;
line-height: 30px;
}
.site-banner-1 {
display: grid;
grid-template-columns: 4fr 8fr;
grid-gap: 50px;
height: 500px;
}
.women-bag {
background-image: url("images/[Link]");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.men-shirt {
background-image: url("images/[Link]");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.site-banner-container {
margin-left: 100px;
margin-right: 100px;
}
.wb-title {
font-size: 35px;
color:white;
font-family: Arial;
font-weight: bold;
text-shadow: 2px 2px 2px black;
}
.wb-subtitle {
font-size: 25px;
color:white;
margin-top: 20px;
}
.men-title {
font-size: 35px;
font-family: Arial;
font-weight: bold;
text-shadow: 2px 2px 2px black;
color:white;
}
.men-subtitle {
font-size: 25px;
margin-top: 20px;
width: 200px;
color:white;
}
.offer {
font-size: 20px;
font-family: Arial;
font-weight: bold;
text-align: center;
background-color: red;
color:white;
width: 70px;
height: 60px;
border-radius: 50px;
padding: 5px;
position: absolute;
top: 15px;
left: 15px;
}
</style>
</head>
<body>
<header>
<div>
<span class="brand-name">Shopper.</span>
</div>
<div>
<nav>
<span>Home</span>
<span>Catalog</span>
<span>Shop</span>
<span>Pages</span>
<span>Blog</span>
<span>Docs</span>
</nav>
</div>
<div>
<span class="bi bi-search"></span>
<span class="bi bi-person"></span>
<span class="bi bi-heart"></span>
<span class="bi bi-cart4"></span>
</div>
</header>
<article>
<span class="bi bi-lightning-fill"></span>HAPPY HOLIDAY DEALS ON EVERYTHING <span class="bi
bi-lightning-fill"></span>
</article>
<section>

<main>
<div class="women">
<div>
<h1>Women</h1>
<button>Shop Women <span class="bi bi-arrow-right"></span> </button>
</div>
</div>
<div class="men">
<div>
<h1>Men</h1>
<button>Shop Men <span class="bi bi-arrow-right"></span> </button>
</div>
</div>
<div class="kids">
<div>
<h1>Kids</h1>
<button>Shop Kids <span class="bi bi-arrow-right"></span> </button>
</div>
</div>
</main>

<hr size="2" noshade width="80%">

<div class="site-highlights">
<div>
<div class="sh-subtitle">NEW COLLECTION</div>
<div class="sh-title">Best Picks 2019</div>
<p class="sh-text">Appear, dry there darkness they're seas, dry waters thing fly midst. Beast,
above fly brought Very green.</p>
</div>
</div>

<div class="site-banner-container">
<div class="site-banner-1">
<div class="women-bag">
<div>
<div class="wb-title">Bags Collection</div>
<div class="wb-subtitle">Shop Now <span class="bi bi-arrow-right"></span></div>
</div>
</div>
<div class="men-shirt">
<div class="offer">
<div>Save</div>
<div>30%</div>
</div>
<div>
<div class="men-title">Shirts Collection</div>
<div class="men-subtitle">Shop Now <span class="bi bi-arrow-right"></span></div>
</div>
</div>
</div>
</div>

</section>
<footer>
<div>
<div class="footer-brand-name">
<span>Shopper.</span>
</div>
<div>
<span class="bi bi-facebook"></span>
<span class="bi bi-twitter"></span>
<span class="bi bi-instagram"></span>
<span class="bi bi-youtube"></span>
</div>
</div>
<div>
<div class="title">SUPPORT</div>
<div>Contact Us</div>
<div>FAQs</div>
<div>Size Guide</div>
<div>Shipping & Returns</div>
</div>
<div>
<div class="title">SHOP</div>
<div>Men's Shopping</div>
<div>Women's Shopping</div>
<div>Kids' Shopping</div>
<div>Discounts</div>
</div>
<div>
<div class="title">COMPANY</div>
<div>Our Story</div>
<div>Careers</div>
<div>Terms & Conditions</div>
<div>Privacy & Cookie policy</div>
</div>
<div>
<div class="title">CONTACT</div>
<address>
<div>1-202-555-0105</div>
<div>1-202-555-0106</div>
<div>help@[Link]</div>
</address>
</div>
</footer>
</body>
</html>

CSS Float
- It keeps the content in page floating left or right.
Syntax:
{
float : left | right ;
}

- Float requires "clear" attribute to control the "span" of float.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.title {
font-size: 60px;
font-family: Arial;
color:darkcyan;
}
.sub-title {
font-size: 22px;
font-family: Arial;
width: 600px;
line-height: 40px;
}
.banner-img {
float: right;
}
.banner-text {
margin-left: 100px;
}
.btn-view {
background-color: lightcyan;
font-size: 20px;
padding: 20px;
border:none;
}
.btn-doc {
background-color: gray;
font-size: 20px;
padding: 20px;
border:none;
color:White;
}
</style>
</head>
<body>
<main>
<img class="banner-img" src="../public/images/[Link]" width="600" height="400">
<div class="banner-text">
<div class="title">
Welcome to Landkit.<br>
Develop anything.
</div>
<p class="sub-title">
Build a beautiful, modern website with flexible Bootstrap components built from scratch.
</p>
<button class="btn-view">View All Pages</button>
<button class="btn-doc">Documentation</button>
</div>
</main>
</body>
</html>

Ex: Clear Float span

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
float: left;
}
h2 {
float: right;
}
p{
clear: both;
}
</style>
</head>
<body>
<h1>Title</h1>
<h2>Subtitle</h2>
<p>Some text</p>
</body>
</html>

CSS Background, Text Styles, Lists, Transforms

Sudhakar Sharma

•
Jul 13, 2023

CSS Background
background-image
background-color
background-size
background-position
background-repeat
background-attachment

Ex:
body {
background-image: url("../public/images/[Link]");
background-repeat: no-repeat;
background-position: center center;
background-size: 300px 200px;
background-attachment: fixed;
height: 100vh;
}

FAQ: Can we set multiple images in background?

Ans: Yes

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backgrounds</title>
<style>
body {
background-image: url("../public/images/[Link]"), url("../public/images/[Link]");
background-repeat: no-repeat, repeat;
background-size: 200px 200px, 200px 200px;
background-position: center center;
height: 100vh;
}
</style>
</head>
<body>

</body>
</html>

FAQ: Can we change background image dynamically?

Ans: Yes. By using "@media" queries
FAQ: Can we set multiple background colors?
Ans: Yes. By using gradient colors.

CSS Lists

list-style : short hand

list-style-type
list-style-image
list-style-position [inside , outside]

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backgrounds</title>
<style>
ol {
list-style-image: url("../public/images/[Link]");
font-size: 30px;
list-style-position: inside;
}
li {
border:3px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>

CSS Text Styles

font-family : defines face name
font-size : size of text
font-weight : bold
font-style : italics
font-variant : small-caps, normal
color : text color
text-align : left, center, right, justify
text-decoration : short hand
text-decoration-line : underline, overline, line-through
text-decoration-style : solid, double, wavy
text-decoration-color : color
text-decoration-thickness : size

Syntax:
{
text-decoration: underline 2px wavy red; [set none to remove all]
}

text-shadow : It similar to box-shadow

text-transform : uppercase, lowercase, capitalize

word-break : break-all, keep-all

word-spacing : space between words
letter-spacing : space between letters
word-wrap : controls wrapping
white-space : sets wrapping content with overflow effects.
line-height : space between lines
text-overflow : controls overflowing text in container. [ellipsis]

Syntax:
p{
white-space: nowrap;
border:1px solid black;
width:300px;
text-overflow: ellipses;
overflow: hidden;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backgrounds</title>
<style>
p{
border: 1px solid black;
width: 340px;
white-space: nowrap;
padding: 2px;
overflow: hidden;
word-wrap: break-word;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p title="We understand that you may have questions about the Microsoft Services Agreement.
We have an FAQ page ([Link]
that provides more information, including what Microsoft products and services it covers. Whenever
we make changes, we provide a summary of the most notable changes to the current Microsoft
Services Agreement. We will also continue to provide a summary of the changes to the previous
version, and a link to the previous version, of the Microsoft Services Agreement on the Summary of
Changes ([Link] page.">We
understand that you may have questions about the Microsoft Services Agreement. We have an FAQ
page ([Link] that provides more
information, including what Microsoft products and services it covers. Whenever we make changes,
we provide a summary of the most notable changes to the current Microsoft Services Agreement.
We will also continue to provide a summary of the changes to the previous version, and a link to the
previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
</body>
</html>

CSS Transforms
- Transform is the process of changing from one state to another.
- CSS have 2 types of transforms
a) 2D Transforms
b) 3D Transforms

2D Transforms:
- It refers to transformation on 2 dimensions.
X
Y
- CSS Transforms support changing the position, size and orientation of element.
- CSS 2D Transforms are handled by using following methods

translate()
scale()
rotate()
skew()
matrix()

Note: CSS Transforms are not compatible to various browsers. You have to use
additional plugins.

{
transform : scale();
-webkit-transform: scale();
-moz-transform: scale();
-o-transform: scale();
-ms-transform: scale();
}

translate()
- It is a method used to change the position of element along X & Y axis.

translate()
translateX()
translateY()

Syntax:
img {
transform: translate(200px, 50px); x = 200, y = 50
}

img {
transform: translateX(200);
transform: translateY(100);
}

scale()
- It is used to change the size of element.

scale() width & height value 1 = 100%

scaleX() width
scaleY() height

Syntax:
img {
transform: scale(2, 1);
}
img {
transform: scaleX(2);
transform: scaleY(2);
}

skew()
- It is used to tilt your element by specified angle.

skew() value in deg.

skewX()
skewY()

Syntax:
img {
transform: skew(-20deg, 20deg);
}
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backgrounds</title>
<style>
img:hover {
transform: skew(-20deg, 20deg);
transition: 2s;
}
img {
transition: 2s;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<img src="../public/images/[Link]" width="200" height="200">
</body>
</html>

rotate()
- It rotates element by specified angle.

rotate()
rotateX()
rotateY()

Syntax:
img {
transform: rotate(360deg);
}

Ex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backgrounds</title>
<style>
img:hover {
transform: rotate(-360deg);
transition: 2s;
}
img {
transition: 2s;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<img src="../public/images/[Link]" width="200" height="200">
</body>
</html>

CSS 3D, Transition and Keyframes

Sudhakar Sharma

Jul 14, 2023

CSS 2D Transforms
translate()
scale()
skew()
rotate()

matrix()
- It configures multiple transforms.

Syntax:
matrix(scaleX(), skewX(), skewY(), scaleY(), translateX(), translateY())

Ex:
matrix(1.5,0.2, 0.2, 2, 50, 50);

CSS 3D Transforms
- It can transform elements in 3 Dimensions.
X, Y, Z
- Methods
translate3D()
scale3D()
skew3D()
roate3D()
matrix3D()

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backgrounds</title>
<style>
img:hover {
transform: scale3d(1.5,1.5,2.5);
transition: 2s;
box-shadow: 14px 14px 2px black;
}
img {
transition: 2s;
margin-right: 50px;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

</style>
</head>
<body>
<div>
<img src="../public/images/[Link]" width="200" height="200">
<img src="../public/images/[Link]" width="200" height="200">
<img src="../public/images/[Link]" width="200" height="200">
</div>
</body>
</html>

Task: Create a 3D Box

CSS Transitions
- Transition is used to control the transforms with timing and orentations.

transition short hand for all effects

transition-duration total time taken to complete tranformation
transition-delay the dealy time to start animation.
transition-property defines the property that must use timings.
transition-timining-function it sets pre-defined transition methods.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backgrounds</title>
<style>
div {
width: 100px;
height: 50px;
background-color: red;
transition-duration: 5s;
transition-delay: 1s;
transition-timing-function: steps(10);
}
div:hover {
width: 100%;
transition-duration: 3s;
transition-delay: 1s;
transition-property: width;
transition-timing-function: steps(4);
}

</style>
</head>
<body>
<div>

</div>
</body>
</html>

FAQ: What is difference between scaleX() & width?

Ans: scaleX() is linear size, It sets size for element from center.
width is non-linear. It sets size from specific point to right.

@Keyframes & animations

- A keyframe defines object with tranformation.

- A static frame defines object without transformation.
- You can create frame-by-frame animation or tweening animation by using "Keyframe".
- Tween contains break-points.

Syntax:
@keyframes Name
{
from { initial state
}
to { final state
}
}

Syntax:
@keyframes Name
{
from {
}
5% {
}
10% {
}
90%{
}
to {
}
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backgrounds</title>
<style>
@keyframes Blink
{
from {
opacity: 0;
}
50% {
transform: rotate(360deg);
}
to {
opacity: 1;
}
}
img {
animation-name: Blink;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<img src="../public/images/[Link]" width="150" height="150">
</body>
</html>

CSS Keyframes and Animation Examples

Sudhakar Sharma

Jul 15, 2023

Syntax:
@keyframes name
{
from {
}
break-point {
}
to {
}
}

- You can apply keyframe by using animation attributes

animation-name
animation-duration
animation-delay
animation-timing-function
animation-iteration-count
animation-direction

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backgrounds</title>
<style>
@keyframes zoom {
from {
margin-left: 140%;
margin-top: -40px;
width: 50px;
height: 60px;
}
25% {
transform: rotate(180deg);
}
50% {
margin-top: 200px;
width: 300px;
height: 400px;
}
75% {
transform: rotate(360deg);
}
to {
margin-left: -80px;
margin-top: -80px;
width: 50px;
height: 60px;
}
}
img {
animation-name: zoom;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<img src="../public/images/[Link]" width="50" height="60">
</body>
</html>

Ex: Translate X - Shopper Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fashion {
width: 300px;
height: 400px;
overflow: hidden;
}
img {
width: 340px;
height: 440px;
transition-duration: 1s;
}
img:hover {
transform: translateX(-20px);
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="fashion">
<img src="../public/images/[Link]">
</div>
</body>
</html>

Ex: Icons in Shopper Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fashion {
width: 300px;
height: 400px;
background-image: url("../public/images/[Link]");
background-size: cover;
display: flex;
justify-content: center;
padding-bottom: 20px;
overflow: hidden;
}
.fashion:hover {
background-image: url("../public/images/[Link]");
}

.icons span {
font-size: 22px;
background-color: darkcyan;
color:white;
padding: 5px;
border-radius: 40px;
margin-right: 10px;
}

.fashion:hover .icons {
margin-top: 380px;
transition: 2s;
}
.fashion .icons {
margin-top: 430px;
transition: 1s;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<div class="fashion">

Ex: Delay

@keyframes zoom {
from {
font-size: 10px;
}
to {
font-size: 150px;
}
}
.w {
animation-name: zoom;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.es {
animation-name: zoom;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div span {
margin-left: 40px;
}
div {
width: 700px;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<div>
<span class="w">W</span>
<span class="es">E</span>
<span class="l">L</span>
<span class="c">C</span>
<span class="o">O</span>
<span class="m">M</span>
<span class="e">E</span>
</div>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
span {
font-size: 150px;
}
@keyframes colorwave {
from {
color:red;
}
to {
color: black;
}
}
.w {
animation-name: colorwave;
animation-duration: 1s;
animation-direction: alternate;
}
.es {
animation-name: colorwave;
animation-duration: 1s;
animation-delay: 2s;
animation-direction: alternate;
}
.l {
animation-name: colorwave;
animation-duration: 1s;
animation-delay: 3s;
animation-direction: alternate;
}
.c {
animation-name: colorwave;
animation-duration: 1s;
animation-delay: 4s;
animation-direction: alternate;
}
.o {
animation-name: colorwave;
animation-duration: 1s;
animation-delay: 5s;
animation-direction: alternate;
}
.m {
animation-name: colorwave;
animation-duration: 1s;
animation-delay: 6s;
animation-direction: alternate;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<div>
<span class="w">W</span>
<span class="es">E</span>
<span class="l">L</span>
<span class="c">C</span>
<span class="o">O</span>
<span class="m">M</span>
<span class="e">E</span>
</div>
</body>
</html>

Ex: Slide - Carousel

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.carousel {
display: flex;
overflow: hidden;
}
@keyframes slide1 {
from {
margin-left: 200%;
}
50% {
margin-left: 0%;
}
to {
margin-left: -200%;
}
}
@keyframes slide2 {
from {
margin-left: 200%;
}
50% {
margin-left: 0%;
}
to {
margin-left: 0%;
}
}
.slide1 {
animation-name: slide1;
animation-duration: 2s;
}
.slide2 {
animation-name: slide2;
animation-duration: 2s;
animation-delay: 5s;
}
</style>
</head>
<body>
<div class="carousel">
<img class="slide1" src="../public/images/[Link]" width="100%">
<img class="slide2" src="../public/images/[Link]" width="100%">
</div>
</body>
</html>

Media Queries

Sudhakar Sharma

Jul 17, 2023

Responsive Page Design with CSS & HTML

- Responsive page can fit on to various devices.

- To create a responsive page various options are required.

1. Meta Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Fluid Images & Tables

3. CSS Display Flex & Grid

flex
flex-wrap
flex-direction
grid
grid-template-columns
grid-row
grid-col
grid-gap

4. Media Queries
- A media query identifies the type of media device, orientation and dimensions.

Syntax:
@media mediaType (query)
{

- Media Type includes

a) screen
b) print
c) speech
d) all
- Media Query includes
a) min-width
b) max-width
c) width
d) orientation
e) ViewPort width & height [vw, vh]

1. width : It defines exact match of units.

(width:800px) => exactly 800 px

2. min-width : It defines the units starting with specified point upto end.

(min-width:800px) => starting from 800px to end

3. max-width : It defines the units starting from 0 upto sepcified point.

(max-width:800px) => starting from 0px to 800px

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Demo</title>
<style>
ul {
list-style: none;
}
li {
width: 140px;
padding: 5px;
border:1px solid black;
margin: 5px;
}
@media screen and (min-width:800px){
ul {
display: flex;
justify-content: space-around;
}
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Pages</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</body>
</html>

4. Orientation : It identifies the device orientation and sets the content in page
in landscape or portrait mode.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Demo</title>
<style>
ul {
list-style: none;
}
li {
width: 140px;
padding: 5px;
border:1px solid black;
margin: 5px;
}
@media screen and (orientation:landscape){
ul {
display: flex;
justify-content: space-around;
}
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Pages</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</body>
</html>

Ex: Multiple Media Queries

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Demo</title>
<style>
ul {
list-style: none;
}
li {
width: 140px;
padding: 5px;
border:1px solid black;
margin: 5px;
}
@media screen and (orientation:landscape) and (min-width:600px){
ul {
display: flex;
justify-content: space-around;
}
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Pages</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</body>
</html>

Component Libraries
- It is a library of HTML, CSS and JavaScript components that allow developers to design faster with
simiplified approach.
- There are various component libraries for UI designing
a) Bootstrap
b) Twitter Bootstrap
c) Telerik
d) DevExpress
e) Material UI etc..

Bootstrap
- It is a component library for building simple and rich UI for web.
- It makes UI design faster.
- The latest version of bootstrap is "5x".

Bootstrap

Sudhakar Sharma

Jul 18, 2023

Bootstrap
- It is a component library.
- It make UI designing easy and faster.
- It is open source and cross platform library.
- Open source allows to customize the library according to requirements.
- Cross platform makes the library available to all devices and OS services.
- Component is a template which you can re-use and customize.
- A component is built with
a) HTML [Presentation]
b) Styles [CSS]
c) Logic [jQuery]

Note: To view the components hierarchy in HTML page, you can select the option
"Show user agent shadow DOM"
in Debugger settings.
- The latest version of bootstrap is "5x".
- To setup bootstrap in project you have to install following

> npm install bootstrap --save

> npm install bootstrap-icons --save
> npm install jquery --save

- To use complete bootstrap you have to link the following files

[Link]
[Link]
[Link] [node_modules/bootstrap/dist/js]
[Link] [node_modules/jquery/dist]
[Link] [optional]

Note: CSS files have no order dependency. But javascript file have order dependency.
[Link]
[Link]

- Bootstrap provides CSS classes & jQuery attributes, which are used to design components.

Bootstrap Container Classes

- Containers are used to keep your content responsive

.container
.container-sm
.container-lg
.container-xl
.container-xxl
.container-fluid

Bootstrap Box Model

1. Margins
.m short hand
.ms left => bootstrap 4 uses ml, mr
.me right
.mt top
.mb bottom

.m-{size} 1 to 4
.ms-{size}

2. Padding
.p short hand
.ps
.pe
.pt
.pb
.p-{size} 1 to 4

3. Border
.border
.border-{contextual} primary, danger, warning, info, success, dark
.border-{size} 1 to 3

4. Border Radius
.rounded
.rounded-{size} 1 to 3
.rounded-circle
.rounded-pill

5. Width
.w-{size} 25, 50, 100

6. Height
.h-{size} 25, 50, 100

Bootstrap Display
.d-flex
.flex-wrap
.flex-row
.flex-row-reverse
.flex-col
.flex-col-reverse
.justify-content-between
.justify-content-evenly ...
.align-items-center
.align-items-end
.align-items-start
.d-none
.d-block
.d-inline

Bootstrap Grid
.row
.col fluid
.col-{size} 1 to 12

Bootstrap Positions
.position-absolute
.position-fixed
.position-static
.position-relative
.position-sticky
.top-{0,50,100}
.bottom
.end
.start

Bootstrap Components

Sudhakar Sharma

Jul 19, 2023

Text Classes
.text-{contextual} primary, secondary, danger, warning...
.text-{align} start, end, center, justify
.text-{case} uppercase, lowercase, capitalize
.fw font-weight, bold
.fst font-style, italics
.text-decoration-{} none, underline, overline

Background Classes
.bg-{contextual}

Bootstrap Components
1. Alerts
- Embeded message boxes in page.
- You can control dynamically.

Classes:
.alert
.alert-{contextual}
.alert-title
.alert-text
.alert-link
.alert-dismissible

Attributes: [to control component] => require jquery enabled.

data-bs-toggle : It refers to click actions
data-bs-target : It refers to ID of element
data-bs-dismiss : It refers to close on click, which component to close

2. Modals
- It can create pop-up dialog boxes in page.

Classes:
.modal
.modal-dialog
.modal-dialog-centered
.modal-fullscreen
.modal-dialog-scrollable
.modal-content
.modal-header
.modal-body
.modal-footer
.fade

Note: Bootstrap 5 have disabled nested modals.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
</head>
<body class="container-fluid">
<div class="mt-3">
<button data-bs-toggle="modal" data-bs-target="#login" class="btn
btn-primary">Login</button>
<button data-bs-toggle="modal" data-bs-target="#details" class="btn btn-info">Product
Details</button>
</div>
<div class="modal fade" id="details">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Realme Mobile</h3>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<dl>
<dt>Name</dt>
<dd>Realme C16</dd>
<dt>Preview</dt>
<dd>
<img src="../public/images/[Link]" width="200" height="300">
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="modal fade" id="login">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header text-white">
<h3> <span class="bi bi-person-fill"></span> User Login</h3>
<button data-bs-dismiss="modal" class="btn-close"></button>
</div>
<div class="modal-body">
<dl>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
</dl>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Login</button>
<button data-bs-dismiss="modal" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

3. Badge
- It is used to highlight and content in block.

Class:
.badge
.bg-{contextual}
.text-{contextual}

4. Collapse
- It is used to show or hide any content in page.

Classes:
.collapse
.show

Classes:
.accordion
.accordion-collapse
.accordion-item
.accordion-header
.accordion-button
.accordion-body
.accordion-footer

Attribute
data-bs-parent : It is used to define mutex

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
</head>
<body class="container-fluid">
<h2>Frequenty Asked Questions</h2>
<div class="accordion" id="faqs">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#q1">What is
Netflix?</button>
</div>
<div class="accordion-collapse collapse" id="q1" data-bs-parent="#faqs">
<div class="accordion-body">
<p>Netflix is a streaming service that offers a wide variety of award-winning TV shows,
movies, anime, documentaries and more – on thousands of internet-connected devices.</p>
<p>You can watch as much as you want, whenever you want, without a single ad – all for
one low monthly price. There's always something new to discover, and new TV shows and movies are
added every week!</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#q2">How
much does Netflix cost?</button>
</div>
<div class="accordion-collapse collapse" id="q2" data-bs-parent="#faqs">
<div class="accordion-body">
<p>Netflix is a streaming service that offers a wide variety of award-winning TV shows,
movies, anime, documentaries and more – on thousands of internet-connected devices.</p>
</div>
</div>
</div>
</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Note: You can customize accordion button

<button class="btn btn-danger w-100"> What is Netflix? </button>

6. Cards
- It is used for designing cards with graphic and various sections.

Classes:
.card
.card-header
.card-body
.card-footer
.card-img-top
.card-img-bottom
.card-img-overlay
.card-title
.card-subtitle
.card-text

<div class="card-header bg-success text-white">

<h3 class="card-title">Women's Fashion</h3>
<p class="card-subtitle">Winter Sale</p>
</div>
<div class="card-body">
<img src="../public/images/[Link]" class="card-img-top" height="200">
<dl>
<dt>Topic</dt>
<dd>Description</dd>
</dl>
</div>

</div>

<div class="card bg-warning p-2 m-2" style="width: 250px;">

<img src="../public/images/[Link]" class="card-img-top" height="200">
<div class="card-header">
<h3 class="card-title">Men's Fashion</h3>
<p class="card-subtitle">Winter Sale</p>
</div>
<div class="card-body">
<dl>
<dt>Topic</dt>
<dd>Description</dd>
</dl>
</div>
<div class="card-footer">
<button class="btn btn-success w-100"> <span class="bi bi-cart"></span> Shop</button>
</div>
</div>

<div class="card p-2 m-2" style="width: 250px;">

<img src="../public/images/[Link]" class="card-img-top" height="200">
<div class="card-header">
<h3 class="card-title">Kid's Fashion</h3>
<p class="card-subtitle">Winter Sale</p>
</div>
<div class="card-body">
<dl>
<dt>Topic</dt>
<dd>Description</dd>
</dl>
</div>
<div class="card-footer">
<button class="btn btn-success w-100"> <span class="bi bi-cart"></span> Shop</button>
</div>
</div>
</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Carousel, Dropdown, Nav and Tabs

Sudhakar Sharma

Jul 20, 2023

1. Alerts
2. Badge
3. Modal
4. Cards
5. Collapse
6. Accordion

Carousel
- It is used to display sliding and fading content in page.

Basic Carousel:
.carousel
.carousel-inner
.carousel-item

- Carousel can have multiple items but one item must be active.

.active : you have to define for carousel-item

- Carousel can't start animation by default. You have to define the attribute

data-bs-ride : It is defined for carousel.

<div class="carousel" data-bs-ride="carousel"> </div>

- Carousel can have 2 types of animations

.slide
.carousel-fade

<div class="carousel slide">

Carousel Controls:
.carousel-control-prev
.carousel-control-prev-icon
.carousel-control-next
.carousel-control-next-icon

Attributes
.data-bs-slide-next
.data-bs-slide-prev

<button class="carousel-control-prev" data-bs-target="#banners" data-bs-slide="prev">

Carousel Indicators: Allow random navigation

.carousel-indicators
data-bs-slide-to="indexNumber"; 0 = first slide

Note: Any one indicator must be ".active".

<button class="carousel-control-prev" data-bs-target="#banners" data-bs-slide="prev">

</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Carousel Time Intervals:

- Every slide have default time interval.
- You can control the time interval by using "data-bs-interval".

<div class="carousel-item" data-bs-interval="3000"> </div> 1000 = 1sec

<button class="carousel-control-prev" data-bs-target="#banners" data-bs-slide="prev">

</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Ex: With custom content in carousel-item

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
</head>
<body class="container-fluid">
<div class="carousel carousel-dark slide mt-1" id="banners" data-bs-ride="carousel">
<button class="carousel-control-prev" data-bs-target="#banners" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#banners" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>

<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="3000">
<img style="height: 300px;" src="../public/images/[Link]" class="w-100 d-block">
</div>
<div class="carousel-item" data-bs-interval="1000">
<img style="height: 300px;" src="../public/images/[Link]" class="w-100 d-block">
</div>
<div class="carousel-item" data-bs-interval="5000">
<div style="height: 300px;" class="d-flex justify-content-center align-items-center">
<div>
<p>Register for more content</p>
<div class="input-group input-group-lg">
<input type="email" placeholder="Your email address" class="form-control">
<button class="btn btn-danger">Get Started <span class="bi
bi-chevron-right"></span> </button>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="5000">
<img style="height: 300px;" src="../public/images/[Link]" class="w-100 d-block">
</div>
</div>

</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Dropdown
.dropdown
.dropup
.dropend
.dropstart
.dropdown-toggle
.dropdown-menu
.dropdown-item
.dropdown-text
.dropdown-link
.dropdown-divider

<div class="dropend">
<button data-bs-toggle="dropdown" class="dropdown-toggle btn btn-dark"><span class="bi bi-
globe"></span> Language</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li ><a href="#" class="dropdown-item"><span
class="dropdown-text">English</span></a></li>
<li ><a href="#" class="dropdown-item"><span class="dropdown-
text">हिंदी</span></a></li>
<li class="dropdown-divider"></li>
<li><a href="#" class="dropdown-item">Help?</a></li>
</ul>
</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Nav & Tabs

.nav
.nav-tabs
.nav-pills
.nav-item
.nav-link
.nav-text
.tab-content
.tab-pane
.active

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
</head>
<body class="container-fluid">
<div class="mt-3">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#basic"><span class="nav-
text">Basic Details</span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#preview"><span
class="nav-text">Preview</span></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#features"><span
class="nav-text">Features</span></a></li>
</ul>
<div class="tab-content mt-4">
<div class="tab-pane active" id="basic">
<h3>realme C55 (Rainforest, 128 GB)</h3>
<div>
<span class="bg-success p-2 rounded text-white">4.4 <span class="bi
bi-star-fill"></span></span> <span class="ratings-count"><b><font color="gray">12,315 Ratings &
661 Reviews</font></b></span>
</div>
</div>
<div class="tab-pane" id="preview">
<img src="../public/images/[Link]" width="300" height="400">
</div>
<div class="tab-pane" id="features">
<ul type="disc">
<li>8 GB RAM | 128 GB ROM | Expandable Upto 1 TB</li>
<li>17.07 cm (6.72 inch) Full HD+ Display</li>
<li>64MP + 2MP | 8MP Front Camera</li>
<li>5000 mAh Battery</li>
<li>Helio G88 Processor</li>
<li>1 Year Manufacturer Warranty for Phone and 6 Months Warranty for In the Box
Accessories</li>
</ul>
</div>
</div>
</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Bootstrap Components

Sudhakar Sharma

Jul 21, 2023

Navbar
- It is used to design responsive navigation bar.

.navbar
.navbar-expand-{lg, sm}
.navbar-toggler
.navbar-toggler-icon
.navbar-brand
.navbar-nav
.nav-item
.nav-link
.navbar-collapse
.navbar-light | dark

</div>
</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Buttons
.btn
.btn-{contextual}
.btn-outline-{contextual}
.btn-sm
.btn-lg
.btn-group
.btn-group-lg
.btn-toolbar
.btn-link
.btn-close

Forms
.form-control
.form-range
.form-control-color
.form-control-file
.form-label
.form-check-label
.form-check-input
.form-switch
.form-select

Input Group
.input-group
.input-group-sm|lg
.input-group-text

Pagination
.pagination-{sm|lg}
.page-item
.page-link
.page-text

Tables
.table
.table-hover
.table-bordered
.table-stripped
.table-{contextual}
.table-responsive
.caption-top

Syntax: Responsive Table

<div class="table-responsive w-50">

Progress & Spinners

.spinner-border
.spinner-border-sm|lg
.spinner-grow
.spinner-grow-sm|lg
.progress
.progress-bar
.progress-bar-stripped
.progress-bar-animated

JavaScript

Sudhakar Sharma

Jul 22, 2023

JavaScript
- JavaScript is an light weight interpretted and JIT [Just in Time] compiled programming language.
- Interpretted language can translate the code line-by-line.
- Compiled language can translate all lines simultaneously at the same time.
- There are 2 compiling technique
a) JIT [Just in Time]
b) AOT [Ahead of Time]
- JIT translates the code in browser.
- AOT translates at application level.

Ex: compilers => babel, v8

- JavaScript is used in various applications
a) Client Side HTML
b) Server Side Node JS
c) Database MongoDB
d) Animations [CAD] Flash, 3DS Max ..

- JavaScript supports various programming approaches

a) Functional Programming
b) Structural Programming
c) Imperitive Programming
d) Modular Programming
e) Object Oriented Programming etc..

Note: JavaScript is not an OOP language. It supports only few features of OOP.

Evolution of JavaScript
-------------------------------
- In early day's of Web [1990]
Browser : Mosaic
Markup : GML, SGML, HTML
Script : ECMA Script

- In 1995 Netscape
Browser : Netscape communicator
Markup : HTML
Script : ECMA Script

- In 1996 Netscape appointed "Brendan Eich" to design a Script for browser

Script => Mocha => Live Script

- Netscape given the responsibility of Live Script to "Sun Micro Systems" [Java]

- Sun Microsystem renamed Live Script to "JavaScript".

- In year 2000 Netscape stopped its services and JavaScript.

- Netscape => JavaScript => ECMA => ECMA 2015 [ES5].... ECMA Script 2022 [ES2022]

ES6 to ES2022

What is the role of JavaScript Client Side?

- It is used to reduce burden on server.
- It manages all interactions client side by saving round trip.
- It is used to manipulate DOM [Document Object Model]
a) Add Elements into DOM
b) Remove Elements from DOM
c) Update Data into Elements
d) Styling Elements dynamically
- It is used to handle browser extentions and plugins.
- It manipulates BOM [Browser Object Model]
- It is used for client side validations.

Drawbacks of JavaScript:

JavaScript Issues and Integration

Sudhakar Sharma

Jul 24, 2023

JavaScript Drawbacks & Issues:

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

- It is not a strongly typed language.

x = 10; x is number type

x = "John"; x is transformed into string

- It is not strictly typed implicitly. It is about the programming standards and rules.

- It is not an OOP language. It supports only few features of OOP.

- Extensibility Issues.

- Code Level security Issues.

- It is not secured and can be disabled by browser.

FAQ: How to check the status of JavaScript in browser?

Ans: By using HTML <noscript> element.

Syntax:
<body>
<noscript>
please enable javascript on your browser
</noscript>
</body>

What is solution? Is there any alternative for JavaScript?

- TypeScript
- But typescript have to transcompile its code into JavaScript.

Integrate JavaScript into HTML page

-------------------------------------------------
JavaScript can be integrated into HTML page by using following techniques
1. Inline
2. Embedded
3. External File

Inline JavaScript
- In this method JavaScript functions are written directly in HTML element.
- You can't reuse the code.
- However it is faster.

Syntax:
<button onclick="[Link]()"> Print </button>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline</title>
<style media="print">
button {
display: none;
}
</style>
</head>
<body>
<h1>Click Print button to print your Ticket</h1>
<button onclick="[Link]()">Print</button>
</body>
</html>

2. Embedded JavaScript
- In this technique JavaScript functions are defined in a <script> element.
- So that you can re-use the functions from any location in page.
- You can embed in <head> or <body> sections.
- JavaScript MIME type is "text/javascript" or "language=javascript".

Syntax:
<head>
<script type="text/javascript">
..... your functions.......
</script>
</head>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline</title>
<style media="print">
button {
display: none;
}
</style>
<script type="text/javascript">
function PrintPage(){
[Link]();
}
</script>
</head>
<body>
<h1>Click Print button to print your Ticket</h1>
<button onclick="PrintPage()">Print</button>
</body>
</html>

3. JavaScript from External File

- In this technique JavaScript functions can be defined in a separate script file that have the extention
".js".
- You can link the script file to any webpage by using <script> element.

Syntax:
[Link]

function PrintPage(){
[Link]();
}

- Using an external file will increase the number of requests to page and also the page load time.

Ex:
1. Add a new folder into project "src"
src\scripts

2. Add a new file into scripts

[Link]
function PrintPage()
{
[Link]();
}

</script>
</head>
<body>
<h1>Click Print button to print your Ticket</h1>
<button onclick="PrintPage()">Print</button>
</body>
</html>

FAQ: How to turn on JavaScript strict mode?

Ans: By using "use strict";

Syntax:
<script type="text/javascript">
"use strict";
.....your functions........
</script>

FAQ: How to write JavaScript for legacy browsers?

Ans: JavaScript functions are enclosed in HTML comments and defined in script.

Syntax:

JavaScript Reference techniques

Sudhakar Sharma
•

Jul 25, 2023

How JavaScript can refer HTML elements?

1. JavaScript can refer HTML elements by using DOM hierarchy.

Syntax:
[Link][ ]
[Link][ ].elements[ ]
[Link][]

- It is the fastest way of accessing HTML elements for interpreter or compiler.

- It is the native method of refering HTML elements.

Issue:
- Adding or removing elements in page design will cause change in index number,
which we have update every time.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function bodyload(){
[Link][0].src = "../public/images/[Link]";
[Link][0].elements[2].value = "Login";
[Link][1].elements[1].value = "Register";
}
</script>
</head>
<body onload="bodyload()">
<div>
<img width="100" height="100" border="1">
</div>
<div>
<form>
<h3>User Login</h3>
<input type="text" placeholder="User Name"> <input placeholder="Password"
type="password"> <input type="button">
</form>
</div>
<div>
<form>
<h3>Register User</h3>
Your Email : <input type="email"> <input type="button">
</form>
</div>
</body>
</html>

2. JavaScript can refer HTML elements by using a reference name.

Every element must have a reference name.

Syntax:
<img name="pic">

[Link] = "path";

Issues:
- You can't access a child element directly without refering to its parent.
- You have to define the complete hierarchy.
- Name can be common for multiple elements.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function bodyload(){
[Link] = "../public/images/[Link]";
[Link] = "Login";
[Link] = "Register";
}
</script>
</head>
<body onload="bodyload()">
<div>
<img name="pic" width="100" height="100" border="1">
</div>
<div>
<form name="frmLogin">
<h3>User Login</h3>
<input type="text" name="txtUser" placeholder="User Name"> <input name="txtPwd"
placeholder="Password" type="password"> <input name="btnLogin" type="button">
</form>
</div>
<div>
<form name="frmRegister">
<h3>Register User</h3>
Your Email : <input name="txtEmail" type="email"> <input name="btnRegister"
type="button">
</form>
</div>
</body>
</html>

3. JavaScript can refer elements by using ID

JavaScript provides a method
"[Link]()"

Issues:
- CSS also uses ID as selector.
- In CSS ID can be common for multiple elements
- Every element can't have multiple ID's.

Syntax:
<img id="pic">

[Link]("pic").src = "path";

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function bodyload(){
[Link]("pic").src = "../public/images/[Link]";
[Link]("btnLogin").value = "Login";
[Link]("btnRegister").value = "Register";
}
</script>
</head>
<body onload="bodyload()">
<div>
<img name="pic" id="pic" width="100" height="100" border="1">
</div>
<div>
<form name="frmLogin">
<h3>User Login</h3>
<input type="text" name="txtUser" placeholder="User Name"> <input name="txtPwd"
placeholder="Password" type="password"> <input id="btnLogin" name="btnLogin" type="button">
</form>
</div>
<div>
<form name="frmRegister">
<h3>Register User</h3>
Your Email : <input name="txtEmail" type="email"> <input name="btnRegister"
id="btnRegister" type="button">
</form>
</div>
</body>
</html>

4. JavaScript can refer HTML elements by using CSS selectors

JavaScript provides the method
"[Link]()"

- You can use "type selector, class, id , rational, dynamic etc.."

Syntax:
<img>
[Link]("img").src = "path";

<input type="button" class="btn-register">

[Link](".btn-register").value="";

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function bodyload(){
[Link]("img").src = "../public/images/[Link]";
[Link]("#btnLogin").value = "Login";
[Link](".btn-register").value = "Register";
}
</script>
</head>
<body onload="bodyload()">
<div>
<img width="100" height="100" border="1">
</div>
<div>
<form name="frmLogin">
<h3>User Login</h3>
<input type="text" name="txtUser" placeholder="User Name"> <input name="txtPwd"
placeholder="Password" type="password"> <input id="btnLogin" name="btnLogin" type="button">
</form>
</div>
<div>
<form name="frmRegister">
<h3>Register User</h3>
Your Email : <input name="txtEmail" type="email"> <input name="btnRegister" class="btn-
register" type="button">
</form>
</div>
</body>
</html>

Issues:
- Class, ID and Type can be common for multiple elements.

Note: JavaScript provides various methods to access all HTML elements with array reference.
[Link]()
[Link]()
[Link]() etc..

JavaScript Input and Output Techniques:

Output Techniques:
1. alert()
2. confirm()
3. [Link]()
4. console methods
5. innerHTML
6. innerText
7. outerHTML

- Output is the process of rendering a value in browser and displaying to user.

alert()
- It pops-up a dialog in window that can display any message.
- It will not allow to cancel the dialog.
- It is RC data type.
- You can define multiple lines using "\n"

Syntax:
alert("line1 \n line2 \n line3");

JavaScirpt output and Input methods

Sudhakar Sharma

Jul 26, 2023

JavaScript Output Techniques
1. alert()

confirm()
- It is similar to alert but allows to cancel.
- It is a boolean method that returns true or false.

true : click OK
false : click Cancel

Syntax:
confirm("message"); => true / false

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output</title>
<script type="text/javascript">
function DeleteClick(){
flag = confirm("Record will be deleted\nAre you sure?");
if(flag==true){
alert("Record Deleted Successfully..");
} else {
alert("You canceled..");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
</body>
</html>

[Link]()
- It is used to display and render output on new screen.
- It supports complex data to render.
- You render simple text or markup.

Syntax:
[Link]("message | markup");

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output</title>
<script type="text/javascript">
function DeleteClick(){
flag = confirm("Record will be deleted\nAre you sure?");
if(flag==true){
[Link]("<b><i><font color='red'>Record Deleted
Successfully..</font></i></b><br><a href='[Link]'>Back</a>");
} else {
alert("You canceled..");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
</body>
</html>

innerText
- It is used to display output in containers that can display text.
<div> <span> <dd> <dt> <h2> <p> <blockquote> <td> <li> etc..
- It is RC data type. It will not allow formats for text.

Syntax:
[Link] = "Some message";

innerHTML
- It is similar to innerText but allows formats.
- You can render a message or markup.

Syntax:
[Link] = "message | markup";

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output</title>
<script type="text/javascript">
function DeleteClick(){
flag = confirm("Record will be deleted\nAre you sure?");
if(flag==true){
[Link]("p").innerHTML = "<font color='red'>Record Deleted
Successfully..</font>";
} else {
[Link]("p").innerText = "Canceled..";
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
<p></p>
</body>
</html>

- It renders the markup inside existing element.

outerHTML
- It is similar to innerHTML but will replace the existing element with target element.

Syntax:
[Link] = "<new element>";

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output</title>
<script type="text/javascript">
function DeleteClick(){
flag = confirm("Record will be deleted\nAre you sure?");
if(flag==true){
[Link]("p").outerHTML = "<h2><font color='red'>Record Deleted
Successfully..</font></h2>";
} else {
[Link]("p").innerText = "Canceled..";
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
<p></p>
</body>
</html>

console methods
- Console is a CLI [Command Line Interface] tool used by developer to test code.
- It is present in every browser "Developer Tools" [right click => inspect]
- The console methods are used to display output in developer tools

[Link]()
[Link]()
[Link]()
[Link]()
[Link]() etc...
- All console methods are RC data type.
- You can use "\n" for line break.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output</title>
<script type="text/javascript">
function DeleteClick(){
[Link]("User Clicked Delete Button");
flag = confirm("Record will be deleted\nAre you sure?");
if(flag==true){
[Link]("p").innerHTML = "<h2><font color='red'>Record Deleted
Successfully..</font></h2>";
[Link]("Ok clicked and Record Deleted");
} else {
[Link]("p").innerText = "Canceled..";
[Link]("User Canceled");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
<p></p>
</body>
</html>

Summary:
- alert()
- confirm()
- [Link]()
- console methods
- innerHTML
- innerText
- outerHTML

JavaScript Input Techniques

- Input is the process of scanning the value that user inputs into application.
- In JavaScript you can configure input for HTML page using 3 techniques

a) Query String
b) Prompt()
c) Form Input Elements

Query String
- A query string is a key and value reference configured in browser URL.
- It allows the user to query any content or to input value from URL. [Address bar]

[Link]

- Query String is appended to URL using "? and &".

[Link]

- JavaScript can access querystring by using "[Link]"

Note: You need string handling methods to manipulate a string.

substring() : It can read specific portion of string from given index.

indexOf() : It is used to find the character in a string return its index.
If char is not found it returns -1.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function bodyload(){
str = [Link];
[Link]("p").innerHTML = "You are searching for :" +
[Link]([Link]("=")+1);
}
</script>
</head>
<body onload="bodyload()">
<p></p>
</body>
</html>

prompt()
- It is an input box that pops-up in browser window, from where user can input a value.
- prompt() will return following
null : on cancel
" " [empty string] : on ok without value
string : on ok with value

Syntax:
prompt("Your Message", "default_value_optional");

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function bodyload(){
str = prompt("Your Name","eg:name max 10 chars");
if(str==null){
alert("Input Canceled");
} else if(str==""){
alert("Please provide a name");
} else {
[Link]("p").innerHTML = "Hello ! " + str;
}
}
</script>
</head>
<body onload="bodyload()">
<p></p>
</body>
</html>

Form Input Examples

Sudhakar Sharma

Jul 27, 2023

Input Techniques
- Query String
- Prompt()
Form Elements for Input
- HTML form provides various input elements, from where user can input a value.

Ex: Inox Movies

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inox Movies</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<script type="text/javascript">
function BookClick(){
[Link]("btnContainer").[Link] = "none";
[Link]("summaryContainer").[Link] = "block";

[Link]("lblMovie").innerHTML =
[Link]("optMovie").value;
[Link]("lblCinema").innerHTML =
[Link]("optCinema").value;
[Link]("lblDate").innerHTML =
[Link]("optDate").value;
[Link]("lblTime").innerHTML =
[Link]("optTime").value;
[Link]("lblSeats").innerHTML =
[Link]("optSeats").value;

movieName = [Link]("optMovie").value;
imgPoster = [Link]("imgPoster");

if(movieName=="Oppenheimer") {
[Link] = "../public/images/[Link]";
} else {
[Link] = "../public/images/[Link]";
}
}
function ModifyClick(){
[Link]("btnBook").innerHTML="Update";
[Link]("btnBook").className = "btn btn-warning";
}
</script>
</head>
<body class="container-fluid">
<div class="mt-3" id="btnContainer">
<button data-bs-toggle="modal" data-bs-target="#book" class="btn btn-danger">Quick
Booking</button>
</div>
<div class="modal fade" id="book">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h4>Quick Booking</h4>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="p-2 d-flex justify-content-between">
<div>
<select class="form-select" id="optMovie">
<option>Select Movie</option>
<option>Oppenheimer</option>
<option>Barbie</option>
</select>
</div>
<div>
<select class="form-select" id="optCinema">
<option>Select Cinema</option>
<option>B'Hills</option>
<option>Ameerpet</option>
</select>
</div>
<div>
<select class="form-select" id="optDate">
<option>Select Date</option>
<option>TODAY 27 July</option>
<option>TOMORROW 28 July</option>
</select>
</div>
<div>
<select class="form-select" id="optTime">
<option>Select Time</option>
<option>10:30 AM</option>
<option>11:00 PM</option>
</select>
</div>
<div>
<select class="form-select" id="optSeats">
<option>Select Seats</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div>
<button id="btnBook" onclick="BookClick()" data-bs-dismiss="modal" class="btn btn-
danger">Book</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-25 mt-4" id="summaryContainer" style="display:none">
<h3 class="bg-dark text-white text-center">Booking Summary</h3>
<img width="200" height="200" id="imgPoster" border="1">
<button data-bs-toggle="modal" data-bs-target="#book" class="btn btn-link"
onclick="ModifyClick()">Modify Booking</button>
<dl class="row">
<dt class="col-2">Movie</dt>
<dd class="col-10" id="lblMovie"></dd>
<dt class="col-2">Cinema</dt>
<dd class="col-10" id="lblCinema"></dd>
<dt class="col-2">Date</dt>
<dd class="col-10" id="lblDate"></dd>
<dt class="col-2">Time</dt>
<dd class="col-10" id="lblTime"></dd>
<dt class="col-2">Seats</dt>
<dd class="col-10" id="lblSeats"></dd>
</dl>
</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Ex:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Input</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<script type="text/javascript">
function RegisterClick(){
[Link]("btnContainer").[Link] = "none";
[Link]("detailsContainer").[Link] = "block";

[Link]("lblName").innerHTML =
[Link]("txtName").value;
[Link]("lblPrice").innerHTML =
[Link]("txtPrice").value;
[Link]("lblCity").innerHTML =
[Link]("optCity").value;
stockCheckBox = [Link]("chkStock");
stockStatus = "";

if([Link]) {
stockStatus = "Available";
} else {
stockStatus = "Out of Stock";
}

[Link]("lblStock").innerHTML = stockStatus;
}
</script>
</head>
<body class="container-fluid">
<div class="mt-3" id="btnContainer">
<button data-bs-target="#register" data-bs-toggle="modal" class="btn btn-success">Add
Product</button>
</div>
<div class="modal fade" id="register">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h3>Register Product</h3>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<dl>
<dt>Name</dt>
<dd><input class="form-control" type="text" id="txtName"></dd>
<dt>Price</dt>
<dd><input type="number" id="txtPrice" class="form-control"></dd>
<dt>Stock</dt>
<dd class="form-switch">
<input type="checkbox" id="chkStock" class="form-check-input"> <label class="form-
check-label"> Available </label>
</dd>
<dt>Shipped To</dt>
<dd>
<select id="optCity" class="form-select">
<option>Delhi</option>
<option>Hyderabad</option>
</select>
</dd>
</dl>
</div>
<div class="modal-footer">
<button onclick="RegisterClick()" data-bs-dismiss="modal" class="btn btn-
primary">Register</button>
<button data-bs-dismiss="modal" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</div>
<div id="detailsContainer" style="display: none;">
<h3>Product Details</h3>
<table class="table table-hover table-dark w-25">
<tr>
<td>Name</td>
<td id="lblName"></td>
</tr>
<tr>
<td>Price</td>
<td id="lblPrice"></td>
</tr>
<tr>
<td>Stock</td>
<td id="lblStock"></td>
</tr>
<tr>
<td>Shipped To</td>
<td id="lblCity"></td>
</tr>
</table>
<div>
<button data-bs-target="#register" data-bs-toggle="modal" class="btn
btn-link">Modify</button>
</div>
</div>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

JavaScript Variables

Sudhakar Sharma

Jul 28, 2023

JavaScript Language Basics

[with new features from ES6+]
1. Variables
2. Data Types
3. Operators
4. Statements
5. Functions

Variables
- Variables are storage locations in memory, where you can store a value and use it as a part of any
expression.
- You can reuse a value by storing it in variable.

Ex: Without a Variable

Ex: With Variable

userName => is a variable

Variable Configuration:
-------------------------------
- Every variable configuration comprises of 3 phases
a) Declaration
b) Assignment
c) Initialization
- Declaration is configuring variable reference name with set of rules.

var userName;
var price;

- Assignment is the process of configuring a value into variable after the declaration.

userName = "John";
price = 3000;

- Initialization is the process of configuring a value into variable at the time of declaration.

var userName = "John";

var price = 3000;

- Declaring variable is not mandatory in JavaScript if it is not in strict mode.

- Declaring variable is mandatory if JavaScript is in strict mode.

- Variables are declared in JavaScript by using following keywords

var, let, const

What is var ?
- It configure a function scope variable.
- You can declare in any block of a function and can access from any another block in the function.
- It allows declaring, assignment and initialization.

Ex:
<script>
"use strict";
function f1()
{
var x; // declaring
x = 10; // assignment
if(x==10)
{
var y = 20; // initialization
}
[Link]("x=" + x + "<br>" + "y=" + y);
}
f1();
</script>

- It allows shadowing.
- Shadowing is the prcoess of declaring or initializing same name identifier within the scope.

{
var y = 10; // initialization
y = 20; // assignment
y = 30; // assignment
var y = 40; // shadowing
}

Ex:
<script>
"use strict";
function f1()
{
var x; // declaring
x = 10; // assignment
if(x==10)
{
var y = 20; // initialization
y = 30; // assignment
var y = 40; // shadowing
}
[Link]("x=" + x + "<br>" + "y=" + y);
}
f1();
</script>

- It allows hoisting a variable.

- Hoisting allows to use and declare or initialize a variable.
- There is no order dependency for declaring and accessing.

x = 10;
[Link]("X=" + x);
var x; // hoisting

EX:
<script>
"use strict";
function f1()
{
x = 10;
[Link]("x=" + x);
var x; // hoisting
}
f1();
</script>

What is let ?
- It configures a block scope variable.
- It is accessible in the block where it is configured and to its inner blocks.
- It supports declaring, assignment and initialization.

Ex:
<script>
"use strict";
function f1()
{
let x;
x = 10;
if(x==10)
{
let y = 20;
[Link]("x=" + x + "<br>" + "y=" + y);
}

}
f1();
</script>

- It will not support shadowing and hoisting.

What is const?
- It configures a block scope variable.
- It will allow only initialization.
- It will not allow declaring and assignment.

const price; // invalid

price=20000; // invalid

const price=30000; // valid

price=40000; // invalid

- It will not allow shadowing and hoisting.

What is Global Scope for variable?

- A global scope allows to access variable from any function.
- The scope outside function is considered as global.

Ex:
<script>
"use strict";
const x=50;
function f1()
{

Data Type in JavaScript

Sudhakar Sharma

Jul 29, 2023

FAQ: Can we define a global variable by declaring or initializing within function?

Ans: Yes. By declaring variable with "window" object. It is available only when JavaScript is used to
HTML.

Syntax:
[Link] = value;

Ex:
<script>
"use strict";
function f1()
{
window.x = 30;
[Link]("x in function-1 :" + x + "<br>");
}
function f2()
{
[Link]("x in function-2 :" + x);
}
f1();
f2();
</script>

Variable Naming:
-----------------------
- Name can't start with number.
- Name can be alpha numeric with "_" as special char.
- It can start with alphabet or _ .
- "_" is not recommended in production.
- "_" specifies that it requires further implementation.

var 2023 = "Available"; // invalid

var _2023; // valid
var Y2023; // valid
var Y 2023; // invalid
var Y.2023; // invalid
var Y_2023; // valid

- Name can't be more that 255 chars long.

- Name can't be a keyword of JavaScript.

var for; // invalid

var yeild; // invalid
var class; // invalid
var string; // invalid
var object; // invalid

- Name must speak what it is.

var employeeDetails;
var _productName;

FAQ's:
1. What is the result of
var x, y, z = 10;
A:
x = undefined
y = undefined
z = 10

2. How to initialize all variables with single value?

A.
var x = y = z = 10;

3. How to initialize all variable with different values?

A.
var x=10, y=20, z=30;

ES6+ version allows destructuring of values.

var [x, y, z] = 10; // invalid

var [x, y, z] = [10,20,30] // valid

var [x, y, z] = [10]; // x=10, y=undefined, z=undefined

var [x, y, z] = [10, , 30] // x = 10, y=undefined, z=30

Data Types
---------------
- JavaScript is not a strongly typed language.
- There is no restriction for value type in memory.
- JavaScript is implicitly typed language.
var x = 10; x is number
x = "A"; x is string
x = true; x is boolean

- Data type defines the data structure [DS]

- Data type is about the complete structure of data, which is stored in variable.
- JavaScript data type can be
1. Primitive Type
2. Non Primitive Type

Primitive Types
- They are stored in memory stack. [ LIFO : Last-In-First-Out ]
- They are immutable.
- They have a fixed range for values.
- JavaScript primitive types are

1. number
2. string
3. boolean
4. null
5. undefined
6. symbol

Number Type
- JavaScript number type can handle
Signed Integer - 10
Unsigned Integer 10
Float Point 45.23
Double 345.33, 34.456, 349.34
Decimal 4500.22, 45.3456, 4.78863, [29 decimal places]
Exponent 2e3 [ 2 x 10 (3)] = 2000
Binary 0b1010
Hexa 0xf011
Octa 0o467
Bigint 2n

Syntax:
var x = 2e3;
var x = 0b1010;
var x = 0o1010;

- In JavaScript with HTML every input value in considered as a string.

- You have to convert a string into number by using the parsing methods
a) parseInt()
b) parseFloat()
Ex:
<script>
var age = parseInt(prompt("Enter Your Age"));
[Link]("You will be " + (age+1) + " Next year");
</script>

EX:
<script>
var rate = parseFloat(prompt("Enter Interest Rate"));
[Link]("Your interest rate is increase by 1 =" + (rate+1));
</script>

- You can validate a number by using "isNaN()"

- It returns "true" if input value is not a number.

Ex:
<script>
var rate = parseFloat(prompt("Enter Interest Rate"));
if(isNaN(rate)){
[Link]("Please Enter a Number");
} else {
[Link]("Your interest rate is increase by 1 =" + (rate+1));
}
</script>

Number Type

Sudhakar Sharma

Jul 31, 2023

Number Type
- Convert string into number
parseInt()
parseFloat()
- Validating Number
isNaN()

Manipulating Numbers & Building Expression

- JavaScript provides "Math" object, which comprises of various methods that are used for
manipulating number.
[Link]
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
[Link]() etc...
- To build any mathematical expression you need JavaScript arithematic operators

+ Addition
- Substraction
* Multiplication
/ Division
** Exponent
% Modulus
++ Increment
-- Decrement

- Exponent "**" is new from ES5+

2**3 8

- Increment & Decrement

Post Increment => It assigns a value and then increments by 1

var x = 10;
var y = x++; => x=11, y=10 [x=x + 1]

Pre Increment => It increments by 1 and then assign

var x= 10;
var y = ++x; => x=11, y=11

Post Decrement
var x = 10;
var y = x--; => x=9, y=10

Pre Decrement
var x = 10;
var y = --x; => x = 9, y=9

- You can use Math object functions for handling pre-defined expressions

[Link](2,3) => 8

Ex: EMI Calculator

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EMI Calculator</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<script type="text/javascript">
function AmountChange(){
[Link]("txtAmount").value =
[Link]("amountRange").value;
}
function YearChange(){
[Link]("txtYears").value = [Link]("yearRange").value;
}
function RateChange(){
[Link]("txtRate").value = [Link]("rateRange").value;
}
function CalculateClick(){
var P = parseInt([Link]("txtAmount").value);
var R = parseFloat([Link]("txtRate").value)/12/100;
var N = parseInt([Link]("txtYears").value)*12;
var EMI = P * R * [Link](1+R,N)/[Link](1+R,(N-1));
[Link]("msg").innerHTML = "Your Monthly Installment is <b>₹" +
[Link](EMI) + " </b>for your loan amount ₹ " + P;
}
</script>

</head>
<body class="container-fluid">
<div class="border border-2 p-3 mt-3">
<h3>Personal Loan EMI Calculator</h3>
<div class="row mt-4 mb-3">
<div class="col">
Amount you need ₹ <input type="text" id="txtAmount">
</div>
<div class="col">
for <input type="text" size="4" id="txtYears"> years
</div>
<div class="col">
Interest rate <input type="text" size="4" id="txtRate"> %
</div>
</div>
<div class="row mt-4 mb-3">
<div class="col">
<input type="range" onchange="AmountChange()" class="form-range" id="amountRange"
min="10000" max="500000" value="10000">
<div class="d-flex justify-content-between">
<span>₹ 10,000</span>
<span>₹ 5,00,00</span>
</div>
</div>
<div class="col">
<input type="range" onchange="YearChange()" min="1" class="form-range" id="yearRange"
max="5" value="1">
<div class="d-flex justify-content-between">
<span>1</span>
<span>5</span>
</div>
</div>
<div class="col">
<input type="range" onchange="RateChange()" min="10.43" class="form-range"
id="rateRange" step="0.01" max="18.43" value="10.43">
<div class="d-flex justify-content-between">
<span>10.43%</span>
<span>18.43%</span>
</div>
</div>
</div>
<div class="mt-4 row mb-4">
<div class="col text-end">
<button onclick="CalculateClick()" class="btn btn-primary">Calculate</button>
</div>
</div>
</div>
<p id="msg" class="mt-4 text-center"></p>
</body>
</html>

TASK: Create BMI Calculator

String Type

Sudhakar Sharma

Aug 1, 2023

String Types
- String is a literal with group of characters enclosed in
a) dobule quotes " "
b) single quotes ' '
c) back ticks ` `

- Single and double quotes are used to configure outer and inner strings.

Syntax:
var link = "<a href='[Link]'> Home </a>";
var link = '<a href="[Link]"> Home </a>';

- Single and double quote requires lot of concatenation with dynamic values.

Ex:
<script>
var userName = prompt("Enter Name");
var age = parseInt(prompt("Enter Age"));
var msg1 = "Hello !" + " " + userName + " " + "you will be" + " " + (age+1) + " " + "next year";
[Link](msg1);
</script>

- JavaScript ES5+ version introduced backtick, which configure a string with embedded expression.
- You can use a data binding expression "${ }" with backticks.
- Data binding expression is not allowed with single and double quotes.

Syntax:
`your string ${ expression } your string`;

Ex:
<script>
var userName = prompt("Enter Name");
var age = parseInt(prompt("Enter Age"));
var msg1 = "Hello !" + " " + userName + " " + "you will be" + " " + (age+1) + " " + "next year<br>";
var msg2 = `Hello ! ${userName} you will be ${(age+1)} next year.`;
[Link](msg1);
[Link](msg2);
</script>

- Several string characters are non-printable, to print the non-printable chars you need escape
sequence character " \ ".

\n line break console, alert, confirm

\t tab space
\v vertical space
\b backspace

Ex:
<script>
var path = "\"D:\\project\\images\\[Link]\"";
[Link](path);
</script>

- JavaScript provides various methods for formatting a string dynamically, format includes font, style
and effects.

fontsize() sets char size from 1 to 7

fontcolor() sets the text color
bold()
italics()
sup()
sub()
strike()
toUpperCase()
toLowerCase() etc..

Note: String formatting methods are not suitable for RC data type elements.

[Link]("p").innerHTML = "Hello".bold().italics();

<b><i>Hello</i></b>

[Link]("textBox").value = "Hello".bold()

Ex:
<script>
var msg = "Welcome to JavaScript";
[Link]([Link]('red').fontsize(6).bold().italics());
</script>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function ChangeCase(){
var userName = [Link]("txtName").value;
[Link]("txtName").value = [Link]();
}
</script>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd>
<input type="text" onblur="ChangeCase()" id="txtName" placeholder="Name in Block
Letters">
</dd>
</dl>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function BoldClick(){
[Link]("msg").innerHTML = "Welcome to JavaScript".bold();
}
function ItalicClick(){
[Link]("msg").innerHTML = "Welcome to JavaScript".italics();
}
</script>
</head>
<body>
<div>
<button onclick="BoldClick()">B</button>
<button onclick="ItalicClick()">I</button>
<button>Strike</button>
</div>
<p id="msg">Welcome to JavaScript</p>
</body>
</html>

- JavaScript provides various methods for manipulating string

1. length : It returns the total count of chars in a string.

2. charAt() : It returns the character at specified index.
3. charCodeAt() : It returns the character code defined at specified index.

Syntax:
var str = "Welcome";
[Link]; => 7
[Link](0); => W
[Link](0); => 86 [A = 65, Z = 90]

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function VerifyName(){
var userName = [Link]("txtName").value;
var nameError = [Link]("nameError");
if([Link]==0){
[Link] = "User Name Required".fontcolor('red');
} else {
if([Link](0)=="A"){
[Link] = "";
} else {
[Link] = "Name must start with 'A' ".fontcolor('gold');
}
}
}
</script>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text" onblur="VerifyName()" id="txtName"></dd>
<dd id="nameError"></dd>
</dl>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function VerifyName(){
var userName = [Link]("txtName").value;
var nameError = [Link]("nameError");
if([Link]==0){
[Link] = "User Name Required".fontcolor('red');
} else {
if([Link](0)>=65 && [Link](0)<=90){
[Link] = "";
} else {
[Link] = "Name must start with uppercase letter".fontcolor('red');
}
}
}
</script>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text" onblur="VerifyName()" id="txtName"></dd>
<dd id="nameError"></dd>
</dl>
</body>
</html>

String Handling Methods

Sudhakar Sharma

Aug 2, 2023

JavaScript String Handling

1. length
2. charAt()
3. charCodeAt()
4. indexOf() : It returns the index number of given character in string.
It returns the first occurance index number.

Syntax:
var str = "Welcome";
[Link]("e"); // 1
[Link]("a"); // -1

5. lastIndexOf() : It returns the last occurance index number of a character.

[Link]("e"); // 6

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String</title>
<script type="text/javascript">
function VerifyEmail(){
var email = [Link]("txtEmail").value;
var emailError = [Link]("emailError");
var atPos = [Link]("@");
var dotPos = [Link](".");
if( (atPos<2) || (dotPos-atPos)<4) {
[Link] = "Invalid Email".fontcolor('red');
} else {
[Link] = "";
}
}
</script>
</head>
<body>
<dl>
<dt>Your Email</dt>
<dd><input type="text" id="txtEmail" onblur="VerifyEmail()"></dd>
<dd id="emailError"></dd>
</dl>
</body>
</html>

6. startsWith() : It returns boolean true if string starts with specified char(s).

7. endsWith() : It returns true if string ends with specified char(s).

Syntax:
var str = "Welcome";
[Link]("w"); // false
[Link]("e"); // true

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function VerifyCard(){
var card = [Link]("txtCard").value;
var imgCard = [Link]("imgCard");
if([Link]("4455")) {
[Link] = "../public/images/[Link]";
} else {
[Link] = "../public/images/[Link]";
}
}
function VerifySkype(){
var skype = [Link]("txtSkype").value;
var skypeError = [Link]("skypeError");
if([Link]("[Link]")){
[Link] = "";
} else {
[Link] = "Invalid Skype ID".fontcolor('red');
}
}
</script>
</head>
<body>
<dl>
<dt>Your Card Number</dt>
<dd>
<input onblur="VerifyCard()" type="text" id="txtCard"> <img id="imgCard" width="50"
height="18">
</dd>
<dt>Your Skype Id</dt>
<dd>
<input onblur="VerifySkype()" type="text" id="txtSkype"> <span id="skypeError"></span>
</dd>
</dl>
</body>
</html>

8. slice() : It returns the chars between specified index.

9. substr() : It returns the specified number of chars from given index.

10. substring() : It returns the chars between specified index and it is

bi-directional in access.

FAQ: What is difference between slice, substr & substring?

Ans:
slice : It uses start index and end index.
End index value must be greater than start index.
You can slice backward.

Syntax: [Link](startIndex, endIndex);

[Link](startIndex); // reads upto end

substr : It uses start index and count of chars to read from given index.

Syntax: [Link](startIndex, count);

[Link](startIndex); // reads upto end

substring : It uses start and end index.

End index can be backward.

Syntax: [Link](startIndex, endIndex);

[Link](startIndex); // reads upto end
[Link](startIndex, 0); // read backward

Ex:
var viewUrl = "[Link]
var videoCode= ?

Ex:
var email = "john_nit2023@[Link]";

var Id = ?
var domain = ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function GetDetails(){
var email = [Link]("txtEmail").value;
var atPos = [Link]("@");
var id = [Link](0,atPos);
var domain = [Link](atPos+1);
[Link](`
Your Email : ${email} <br>
Your Id : ${id} <br>
Registered At : ${domain}
`);
}
</script>
</head>
<body>
<fieldset>
<legend>Your Email</legend>
<input type="text" id="txtEmail" onblur="GetDetails()">
</fieldset>
</body>
</html>

11. split() : It splits a string at specified character [delimeter].

It returns an array of strings.

Syntax:
var str = "john,98822294958,john@[Link]";
var [name,mobile,email] = [Link](',');
<script>
var str = "john,98822294958,john@[Link]";
var [name,mobile,email] = [Link](',');
[Link](`
Name : ${name} <br>
Mobile: ${mobile} <br>
Email : ${email}
`);
</script>

ex: split

var email = "john_nit2023@[Link]";

var [id, domain] = [Link]('@');

12. trim() : It removes the leading spaces in a string.

[space before and after string]

Syntax:
var str = " welcome ";
[Link]([Link]());

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function VerifyId(){
var userid = [Link]("txtId").value;
var error = [Link]("error");
if([Link]()=="john_nit"){
[Link] = "";
} else {
[Link] = "Invalid UserId".fontcolor('red');
}
}
</script>
</head>
<body>
<fieldset>
<legend>User Id</legend>
<input type="text" onblur="VerifyId()" id="txtId">
<div id="error"></div>
</fieldset>
</body>
</html>

String and Boolean

Sudhakar Sharma

Aug 3, 2023

slice()
substr()
substring()
trim()
split()
match()
- It is used to verify a value by matching it with regular expression.
- It returns a boolean true if value matches the given expression.

Syntax:
[Link](/regularExpression/);

Summary
- length
- charAt()
- charCodeAt()
- indexOf()
- lastIndexOf()
- startsWith()
- endsWith()
- slice()
- substr()
- substring()
- split()
- trim()
- match()

Boolean Type
- A boolean returns true or false.
- Booleans are used in decision making.
- Boolean contains the keywords "true and false".
- JavaScript boolean value can be compared with 0 and 1.
0 = false
1 = true

Syntax:
var stock = true;
if(stock==1) => not recommended => if(stock==true)
{
statement on true;
}
else
{
statement on false;
}

Syntax:
var stock = 1;
if(stock==true) { => invalid
}
else{
}

- HTML element properties that use boolean value are:

checked
selected
disabled
required
readonly

<input type="checkbox" checked> checked=true

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function SetStock(){
var stockCheckbox = [Link]("stock");
var label = [Link]("lblStock");
if([Link]==true){
[Link] = "Available";
} else {
[Link] = "Out of Stock";
}
}
function ToggleClick(){
var stockCheckbox = [Link]("stock");
[Link] = ([Link]==true)?false:true;
var label = [Link]("lblStock");
[Link] = ([Link]==true)?"Available":"Out of Stock";
}
</script>
</head>
<body>
<div>
<button onclick="ToggleClick()">Toggle</button>
</div>
<input type="checkbox" onchange="SetStock()" id="stock"> <label id="lblStock">Out of
Stock</label>
</body>
</html>

- Ternary Operator is used in decision making. [ ? : ]

(condition) ? statement on true : statement on false

if(condition)
{
statement on true;
}
else
{
statement on false;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<script>
function SortToggle(){
var button = [Link]("button");
[Link] = ([Link]=="bi bi-sort-alpha-down")?"bi bi-sort-alpha-up":"bi bi-
sort-alpha-down";
}
</script>
</head>
<body>
<button onclick="SortToggle()" class="bi bi-sort-alpha-down"></button>
</body>
</html>

Syntax:
<img src="[Link]" id="pic">
<button> Show </button>

function buttonClick(){
var pic = [Link]("pic");
[Link] = ([Link]=="none")?"block":"none";

var button = [Link]("button");

[Link] = ([Link]=="Show")?"Hide":"Show";

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<script>
function Toggle(){
var button = [Link]("button");
var pic = [Link]("pic");
[Link] = ([Link]=="bi bi-eye-fill")?"bi bi-eye-slash":"bi bi-eye-fill";
[Link] = ([Link]=="none")?"block":"none";
[Link] = ([Link]=="Hide")?"Show":"Hide";
}
</script>
</head>
<body>
<button onclick="Toggle()" class="bi bi-eye-fill"> Show </button>
<div>
<img src="../public/images/[Link]" style="display:none" width="200" height="200"
id="pic">
</div>
</body>
</html>

null | undefined | symbol

Null, Undefined, Symbol and Non Primitive Types

Sudhakar Sharma
•

Aug 4, 2023

Primitive Data types

- Number
- String
- Boolean

BigInt
- It is a new data type for large integer values.
- Large intergers have memory issues.
- E5+ version introduced a new way of configuring large integers called BigInt.
- You can configure Large Integers by using "n" as suffix or by using
"[Link]-SAFE-INTEGER()

Symbol
- It configures a hidden key for object.
- Key is ignored over iterations and other collection operations. But it is available to handle
individually.

Syntax:
var Id = Symbol();

var product = {
[Id] : 1,
Name: "TV",
Price : 30400.22
}

for(var key in product)

{
[Link](`${key} <br>`);
}
[Link](`Product Id=${product[Id]}`);

Ex: Hidden Field in Form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h2>Edit Your Details</h2>
<dl>
<dd><input type="hidden" name="UserId" value="john_nit"></dd>
<dt>User Name</dt>
<dd><input type="text" value="John" name="UserName"></dd>
<dt>Age</dt>
<dd><input type="number" value="22" name="Age"></dd>
</dl>
<button>Save</button>
</form>
</body>
</html>

Undefined
- It configures that a variable reference is defined but value is not defined.
- Undefined is the type configured for variable at compile time.

Syntax:
var x;
[Link]("x=" + x); x = undefined

- You can verify value by using the keyword "undefined".

Bad:
if(x==undefined)
{
// please provide a value;
}
else
{
// print the value;
}
Good:
if(x) {
// defined;
} else {
// undefined;
}

EX:1
<script>
var Name = "Samsung TV";
var Price;
if(Price){
[Link](`Name=${Name}<br>Price=${Price}`);
} else {
[Link](`Name=${Name}`);
}
</script>

Ex2:
<script>
var Name = "Samsung TV";
var Price;
if(Price==undefined){
[Link](`Name=${Name}`);
} else {
[Link](`Name=${Name}<br>Price=${Price}`);
}
</script>

Null
- Null is a value returned when value is not supplied into variable during runtime of application.
- You can verify Null by usig "null" keyword.

Ex:
<script>
var Name = "Samsung TV";
var Price = prompt("Enter Price");
if(Price==null){
[Link](`Name=${Name}`);
}
else if (Price=="") {
[Link](`Name=${Name}`);
}
else {
[Link](`Name=${Name}<br>Price=${Price}`);
}
</script>

Summary
- Number
- String
- Boolean
- Null
- Undefined
- BigInt
- Symbol

Non - Primitive Types

- These are mutable types.
- They don't have fixed range for values.
- The value range varies according to memory available.
- They use memory heap of browser, not memory stack.
- Heap refers to memory which allows random access.
- JavaScript Non-Primitive Types
a) Array
b) Object
c) Map

Array
- Arrays are introduced into computer programming to reduce overhead and complexity.
- Arrays will reduce overhead by storing values in sequential order.
- Arrays reduce complexity by storing multiple values under one reference name.
- JavaScript array can handle various types of values.
[Few technologies restrict array to similar type: c, c++, java, c#]

Array Configuration

Sudhakar Sharma

Aug 5, 2023

Configuring Array:
- It comprises of 2 phases
a) Declaring Array
b) Intializing or Assigning memory for Array

- Declaring Array is same as other variable types, you can use var, let & const.

var products;
let categories;
const users;

- Array memory is initialized or assigned by using 2 techniques

a) [ ] Array meta character
b) Array() Array constructor

var products = [ ]; or var products;

products = [ ];

var products = new Array() or var products;

products = new Array();

Note: "new" is dynamic memory allocation operator.

FAQ: What is difference between "[ ]" & Array()?

Ans:
[ ] configures static memory, the memory allocated will continue across multiple
requests.

Array() configures dynamic memory, the memory allocated will be discreet. It is

newly allocated every time when requested.

Storing Data into Array:

- You can initialize values into array meta character or Array() constructor.

var values = [10, "A", true];

var values = new Array(10, "A", true);

- You can assign value into array memory by the reference of property.
- Property is a string type that maps the Index number.

var values = [ ];
values[0] = 10; => 0 & 1 are properties [string type]
values["1"] = "A";

Ex:
<script>
var values = [10, "A", true];
values[0] = 20;
values["1"] = "B";
for(var property in values){
[Link](`${property}[${typeof property}] : ${values[property]}-${typeof
values[property]}<br>`);
}
</script>

- You can store any type of data in array

a) Primitive
b) Non-Primitive
c) Function

Ex:
<script>
var values = [1, "TV", true, ["Delhi", "Hyd"], prompt("Enter Price"), function()
{[Link]("Hello from Array")}];
[Link](`
Id : ${values[0]} <br>
Name: ${values["1"]} <br>
Stock: ${values[2]} <br>
Cities : ${values[3][0]}, ${values[3][1]} <br>
Price : ${parseFloat(values[4])} <br>
Rating : ${values[6]} <br>
`);
values[5]();
</script>

Ex:
<script>
var values = [1, [["Electronics","Fashion"], ["Delhi", "Hyd"]]];
[Link](values[1][1][1]);
</script>

Ex:
<script>
var values = [1, [["Electronics","Fashion"], ["Delhi", "Hyd"]]];
values[1][1][1] = "Hyderabad";
values[1][1][2] = "Chennai";
[Link](values[1][1][1] + "<br>" + values[1][1][2]);
</script>

Ex:
<script>
var values = [1, [["Electronics","Fashion"], ["Delhi", "Hyd"], [true, function(){[Link]("Hello
Array")}]]];
values[1][1][1] = "Hyderabad";
values[1][1][2] = "Chennai";
[Link](values[1][1][1] + "<br>" + values[1][1][2] + "<br>");
values[1][2][1]();

</script>

Array Methods & Property [Members]

[ Array Manipulations ]
1. Array Destructuring
- It is new from E5+ version.
- It allows to destructure array memory and split the values into individual references.
- You can avoid using the property or index reference.

Syntax:
var values = [10, 20];
var [a, b] = values; => a = 10, b = 20

Ex:
<script>
var values = [1, "TV", 34000.44, true, ["Delhi", "Hyd"], function(){[Link]("Hello World")}];
var [id, name, price, stock, citites, hello] = values;

[Link](`
Id=${id} <br>
Name=${name} <br>
Stock=${stock} <br>
Cities=${citites} <br>
Price=${price} <br>
`);
hello();

</script>

2. length : It returns the total count of elements in array.

var values = [10, 20, 30];

[Link];

Array Methods

Sudhakar Sharma

Aug 7, 2023

Array Manipulations

Read elements from array:

toString() It returns all array elements separated with "," delimeter.

join() It returns all array element separated with custom delimeter.
map() It is an iterator that returns all elements from array and
presents in UI.
forEach() It returns all array elements with their index number.
slice() It returns elements between specified index.
find() It returns the first occurance element that matches given
condition.
filter() It returns all occurances of elements that match given condition.

Ex-1:

Ex-2:

Ex-3:

Ex-4:

Ex-5:

Ex-6:

</script>

Dynamically Creating HTML element and adding to Page:

1. Create a new element dynamically using

[Link]("nodeName")
2. Configure properties for element
id, name, className, src, href

3. Add element into page by using the method

appendChild()

Ex: Creating and adding image into page

var pic = [Link]("img");

[Link] = "100";
[Link]= "100";
[Link]="../public/images/[Link]";

[Link]("div").appendChild(pic);

var contact = [Link]("button");

[Link] = "Contact";
[Link]("nav").appendChild(contact);

var pic = [Link]("img");

[Link] = "../public/images/[Link]";
[Link] = "200";
[Link] = "300";

var caption = [Link]("figcaption");

[Link] = "Women's Fasion";

[Link]("figure").appendChild(pic);
[Link]("figure").appendChild(caption);
}
</script>
</head>
<body onload="bodyload()">
<h3>Shopper</h3>
<nav></nav>
<figure>

</figure>
</body>
</html>

Task:
function bodyload(){
var input = [Link]("input");
[Link] = "button";
[Link] = "Register";
[Link]("container").appendChild(input);
}

<div id="container"> => <input type="button" value="register">

</div>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
var input = [Link]("input");
[Link] = "button";
[Link] = "Register";
[Link]("nav").appendChild(input);
}
</script>
</head>
<body onload="bodyload()">
<h3>Shopper</h3>
<nav></nav>

</body>
</html>

Ex: Create a row and cell dynamically

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
var tr = [Link]("tr");
var td = [Link]("td");
[Link] = "Samsung TV";
[Link](td);
[Link]("tbody").appendChild(tr);
}
</script>
</head>
<body onload="bodyload()">
<table border="1" width="200">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
var ol = [Link]("ol");
var item1 = [Link]("li");
var item2 = [Link]("li");
var item3 = [Link]("li");
[Link] = "HTML";
[Link] = "CSS";
[Link] = "JavaScript";
[Link](item1);
[Link](item2);
[Link](item3);
[Link]("div").appendChild(ol);
}
</script>
</head>
<body onload="bodyload()">
<div>

</div>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var topics = ["HTML", "CSS", "Bootstrap", "JavaScript", "NodeJS"];
function bodyload(){
var ol = [Link]("ol");
[Link](function(value){
var li = [Link]("li");
[Link] = value;
[Link](li);
})
[Link]("div").appendChild(ol);
}
</script>
</head>
<body onload="bodyload()">
<div>

</div>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var topics = ["Choose a Course","HTML", "CSS", "Bootstrap", "JavaScript", "NodeJS"];
function bodyload(){
var select = [Link]("select");
[Link](function(value){
var option = [Link]("option");
[Link] = value;
[Link] = value;
[Link](option);
})
[Link]("div").appendChild(select);
}
</script>
</head>
<body onload="bodyload()">
<div>

</div>
</body>
</html>

Task:
1. Create a Table with rows for every course.
2. Create a Hyperlink for course and link must be added into ordered list.
3. Create a list of checkboxes for every course.

Array Manipulations with Examples

Sudhakar Sharma

Aug 8, 2023

- To read elements from array you can also use loops and external iteration statements.
- Loops are created by using for, while, do while statements.

Syntax:
for(intialization; condition; counter)
{

Ex:
var categories = ["All", "Electronics", "Footwear"];

for(var i=0; i<[Link]; i++)

{
[Link](categories[i] + "<br>");
}

Ex:
for(var property in categories)
{
[Link](property + "<br>");
}
0
1
2

for(var value of categories)

{
[Link](value + "<br>");
}

All
Electronics
Footwear

for(var property in categories)

{
[Link](`[${property}] : ${categories[property]} <br>`);
}

[0] : All
[1] : Electronics
[2] : Footwear

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var categories = ["All", "Electronics", "Footwear"];
function bodyload(){
[Link](function(category){
var li = [Link]("li");
var input = [Link]("input");
[Link] = "checkbox";
var label = [Link]("label");
[Link] = category;

[Link](input);
[Link](label);

[Link]("ul").appendChild(li);
})
}
</script>
<style>
ul {
list-style: none;
}
</style>
</head>
<body onload="bodyload()">
<ul>

</ul>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var categories = ["All", "Electronics", "Footwear"];
function bodyload(){
[Link](function(category){
var li = [Link]("li");
[Link] = `<input type="checkbox"><label>${category}</label>`;
[Link]("ul").appendChild(li);
})
}
</script>
<style>
ul {
list-style: none;
}
</style>
</head>
<body onload="bodyload()">
<ul>

</ul>
</body>
</html>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var categories = ["All", "Electronics", "Footwear"];
function bodyload(){
[Link](function(category){
var li = [Link]("li");
[Link] = `<input type="checkbox"><label>${category}</label>`;
[Link]("ul").appendChild(li);

var olLi = [Link]("li");

[Link] = `<a href="#">${category}</a>`;

[Link]("ol").appendChild(olLi);
})
}
</script>
<style>
ul,ol {
list-style: none;
}
</style>
</head>
<body onload="bodyload()">
<ul>

</ul>
<ol>

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

Adding Element into Array

push() It adds new element(s) as last element i.e towards end of list.
unshift() It adds new element(s) as first element.
splice() It adds new element(s) at specific position.

Syntax:
[Link]("item1", "item2", ...);
[Link]("item1", "item2",...);
[Link](indexNumber, deleteCount, "new Items...");
[Link](2,0, "item1", "item2", ...);

Ex:
[Link](1,0,"Kids Fashion","Women Fashion");

Removing Element from Array

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

pop() It removes and returns the last element.

shift() It removes and returns the first element.
splice() It removes and returns specific elements.

Syntax:
[Link]()
[Link]()
[Link](index, deleteCount)

FAQ: How to remove all items from array? How to empty array?
Ans :
collection = [ ];
[Link] = 0;

Sorting Array Elements

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

sort() : It sorts in ascending order

reverse() : It sorts in reverse order [from bottom to top]

Syntax:
[Link]()
[Link]()

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Manipulation</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<script type="text/javascript">
var cities = ["Delhi", "Hyd", "Mumbai"];

function bodyload(){
LoadCities();
}

</select>
<label class="form-label fw-bold" id="lblCount"></label>
</div>
<div class="mt-3 p-2">
<button class="btn btn-danger" onclick="RemoveClick()"> <span class="bi
bi-trash-fill"></span> Remove</button>
<button class="btn btn-danger" onclick="ClearClick()"> <span class="bi bi-trash"></span>
Clear All</button>
</div>
</div>

</body>
</html>

JavaScript Object Type

Sudhakar Sharma

Aug 9, 2023

Object Type
- The concept of object is introduced into computer programming in early 1960's by
"Alan Kay".
- It is used to keep all related data and logic together.
- Object uses Key and Value collection.
- You can store values under the reference of keys.
- Key is string type and value can be any type.

Syntax:
var product = {
"Key" : value,
"Key" : value,
"Key" : function() { }
}
- If object comprises of only data, not any logic then it is reffered as "JSON".
- JSON is JavaScript Object Notation, It is a format for data.

Note: Web data is kept in 2 major formats

a) XML [Extensible Markup Language]
b) JSON [JavaScript Object Notation]

Syntax:
var product = {
"Name": "TV",
"Price": 45000.44,
"Stock": true,
"Cities": ["Delhi", "Hyd"],
"Rating": { "Rate": 4.2, "Count": 4500 }
}

- You can access the data with reference of key name.

[Link] => TV

- You can assign new value

[Link] = "Samsung TV";

- ES6 technique

product[Name] => Samsung TV

Ex:
<script>
var tv = {
"Name": "Samsung TV",
"Price": 45000.44,
"Stock": true,
"Cities": ["Delhi", "Hyd"],
"Rating": {"Rate":4.2, "Count": 3400}
}
[Link] = 57000.44;
[Link](`
Name=${[Link]} <br>
Price=${[Link]} <br>
Stock=${[Link]} <br>
Cities=${[Link]("/")} <br>
Rating= ${[Link]} [${[Link]}]
`);
</script>

- Object can contain logic, which is defined using function

{
Key : function() {

}
}
- You can access the members of object within object by using "this" keyword.

Ex:
<script>
var tv = {
"Name": "Samsung TV",
"Price": 45000.44,
"Qty": 0,
"Stock": true,
"Cities": ["Delhi", "Hyd"],
"Rating": {"Rate":4.2, "Count": 3400},
"Total": function(){
return [Link] * [Link];
},
"Print": function(){
[Link](`
Name=${[Link]} <br>
Price=${[Link]} <br>
Stock=${[Link]} <br>
Cities=${[Link]("/")} <br>
Rating= ${[Link]} [${[Link]}] <br>
Qty=${[Link]} <br>
Total=${[Link]()}
`);
}
}
[Link] = parseInt(prompt("Enter Quantity"));
[Link]();
</script>

Consuming JSON data and Presenting

- To consume data from any API or JSON file developers use "AJAX" calls.
[Asynchronous JavaScript And XML].
- JavaScript provides an Asynchronous function called "fetch()", which allows to read data from JSON
file.
- "fetch()" is technically a "Promise".

fetch() Initial
.then() resolved
.catch() rejected

Syntax:
fetch("path").then(function(response){}).catch(function(error){})

Ex:
1. Add a new folder into project
"data"

2. Add a new JSON file

"[Link]"

{
"Title": "realme C53 (Champion Gold, 64 GB)",
"Price": 10999,
"Rating": {"Rate":4.6, "Count":9952, "Reviews":420},
"Features":["6 GB RAM | 64 GB ROM | Expandable Upto 2 TB", "17.12 cm (6.74 inch) HD Display",
"108MP + 2MP | 8MP Front Camera","5000 mAh Battery","T612 Processor"],
"Photo": "../public/images/[Link]"
}

3. Add a HTML page

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<script type="text/javascript">
function bodyload(){
fetch("../data/[Link]")
.then(function(response){
return [Link]();
})
.then(function(product){
[Link]("prodImg").src= [Link];
[Link]("title").innerHTML = [Link];
[Link]("rating").innerHTML = `<span class="bg-success text-white p-2
rounded">${[Link]} <span class="bi bi-star-fill"></span> </span> <span class="fw-bold
ps-3">${[Link]} Ratings & ${[Link]} Reviews</span>`;
[Link](function(feature){
var li = [Link]("li");
[Link] = feature;
[Link]("ul").appendChild(li);
});
[Link]("price").innerHTML = `₹ ${[Link]}`;
})
}
</script>
</head>
<body class="container-fluid" onload="bodyload()">
<div class="row mt-4">
<div class="col-2">
<img id="prodImg" width="250">
</div>
<div class="col-8 ps-4">
<h2 id="title"></h2>
<div id="rating"></div>
<ul id="features" class="mt-4">

</ul>
</div>
<div class="col-2">
<h2 id="price"></h2>
</div>
</div>
</body>
</html>

Array of Objects and Nasa API

Sudhakar Sharma

Aug 10, 2023

JSON - JavaScript Object Notation

Fetch - Promise
Fetch Data from JSON File

Object Manipulations
-----------------------------
1. How to delete any Key from object?
A. By using delete operator.

product = {
Name: "TV",
Price: 45000.33
}
delete [Link];

2. How to check any property or key existance?

A. By using "in" operator. It returns true if key exists.
Syntax:
"Key" in objectName; => true | false

Ex:
<script>
var product = {
Name: "TV",
Price: 45000.33
}
if("Price" in product){
[Link](`Name=${[Link]}<br>Price=${[Link]}`);
} else {
[Link](`Name=${[Link]}`);
}

</script>

3. How to read all keys from object?

A. By using "for..in" statement or "[Link]()"

Syntax:
for(var key in objectName)
{
[Link](key + "<br>");
}

Ex:
<script>
fetch("../data/[Link]")
.then(function(response){
return [Link]();
})
.then(function(product){
for(var property in product){
[Link](`${property}<br>`);
}
})

</script>

Syntax:
[Link](objectName).map(function(key){
[Link](key);
})

Ex:
<script>
fetch("../data/[Link]")
.then(function(response){
return [Link]();
})
.then(function(product){
[Link](product).map(function(key){
[Link](`${key}<br>`);
})
})

</script>

4. How to know the data type of Key and Value in object?

A. By using for..in or [Link](). To know data type you have to use "typeof" operator.

Ex:
<script>
fetch("../data/[Link]")
.then(function(response){
return [Link]();
})
.then(function(product){
[Link](product).map(function(key){
[Link](`${key}:${typeof product[key]}<br>`);
})
})

</script>

5. How to know the total count of keys in object?

A.
[Link](product).length

Ex:
<script>
fetch("../data/[Link]")
.then(function(response){
return [Link]();
})
.then(function(product){
[Link](product).map(function(key){
[Link](`${key}:${typeof product[key]}<br>`);
})
[Link](`Total Number of Keys : ${[Link](product).length} `);
})

</script>
Array of Objects
- Array can configure multiple objects.
- Usually data is returned from API as Object or Array.
- Complex data is configured in the form of "Array of Objects".

Syntax:
[
{ [0] => Object
},
{ [1] => Object
}
]

Ex:
1. Add a new file into data folder
"[Link]"

[
{
"Name": "Samsung TV",
"Price": 45000.44,
"Stock": true
},
{
"Name":"Nike Casuals",
"Price": 2000.44,
"Stock": false
},
{
"Name":"Watch",
"Price": 5000.33,
"Stock":true
}
]

2. Consume and present in HTML page

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function FetchClick(){
fetch("../data/[Link]")
.then(function(res){
return [Link]();
})
.then(function(products){
[Link](function(product){
var tr = [Link]("tr");
var tdName = [Link]("td");
var tdPrice = [Link]("td");
var tdStock = [Link]("td");

[Link] = [Link];
[Link] = [Link];
[Link] = [Link];

[Link](tdName);
[Link](tdPrice);
[Link](tdStock);

[Link]("tbody").appendChild(tr);
})
})
}
</script>
</head>
<body>
<div>
<button onclick="FetchClick()">Fetch Products</button>
</div>
<br><br>
<table width="100%" border="1">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</body>
</html>
Nasa API
[Link] => provides NASA data for Application Developers => JSON Format

Ex: Table

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<script>
function FetchClick(){
fetch("[Link]
sol=1000&api_key=DEMO_KEY")
.then(function(res){
return [Link]();
})
.then(function(marsObject){
[Link](function(item){
var tr = [Link]("tr");
var tdId = [Link]("td");
var tdImage = [Link]("td");
var tdCamera = [Link]("td");
var tdRover = [Link]("td");

[Link] = [Link];
[Link] = `<a href=${item.img_src} target="_blank"><img width="200"
height="200" src=${item.img_src}></a>`;
[Link] = [Link].full_name;
[Link] = [Link];

[Link](tdId);
[Link](tdImage);
[Link](tdCamera);
[Link](tdRover);

[Link]("tbody").appendChild(tr);
})
})
}
</script>
</head>
<body class="container-fluid">
<button onclick="FetchClick()" class="btn btn-primary mt-3 mb-3">Fetch Data</button>
<table class="table table-hover">
<thead>
<tr>
<th>Photo Id</th>
<th>Preview</th>
<th>Camera Name</th>
<th>Rover Name</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</body>
</html>

Ex: Nasa Cards

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<script>
function FetchClick(){
alert("Data Fetched..");
fetch("[Link]
sol=1000&api_key=DEMO_KEY")
.then(function(res){
return [Link]();
})
.then(function(marsObject){
[Link](function(item){
var card = [Link]("div");
[Link] = "card m-2 p-2";
[Link] = "200px";
[Link] = `
<a href=${item.img_src} target="_blank"><img src=${item.img_src} class="card-img-
top" height="200"></a>
<div class="card-body">
<dl>
<dt>Photo Id</dt>
<dd>${[Link]}</dd>
<dt>Camera</dt>
<dd>${[Link].full_name}</dd>
<dt>Rover</dt>
<dd>${[Link]}</dd>
</dl>
</div>
`;
[Link]("photosContainer").appendChild(card);
})
})
}
</script>
</head>
<body class="container-fluid">
<button onclick="FetchClick()" class="btn btn-primary mt-3 mb-3">Fetch Data</button>
<div class="mt-3 d-flex flex-wrap" id="photosContainer">

</div>
</body>
</html>

Shopping Template With Fakestore API

Sudhakar Sharma

Aug 11, 2023

[Link]
API Methods:

[Link] : returns all products [ ] 20 products.

[Link] : returns specific product details based on
"id". { } one product.

..../products/categories : returns all categories list. [ ] categories.

.../products/category/electronics : returns all products belong to specific

category. [ ] products

Ex:
var products = [
{
Name:"TV",
Category: "Electronics"
},
{
Name:"Nike Casuals",
Category: "Footwear"
},
{
Name: "Mobile",
Category: "Electronics",
}
]

[Link](function(product){
return [Link]=="Electronics";
}).map(function(product){
[Link]([Link] + "<br>");
})

(or)
for(var product of products)
{
if([Link]=="Electronics")
{
[Link]([Link] + "<br>");
}
}
(or)
for(var i=0; i<[Link]; i++)
{
if(products[i].Category=="Electronics")
{
[Link](products[i].Name + "<br>");
}
}

Ex: Shopper-Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopper Template</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<script type="text/javascript">
function LoadCategories(){
fetch("[Link]
.then(function(res){
return [Link]();
})
.then(function(categories){
[Link]("all");
[Link](function(category){
var option = [Link]("option");
[Link] = [Link]();
[Link] = category;
[Link]("lstCategories").appendChild(option);
})
})
}

</main>
</section>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Shopper Template & Date Type

Sudhakar Sharma

Aug 12, 2023

Ex: Shopper-Template

[Link]= [Link];
[Link] = [Link];
[Link] = `<img src=${[Link]} width="50" height="50">`;

[Link](tdTitle);
[Link](tdImage);
[Link](tdPrice);

[Link]("tbody").appendChild(tr);
})
}
</script>
<style>
a{
color:white;
text-decoration: none;
}
</style>
</head>
<body class="container-fluid" onload="bodyload()">
<header class="d-flex justify-content-between bg-dark text-white p-2">
<div><span class="h4">Shopper</span></div>
<div>
<span class="me-2"><a href="javascript:NavClick()">Home</a></span>
<span class="me-2">Electronics</span>
<span class="me-2">Men's Clothing</span>
<span class="me-2">Women's Clothing</span>
<span class="me-2">Jewelery</span>
</div>
<div>
<span class="bi bi-search me-2"></span>
<span class="bi bi-heart me-2"></span>
<span class="bi bi-person me-2"></span>
<button onclick="ShowCart()" class="btn btn-light position-relative" data-bs-target="#cart"
data-bs-toggle="modal">
Your Cart<span class="bi bi-cart4"></span>
<span class="badge bg-danger position-absolute end-0 top-0 text-white rounded rounded-
circle" id="lblCount"></span>
</button>
<div class="modal fade" id="cart">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-primary">
<h2>Your Cart Summary</h2>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr>
<th>Title</th>
<th>Preview</th>
<th>Price</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
</header>
<section class="mt-3 row">
<nav class="col-2">
<label class="form-label fw-bold">Select Category</label>
<div>
<select onchange="CategoryChanged()" class="form-select" id="lstCategories"></select>
</div>
</nav>
<main class="col-10 d-flex flex-wrap overflow-auto" style="height: 550px;">

</main>
</section>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Map Type
- It is a key and value collection similar to object.
- The keys are of "any" type.
- The value are also "any" type.
- It provides lot of implicit methods used for manipulations.
- Hence it is faster than object. But it is schema less. [structure less]

Methods:
set() Add new key and value
get() Read a value using key.
has() To verify the availablity of key.
delete() To remove element using key
clear() To remove all keys and values
keys() It returns all keys
values() It returns all values
entries() It returns both keys and values

Syntax:
var topics = new Map();
[Link]("key", value);
[Link](key);
[Link](key);
[Link]()
[Link]
[Link]() etc...

Ex:
<script>
var topics = new Map();
[Link]("html", "It is a markup language");
[Link](2, "It configures styles");

for(var item of [Link]()){

[Link](item + "<br>");
}
</script>

Date Type
- JavaScript provides a Date() constructor to store and manipulate date type values.

Syntax:
var mfd = new Date(); => loads current date and time into memory

var mfd = new Date("yy-mm-dd hrs:min:[Link]");

- JavaScript provides various methods to present date and time value. All date and time methods
return a number.

getHours() returns hour number 0 to 23

getMinutes() returns minutes number 0 to 59
getSeconds() returns seconds number 0 to 59
getMilliSeconds() returns milliseconds 0 to 99
getDay() returns weekday number 0=Sunday
getDate() returns current date number. [1 to 31]
getMonth() returns month number [0 = January ]
getFullYear() returns full year [2023]

setHours()
setMinutes()
setSeconds()
setMilliSeconds()
setDate()
setMonth()
setFullYear()

toLocaleDateString()
toLocaleTimeString()

Ex:
<script>
var Name = "Samsung TV";
var Price = 45000.44;
var Mfd = new Date("2023-01-23 04:20:34.75");
var weekdays = ["Sunday","Monday","Tuesday", "Wed","Thu","Fri","Saturday"];
var months =
["Januay","Feb","Mar","Apr","May","June","July","August","Sept","Oct","Nov","Dec"];

[Link](7);
[Link](15);

[Link](`
Name=${Name}<br>
Price=${Price}<br>
Mfd=${weekdays[[Link]()]} ${[Link]()}, ${months[[Link]()]} $
{[Link]()}
`);
</script>

- JavaScript provides various Timer Events

a) setTimeout()
b) clearTimeout()
c) setInterval()
d) clearInterval()

- setInterval() can load a function into memory and execute the function repeatedly at regular time
intervals.
Syntax:
setInterval(function(){}, interval);

Task: Display Salutation on page in any container using date functions.

- store date and time in variable
- create a variable for hours number
- write the condition

hrs >= 0 && hrs <=12 Good Morning

hrs >12 && hrs<=16 Good Afternoon
hrs > 16 && hrs <=23 Good Evening

if()...else if()...else if()...else

- clearInterval() that removes timer function from memory.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>

Timer Events

Sudhakar Sharma

Aug 14, 2023

Ex:
<script>
var now = new Date();
var hrs = [Link]();
if(hrs>=0 && hrs<=12){
[Link]("Good Morning");
} else if(hrs>12 && hrs<=16){
[Link]("Good Afternoon");
} else if(hrs>16 && hrs<=23) {
[Link]("Good Evening");
}
</script>
Debounce

- Bouncing is the mechanism of executing specified task immediately when requested.

- All tasks are performed without any delay.
- Hence user can't see the tasks funcitoning.
- You can delay the execution of task by using Debouncing technique.
- It is implemented with "setTimeout()" function.

Syntax:
setTimeout(function(){}, interval);

- You can cancel from memory using clearTimeout().

Syntax:
clearTimeout(functionReference);

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function f1(){
[Link]("p").innerHTML = "1";
}
function f2(){
[Link]("p").innerHTML = "2";
}
function f3(){
[Link]("p").innerHTML = "3";
}
var fun1, fun2, fun3;
function bodyload(){
fun1 = setTimeout(f1,2000);
fun2 = setTimeout(f2,5000);
fun3 = setTimeout(f3,10000);
}
function CancelClick(){
clearTimeout(fun2);
}
</script>
</head>
<body onload="bodyload()">
<button onclick="CancelClick()">Cancel 2nd Message</button>
<p align="center"></p>
</body>
</html>

Ex: Spinner

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interval Demo</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<style>
@keyframes ZoomIn {
from {
width: 10px;
height: 10px;
}
to {
width: 300px;
height: 400px;
}
}
</style>
<script>
var count = 0;
function LoadingStatus(){
var img = [Link]("img");
count++;
[Link]("lblStatus").innerHTML = `${count} % <br> Loading..`;
if(count==100){
[Link]("loadingContainer").[Link] = "none";
[Link]("imageContainer").[Link] = "block";
[Link] = "ZoomIn";
[Link] = "5s";
}
}
function LoadClick(){
setInterval(LoadingStatus,100);
[Link]("buttonContainer").[Link] = "none";
[Link]("loadingContainer").[Link] = "block";

}
</script>
</head>
<body class="container-fluid d-flex justify-content-center align-items-center" style="height:100vh">
<div>
<div id="buttonContainer">
<button class="btn btn-success" onclick="LoadClick()">Load Image</button>
</div>
<div id="loadingContainer" class="text-center" style="display: none;">
<div class="spinner-border"></div>
<div id="lblStatus"></div>
</div>
<div id="imageContainer" style="display: none;">
<img src="../public/images/[Link]">
</div>
</div>
</body>
</html>

Ex: Progress Bar

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interval Demo</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
@keyframes ZoomIn {
from {
width: 10px;
height: 10px;
}
to {
width: 300px;
height: 400px;
}
}
progress {
width: 200px;
height: 30px;
}
</style>
<script>
var count = 0;
function LoadingStatus(){
var img = [Link]("img");
count++;
[Link]("progress").value = count;
[Link]("lblStatus").innerHTML = `${count} % <br> Loading..`;
if(count==100){
[Link]("loadingContainer").[Link] = "none";
[Link]("imageContainer").[Link] = "block";
[Link] = "ZoomIn";
[Link] = "5s";
}
}

function LoadClick(){
task = setInterval(LoadingStatus,100);
[Link]("buttonContainer").[Link] = "none";
[Link]("loadingContainer").[Link] = "block";

}
var task;
function PlayClick(){
task = setInterval(LoadingStatus,100);
}
function PauseClick(){
clearInterval(task);
[Link]("lblStatus").innerHTML = `${count} % <br> Paused..`;
}
</script>
</head>
<body class="container-fluid d-flex justify-content-center align-items-center" style="height:100vh">
<div>
<div id="buttonContainer">
<button class="btn btn-success" onclick="LoadClick()">Load Image</button>
</div>
<div id="loadingContainer" class="text-center" style="display: none;">
<progress min="1" max="100" value="1"></progress>
<div>
<button class="btn btn-success" onclick="PlayClick()"><span class="bi
bi-play"></span></button>
<button class="btn btn-danger" onclick="PauseClick()"><span class="bi
bi-pause"></span></button>
</div>
<div id="lblStatus"></div>
</div>
<div id="imageContainer" style="display: none;">
<img src="../public/images/[Link]">
</div>
</div>
</body>
</html>

FAQ: What is difference between Timeout and Interval ?

Ans: Timeout will remove task from memory and loads into process. It is executed only once.
Interval will keep the task in memory and loads a copy into process. It executes
repeatedly until removed from memory.

Ex: Slide Show

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Show</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<script>
var count = 0;
function LoadProduct(){
count++;
fetch(`[Link]
.then(function(res){
return [Link]();
})
.then(function(product){
[Link]("lblTitle").innerHTML = [Link];
[Link]("imgProduct").src = [Link];
})
}

JavaScript Operators

Sudhakar Sharma

Aug 16, 2023

Summary - Data Types

1. Primitive
Number
String
Boolean
Null
Undefined
Symbol
BigInt
2. Non Primitive
Array
Object
Map
3. Date Type
4. Timer Functions [Events]
5. Fetch()

JavaScript Operators
- Operator is an object that evaluates a value using any expression.
- Operators are classified into various types based on the number operands they handle.
x + y; => x, y are operands

1. Unary Operator : One operand => ++, --

2. Binary Operator : Two operands => +, - , * etc..
3. Ternary Operator : Three operands => ?:

- Operators are classified into various types based on the value they return.

1. Arithematic Operators
2. Comparision Operators
3. Assignment Operators
4. Logical Operators
5. Bitwise Operators
6. Special Operators

Arithematic Operators
+ Addition
- Substraction
* Multiplication
/ Division
% Modulus Division
** Exponent
++ Increment
-- Decrement

Note: The addition operator "+" can handle operations with string type. It is used to
concat the value.

string + string => string

string + number => string
string + boolean => string
string - string => NaN

All other arithemantic operators returns NaN when used with string.

Ex: Write a program to return all even numbers from an array.

var values = [ 3, 4, 7, 2, 6, 9];

var result = ?

Method-1:
<script>
var values = [3, 2, 4, 7, 6, 9];
[Link](function(value){
if(value%2==0) {
[Link](value + "<br>");
}
})
</script>

Method-2:
<script>
var values = [3, 2, 4, 7, 6, 9];
for(var value of values){
if(value%2==0){
[Link](value + "<br>");
}
}
</script>

Method-3

Ex: Print the total count of even numbers in a array. [Without array methods]

var values = [2, 3, 4 , 6, 7, 9 ]

Total Number of Even Numbers : 3

Ex: Write a program to print total sum of even numbers in array. [Without Array Methods]

Ex: By using Array Reduce method

Ex: Print the sum of even numbers from array using array methods.

Ex: Print sum of all odd numbers

Comparision Operators

Sudhakar Sharma

Aug 17, 2023

Comparision Operators
== Equal
=== Identical Equal [It can compare only same type values]
!== Not Equal
!=== Not Identical
> Greater than
>= Greater than or equal
< Less than
<= Less than or equal

Syntax:
var a = "10";
var b = 10;
(a==b); => true
(a===b); => false

- To handle comparision operators we need selection statements.

if, else, switch, case, default
- Selection statements are used in decision making.
- Decision making have various forms
1. Forward Jump
2. Simple Decision
3. Multiple Choices
4. Multi Level Decisions

Forward Jump:
- In this decision making statements are executed only when condition is true.
- There is no alternative.
- It moves the next only when previous is true.

Syntax:
if (condition )
{
statements on true;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var userDetails = {
"Card": "4444555566667890",
"Cvv": "4567",
"Expiry": "2024"
}
function VerifyCard(){
var card = [Link]("txtCard").value;
if(card===[Link]){
[Link]("txtCvv").disabled = false;
}
}
function VerifyCvv(){
var cvv = [Link]("txtCvv").value;
if(cvv===[Link]){
[Link]("lstExpiry").disabled = false;
}
}
function VerifyExpiry(){
var expiry = [Link]("lstExpiry").value;
if(expiry===[Link]){
[Link]("btnPay").disabled = false;
}
}
</script>
</head>
<body>
<fieldset>
<legend>Payment Details</legend>
<dl>
<dt>Card Number</dt>
<dd><input type="text" id="txtCard" onblur="VerifyCard()"></dd>
<dt>Cvv</dt>
<dd><input type="text" id="txtCvv" onblur="VerifyCvv()" size="4" disabled></dd>
<dt>Expiry</dt>
<dd>
<select id="lstExpiry" disabled onchange="VerifyExpiry()">
<option>Select Expiry</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
</select>
</dd>
</dl>
<button disabled id="btnPay">Pay</button>
</fieldset>
</body>
</html>

Ex: Hiding and Showing elements dynamically

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var userDetails = {
"Card": "4444555566667890",
"Cvv": "4567",
"Expiry": "2024"
}
function VerifyCard(){
var card = [Link]("txtCard").value;
if(card===[Link]){
[Link]("txtCvv").disabled = false;
[Link]("cvvContainer").[Link] = "block";
}
}
function VerifyCvv(){
var cvv = [Link]("txtCvv").value;
if(cvv===[Link]){
[Link]("lstExpiry").disabled = false;
[Link]("expiryContainer").[Link] = "block";
}
}
function VerifyExpiry(){
var expiry = [Link]("lstExpiry").value;
if(expiry===[Link]){
[Link]("btnPay").disabled = false;
}
}
</script>
</head>
<body>
<fieldset>
<legend>Payment Details</legend>
<dl>
<dt>Card Number</dt>
<dd><input type="text" id="txtCard" onblur="VerifyCard()"></dd>
<div id="cvvContainer" style="display: none;">
<dt>Cvv</dt>
<dd><input type="text" id="txtCvv" onblur="VerifyCvv()" size="4" disabled></dd>
</div>
<div id="expiryContainer" style="display: none;">
<dt>Expiry</dt>
<dd>
<select id="lstExpiry" disabled onchange="VerifyExpiry()">
<option>Select Expiry</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
</select>
</dd>
</div>
</dl>
<button disabled id="btnPay">Pay</button>
</fieldset>
</body>
</html>

2. Simple Decision
- It provides single alternative.
- It is defined by using "if...else" clause.

Syntax:
if(condition)
{
statement on true;
}
else
{
statement on false;
}

Ex:
1. Add a new file into data folder
"[Link]"

[
{
"UserName":"john"
},
{
"UserName":"john12"
},
{
"UserName":"john_nit"
},
{
"UserName":"david"
}
]

2. HTML page

fetch("../data/[Link]")
.then(function(res){
return [Link]();
})
.then(function(users){
for(var user of users){
if([Link]===username){
[Link]= "User Name Taken - Try Another".fontcolor('red');
break;
} else {
[Link] = "User Name Available".fontcolor('green');
}
}
})
}
</script>
</head>
<body>
<fieldset>
<legend>Register User</legend>
<dl>
<dt>User Name</dt>
<dd><input type="text" id="txtName" onkeyup="VerifyUser()"></dd>
<dd id="lblError"></dd>
</dl>
</fieldset>
</body>
</html>

3. Multiple Choices
- It is a decision making approach where more than one alternative is provided.
- It is configured with "if...else if ... else".

Syntax:
if(condition-1)
{
statement on condition-1 true;
}
else if(condition-2)
{
statement on condition-2 true;
}
else
{
statement on all conditions false;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<script>
var userDetails = {
"Email": "john11@[Link]",
"Mobile": "+919876543211",
"Password": "john@123"
}
var flag = "";
function ContinueClick(){
var user = [Link]("txtUser").value;
var pwdContainer = [Link]("pwdContainer");
var userContainer = [Link]("userContainer");
if(user===[Link]) {
flag = `Login success with your Email - Verification Code sent to email ${user}`;
[Link] = "block";
[Link] = "none";
} else if(user===[Link]) {
flag = `Login Success with Mobile - OTP Sent to your mobile ${user}`;
[Link] = "block";
[Link] = "none";
} else {
[Link]("userError").innerHTML = `${user} Not Avaialble`;
}
}
function LoginClick(){
var pwd = [Link]("txtPwd").value;
if(pwd===[Link]){
[Link](`<h2>${flag}</h2>`);
} else {
[Link]("pwdError").innerHTML = "Invalid Password";
}
}
</script>
</head>
<body class="container-fluid d-flex justify-content-center align-items-center" style="height: 100vh;">
<div>
<h2>Amazon Login</h2>
<div id="userContainer">
<label class="form-label fw-bold"> Email address or mobile phone number</label>
<div>
<input type="text" id="txtUser" class="form-control">
<div id="userError" class="text-danger"></div>
</div>
<div class="mt-3">
<button class="btn btn-warning w-100" onclick="ContinueClick()">Continue</button>
</div>
</div>
<div id="pwdContainer" style="display: none;">
<label class="form-label fw-bold">Your Password</label>
<div>
<input type="password" class="form-control" id="txtPwd">
<div id="pwdError" class="text-danger"></div>
</div>
<div class="mt-3">
<button class="btn btn-warning w-100" onclick="LoginClick()">Login</button>
</div>
</div>
</div>
</body>
</html>

Conditional Operators and Statements - Problems and Solutions

Sudhakar Sharma

Aug 18, 2023

- forward jump
- simple decision
- multiple choices

4. Multi Level Decisions

- Developer have to avoid multiple conditions verification using one statement when required to
handle multiple alternatives.

if (card==="" && cvv==="" && expiry==="")

- Developer uses Logical Operators to combine multiple expressions

&& Logical AND [returns true when all conditions are true]
|| Logical OR [returns true when any one condition is true]

Syntax:
if(card==="4444" && cvv==="332" && expiry==="2024")
{
success..
}
else
{
Invalid; ?
}
- Always developer have to prefer using multi level conditions to handle invidual expressions.

Syntax:
if (condition-1 )
{
if(condition-2)
{
statements when both conditions are true;
}
else
{
statements when condition 2 is false;
}
}
else
{
statement on condition 1 false;
}

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var userDetails = {
"Card": "4444555566667890",
"Cvv": "4567",
"Expiry": "2024"
}
function PayClick(){
var card =[Link]("txtCard").value;
var cvv = [Link]("txtCvv").value;
var expiry = [Link]("lstExpiry").value;
var msg = [Link]("msg");

if(card===[Link])
{
if(cvv===[Link]){
if(expiry===[Link]){
[Link]("Payment Success..");
} else {
[Link] = "Invalid Expiry";
}
} else {
[Link] = "Invalid Cvv";
}
}
else
{
[Link] = "Invalid Card Number";
}
}

</script>
</head>
<body>
<fieldset>
<legend>Payment Details</legend>
<dl>
<dt>Card Number</dt>
<dd><input type="text" id="txtCard"></dd>
<div id="cvvContainer">
<dt>Cvv</dt>
<dd><input type="text" id="txtCvv" size="4" ></dd>
</div>
<div id="expiryContainer" >
<dt>Expiry</dt>
<dd>
<select id="lstExpiry">
<option>Select Expiry</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
</select>
</dd>
</div>
</dl>
<button id="btnPay" onclick="PayClick()">Pay</button>
<p align="center" id="msg" style="color:red;"></p>
</fieldset>
</body>
</html>

Program-1: Check the value range and return in-range or out of range result.

Startup Code:
function findRange(value, min, max)
{
}

findRange(3,1,10) => 3 is in range of 1 to 10.

findRange(12,1,10) => 12 is not in range of 1 to 10
findRange(12,11,20) => 12 is in range of 11 to 20.

Solution Code:
<script>
function findRange(value, min, max){
if(value>=min && value<=max){
[Link](`Your value ${value} is in range of ${min} - ${max}`);
} else {
[Link](`Your value ${value} is not in range of ${min} - ${max}`);
}
}
findRange(25,11,20);
</script>

Program-2: Find and return the greatest among 3 numbers.

Startup Code:
function findGreatest(a, b, c)
{
}

findGreatest(10,3,23); => c=23 is greatest than a=10, b=3

findGreatest(12,4,3); => a=12 is greates that b=4, c=3

Solution Code:
<script>
function findGreatest(a, b, c)
{
if(a>b && a>c){
[Link](`a=${a} is greater than b=${b} & c=${c}`);
} else if(b>c) {
[Link](`b=${b} is greater than a=${a} & c=${c}`);
} else {
[Link](`c=${c} is greater than a=${a} & b=${b}`);
}
}
findGreatest(120,213,46);
</script>

Problem-3: Read multiple values from a function and return the values are for a triangle or for a
square or form polygon

Startup Code:
function findShape(values) => array type input
{
}

findShape([10, 30, 40]) => values for triangle

findShape([10, 20, 10, 20]) => values for square or rectangle
findShape([10, 3, 4, 5, 6 ]) => values for polygon
Solution Code:

Problem-4: Write a program to find the values are for a square or rectangle.

Startup Code:
function findShape(side1, side2, side3, side4)
{

findShape(10, 10, 10, 10); => Shape is Square

findShape(10, 20, 10, 20); => Shape is Rectangle

Solution Code:

Problem-5: Write a program to Check if a triangle is equilateral, scalene, or isosceles

Startup Code:
findTriangleType(side1, side2, side3)
{
}

findTriangleType(12,12,12) //"Equilateral triangle."

findTriangleType(20,20,31) //"Isosceles triangle."
findTriangleType(5,4,3) //"Scalene triangle."
Solution Code:

if((side1 == side2) && (side1 == side3)){

[Link](`Equilateral triangle.`)
}
else if ((side1 == side2) || (side2 == side3) || (side1 == side3)){
[Link](`Isosceles triangle.`)
}
else{
[Link](`Scalene triangle.`)
}
}

Switch Case

Sudhakar Sharma

Aug 19, 2023

Note: It there are too many choices for an application then better avoid "if..else if".
You can use "switch" selector.

Switch
- Switch is used to interrupt the flow of electronics.
- There are various types of switches.
toogle switch
push button
joy stick
selector etc..
- Switch selector provides multiple cases, which are invoked individually.
- It can select any specific case without invoking other cases.
- It there are many choices better to use "switch".

Syntax:
switch(value | expression)
{
case value|expression:
statements to execute;
jump;
default:
statement to execute as clause;
jump;
}

Ex:
<script>
var n = parseInt(prompt("Enter Number"));
switch(n)
{
case 1:
[Link]("One");
break;
case 2:
[Link]("Two");
break;
case 3:
[Link]("Three");
break;
case 4:
[Link]("Four");
break;
default:
[Link]("Please enter 1 to 4 only");
break;
}
</script>

FAQ's:
1. Can we define a switch without default?
A. Yes.

2. Can we define default before or between cases?

A. Yes.

3. Can we define case without break?

A. Yes. If break is not define then it will stop at next break or at the end of switch.

4. Can we define case with return as jump statement?

A. Yes

5. What is difference between break and return?

A. "break" will stop the execution of current block, but will stay in function.
"return" will stop the execution and compiling, it exits the function.

Note: "break" can't jump the function boundry.

"return" can jump the function boundry.

6. Can the value of case be a string type?

A. Yes. But it is case sensitive.
7. How to configure same block for multiple cases?
A. You can define multiple cases in a sequential order for same block.

case 1:
case 2:
[Link]("You entered 1 or 2");
break;
Ex:
<script>
var choice = prompt("Enter Choice","y/n");
switch(choice){
case "y":
case "Y":
[Link]("You selected Yes to continue");
break;
case "n":
case "N":
[Link]("You select No to stop.");
break;
default:
[Link]("Please enter y or n");
break;
}
</script>

8. How to configure case for range of values?

A. By using boolean true in switch and boolean expression as case.

var n = 4;
n is between 1 to 10
n is between 11 to 20
please enter 1 to 20 only.

Ex:
<script>
var n = parseInt(prompt("Enter Number"));
switch(true)
{
case (n>=1 && n<=10):
[Link](`Your value ${n} is between 1 to 10`);
break;
case (n>=11 && n<=20):
[Link](`Your value ${n} is between 11 to 20`);
break;
default:
[Link](`Your value ${n} must be between 1 to 20`);
break;
}
</script>

9. Can we define a if condition in switch?

A. Yes. You can define a condition in case block.

10. Can we define a switch inside another switch?

A. It is not recommended. You can write a switch in function and call inside another switch.

Task: Write a program to convert number into words.

Amount : 450
[ four hundred fifty ]

Assignment Operators

Sudhakar Sharma

Aug 22, 2023

Ex: Cascading Dropdown

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
select {
width: 150px;
}
</style>
<script>
var categories = ["Select a Category", "Electronics", "Footwear"];
var electronics = ["Select Electronics", "Televisions", "Mobiles"];
var footwear = ["Select Footwear", "Boots", "Casuals", "Sneakers"];
var products = [];

Summary
- Comparision Operators
- Selection Statements
if, else, switch, case, default

Logical Operators

&& Logical AND

|| Logical OR
! NOT

- "&&" combine multiple expressions and return true when all expressions evaluate to true.

exp1 && exp2 && exp3

- "||" combine multiple expressions and reutrn true when any one of the expression is true.

exp1 || exp2 || expr3

- "!" is used for negation "NOT".

!true => false

!false => true

Assignment Operators

+= Add and assign

-= Subtract and assign
*= Multiply and assign
/= Divide and assign
%= Modulus and assign

Ex: KFC Online Order

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KFC</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<script type="text/javascript">
function OrderClick(){
[Link]("lblCustomer").innerHTML =
[Link]("txtName").value;
[Link]("lblMobile").innerHTML =
[Link]("txtMobile").value;
var imgMeal = [Link]("imgMeal");
var mealName="";
var mealCost = 0;

var optBurger = [Link]("optBurger");

var optRoller = [Link]("optRoller");

if([Link]){
mealName = [Link];
mealCost = 120;
[Link] = "../public/images/[Link]";
}

if([Link]){
mealName = [Link];
mealCost = 90;
[Link] = "../public/images/[Link]";
}

var adonName = "";

var adOnCost = 0;

var optKrusher = [Link]("optKrusher");

var optWings = [Link]("optWings");

if([Link]) {
adOnCost = 40;
adonName += [Link] + "<br>";
mealCost = mealCost + adOnCost;
}
if([Link]){
adOnCost = 70;
adonName += [Link] + "<br>";
mealCost = mealCost + adOnCost;
}

[Link]("lblMeal").innerHTML = mealName;
[Link]("lblAdOn").innerHTML = adonName;
[Link]("lblTotal").innerHTML = `₹ ${mealCost}`;

}
</script>
</head>
<body class="container-fluid">
<header class="mt-1">
<img src="../public/images/[Link]" width="100%" height="150">
</header>
<section>
<div class="accordion" id="kfc">

<div class="accordion-item">
<div class="accordion-header">
<button data-bs-toggle="collapse" data-bs-target="#customer" class="btn btn-danger w-
100">Customer Details</button>
</div>
<div class="accordion-collapse collapse show" id="customer" data-bs-parent="#kfc">
<div class="accordion-body bg-danger text-white mt-2">
<dl>
<dt>Customer Name</dt>
<dd><input type="text" id="txtName" class="form-control"></dd>
<dt>Mobile</dt>
<dd><input type="text" id="txtMobile" class="form-control"></dd>
</dl>
</div>
</div>
</div>

<div class="accordion-item mt-2">

<div class="accordion-header">
<button class="btn btn-danger w-100" data-bs-target="#meal" data-bs-
toggle="collapse">Select Your Meal</button>
</div>
<div class="accordion-collapse collapse" id="meal" data-bs-parent="#kfc">
<div class="accordion-body">
<div class="row">
<div class="col text-center">
<div class="card p-2 m-2">
<img src="../public/images/[Link]" class="card-img-top" height="150">
<div class="card-header">
<h3>OMG Burger</h3>
</div>
<div class="card-footer h4">
<input type="radio" name="meal" value="OMG Burger" id="optBurger"
class="form-check-input"> <label>₹ 120/-</label>
</div>
</div>
</div>
<div class="col text-center">
<div class="card p-2 m-2">
<img src="../public/images/[Link]" class="card-img-top" height="150">
<div class="card-header">
<h3>OMG Roller</h3>
</div>
<div class="card-footer h4">
<input type="radio" name="meal" value="OMG Roller" id="optRoller"
class="form-check-input"> <label>₹ 90/-</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="accordion-item mt-2">

<div class="accordion-header">
<button class="btn btn-danger w-100" data-bs-target="#adon" data-bs-
toggle="collapse">Select AD-ON's</button>
</div>
<div class="accordion-collapse collapse" id="adon" data-bs-parent="#kfc">
<div class="accordion-body">
<div class="row">
<div class="col text-center">
<div class="card p-2 m-2">
<img src="../public/images/[Link]" class="card-img-top" height="150">
<div class="card-header">
<h3>Krusher Brownie</h3>
</div>
<div class="card-footer h4">
<input type="checkbox" value="Krusher Brownie" id="optKrusher"
class="form-check-input"> <label>₹ 40/-</label>
</div>
</div>
</div>
<div class="col text-center">
<div class="card p-2 m-2">
<img src="../public/images/[Link]" class="card-img-top" height="150">
<div class="card-header">
<h3>Hot Wings</h3>
</div>
<div class="card-footer h4">
<input type="checkbox" value="Hot Wings" id="optWings" class="form-check-
input"> <label>₹ 70/-</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="mt-3">
<button onclick="OrderClick()" data-bs-target="#summary" data-bs-toggle="modal"
class="btn btn-danger w-100">Place Order</button>
<div class="modal fade" id="summary">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Your Bill Summary</h3>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<dl>
<dt>Customer Name</dt>
<dd id="lblCustomer"></dd>
<dt>Mobile</dt>
<dd id="lblMobile"></dd>
<dt>Meal</dt>
<dd id="lblMeal"></dd>
<dt>Ad-ON's</dt>
<dd id="lblAdOn"></dd>
<dt>Total</dt>
<dd id="lblTotal"></dd>
</dl>
</div>
<div class="col">
<img id="imgMeal" width="100%" height="200" border="1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</section>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/bootstrap/dist/js/[Link]"></script>
</body>
</html>

Operators and Statements

Sudhakar Sharma

•
Aug 23, 2023

Special Operators

1. Ternary Operator "?:" It is used to configure the conditional statements.

It is decision making operator.

Syntax:
(condition) ? true : false

2. new : It is dynamic memory allocation operator.

Syntax:
var now = new Date();
var values = new Array();

3. delete : It is used to delete any key from object.

Syntax:
var product = {Name:"TV", Price: 45600.44};
delete [Link];

4. in : It is used to verify key in object. It returns true if key is

available.

Syntax:
"Price" in product => true | false

5. typeof : It returns the data type of value stored in reference.

Syntax:
var price = 45000;
typeof price; => number

6. instanceof : It returns true if the reference is instance of specified

class.

Syntax:
var values = new Array();
"values" instanceof Array; => true
"values" instanceof Employee; => false

7. yeild : It is used to yeild the result of any iteration. It is used for

function generators.
Syntax:
function* generator()
{
yeild result;
}

JavaScript Statements
- Statements are used in computer programming to control the execution flow.
- Statements are classified into various types

1. Selection Statements
if, else, switch, case, default

2. Looping Control Statements

for, while, do while

3. Iteration Statements
for..in, for..of

4. Jump Statements
break, return, continue

5. Exception Handling Statements

try, catch, throw, finally

Looping Control
- Looping is the process of executing a set of statements repeatedly based on given condition.
- Loops are created by using
a) for
b) while
c) do while
- Every loop contains initialization, condition and counter.

The For Loop:

- It is used when developer knows exact number of iterations. And it is sure that iterations counter
will not change dynamically.

Syntax:
for(initialization; condition; counter)
{

EX:
for(var i = 1; i<=10; i++)
{
[Link](i + "<br>");
}

Problem: Write a program to print Multiplication Table.

Startup Code:
function PrintTable(n)
{

PrintTable(5) =>

5 x 1 =5
5 x 2 = 10
.....
5 x 10 = 50

Solution:
<script>
function PrintTable(n){
for(var i = 1; i<=10; i++){
[Link](`${n} x ${i} = ${n*i}<br>`);
}
}
PrintTable(parseInt(prompt("Enter Number")));
</script>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var menu = [
{Category:"Electronics", Products:["Mobiles", "Televisions"]},
{Category:"Footwear", Products:["Boots", "Casuals", "Sneakers"]}
];
function bodyload(){
for(var i=0; i<[Link]; i++){
var olLi = [Link]("li");
[Link] = menu[i].Category;
for(var j=0; j< menu[i].[Link]; j++){
var ul = [Link]("ul");
var ulLi = [Link]("li");
[Link] = menu[i].Products[j];
[Link](ulLi);
[Link](ul);
[Link]("ol").appendChild(olLi);
}
}
}
</script>
</head>
<body onload="bodyload()">
<ol>

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

Ex: Iterators

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var menu = [
{Category:"Electronics", Products:["Mobiles", "Televisions"]},
{Category:"Footwear", Products:["Boots", "Casuals", "Sneakers"]}
];
function bodyload(){
[Link](function(item){
var olLi = [Link]("li");
[Link] = [Link];
[Link](function(product){
var ul = [Link]("ul");
var ulLi = [Link]("li");
[Link] = product;
[Link](ulLi);
[Link](ul);
[Link]("ol").appendChild(olLi);
})
})
}
</script>
</head>
<body onload="bodyload()">
<ol>
</ol>
</body>
</html>

Problem: Print a 2 dimensional Array values

var values = [ [10, 20, 30], [40, 50, 60] ];

10 20 30

40 50 60

Solution:
<script>
var values = [[10, 20, 30], [40, 50, 60]];
for(var i=0; i<[Link]; i++){
for(var j=0; j<values[i].length; j++){
[Link](`${values[i][j]}   `)
}
[Link]("<br><br>");
}
</script>

Problem: Print the following pattern

*
* *
* * *
* * * *
* * * * *
Startup Code:
function PrintPattern(n)
{
}

Solution Code:

Problem: Print a diamond of stars

*
* *
* * *
* *
*

Statements and Functions

Sudhakar Sharma

Aug 24, 2023

The While Loop:

- It is used when developer is not sure about the iterations and the count may change dynamically.
- It executes statements only when condition is true.

Syntax:
var i = 1;
while(i<=10)
{
[Link](i + "<br>");
i++;
}

The do While:
- It is same as while loop but make sures that the statements execute atleast once
even when condition is false.

Syntax:
var i = 1;
do
{
[Link](i + "<br>");
i++;
} while(i<=10);

Iteration Statements
- Iteration doesn't require initialization, condition and counter.
- Iterations are created by using
a) for..in
b) for..of

- for..in reads all keys | properties from a collection in sequential order.

for(var key in collection)
{
}

- for..of reads all values from a collection.

for(var value of collection)

{
}

Jump Statements
1. break
2. return
3. continue

- "continue" is a jump statement which is used to skip the current counter.

Ex:
<script>
for(var i=1; i<=10; i++){
if(i==5 || i==8){
continue;
}
[Link](i + "<br>");
}
</script>

Ex:
<script>
fetch("[Link]
.then(function(res){
return [Link]();
})
.then(function(products){
for(var product of products){
if([Link]==="electronics" || [Link]==="jewelery"){
continue;
}
[Link](`${[Link]} - <b>${[Link]}</b><br>`);
}
})
</script>

Exception Handling Statements

- In computer programming developer gets 2 types of errors.

a) Compile Time Error
b) Run Time Error
- Compile time errors are syntactical errors. When a compile time error occurs program fails to run.
- Run time errors are the errors that occur during runtime of application. Program successfully
compiles but fails to execute certain statements, due to which application terminates abnormally.
- "To avoid abnormal termination we need exception handling".
- Exception handling statements in JavaScript are
a) try monitoring block
b) catch handler block
c) throw throws exception message
d) finally executes statement in all conditions

Ex:
<script>
try {
var a = parseInt(prompt("Enter A value"));
var b = parseInt(prompt("Enter B Value"));
if(b==0){
throw "Can't Divide By Zero<br>";
}
if(b>a) {
throw "Number too large to divide<br>";
}
var c = a / b;
[Link](`Division=${c}<br>`);
}
catch(exp){
[Link](exp);
}
finally {
[Link](`Program End`);
}
</script>

Summary
- Selection
- Looping
- Iteration
- Jump
- Exception Handling

JavaScript Functions

- Functions are used to "Refactor" the code.

- Refactoring is the process of encapsulating all lines and extracting into a function.
- It is used to handle code reusability in application.

Function Configuration:
- JavaScript functions can be configured in 2 ways
a) Function Declaration
b) Function Expression

Syntax: Declaration

function Print()
{
}

Syntax: Expression

var Print = function() {

Print = function() { };

- Function Declaration allocates memory for function and handle specific operation defined in the
definition of function.

- Function expression can change the functionality according to state and situation.

Ex:
<script>
var password = prompt("Enter Password");
var result = function() {};
if(password=="admin"){
result = function(){
[Link]("Login Success");
}
} else {
result = function(){
[Link]("Invalid Login - Try Again");
}
}
result();
</script>

- The function expression is accessed by using IIFE pattern.

[Immediately Invoked Function Expression]

refName(); => () IIFE

- If a function is not defined with name then it is known as "Anonymous function".

( function() { } )();

Ex:
(function(){
[Link]("Hello");
})();

Syntax:
function Name(params)
{

function Name(params) => Declaration

Name(params) => Signature
{} => Definition

- Functions are called from any location by using their signature.

Function Parameters:
- A function can be parameter less or parameterized.
- A parameter is used to modify the function.

Syntax:
function Name(param) => param is a formal parameter
{

Name(value); => actual parameter

formal parameter = actual parameter;

param = value;

Ex:
<script>
function PrintNumbers(howMany){
for(var i=1; i<=howMany; i++){
[Link](i + "<br>");
}
}
PrintNumbers(4);
PrintNumbers(9);
</script>

- The parameters defined in declaration of function are known as "Formal Parameters".

- The parameters defined while calling the function are known as "Actual Parameters".
- A parameter can be any type
a) Primitive
b) Non Primitive

Syntax:
function Name(x)
{
}
Name(number)
Name(string)
Name(boolean)
Name([ ])
Name({ })
Name(new Date())
Name(new Map())

Ex:
<script>
function Details(values){
for(var item of values){
[Link](item + "<br>");
}
}
function Product(prod){
[Link](`Name=${[Link]}<br>Price=${[Link]}`);
}
Details([10, 20, 30]);
Product({Name:"Samsung TV", Price: 45000.33});
</script>

Functions continued..

Sudhakar Sharma

Aug 26, 2023

JavaScript Functions
- Function Declaration
- Function Expression
- Anonymous Function
- IIFE Pattern
- Function Parameters
a) Actual Parameters
b) Formal Parameters

Multiple Parameters
- A function can have mutliple parameters.
- Every parameter is required. [Mandatory to pass value]
- Every parameter have ordered dependency.
- If you want to skip any parameter, then you have configure as undefined and write the logic for
undefined value.

Ex:
<script>
function Details(id, name, price, stock){
if(price){
[Link](`
Id=${id} <br>
Name=${name}<br>
Price=${price}<br>
Stock=${stock}
`);
} else {
[Link](`
Id=${id} <br>
Name=${name}<br>
Stock=${stock}
`);
}

}
Details(1, "TV", 450000.44 , true);
</script>

- ECMA standards allows max 1024 parameters in a function.

- Using lot of parameters may lead to Injection Attacks.
- ES5+ versions introduced "Rest Parameters" to handle the issue.

Rest Parameters
- A single rest parameter can allow multiple values.
- It is an array type parameter.
- It is configured using "..." and parameter name.

Syntax:
function Name(...param) => param[]
{
}

Name(1, "TV", true, 45000);

param[0] = 1
param[1] = "TV"
param[2] = true
param[3] = 45000

- Every function can have only one rest parameter.

function Name(...param1, ...param2) => invalid

- You can define other parameters along with rest parameter. But the rest parameter must be the last
parameter in formal list.

function Name(...param1, title) => invalid

function Name(title, ...param1) => valid

- You have to define as last parameter, as it can read value upto end.

Ex:
<script>
function Details(title,...product){
var [id, name, price, stock] = product;
[Link](`
<h3>${title}</h3>
Id=${id} <br>
Name=${name}<br>
Price=${price}<br>
Stock=${stock}
`)
}
Details("Product Details",1, "TV", 45000.44 , true);
</script>

Spread Parameters
- You can spread single actual value into multiple parameters.
- The actual value must be only array type.

Syntax:
function Name(p1, p2, p3)
{
}

Name(...[param1, param2, param3]);

Ex:
<script>
function Details(id, name, price)
{
[Link](`Id=${id}<br>Name=${name}<br>Price=${price}`);
}
var product = [1, "TV", 46000.33];
Details(...product);
</script>

FAQ: What is difference between "rest" & "spread" parameters?

Ans: "rest" is about a single formal parameter allowing multiple actual values.
"spread" is about single actual value spreading into mutliple formal parameters.
Function with Return
- Every function disposes its memory after the execution of statements.
- Hence the values declared in function are not accessible outside the function.
- You can use the "return" keyword to terminate the function before it disposes memory.
- So that in function memory you can store a value and access from another location.

Syntax:
function Name()
{
return value;
}
Name() = value;

- The function return value can be any type

a) Primitive
b) Non-Primitive

Syntax:
fetch(url)
.then(function(res){
return [Link]()
})
.then(function(data){
})

Ex:
<script>
function Addition(a, b)
{
return a + b;
}
function Print(){
[Link](`Addition=${Addition(10,30)}`);
}
Print();
</script>

Ex:
<script>
function Categories(){
return ["All", "Kids", "Women", "Men"];
}
Categories().map(function(category){
[Link](category + "<br>");
})
</script>
Ex: Captcha

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Captcha(){
var a = [Link]() * 10;
var b = [Link]() * 10;
var c = [Link]() * 10;
var d = [Link]() * 10;
var e = [Link]() * 10;
var f = [Link]() * 10;
return `${[Link](a)} ${[Link](b)} ${[Link](c)} ${[Link](d)} $
{[Link](e)}`;
}
function bodyload(){
[Link]("code").innerHTML = Captcha();
}
</script>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<style>
dt {
font-weight: bold;
margin-top: 5px;
}
</style>
</head>
<body onload="bodyload()">
<dl>
<dt>User Id</dt>
<dd><input type="text"></dd>
<dt>Password</dt>
<dd><input type="password"></dd>
<dt>Verify Code <button onclick="bodyload()" class="bi bi-arrow-clockwise"></button></dt>
<dd id="code"></dd>
</dl>
<button>Login</button>
</body>
</html>

Functions continue..

Sudhakar Sharma

•
Aug 28, 2023

Function Closure
- Closure is a technqiue where the members of outer function are accessible to inner function.
- Every function by default have a closure.
- It is the mechanism of function used for its scope members.
- To access the member of inner function in outer function, you have to use the "return" technique.

Syntax:
function outer()
{
...members...
function inner()
{
//can use outer members..
return values;
}
// can access inner return values
}

Ex:
<script>
function Outer(){
var x = 10;
function Inner(){
var y = 20;
var z = x + y;
return z;
}
[Link]("addition=" + Inner());
}
Outer();
</script>

Function Recursion
- It is the process of accessing a function with in the scope of same function.

Syntax:
function f1()
{
f1();
}
- It allows to create batch operations.
- It repeats the statements without using loops and iterators.

Program: Write a program to print factorial of a number.

Startup Code:
function Factorial(n)
{
}
Factorial(5) = 120 => 5 x 4 x 3 x 2 x 1

Solution Code:

Ex: using recursion

Problem: Print a multiplication table using recursion.

Startup Code :
function Table(5)
{

}
5x1=5
5 x 2 = 10

Function Generator
- A function generator is used in iterations.
- It is used to create iterations, which doesn't require initialization, condition and counter.
- Every generator function implicitly manages initialization, condition and counter.
- It comprises of following methods and properties

a) yeild : It is used to return a value in generator.

b) next() : It is used to move to next counter
c) done() : It returns true if there is no more value to read.
d) value : It stores the return value.

Syntax:
function* Name()
{
yeild value;
}

Ex:
<script>
function* PrintNumbers(){
yield 10;
yield 20;
yield 30;
yield 40;
}
var obj = PrintNumbers();
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
</script>

Function Callback & Promise

Arrow Function, Callback, Promise and OOP

Sudhakar Sharma

Aug 29, 2023

Arrow Functions

- It is a short hand technique of defining function expression.

Syntax: General Function Expression

function Name()
{
}

Syntax: Short hand

var Name = () => { }

() function
=> return | definition { } if there multiple statements

Ex:
<script>
function Addition(a, b){
return a + b;
}
var mul = (a,b) => a * b;
[Link](`Addition=${Addition(10,20)}<br>Multiply=${mul(2,6)}`);
</script>

- Arrow function can be parameterized or parameterless

var hello = uname => [Link](`hello ! ${uname}`);

var welcome = () => [Link]("welcome to js");
var hello = (uname, age) => [Link](`Name=${uname}<br>Age=${age})`;

Ex:
<script>
var hello = (uname,age) => [Link](`Hello ! ${uname} your age ${age}`);
hello("John",22);
</script>

Ex:
<script>
var categories = ["All", "Fashion", "Footwear"];
[Link](category=>{
[Link](category + "<br>");
})
/*
[Link](function(category){

})
*/
</script>

Ex:
<script>
fetch("[Link]
.then(response=> [Link]())
.then(products=>{
[Link](product=>{
[Link]([Link] + "<br>");
})
})
</script>

CallBacks
- It is a technique of configuring functions where the functionality is defined according to state and
situation.
- Callback uses synchronous technique.
- It block the other actions while executing the specified function.

Syntax:
function Name(f1, f2)
{
}
Name( ()=>{ }, ()=> { } ); It have 2 callbacks

Ex:
<script>
function FetchData(url,success,failure){
if(url==="[Link]
success();
} else {
failure();
}
}
FetchData(prompt("Enter Url"), ()=>{
[Link]("Data Fetched Successfully..")
},()=>{
[Link]("Invalid Url : Unable to Fetch Data");
})
</script>

JavaScript Promise

- A promise comprises of 3 phases

a) initial => It is pending
b) resolved => It is fullfilled
c) rejected => It is canceled or rejected.
- A promise is same like callback but executes function "Asynchronous".
- It is faster than callback.
- JavaScript promise is created by using "Promise()" method.

Syntax:
var obj = new Promise((resolve, reject)=>{
if(condition)
{
resolve(value);
} else {
reject(value);
}
})

- You can access the result and execute a promise using are reference object or directly by using
reference name.
- It returns
then() => on resolve
catch() => on rejected
finally() => every time

Syntax:
[Link](msg => { }).catch(msg => { }).finally(()=> { })

Ex:
<script>
var FetchData = new Promise((resolve, reject)=>{
var url = prompt("Enter Url");
if(url==="[Link]
resolve(`Success: Data Fetched successfully..`);
} else {
reject(`Error: Unable to fetch data`);
}
})
[Link]((msg)=>{
[Link](msg);
}).catch((msg)=>{
[Link](msg);
})
</script>

Summary
- Variables
- Data Types
- Operators
- Statements
- Functions
JavaScript OOP

- In real time application development we use 3 types programming systems regularly

1. POPS
2. OBPS
3. OOPS

POPS:
- Process Oriented Programming System
- It is light weight
- It uses less memory
- It is faster
- It supports low level features that can directly interact with hardware.

Ex: C, Pascal

- Code reusability issues

- Code sepration issues
- Dynamic memory allocation issues.
- Not easy to extend.

OBPS
- Object Based Programming System
- It supports code reusability and separation
- It have dynamic memory
- It have limited extensibility.

Ex: JavaScript, Visual Basic

- Extensibility Issues
- Code level security issues
- No dynamic polymorphism.
- No contracts and abstraction

OOPS
- Object Oriented Programming System
- It supports reusability
- It supports extensibility
- It supports code level security
- It have contract and abstraction

Ex: C++, Java, C#

- They are complex in configuration

- They use more memory
- They are heavy on application
- They slow in access

Note: JavaScript is not an OOP language, it supports only few features of OOP.

Evolution of OOP:
- In early 1960's Alan Kay introduced "Object" into computer programming.
- In 1967 Johan Olay, Kristian Nygaard developed Object Oriented Programing with a language called
"SIMULA".
- SIMULA introduced code reusability.
- In 1970's "Trygve" introduced code separation.
- Tryge introduced a framework called "MVC" [Model View Controller]
- MVC was formulated with a language class "Small Talk".
- In 1975 C++
- In 1990 Java
- In 2003 C#

Java Spring [MVC]

PHP Cake PHP , Code Igniter
Python Django, Fask
Ruby ROR [Ruby on Rails]
JavaScript SPINE, Angular
.NET [Link] MVC
- JavaScript OOP
a) Class
b) Object
c) Code Reusability
d) Code Extensibility
e) Modules

OOP in JavaScript, Modules

Sudhakar Sharma

Aug 30, 2023

Modules
- A module is a set of variables, functions and classes.
- Every JavaScript file is considered as a module.
- You can build a library using modules.
- So that you can reuse your code across projects or pages in a project.
- A module allows to use any library without linking the JavaScript file.
- In order to use modules in any JavaScript project you must have a module system installed.
- There are various module systems for JavaScript
a) Common JS
b) Require JS
c) UMD [Universal Module Distribution]
d) AMD [Asynchronous Module Distribution] etc..
- If you are using JavaScript in browser, then the browser engine have a default module system called
"ES Module".
- You have to enable ES Module system by defining the script type as "Module".

</script>

- Every member that you define a module is not accessible outside module.
- You have to mark it as "export".

export const name = "john";

export function name() { };
export class Name { }
- You can access them in any HTML page or any another module by using "import".

import { Name } from "path/moduleName";

- Every module system will not use "import" statement, there are various other methods like
"require()".

var refName = require("path/moduleName");

[Link]();

var obj = require("../library/modules/[Link]");

[Link]()
[Link]()

- You can configure any function or class as "default export".

- In every module there can be only one default export.

Syntax:
export default function Name()
{
}

import Name from "../path/moduleName";

import {Name} from "../path/moduleName"; // if it is not default.

- The default import must be the first import.

import A, { B } from "moduleName"; // valid

import {B}, A from "moduleName"; // invalid

Ex:
1. Add a new folder into project by name "library".
2. Add subfolder by name "modules" into library.
3. Add following JS files

"[Link]"

var userName = 'John';

export function Hello(){

return `Hello ! ${userName}`;
}

export function Welcome(){

return `Welcome to JavaScript OOP`;
}
"[Link]"

export function Addition(a, b){

return a + b;
}

export default function Multiply(a,b){

return a * b;
}

4. Add a new HTML page

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module Demo</title>
<script type="module">
import { Hello, Welcome } from '../library/modules/[Link]';
import Multiply, { Addition } from '../library/modules/[Link]';

[Link]("p").innerHTML = Hello() + "<br>" + Welcome() + "<br>" + "Addition="

+ Addition(30,50) + "<br>Multiplication=" + Multiply(2,5);
</script>
</head>
<body>
<p></p>
</body>
</html>

Class in OOP
- In computer programming class is a program template.
- A program template comprises of pre-defined data and logic, which you can import and implement
by customizing according your requirements.
- A class is reffered as "Entity" when it is mapping to business requirements.
- A class is reffered as "Model" when it is mapping to data requirements.
- A class acts as a blue-print for reusing the code.
- Hence class is a model, entity and blue-print in general terms.

Configuring a Class:
- There are 2 methods for configuring a class
a) Class Declaration
b) Class Expression

Syntax: Expression
var Product = class {

Syntax: Declaration

class Product
{
}

Class Members:
- Every JavaScript class can have only following members
a) Property
b) Accessor
c) Constructor
d) Method

FAQ: Can we have a variable as class member?

Ans: No.

FAQ: Can we have a function as class member?

Ans: No.

FAQ: Can we have a variable or function in class?

Ans: Yes. But they can't be class members.

FAQ: Why we can't have varaibles and functions as class members?

Ans: Variable and Functions are immutable and class member must be a mutable member.

Properties and Methods

Sudhakar Sharma

Aug 31, 2023

Property
- Property is a reference in class where we can store data.
- Property is mutable.
- JavaScript properties can have just a reference name without and access restriction.

Syntax:
class Name
{
PropertyName = value;
}

- In a property you can store any type of data, which includes

a) Primitive type
b) Non-Primitive type

Syntax:
class Product
{
Name = "Samsung TV";
Price = 45000.44;
Stock = true;
Cities = ["Delhi", "Hyd"];
Rating = { rate: 3.5, count: 4500 };
}

- The properties of class are accessible inside class using "this" keyword and outside class by using
instance of class.

Syntax:
let ob = new Product(); // valid => () refers tj o constructor
let obj = new Product; // valid

obj => It is class object (or) It is instance of class.

You can access class members by using instance.

[Link]; => gets the value stored in property

[Link]=value => sets a value into property. [assignment]

Ex:
<script>
class Product
{
Name = "Samsung TV";
Cities = ["Delhi","Hyd"];
Rating = {rate: 4.5, count:4560}
}
let obj = new Product;
[Link] = prompt("Enter Name");
[Link](`Name=${[Link]}<br>Cities=${[Link]()}<br>Rating=$
{[Link]}`);

</script>

Accessors

- Accessors are used to control read and write operations on property.

- Accessors are 2 types
a) get() => getter
b) set() => setter
- Getter is responsible for reading and returning a value defined in property.
Syntax:
get aliasName()
{
return [Link];
}

- Setter is responsible for assigning a new value into property.

Syntax:
set aliasName(newValue) => 10
{
[Link] = newValue; => 10
}

aliasName = value|10;

Note: Accessors are used to give a fine grained control over property.

Ex:
<script>
var userName = prompt("Enter Your Name");
var userRole = prompt("Enter Your Role","admin|customer|manager");
var productname = prompt("Enter Product Name");
class Product
{
_productName;
get ProductName(){
return this._productName;
}
set ProductName(newValue){
if(userRole==="admin"){
this._productName = newValue;
} else {
[Link](`<code>Hello ! ${userName} your role ${userRole} is not authorized to set
product name</code>`.fontcolor('red'));
}
}
}
let obj = new Product;
[Link] = productname;
if([Link]){
[Link](`Name=${[Link]}`);
}
</script>

Ex:
<script>
class Product
{
Name = "Samsung TV";
Rating = {
CustomerRating: {rate:3.5, count:5600},
VendorRating: {
DirectVendor: {rate:4.2, count:3},
IndirectVendor: {rate:4.5, count:56}
}
}

get DirectVendorRating(){
return [Link];
}
set DirectVendorRating(newRating){
[Link] = newRating;
}
}
var obj = new Product;
[Link] = prompt("Enter Rating");!
[Link](`Direct Vendor Rating : ${[Link]}`);
</script>

Methods
- A method is used to configure functionality for class.
- A method can be configured only in a class.
- Usually a method is void type. However JavaScript methods can return a value.
- Method is mutable, where as function is immutable.
- A function is not allowed as class member.

Syntax: void
class Name
{
MethodName(params)
{
}
}

Syntax: return value

MethodName(params)
{
return value;
}

Constructor, Code Reusability & Extensiblity

Sudhakar Sharma

•
Sep 1, 2023

Class Components
- Property
- Accessor
- Method

Ex:
<script>
class Product
{
Name = "Samsung TV";
Price = 45000.33;
Qty = 0;
Total(){
return [Link] * [Link];
}
Print(){
[Link](`Name=${[Link]}<br>Price=${[Link]}<br>Qty=${[Link]}<br>Total=$
{[Link]()}`);
}
}
let obj = new Product;
[Link] = parseInt(prompt("Enter Quantity"));
[Link]();
</script>

Constructor
- It is a special type of sub-routine defined in class, which is used for instantiation.
- Instantiation is the process of creating an object for class.
- Every class have a default constructor.
- You can create an explicit constructor to define actions, which are performed at the time of creating
object.
- Constructor is same like a method, but it is defined with constructor keyword and it is anonymous.

Syntax:
class Demo
{
constructor() {

}
}

let obj = new Demo(); () => constructor

let obj = new Demo; => valid, but it is not valid if constructor is
parameterized

- A constructor can be parameterized.

- It there is a parameterized constructor in class, then you have to pass values into constructor at the
time of allocating memory for class.

Syntax:
var obj = new className(value); => (value) constructor with value

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
class Database
{
constructor(dbName){
[Link](`Connected with ${dbName} database <br>`);
}
Insert(){
[Link]("Record Inserted");
}
Update(){
[Link]("Record Updated");
}
Delete(){
[Link]("Record Deleted");
}
}
function InsertClick(){
let obj = new Database([Link]("select").value);
[Link]();
}
function UpdateClick(){
let obj = new Database([Link]("select").value);
[Link]();
}
function DeleteClick(){
let obj = new Database([Link]("select").value);
[Link]();
}
</script>
</head>
<body>
<select>
<option>Select Database</option>
<option>Oracle</option>
<option>MySql</option>
<option>MongoDB</option>
</select>
<button onclick="InsertClick()">Insert</button>
<button onclick="UpdateClick()">Update</button>
<button onclick="DeleteClick()">Delete</button>
</body>
</html>

Note: Every constructor executes only once per-object.

Code Reusability & Extensibility

- Code reusability is a technique where we can configure logic in an entity and access from location.
You can reuse the logic without re-writing the logic.

- Code extensibility is a technique where we can extend the existing logic without modifying the
current context.

- You can implement reusability and extensibility by using 2 techniques

a) Aggregation
b) Inheritance

Aggregation:
- It is the process of accessing members of one class in another class without creating any
relationship between classes.
- It uses object-to-object communication, which is known as "Has-A-Relation".

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
class HDFCBank_Version1
{
Personal = "Personal Banking Services <br>";
NRI = "NRI Banking Services <br>";
Print(){
[Link](`${[Link]}<br>${[Link]}<br>`);
}
}
class HDFCBank_Version2
{
Loans = "Personal & Car Loans<br>";
Print(){
let obj = new HDFCBank_Version1();
[Link]();
[Link](`${[Link]}<br>`);
}
}
class HDFCBank_Version3
{
AGRI = "Govt. Bank Schemes<br>";
Print(){
let obj = new HDFCBank_Version2();
[Link]();
[Link](`${[Link]}<br>`);
}
}
function InstallClick(){
var version = [Link]("select").value;
switch(version)
{
case "ver1":
let obj1 = new HDFCBank_Version1();
[Link]("<h2>Version-1 Installed</h2>");
[Link]();
break;
case "ver2":
let obj2 = new HDFCBank_Version2();
[Link]("<h2>Version-2 Installed</h2>");
[Link]();
break;
case "ver3":
let obj3 = new HDFCBank_Version3();
[Link]("<h2>Version-3 Installed</h2>");
[Link]();
break;
default:
[Link]("Please Select a Version to Install");
break;
}
}
</script>
</head>
<body>
<fieldset>
<legend>HDF Bank Application</legend>
<select>
<option value="-1">Select Version</option>
<option value="ver1">Version-1 2022</option>
<option value="ver2">Version-2 2023 (May)</option>
<option value="ver3">Version-3 2023 (Aug)</option>
</select>
<button onclick="InstallClick()">Install</button>
</fieldset>
</body>
</html>

Inheritance:
- It is a technique of reusing the extending the code by configuring relationship between classes.
- It is reffered as "Is-A-Relation".
- You can create a new class that "extends" existing class

Syntax:
class A
{
}
class B extends A
{
}

- Existing class is known as "Super Class". [A]

- Newly created class is known as "Derived Class". [B]
- You can access the members of super class and use in derived class just by using the keyword
"super".
- Inheritance for class can be configured in 2 ways
a) Single Inheritance
b) Multi Level Inheritance

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
class HDFCBank_Version1
{
Personal = "Personal Banking Services <br>";
NRI = "NRI Banking Services <br>";
Print(){
[Link](`${[Link]}<br>${[Link]}<br>`);
}
}
class HDFCBank_Version2 extends HDFCBank_Version1
{
Loans = "Personal & Car Loans<br>";
Print(){
[Link]();
[Link](`${[Link]}<br>`);
}
}
class HDFCBank_Version3 extends HDFCBank_Version2
{
AGRI = "Govt. Bank Schemes<br>";
Print(){
[Link]();
[Link](`${[Link]}<br>`);
}
}
function InstallClick(){
var version = [Link]("select").value;
switch(version)
{
case "ver1":
let obj1 = new HDFCBank_Version1();
[Link]("<h2>Version-1 Installed</h2>");
[Link]();
break;
case "ver2":
let obj2 = new HDFCBank_Version2();
[Link]("<h2>Version-2 Installed</h2>");
[Link]();
break;
case "ver3":
let obj3 = new HDFCBank_Version3();
[Link]("<h2>Version-3 Installed</h2>");
[Link]();
break;
default:
[Link]("Please Select a Version to Install");
break;
}
}
</script>
</head>
<body>
<fieldset>
<legend>HDF Bank Application</legend>
<select>
<option value="-1">Select Version</option>
<option value="ver1">Version-1 2022</option>
<option value="ver2">Version-2 2023 (May)</option>
<option value="ver3">Version-3 2023 (Aug)</option>
</select>
<button onclick="InstallClick()">Install</button>
</fieldset>
</body>
</html>

Polymorphism and BOM

Sudhakar Sharma

Sep 2, 2023

Inhertiance Rule: If super class have a constructor then the derived class constructor must call the
super class constuctor.

Syntax:
class Super
{
constructor() { }
}
class Derived extends Super
{
constructor(){
super();
}
}

Polymorphism
- The terms Poly means "Many" and Morphos means "Forms".
- The component ability to function for various situations, is designated as "Polymorphism".
- In technical terms a single base class object can use the memory of multiple derived classes.

Syntax:
var obj = new Array(new Class1(), new Class2(), new Class3());
(or)
var obj = [ ];
obj[0] = new Class1();
obj[1] = new Class2();

Ex:
<script>
class Employee
{
FirstName;
LastName;
Designation;
Print(){
[Link](`${[Link]} ${[Link]} - ${[Link]}<br>`);
}
}
class Developer extends Employee
{
FirstName = "Raj";
LastName = "Kumar";
Designation = "Developer";
Role = "Developer Role : Build, Debug, Test, Deploy";
Print(){
[Link]();
[Link](`${[Link]}`);
}

}
class Admin extends Employee
{
FirstName = "Kiran";
LastName = "Rao";
Designation = "Admin";
Role = "Admin Role : Authorizations & Authentications";
Print(){
[Link]();
[Link](`${[Link]}`);
}

}
class Manager extends Employee
{
FirstName = "Tom";
LastName = "Hanks";
Designation = "Manager";
Role = "Manager Role : Approvals";
Print(){
[Link]();
[Link](`${[Link]}`);
}

}
let employees = new Array(new Developer(), new Admin(), new Manager());
var designation = prompt("Enter Designation");
for(var employee of employees){
if([Link]===designation){
[Link]();
}
}
</script>

JavaScript Browser Objects

- JavaScript can control the browser window and the document in browser window.
- JavaScript BOM [Browser Object Model] comprises of following objects
1. window
2. location
3. navigator
4. history
5. document

window: It provides the properties and methods that are used to control the browser
window.

alert()
confirm()
prompt()
print()
open()
close() etc...

document : It provides all properties and methods that are used to control the
document in window.

write()
getElementById()
appendChild() etc..

location : It provides properties and methods that are used to access client
location details.

host : returns server name or IP address

port : returns port number
protocol : returns the current protocol "http, https, file.."
href : returns complete url
search : returns querystring
hash : returns current hash location, which is an id
reference.
reload() : it reloads the page.
pathname : It returns the folder name where page exists.

Ex:
<script>
[Link](`
Server Name | IP : ${[Link]} <br>
Protocol : ${[Link]} - ${([Link]==="http:")?"You are using Live
Server":"You are using File System"} <br>
Port : ${[Link]} <br>
Url : ${[Link]}

`);
</script>
FAQ: How to navigate to any specific page dynamically ?
Ans: By using "[Link]"

Syntax:
[Link] = "newPath";

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function LoginClick(){
var userid = [Link]("UserId").value;
var password = [Link]("Password").value;
if(userid==="john" && password==="admin"){
[Link] = "../public/[Link]";
} else {
[Link] = "./[Link]";
}
}
</script>
</head>
<body>
<h2>Login</h2>
<dl>
<dt>UserId</dt>
<dd><input type="text" id="UserId"></dd>
<dt>Password</dt>
<dd><input type="password" id="Password"></dd>
</dl>
<button onclick="LoginClick()">Login</button>
</body>
</html>

Ex: Location Hash

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intra Links</title>
<script>
function ViewClick(){
var list = [Link]("list");
switch([Link]){
case "#home":
[Link] += "You are viewing Home<br>";
break;
case "#men":
var now = new Date();
[Link] += "Mens Fashion<br>" + [Link]() + "<br>";
break;
case "#women":
var now = new Date();
[Link] += "Women Fashion<br>"+ [Link]() + "<br>";
break;
case "#kids":
var now = new Date();
[Link] += "Kids Fashion<br>"+ [Link]() + "<br>" ;
break;
}
}
</script>
<style>
header {
background-color: darkcyan;
color:white;
padding: 5px;
text-align: center;
}
section {
display: grid;
grid-template-columns: 3fr 9fr;
}
ul {
list-style: none;
margin-left: -40px;
}
li {
width: 150px;
background-color: darkcyan;
color:white;
font-size: 20px;
padding: 3px;
margin-bottom: 20px;
}
main {
height: 400px;
overflow: auto;
}
nav a {
color:white;
text-decoration: none;
}
.btn-back {
width: 200px;
background-color: black;
color:white;
padding: 3px;
text-align: center;
}
.btn-back a {
color:white;
text-decoration: none;
}
.header-nav {
display: flex;
justify-content: center;
}
.header-nav img {
margin-right: 30px;
border:2px solid white;
box-shadow: 2px 2px 2px gray;
}

</div>
</header>
<section>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#men">Men's Fashion</a></li>
<li><a href="#women">Women's Fashion</a></li>
<li><a href="#kids">Kid's Fashion</a></li>
</ul>
<div>
<button onclick="ViewClick()">Recently Viewed</button>
<p id="list"></p>
</div>
</nav>
<main>
<h2 id="home">Home</h2>
<p>We understand that <span><b><a href="#offer">Realme Offers</a></b></span> you may
have questions about the Microsoft Services Agreement. We have an FAQ page
([Link] that provides more
information, including what Microsoft products and services it covers. Whenever we make changes,
we provide a summary of the most notable changes to the current Microsoft Services Agreement.
We will also continue to provide a summary of the changes to the previous version, and a link to the
previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>
<p>We understand that you may have questions about the Microsoft Services Agreement. We
have an FAQ page ([Link] that
provides more information, including what Microsoft products and services it covers. Whenever we
make changes, we provide a summary of the most notable changes to the current Microsoft Services
Agreement. We will also continue to provide a summary of the changes to the previous version, and
a link to the previous version, of the Microsoft Services Agreement on the Summary of Changes
([Link] page.</p>

<h2 id="men">Men's Fashion</h2>

</main>
</section>
</body>
</html>

navigator: It provides the properties and methods that are used to get the
browser details.

appName : browser family name.

appVersion : browser version
platform : current client platform
geolocation() : current geolocation of client
language : the default browser language.
cookieEnabled : cookie status
plugins[] : returns all plugins installed
mimeTypes[] : returns all MIME types supported.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
[Link]((position)=>{
[Link](`
Latitude : ${[Link]} <br>
Longitude: ${[Link]}
`);
})
</script>
</head>
<body>
<h2>Please Allow your location </h2>
</body>
</html>

Browser Objects - Query String

Sudhakar Sharma

Sep 5, 2023

Browser Objects
- Window
- Location
- Navigator

FAQ: How to check cookies status?

Ans : By using "[Link]", which returns true when cookies are enabled in browser.

FAQ: How to check JavaScript status?

Ans: By using <noscript> element.

FAQ: How to check the pugins in browser?

Ans : By using [Link][] , which is an array that returns all available plugin names.
<script>
for(var i=0; i<[Link]; i++){
[Link]([Link][i].name + "<br>");
}
</script>

history

- It provides the properties and methods that are used to control the browser history.
- It provides the members
length get the count of pages in current browsing history
back() go to previous page in history
forward() go to next page in history
goto() go to specific page in history

Syntax:
<button onclick="[Link]()">
<button onclick="[Link]('[Link]')">

Ex:
<script>
if([Link]>3){
alert("You have to register for more");
[Link]="../public/[Link]";
} else {
[Link]("You can view max 3 pages for free..");
}
</script>

document
- It provides properties and methods to handle document elements.

getElementById()
querySelector()
appnedChild()
write()

FAQ: How to access multiple elements in document?

Ans: By using the document methods
getElementsByTagName()
getElementsByClassName()
getElementsByName()

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
var images = [Link]("img");
for(var i=0; i<[Link]; i++){
[Link](images[i].src);
}
}
</script>
</head>
<body onload="bodyload()">
<p>Welcome</p>
<h2>JavaScript</h2>
<img src="../public/images/[Link]" width="100" height="100">
<img src="../public/images/[Link]" width="100" height="100">
<img src="../public/images/[Link]" width="100" height="100">

</body>
</html>

Problem: Get the value of all checkboxes that are checked

<input type="checkbox" name="course" value="Java"> Java

<input type="checkbox" name="course" value=".NET"> .NET
<input type="checkbox" name="course" value="UI"> UI

Startup Code
var checkboxes = ? getElementsByName()
verify which on is checked
return its value

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Submit(){
[Link]("p").innerHTML = "";
var checkboxes = [Link]("course");
for(var i=0; i<[Link]; i++){
if(checkboxes[i].checked){
[Link]("p").innerHTML += checkboxes[i].value + "<br>";
}
}
}
</script>
</head>
<body>
<div>
<button onclick="Submit()">Submit</button>
</div>
<input type="checkbox" onchange="Submit()" name="course" value="Java"> Java
<input type="checkbox" onchange="Submit()" name="course" value=".NET"> .NET
<input type="checkbox" onchange="Submit()" name="course" value="UI"> UI
<p></p>
</body>
</html>

Problem: Get the count of elements that are using the CSS class called
"form-select"

var count = [Link]("form-select").length;

[Link](count);

State Management in Browser

- Http is a state less protocol.
- It can't remember information between pages.
- The memory allocated for a page is deleted when you navigate to another page.
- State less nature is good for application as memory is well managed.
- It is difficult for user to provide credentials for every page.
- Hence we have to implement varous state management techniques client side, which includes
a) Query String
b) Local Storage
c) Session Storage
d) Cookies
- These techniques allows to store data and use across pages.
- All the state management techniques are classified into 2 types
a) Client Side
b) Server Side
- JavaScript provides client side state management techniques.

Ex: Query String

1. [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form align="center" action="[Link]">
<h1>Google</h1>
<input type="text" name="search" size="40">
<p>
<button>Search</button>
</p>
</form>
</body>
</html>

2. [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var data = [
{Topic: "HTML", Details:["Void Elements", "Normal Elements","RC Data Elements"]},
{Topic: "JavaScript", Details:["Variables", "Data Types", "Operators"]}
];
function bodyload(){
var str = [Link]([Link]("=")+1);
[Link]("h2").innerHTML = `${str} Topics`;
var obj = [Link]((item)=>{
return [Link]==str;
});
if(obj) {
[Link](topic=>{
var li = [Link]("li");
[Link] = topic;
[Link]("ol").appendChild(li);
})
} else {
[Link]("Topic not found");
}
}
</script>
</head>
<body onload="bodyload()">
<h2></h2>
<ol>

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

State Management

Sudhakar Sharma

Sep 6, 2023

State Management Techniques

- Query String

Local Storage
- It is the storage of browser.
- It is permanent storage.
- It is available even after the browser closed or user restarts the device.
- It is accessible across pages and tabs.
- You have to manually delete from memory.

Syntax:
[Link]("key", "value")
[Link]("key");
[Link]("key");
[Link]();

Ex:
1. [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<script>
function LoginClick(){
var userid = [Link]("UserId").value;
[Link]("uid", userid);
[Link] = "[Link]";
}
</script>
</head>
<body>
<dl>
<h3>User Login</h3>
<dt>User Id</dt>
<dd><input type="text" id="UserId"></dd>
<dt>Password</dt>
<dd><input type="password" id="Password"></dd>
</dl>
<button onclick="LoginClick()">Login</button>
</body>
</html>

2. [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<script>
function bodyload(){
if([Link]("uid")==null){
[Link]="[Link]";
} else {
[Link]("p").innerHTML = `Hello ! ${[Link]("uid")}`;
}
}
function SignoutClick(){
[Link]("uid");
[Link] = "[Link]";
}
</script>
</head>
<body onload="bodyload()">
<h3>Home <button onclick="SignoutClick()">Signout</button> </h3>
<p></p>
</body>
</html>

Session Storage
- It is temporary storage.
- It is not accessible across tabs in browser.
- It is deleted automatically when browser is closed.

Syntax:
[Link]("key", "value");
[Link]("key");
[Link]("key");
[Link]()

Ex:
1. [Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<script>
function LoginClick(){
var userid = [Link]("UserId").value;
[Link]("uid", userid);
[Link] = "[Link]";
}
</script>
</head>
<body>
<dl>
<h3>User Login</h3>
<dt>User Id</dt>
<dd><input type="text" id="UserId"></dd>
<dt>Password</dt>
<dd><input type="password" id="Password"></dd>
</dl>
<button onclick="LoginClick()">Login</button>
</body>
</html>

2. [Link]

Cookies
- Cookies are simple text documents in browser memory, where you can store the client details and
access across pages or tabs.
- Cookies can be
a) In-Memory [Temporary]
b) Persistent [Permanent]

Syntax:
[Link] = "key=value; expiry=dateTime";

- If expiry is not defined then it is temporary cookie.

let ref = [Link]; => all cookie data

- You can access across pages and tabs in browser.

- If expiry is not defined then it is deleted when browser is closed.

Ex:
1. [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<script>
function LoginClick(){
var userid = [Link]("UserId").value;
[Link] = `uid=${userid}`;
[Link] = "[Link]";
}
</script>
</head>
<body>
<dl>
<h3>User Login</h3>
<dt>User Id</dt>
<dd><input type="text" id="UserId"></dd>
<dt>Password</dt>
<dd><input type="password" id="Password"></dd>
</dl>
<button onclick="LoginClick()">Login</button>
</body>
</html>

2. [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<script>
function bodyload(){
var userid = [Link];
[Link]("p").innerHTML = [Link]([Link]("=") + 1);
}
function SignoutClick(){
[Link] = "[Link]";
}
</script>
</head>
<body onload="bodyload()">
<h3>Home <button onclick="SignoutClick()">Signout</button> </h3>
<p></p>
</body>
</html>

Summary
- Query String
- Local Storage
- Session Storage
- Cookies

JavaScript Ajax

- Asynchronous JavaScript And XML.

- Asynchronous allows to execute the functionality without blocking other functions.
- XML is the format used for transporting data across requests.
- Ajax can configure partial postback.
- Ajax can add new content to page without reloading the complete page.
- Javascript "XmlHttpRequest" object is responsible for managing Ajax calls.

JavaScript Ajax

Sudhakar Sharma

•
Sep 7, 2023

- JavaScript Ajax is managed by "XMLHttpRequest" object

- The instance of XMLHttpRequest object comprises of following details

onreadystatechange : It defines the function to execute as Ajax call.

readyState : It returns Ajax status
0 UNSENT
1 OPENED
2 HEADERS_RECEIVED
3 LOADING
4 DONE
open() : It configures the request path and request details.
send() : It sends the request.
status : It returns the status code
200 - OK
404 - Not Found etc..
statusText : It returns the status text
response : It returns the response, which includes all types
responseText : It returns response in string format
responseXML : It returns XML Response.

Syntax:
open("methodName", "url", async:boolean);
send();

methodName : GET, POST, PUT, DELETE

url : resource url [file or api]
async : true if you want to access without blocking

[Link] = function(){

if([Link]==4){
var now = new Date();
[Link]("fetchTime").innerHTML = [Link]();
[Link]("container").innerHTML = [Link];
}
}
}

function bodyload(){
var now = new Date();
[Link]("timer").innerHTML = `Page Loaded on : $
{[Link]()}`;
}
</script>
</head>
<body onload="bodyload()">
<p id="timer"></p>
<button onclick="GetDataClick()">Get Data</button>
<p id="fetchTime"></p>
<div id="container">

</div>
</body>
</html>

Note: You can convert the responseText into JSON by using

[Link](string)
You can convert the JSON into string by using
[Link](jsonData)

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function FetchClick(){
var http = new XMLHttpRequest();
[Link]("get", "[Link]
[Link]();
[Link] = function(){
if([Link]==4){
var products = [Link]([Link]);
[Link](product=>{
var li = [Link]("li");
[Link] = [Link];
[Link]("ol").appendChild(li);
})
}
}
}
</script>
</head>
<body>
<button onclick="FetchClick()">Fetch</button>
<ol>

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

jQuery
- jQuery is a JavaScript library to build UI.
- A library comprises of pre-defined functions which you have implement and design the dynamic
interface.
- Write Less Do More.
- "John Resig" introduced jQuery library in 2006.
- jQuery can handle DOM manipulations, Interactions, validations, Styles, Animations by using pre-
defined methods.
- It reduces browser compatibility issues.

Setup jQuery for Page:

1. Install jQuery library for project

>npm install jquery --save

2. Link jQuery library to page

<script src="../node_modules/jquery/dist/[Link]"> </script>

3. The complete jQuery library is defined in any anonymous function "( )".

(
... jquery functions...
)

4. You have to import the jquery anonymous method and use in page. All jquery methods are
imported by using "$".

(or)
<script>
$(function(){

})
</script>

Jquery DOM methods and Events

Sudhakar Sharma

Sep 8, 2023

jQuery DOM Methods

text() innerText
html() innerHTML
css() define styles dynamically
val() get and set value
attr() get and set attribute
prop() get and set property
prepend() add as prefix
append() add as suffix
appendTo() add to specific element
before() add above
after() add below

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script>
$(()=>{
$("p").html(" <b>Library</b>");
$("p").prepend("jQuery");
$("p").append("-Write less, do More");
$("p").before("Web Development");
$("p").after("Client Side");
})
</script>
</head>
<body>
<p></p>
</body>
</html>

jQuery Reference method

- jQuery can refer HTML elements by using CSS selectors.

$("h2") type selector

$("#btn") id selector
$(".btn-primary") class selector
$("nav span") child selector
$("nav>span") direct child selector
etc..

jQuery output and input

Output
- alert()
- confirm()
- [Link]()
- html()
- text()
- [Link](), warn(), info(), error() etc..

Input
- query string
- prompt()
- form elements

jQuery uses JS Language

- Variables
- Data Types
- Operators
- Statements
- Functions
- Classes

$(()=>{
[Link](category=>{
$(`<li>${category}</li>`).appendTo("ol");
$(`<option>${category}</option>`).appendTo("select");
})
})
</script>
</head>
<body>
<ol></ol>
<select></select>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script>
function LoadProducts(){
fetch("[Link]
.then(res=>[Link]())
.then(products=>{
[Link](product=>{
$(`<tr>
<td> ${[Link]} </td>
<td> ${[Link]} </td>
<td> <img src=${[Link]} width="100" height="100"> </td>
<td> ${[Link]} [${[Link]}] </td>
</tr>`).appendTo("tbody");
})
})
}

$(()=>{
LoadProducts();
})
</script>
</head>
<body>
<table width="100%" border="1">
<thead>
<tr>
<th>Title</th>
<th>Price</th>
<th>Preview</th>
<th>Rating</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</body>
</html>

jQuery & JavaScript Events

JavaScript Events:
- Event is a message sent by sender to its subscriber in order notify the change.
- Event uses "Observer" pattern, which is a communication pattern.
- Event follows a "Delegate" mechansim [ function pointer ].

Syntax:
function InsertClick() => Subscriber
{
}

<button onclick="InsertClick()"> => Sender

- Subscriber defines the actions to perform.

- Sender sends a notification to subscriber and triggers the actions.

Event & Event Handler

- Event defines the "trigger"
- Event handler defines actions on trigger.

Syntax:
<button onclick="InsertClick()">

onclick => Event

onclick="InsertClick()" => Event Handler

Event Listener:
- It allows to configure a trigger for any element dynamically.
- You can define event for element without using Event Handlers.

Syntax:
[Link]("btn").addEventListener("EventName", function(){

});

EventName => click, change, blur, keyup

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
[Link]("btnInsert").addEventListener("click", ()=>{
[Link]("Record Inserted");
})
}
</script>
</head>
<body onload="bodyload()">
<button id="btnInsert">Insert</button>
</body>
</html>

Event Arguments:
- Every event handler can have 2 default arguments
1. this
2. event

Syntax:
<button onclick="InsertClick(this, event)">
InsertClick(event, this)
InsertClick(event)
InsertClick(this)
InsertClick()

- "this" sends information about current element to the subscriber, which can be
id, name, class, value, src, width, height, href etc..

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function InsertClick(obj){
[Link](`
Button Id : ${[Link]} <br>
Button Name: ${[Link]} <br>
Button Class: ${[Link]} <br>
`);
}
</script>
</head>
<body>
<button id="btnInsert" name="Insert" class="btn btn-primary"
onclick="InsertClick(this)">Insert</button>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Database(buttonName){
switch(buttonName){
case "Insert":
[Link]("Record Inserted");
break;
case "Delete":
[Link]("Record Deleted");
break;
case "Update":
[Link]("Record Updated");
break;
}
}
</script>
</head>
<body>
<button name="Insert" onclick="Database([Link])">Insert</button>
<button name="Update" onclick="Database([Link])">Update</button>
<button name="Delete" onclick="Database([Link])">Delete</button>
</body>
</html>

- "event" sends information about current event to the subscriber, which includes
clientX, clientY, which, shiftKey, ctrlKey, altKey, keyCode, charCode etc..

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function GetPosition(e){
if(([Link]>=159 && [Link]<=212) && ([Link]>=181 && [Link]<=184)){
[Link]("p").innerHTML= "Belt Cost : ₹ 300/-";
} else {
[Link]("p").innerHTML = "You clicked on image";
}
if([Link]){
[Link]("../public/images/[Link]","Kids","width=300 height=400");
}
}
</script>
</head>
<body>
<img onclick="GetPosition(event)" src="../public/images/[Link]" width="300"
height="400">
<p></p>
</body>
</html>

Event Args in JavaScript and JQuery

Sudhakar Sharma

Sep 9, 2023

Events in JavaScript
- Event
- Event Handler
- Observer
- Delegate
- Subscriber
- Sender
- Event Args
a) Default Event Args
- this
- event

Custom Args:
- Every event can be configured with custom args.
- A custom argument can be any type
a) Primitive Type
b) Non Primitive Type

Syntax:
<button onclick="InsertClick(0, ' ', true, [ ], { }, [ { }, { }])">

function InsertClick(...params) { }

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function InsertClick(...product){
var [id, name, stock, cities, rating] = product;
[Link](`
Product Id : ${id} <br>
Name : ${name}<br>
Stock: ${stock} <br>
Cities: ${[Link]()} <br>
Rating: ${[Link]}
`);
}
</script>
</head>
<body>
<button onclick="InsertClick(1, 'TV', true, ['Delhi','Hyd'],{Rate:4.5})" >Click</button>
</body>
</html>

- You can pass both default and custom args.

<button onclick="InsertClick(this, event, { }, [ ])">

[Link](`
Button Id : ${[Link]} <br>
X Position : ${[Link]} <br>
Cities: ${[Link]()} <br>
Rating: ${[Link]}
`);
}
</script>
</head>
<body>
<button id="btnInsert" onclick="InsertClick(this, event, ['Delhi','Hyd'],{Rate:4.5})" >Click</button>
</body>
</html>

- The event listener in JavaScript or jQuery can have only one default parameter, which can collect
both element and event details.
- Event listener can't have "this" as default. It can have only "event".
- "event" can access both object and event details

[Link]
[Link]
[Link]
[Link]

Syntax:
[Link]("button").addEventListener("click", (e)=>{
[Link];
[Link]
})

Ex:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
[Link]("btnInsert").addEventListener("click",(event)=>{
[Link](`
Button Id : ${[Link]} <br>
X Position: ${[Link]}
`);
});
}
</script>
</head>
<body onload="bodyload()">
<button id="btnInsert">Insert</button>
</body>
</html>
jQuery Event:
- jQuery can use only event listener.
- jQuery will not use event handler

Syntax:
<button> Insert </button>

$("button").click(event=>{
[Link];
[Link];
})

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script>
function LoadProducts(){
fetch("[Link]
.then(res=>[Link]())
.then(products=>{
[Link](product=>{
$(`<tr>
<td> ${[Link]} </td>
<td> ${[Link]} </td>
<td> <img src=${[Link]} width="100" height="100"> </td>
<td> ${[Link]} [${[Link]}] </td>
</tr>`).appendTo("tbody");
})
})
}

$(()=>{
$("button").click((e)=>{
LoadProducts();
[Link](`
Button Id : ${[Link]} \n
Button Name: ${[Link]} \n
X Position: ${[Link]}
`);
})
})
</script>
</head>
<body>
<button id="btnLoad" name="Load">Load Data</button>
<table width="100%" border="1">
<thead>
<tr>
<th>Title</th>
<th>Price</th>
<th>Preview</th>
<th>Rating</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</body>
</html>

Ex: jQuery Event

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
fieldset {
display: grid;
grid-template-columns: 6fr 6fr;
}
</style>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script>
$(()=>{

$("#btnSubmit").click(()=>{
$("#lblName").html($("#txtName").val());
$("#lblAge").html($("#txtAge").val());
$("#lblCity").html($("#lstCities").val());
})

$("#lstCities").change(()=>{
if($("#lstCities").val()=="-1"){
$("#lblCity").html("City Not Available").css("color","red");
} else {
$("#lblCity").html($("#lstCities").val()).css("color","black");
}
})

})
</script>
</head>
<body>
<fieldset>
<legend>User Details</legend>
<div>
<dl>
<dt>Name</dt>
<dd><input type="text" id="txtName"></dd>
<dt>Age</dt>
<dd><input type="number" id="txtAge"></dd>
<dt>City</dt>
<dd>
<select id="lstCities">
<option value="-1">Select City</option>
<option>Delhi</option>
<option>Hyd</option>
</select>
</dd>
</dl>
<button id="btnSubmit">Submit</button>
</div>
<div>
<table border="1" width="100%">
<tr>
<td width="100">Name</td>
<td id="lblName"></td>
</tr>
<tr>
<td>Age</td>
<td id="lblAge"></td>
</tr>
<tr>
<td>City</td>
<td id="lblCity"></td>
</tr>
</table>
</div>
</fieldset>
</body>
</html>

Browser Events
1. Mouse Events
2. Keyboard Events
3. Button Events
4. Form Events
5. Clipboard Events
6. Element State Events
7. Touch Events
8. Timer Events etc...

Browser Events with Examples

Sudhakar Sharma

Sep 11, 2023

1. Mouse Events
Handler Name Listener Name
-----------------------------------------------
onmouseover mouseover
onmouseout mouseout
onmousedown mousedown
onmouseup mouseup
onmousemove mousemove

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function GetDetails(str){
[Link]("p").innerHTML = str;
}
function ChangeImage(){
[Link]("fashion").src = "../public/images/[Link]";
}
function ResetImage(){
[Link]("fashion").src = "../public/images/[Link]";
}
</script>
</head>
<body>
<div>
<img id="fashion" onmousedown="ChangeImage()" onmouseup="ResetImage()"
src="../public/images/[Link]" width="200" height="300">
</div>
<marquee scrollamount="15" onmouseover="[Link]()" onmouseout="[Link]()">
<img onmouseover="GetDetails('30% OFF On Smart Watches')" src="../public/images/[Link]"
width="200" height="200">
<img onmouseover="GetDetails('AC at low cost EMI - SBI Bank Offers')"
src="../public/images/[Link]" width="200" height="200">
<img onmouseover="GetDetails('Refridgirator 40% OFF on Electronics')"
src="../public/images/[Link]" width="200" height="200">
</marquee>
<p align="center"></p>
</body>
</html>

Ex: mouse move

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function SetPosition(e){
var flag = [Link]("flag");
[Link] = "fixed";
[Link] = [Link] + "px";
[Link] = [Link] + "px";
[Link]("status").innerHTML = `Mouse X Position : ${[Link]} px <br>
Mouse Y Position : ${[Link]} px`;
}
</script>
</head>
<body onmousemove="SetPosition(event)">
<div style="height: 1000px;">
move mouse pointer to test.
<div id="status"></div>
</div>
<img src="../public/images/[Link]" width="50" height="50" id="flag">
</body>
</html>

Task:

2. Keyboard Events

onkeyup keyup
onkeydown keydown
onkeypress keypress

Note: Always use keyup & keydown to verify the characters.

Always use keypress to verify the character code.

Ex:
data/[Link]

[
{
"UserName":"john"
},
{
"UserName":"john12"
},
{
"UserName":"john_nit"
},
{
"UserName":"david"
}
]

fetch("../data/[Link]")
.then(res=>[Link]())
.then(users=>{
for(var user of users){
if([Link]===username){
[Link] = "User Name Taken - Try another".fontcolor('red');
break;
} else {
[Link] = "User Name Available".fontcolor('green');
}
}
})
}
function VerifyPassword(e){
var pwdError = [Link]("pwdError");
if([Link]>=65 && [Link]<=90){
[Link] = "block";
} else {
[Link] = "none";
}
}
</script>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
</head>
<body>
<dl>
<dt>User Name</dt>
<dd>
<input type="text" id="UserName" onkeyup="VerifyUser()">
</dd>
<dd id="userError"></dd>
<dt>Password</dt>
<dd>
<input type="password" id="Password" onkeypress="VerifyPassword(event)">
</dd>
<dd id="pwdError" style="color:goldenrod; display: none;">
<span class="bi bi-exclamation-triangle-fill"></span> Warning : Caps ON
</dd>
</dl>
</body>
</html>

3. Button Events

onclick click
ondblclick dblclick
oncontextmenu contextmenu [right click]
onselectstart selectstart [selecting content on page using drag]

Note: You can disable any event by returning false.

FAQ: How to disable right click in page and selection of content in page?
Ans: By configuring oncontextmenu & onselectstart events in document.
You have to configure them with "return false".

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function OpenImage(){
[Link]('../public/images/[Link]','Women','width=300 height=400');
}
[Link] = function(){
alert('Right Click Disabled');
return false;
}
</script>
</head>
<body>
<img ondblclick="OpenImage()" src="../public/images/[Link]" width="100" height="100">
<p>double click to view large</p>
<h1>Right Click is Disabled</h1>
</body>
</html>

4. Element State Events

onchange change
onblur blur
onfocus focus
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function ShowMsg(){
[Link]("msg").innerHTML = "Name in Block Letters".fontcolor('red');
}
function ChangeCase(){
var username = [Link]("UserName").value;
[Link]("UserName").value = [Link]();
[Link]("msg").innerHTML = "";
}
</script>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input type="text" id="UserName" onfocus="ShowMsg()" onblur="ChangeCase()"></dd>
<dd id="msg"></dd>
</dl>
</body>
</html>

Events and jQuery Effects, jQuery UI

Sudhakar Sharma

Sep 12, 2023

1. Mouse Events
2. Keyboard Events
3. Button Events
4. Element State Events

Clipboard Events
oncut cut
oncopy copy
onpaste paste

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Cut(){
[Link]("p").innerHTML = "Removed and Copied to Clipboard";
}
function Copy(){
[Link]("p").innerHTML = "Copied to Clipboard";
}
function Paste(){
[Link]("p").innerHTML = "Inserted Clipboard";
}

</script>
</head>
<body>
<textarea oncut="Cut()" oncopy="Copy()" onpaste="Paste()" rows="4" cols="40"></textarea>
<p></p>
</body>
</html>
Timer Events
setTimeout()
clearTimeout()
setInterval()
clearInterval()

Form Events
onsubmit submit
onreset reset

- These are the events used with form element.

- These events fireup with generic buttons.
[ submit, reset ]

Syntax:
<form onsubmit="action()" onreset="action()">

<button type="submit"> Submit </button>

<buton type="reset"> Reset </button>

</form>

FAQ's:
1. How to disable the default functionality configured for submit and reset buttons?
A. By using the event argument "preventDefault()".

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function SubmitClick(e){
[Link]();
alert("Form Will submit its data to server");
}
</script>
</head>
<body>
<form onsubmit="SubmitClick(event)" onreset="alert('Form will reset')">
<dl>
<dt>User Name</dt>
<dd><input type="text" name="UserName"></dd>
</dl>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>

2. How to submit form data to server on the events triggered by other elements in form?
A. You can submit form by using "submit()" method for <form> element dynamically.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function CityChange(){
[Link]();
}
</script>
</head>
<body>
<form name="frmRegister">
<dl>
<dt>User Name</dt>
<dd><input type="text" name="UserName"></dd>
<dt>Select City</dt>
<dd>
<select onchange="CityChange()" name="City">
<option>Select Your City</option>
<option>Delhi</option>
<option>Hyd</option>
</select>
</dd>
</dl>
</form>
</body>
</html>

3. How to disable the event configured for parent element after triggering the child event?
A. By using the event argument "stopPropagation()"

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function DivClicked(e){
alert("Div Clicked");
}
function ButtonClicked(e){
alert("Button Clicked");
[Link]();
}
</script>
<style>
div {
padding: 50px;
border:2px solid black;
width: 400px;
}
</style>
</head>
<body>
<div onclick="DivClicked()">
<p>Container have click Event</p>
<button onclick="ButtonClicked(event)">Click Me</button>
</div>
</body>
</html>

Touch Events
ontouchstart touchstart
ontouchend touchend
ontouchmove touchmove

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function GetDetails(str){
switch(str){
case "watch":
[Link]("h2").innerHTML="50% OFF on Smart Watches";
break;
case "ac":
[Link]("h2").innerHTML = "Winter Sales - Special offers on A/C's";
break;
}
}
</script>
</head>
<body>
<img ontouchstart="GetDetails('watch')" src="../public/images/[Link]" width="200"
height="200">
<img ontouchstart="GetDetails('ac')" src="../public/images/[Link]" width="200" height="200">
<h2></h2>
</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function MoveImage(e){
var img = [Link]("img");
[Link] = "fixed";
[Link] = [Link][0].clientY + "px";
[Link] = [Link][0].clientX + "px";
}
</script>
</head>
<body>
<img ontouchstart="MoveImage(event)" src="../public/images/[Link]" width="100"
height="100">
</body>
</html>

jQuery Effects
- jQuery provides various methods for pre-defined CSS effects.

slide()
slideToggle()
fade()
fadeToggle()
show()
hide()
toggle() etc..

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script>
$(()=>{
$("button").click(()=>{
$("img").fadeToggle(2000);
})
})
</script>
</head>
<body>
<button>Show / Hide</button>
<br><br>
<div>
<img src="../public/images/[Link]" width="200" height="200">
</div>
</body>
</html>

jQuery UI
- It is a component library for jQuery similar to bootstrap.
- It provides various jQuery effects, interactions and widgets.
- You can build effective UI faster.

Setup jQuery UI:

1. Download jQuery UI library files
[Link]

2. Extract the ZIP folder

3. Copy all files

4. Go to your project physical path and create a new folder in "node_modules"

"jquery-ui"

5. Paste all copied files.

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/jquery-ui/[Link]">
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/jquery-ui/[Link]"></script>
<script>
$(()=>{
$("img").draggable();
})
</script>
</head>
<body>

<img src="../public/images/[Link]" width="200" height="200">

</body>
</html>

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../node_modules/jquery-ui/[Link]">
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/jquery-ui/[Link]"></script>
<script>
$(()=>{
$("#topics").accordion();
})
</script>
</head>
<body>
<div id="topics">
<h2>HTML</h2>
<div>
<p>It is a markup language.</p>
</div>
<h2>CSS</h2>
<div>
<p>It is for styles in HTML</p>
</div>
</div>
</body>
</html>

jQuery Ajax

Sudhakar Sharma

Sep 13, 2023

jQuery Ajax

FAQ: What is the issue with "fetch()"?

Ans: It can't return data directly in JSON.
You have to convert data into JSON explicitly.
Initial Response returns in Binary format.
It provides "catch()" but can't handle errors, as JavaScript will not provide any
error library.
It is not good in error handling.
If data is returned in binary format, it can be blocked by firewall.

FAQ: What is the issue with "XMLHttpRequest" object?

Ans: It returns data in Text format.
You have to convert into JSON.
It requires lot of methods and properties to process the request and get response.
It is not async technique for methods.
It is not secured for transporting data.

- jQuery library provides various AJAX methods.

$.getJSON()
$.ajax()
- It returns data directly in JSON if requested url is returning JSON.
- It returns text or XML if url is returning text and XML.
- It provides lot of life cycle methods, that can track and report exact error.
.ajaxStart()
.ajaxEnd()
.ajaxComplete()
.ajaxSuccess()
.ajaxError()
- It is good in error handling.

Syntax:
$.ajax({settingsObject})

{
method : It defines the request method.
GET - Fetching
POST - Submitting
PUT - Update
PATCH - Partial Update
DELETE- Deleting

url : It defines the source URL that sends data to application.

success: It is a callback function that executes when request is success.

It returns response according to the content type. [JSON, XML, HTML..]

error : It is a callback function that executes when request fails.

It returns error object that comprises of error details like
a) status
b) statusText
c) headers etc..
}

Syntax:
$.ajax( {
method : "get",
url : "path",
success : (response)=> { },
error : (jqError)=> { }
}
);

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Ajax</title>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script>
$(()=>{
var now = new Date();
$("p").html(`Page Loaded on ${[Link]()}`)
$("button").click(()=>{
$.ajax({
method: "get",
url: "../data/[Link]",
success: (response)=>{
$("#data").html(response);
},
error: (errorObj)=> {
$("#data").html(`${[Link]} : Page you requested ${[Link]}`);
}
})
})
})
.ajaxStart(()=>{
alert(`Your request for help document started..`);
})
.ajaxSuccess(()=>{
alert(`Your request being processed successfully..`);
})
.ajaxComplete(()=>{
alert(`Your request processed`);
})
.ajaxStop(()=>{
alert(`Response is ready to load in your page`);
})
</script>
</head>
<body>
<p></p>
<button>Load Help</button>
<div>
<pre id="data">

</pre>
</div>
</body>
</html>

Note: You can't configure event handler for any element, which is dynamically generated in page. To
to define events for dynamically generated element, you have to use jquery document "on()".

$(document).on("eventName", "elementRef", ( event )=>{

})

Ex: Shopper Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopper</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/[Link]">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<script src="../node_modules/jquery/dist/[Link]"></script>
<script>

$(()=>{

LoadCategories();
LoadProducts('[Link]

$("#lstCategories").change(()=>{
if($("#lstCategories").val()=="all") {
LoadProducts('[Link]
} else {
LoadProducts(`[Link]
("#lstCategories").val()}`);
}
})

$(document).on("click","#btnAdd",(e)=>{
alert(`Add Clicked ${[Link]}`);
})
})
</script>
</head>
<body class="container-fluid">
<header class="p-2 text-center bg-dark text-white">
<span class="h3"> <span class="bi bi-cart4"></span> Shopper</span>
</header>
<section class="row mt-2">
<nav class="col-2">
<label class="form-label fw-bold">Select Category</label>
<select class="form-select" id="lstCategories">

</select>
</nav>
<main class="d-flex flex-wrap col-10 overflow-auto" style="height: 500px;">

</main>
</section>
</body>
</html>

jQuery Plugin's
[Link]

jQuery Plugins

Sudhakar Sharma

Sep 14, 2023

jQuery Plugin's
- A plugin is just like an extention for web application.
- There are various 3rd party plugins for JavaScript and jQuery, which are used to build application
more faster.
- You can search for plugin in "[Link]"

Note: Every jQuery plugin requires "jQuery" core library. [[Link]]

Ex: Barcode

1. Install the library

>npm i jquery-ean13 --save

2. Link the jquery library for barcode into page and assign 12 digit code with
".EAN13( ' 12 digit code ')

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/[Link]">
<title>Document</title>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/jquery-ean13/dist/[Link]"></script>
<script>
$(()=>{
$("#barcode").EAN13('900999341111');
})
</script>
</head>
<body class="container-fluid">
<div class="card m-2 p-2 w-25">
<img class="card-img-top" src="../public/images/[Link]" height="300">
<div class="card-footer">
<canvas width="220" height="60" id="barcode">
Your browser doesn't support canvas.
</canvas>
</div>
</div>
</body>
</html>

Ex: jQuery Grid

> npm i jsgrid

filtering: true,
editing: true,
sorting: true,
paging: true,

data: [
{Name: "Samsung TV", Price:45000.33, Stock: true},
{Name: "Mobile", Price: 20000.33, Stock: false},
{Name: "Watch", Price: 4000.32, Stock: true}
],

fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Price", type: "number", width: 50 },
{ name: "Stock", type: "checkbox", title: "In Stock", sorting: false },
{ type: "control" }
]
});

})
</script>
</head>
<body>
<h2>Products Grid</h2>
<div id="grid">

</div>
</body>
</html>

Ex: JQuery Cookies

> npm i [Link] --save

$.cookie("name", value, { expiry : daysNumber }) => creating

$.cookie("name") => reading
$.cookie("name")==undefined => doesn't exist
$.removeCookie("name") => delete cookie

$.cookie("name", value) => session cookie [temp]

1. [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/[Link]/[Link]"></script>
<script>
$(()=>{
$("#btnLogin").click(()=>{
$.cookie('userName', $("#UserName").val(), { expires: 2 });
[Link] = "[Link]";
})
})
</script>
</head>
<body>
<h2>Login</h2>
User Name : <input type="text" id="UserName"> <button id="btnLogin">Login</button>
</body>
</html>

2. [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/jquery/dist/[Link]"></script>
<script src="../node_modules/[Link]/[Link]"></script>
<script>
$(()=>{
if($.cookie("userName")==undefined) {
[Link]="[Link]";
} else {
$("div").html(`Hello ! ${$.cookie("userName")}`);
}

$("#btnSignout").click(()=>{
$.removeCookie("userName");
[Link] = "[Link]";
})
})
</script>
</head>
<body>
<h2>Success <button id="btnSignout">Signout</button> </h2>
<div></div>
</body>
</html>
Sass

Sass

Sudhakar Sharma

Sep 16, 2023

Sass
- Syntactically Awesome Style Sheet
- It css pre-processor or pre-compiler.
- Sass provides several programming features, which a developer can use and implement to design
complex styles in simplified manner.
- Browser can't understand sass code directly, it is trans-compiled into CSS.

Developer => Write => Sass Code => Transcompiles => CSS => Browser

Install Sass on your PC:

1. Open windows command prompt

C:\>

2. Run the command

C:\>npm install -g sass

Using Sass in Project:

1. Create a sass file with extention ".scss"

2. Write code in sass syntax [all css styles & attributes are same]

3. Transcompile the scss file into css file

> sass [Link] [Link]

4. Link the css file to HTML page.

Note: After every modification in Scss you are re-compile code.

> sass [Link] [Link]

Sass Selection Style

- Sass doesn't require much of rational selectors.

- It can access the elements in the same hierarchy how they are defined in page.
Syntax:
parent {
...parent styles...
child {
....child styles....
}
}

Ex:
1. Add a new folder by name "scss" into "src" folder.
2. Add a new file by name
"[Link]"
.container{
border:1px solid darkmagenta;
padding: 20px;
background-color: rgb(236, 167, 236);
box-shadow: 5px 4px 2px black;
h2 {
color:darkmagenta;
font-family: Arial;
}
p{
font-family: Georgia;
font-size: 24px;
color:maroon;
}
}

3. Open File location in Integrated Terminal

>sass [Link] [Link]

4. Create a HTML page

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../src/scss/[Link]">
</head>
<body>
<div class="container">
<h2>Sass</h2>
<p>Syntactically Awesome Style Sheet</p>
</div>
<p>CSS Pre Compiler for effective UI</p>
<p>Faster Designs</p>
<p>Logical Functions</p>
</body>
</html>

Sass Variables
- You can store values in variable and configure to any elements.
- You can re-use the values.
- Sass variables are declared by using "$"

$variableName : value;

- You can access and use variable at any location using "$variableName"

Ex:
[Link]

$border : 1px solid darkgreen;

$bgColor: rgb(167, 236, 181);
$shadow : 5px 4px 2px black;
$color: darkgreen;
$font : Arial;

.container{
border:$border;
padding: 20px;
background-color: $bgColor ;
box-shadow: $shadow ;
h2 {
color: $color;
font-family: Arial;
}
p{
font-family: Georgia;
font-size: 24px;
color:maroon;
}
}
fieldset {
border: $border;
box-shadow: $shadow;
background-color: $bgColor;
margin-top: 20px;
padding: 5px;
font-family: $font;
color:$color;
legend {
border:$border;
background-color: white;
}
}

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../src/scss/[Link]">
</head>
<body>
<div class="container">
<h2>Sass</h2>
<p>Syntactically Awesome Style Sheet</p>
</div>
<fieldset>
<legend>Features of Sass</legend>
<p>CSS Pre Compiler for effective UI</p>
<p>Faster Designs</p>
<p>Logical Functions</p>
</fieldset>
</body>
</html>

Sass Functions
- Sass function are used to control the flow of execution.

@If
@for

- The iterations are created in sass by using "@for"

Syntax:
@for $variableRef from initial through final
{

Note: The data binding expression in sass is "#{ }"

Ex:
[Link]

@for $i from 1 through 4

{
.box-#{$i} {
margin-left: $i * 100px;
}
}

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../src/scss/[Link]">
</head>
<body>
<div class="box-1">
<img src="../public/images/[Link]" width="100" height="100">
</div>
<div class="box-2">
<img src="../public/images/[Link]" width="100" height="100">
</div>
<div class="box-3">
<img src="../public/images/[Link]" width="100" height="100">
</div>
<div class="box-4">
<img src="../public/images/[Link]" width="100" height="100">
</div>
</body>
</html>

Sass Mixins
- It is like a reusable function

Syntax:
@mixin Name(params)
{
}

@include Name(values);

Ex:
[Link]

$theme : red;

@mixin SetTheme($borderColor, $color, $bgColor){

.container {
border:2px solid $borderColor;
padding: 10px;
font-family: Arial;
color:$color;
background-color: $bgColor;
}
}

@if $theme==green {
@include SetTheme(darkgreen, green , lightgreen);
} @else if $theme==red {
@include SetTheme(darkred, red , #ffcccc );
} @else {
@include SetTheme(black, gray , lightgray );
}

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../src/scss/[Link]">
</head>
<body>
<div class="container">
<h2>Sass</h2>
<p>Syntactically Awesome Style Sheet</p>
</div>
</body>
</html>

Sass Modules and MongoDB

Sudhakar Sharma

Sep 20, 2023

Sass
- Variables
- Functions
@if
@for
- Mixins
Sass Module System
- A module comprises of set of variables, functions and mixins.
- You can import into any file and reduce the number of requests.
- It will reduce the load time and allows reusability.
- Every "scss" file is considered as a module.
- If you are designing as module then its name must start with "_fileName.scss".
- You can import any file into another by using "@import".

Ex:
1. Add following files
_variables.scss

$border: 2px solid red;

$boxShadow: 2px 2px 2px gray;
$txtShadow: 3px 3px 2px black;

_mixins.scss

@import "variables";

@mixin SetTheme()
{
.container{
border: $border;
box-shadow: $boxShadow;
padding: 20px;
h2 {
text-shadow: $txtShadow;
}
}
}

2. Import into "[Link]"

@import "mixins";
@include SetTheme();

3. Transcompile [Link]

> sass [Link] [Link]

4. Link to [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../src/scss/[Link]">
</head>
<body>
<div class="container">
<h2>Sass</h2>
<p>Syntactically Awesome Style Sheet</p>
</div>
</body>
</html>

MongoDB
(Database)
- Database is used to handle relational data.
- Database are classified into
a) SQL
b) Non-SQL
- SQL is Structured Query Language, it is a language used for managing data.
- Non-SQL database don't use any SQL language.
- MongoDB is non-sql data or no-sql.
- It comprises of simple JavaScript like methods for manipulation.
- It maintains data in JSON format.
- It is structure less [Schema less]
- Data Replications
- Ad-hoc Queries [Dynamic Queries]
- MongoDB is document based.

Setup MongoDB
1. Download and Install MongoDB Community Server

[Link]

2. Install MongoDB with "MongoDB Compass" [GUI Tool]

Start MongoDB Server:

1. Open [Link] on your PC

2. Right Click on MongoDB Server

3. Select "Start"

Start MongoDB Compass:

1. Open Programs
2. MongoDB Compass
3. Connect to MongoDB Server using following address

mongodb://[Link]:27017
(or)
mongodb://localhost:27017

MongoDB Commands:

Video Library Project

Sudhakar Sharma

Sep 22, 2023

Video Library
[Demo Project]

Abstract: A video library that allows creators to upload videos and general users can
watch videos. It is aim is to keep all related videos in various categories so
that browsing can be easy and can tack the activity of user with history.

Existing System: YouTube provides various techniques of creating channels and

uploading videos for users.

Proposed System: Creator can upload various types of videos without any
restrictions. How ever admin can validate the videos before
making them available for general users.

Software and Hardware Requirements:

Hardware Requirements:
4GB RAM
500 GB HDD

Software Requirements
OS :Windows-8+ version
Front End : HTML, CSS, Bootstrap, JS, jQ
Back End : Node JS, Express JS, MongoDB

Modules:
1. Admin
2. Creator
3. User
4. Videos Browse & Filter
5. Payment

Admin Roles
- Can Add creator
- Can Remove creator or modify creator details
- Can Add User
- Can Remove or Modify user details
- Can Add Video
- Can Remove or modify Videos

Creator Roles
- Register / Login
- Add Video
- Modify and Remove Video

User Roles
- Register
- Login
- Watch Videos
- Like , dislike or comment on videos.

Data Models
1. Conceptual Model
2. Physical Model
3. Logical Model
4. Entity Model

MongoDB Commands

Sudhakar Sharma

Sep 23, 2023

MongoDB Terminology

1. Database : It is a store where data is kept.

A database comprises of collections.

2. Collection : It is an JSON array in MongoDB.

Data is stored in JSON array called collection.
In other databases it is similar to a "table".

3. Document : It is a JSON object that contains data stored with key & value
reference.

4. Fields : It refers to key in every JSON object.

5. Embedded Document: It refers to a JSON object within an object.

Oracle | MySql | Sql Server.. MongoDB

---------------------------------------------------------------------
Database Database
Table Collection
Row / Record Document
Field Field
Join Embedded Document

MongoDB Commands

- MongoDB provides "MongoShell" , which is a CLI [Command Line Tool].

- You can find mongo shell in "MongoDB Compass"
- Database operations require
C Create
R Read
U Update
D Delete

1. To view the list of existing databases in MongoDB

>show dbs

2. To create a new database or to change into existing database

>use databaseName

If you define new name, then database is created by specified name.

If you define an existing name, then it can switch to existing database.

Note: Database is not displayed in list, if it is empty.

3. To create a new collection and add to database

>[Link]("name", {attributes})
>[Link]("name")

Attribute Type Description

-------------------------------------------------------------------------------------------
autoIndexId boolean It defines a unique ID for every document
automatically.

max number It defines the maximum number of documents

to allow.

capped boolean If capped is true then it will not allow new

documents, after reaching the max limit.

If capped is false then the old document is

replaced with new document after reaching max
limit.

size number It defines the total memory allocated for table

in bytes.
8 bits = 1 byte
1024 bytes = 1 KB
1024 KB = 1 MB
1024 MB = 1 GB

Syntax:
> [Link]("name", { autoIndexId:true, max:10, capped:true, size:1048576 })
> [Link]("tblcreator",{autoIndexId:true, max:10, capped:true, size:1048576})

4. To View all collections in database

>show collections

5. To Remove any specific collection

> [Link]()
> [Link]()

6. To Remove any database, first switch into database and run the command

>[Link]()

7. To Store data in a collection

insertOne()
insertMany()

>[Link]({ key:value, key:value })

>[Link]([{ }, { }])

Ex:
> [Link]({adminId:1, Name:'John', Password:'john123', Email:'john@[Link]',
Age:22, Mobile:'+919876543210'})

MongoDB CRUD operations

Sudhakar Sharma

Sep 25, 2023

MongoDB Commands
Creating Database
Creating Collection
Insert Data into Collection
Remove collection
Remove Database

Querying Data from Collection

- The "find()" method is used for querying data from collection.

- Queries are built by using object reference. { }
- Queries are defined using various entities and keywords.

Syntax:
[Link]({query})

{} returns all documents

{field:value} returns exact match
$gt greater than
$gte greater than or equal
$lt less than
$lte less than or equal
$ne not equal
$and AND
$or OR

Ex:
> [Link]({ })
> [Link]({ id:7 })
> [Link]({ category: "jewelery" })
> [Link]({ price:{$gt:600} })
> [Link]({ stock:true })

Ex: AND

> [Link]({ $and: [ {exp1}, {exp2} ] })

> [Link]({$and:[{ category:"jewelery" }, { price:{$gt:600} }]})

Ex: OR

> [Link]({ $or: [ {exp1}, {exp2} ] })

Query: All electronics or other products whose price is > 600

> [Link]({ $or:[ {category:"electronics"}, {price: {$gt:600}} ] })

Query: Get all products with price between 200 to 600

> [Link]({ $and: [{price:{$gt:200}}, {price:{$lt:600}}] })

Updating Documents
----------------------------
- You can change the field names, and values by using the update methods.

a) updateOne()
b) updateMany()

- The commonly used entities with update methods

$set change value

$rename change field name
$unset remove field

Syntax:

>[Link]({findQuery}, {updateQuery})
>[Link]({id:7},{$set:{price:500}})
>[Link]({category:"electronics"}, {$set:{stock:false}})
>[Link]({}, {$rename: { "oldName" : "newName" }})
>[Link]("newName")

Remove Documents
- To remove any document from a collection mongoDB provides the methods

a) deleteOne()
b) deleteMany()

Syntax:
>[Link]({findQuery})

Query: Remove all electronic products whose price is above 600

> [Link]({$and:[{category:"electronics"},{price:{$gt:600}}] })
> [Link]({id:5})
> [Link]({category:"electronics"})

Summary:
CRUD
- createCollection()
- insertOne()
- insertMany()
- find()
- updateOne()
- updateMany()
- deleteOne()
- deleteMany()

Server Side Scripting

-----------------------------
- Server Side scripting is a technique where scripts are employed on server in order to generate a
response customized to every client request.
- CGI is the first server side scripting, which uses "C" language server side.
- There are various server side scripting technologies like
PHP
JSP
ASP
[Link]
Python
Node

Node JS
- It is a JavaScript based server side scripting technology built on google chrome V8 compiler.
- It uses JavaScript server side.
- It is modular.
- It is light weight.
- It is faster.
- It is Asynchronous.
- It is single threaded.

Node JS - Server Objects

Sudhakar Sharma

Sep 26, 2023

Server Side Programming in Node JS:

1. Every server side program is written in JavaScript file

"[Link]"

2. Node JS provides several built-in objects, known as server side objects.

3. You have to import library & classes that provide objects.

4. Node JS uses "Require JS" module system, hence library is imported by using
"require()" method.

ES Module:
import { className } from "moduleName";

Node
var refName = require("moduleName");
[Link]
[Link]()

(or)

var refName = require("moduleName").className;

[Link]

5. Node JS programs use JavaScript only as language not for DOM. Hence you should not use DOM
methods in Node JS.

- Variables
- Data Types
- Operators
- Statements
- Functions
- OOP
- Console Methods

6. Node JS programs are compiled by using "node" compiler

> node [Link]

Node REPL
- REPL refers to
R - Read
E - Execute
P - Print
L - Loop

- Node provides a terminal where you can test all Node functions and objects.

1. Open Command prompt

run => cmd

2. Type "node" keyword to invoke terminal

C:\> node

> your commands here...

> var x = 10; => Read

> var y = 20;
> var z = x + y; => Execute
> [Link]("Z=" + z); => Print

4. Press "ctrl + c" twice to exit node terminal.

Ex: Hello Program

1. Add a new folder by name "server".

2. Add a new file into folder

"[Link]"

var user = "John";

[Link](`Hello ! ${user}`);

3. Open the file location in Integrated Terminal

>node [Link]

Node Server Objects

----------------------------
1. OS
- It is a server object in Node library.
- It provides a set of properties and methods that are used to access details of server and its
Operating System.

Members:
arch
availableParallelism
cpus
endianness
freemem
getPriority
homedir
hostname
loadavg
networkInterfaces
platform
release
setPriority
tmpdir
totalmem
type
userInfo
uptime
version
machine
constants
EOL
devNull
Syntax:
var os = require("os");
[Link]([Link]());
[Link]([Link]());

Ex:

var os = require("os");

[Link](`OS Bit Size : ${[Link]()}\nFree memory : ${[Link]()}\nTotal Memory : $

{[Link]()}\nPlatform : ${[Link]()}`);

2. Path
- It provides properties and methods that are used to get information about a file on server.

Members:
resolve
normalize
isAbsolute
join
relative
toNamespacedPath
dirname
basename
extname
format
parse
sep
delimiter
win32
posix
_makeLong

Syntax:
var path = require("path");
[Link]([Link]("D:\\online-store\\images\\[Link]"));

Ex:
var path = require("path");
var inputFile = "D:\\oline-store\\public\\images\\[Link]";
var extention = [Link](inputFile);
if(extention==".png" || extention==".jpg"){
[Link]("File Uploaded Successfully..");
} else {
[Link](`You can upload only JPG and PNG files\nYou Current file is of type ${extention}`);
}
3. FS [File Stream]
- It provides a set of properties and methods that are used to read and write data into file.
- Node JS provides 2 types of methods

a) Async Methods
b) Sync Methods

Ex: Sync Method

var fs = require("fs");

[Link](`---- Read Started ----`);

var data = [Link]("../data/[Link]");

[Link]([Link]());

[Link](`---- Read End -----`);

Ex: Async

var fs = require("fs");

[Link](`---- Read Started ----`);

[Link]("../data/[Link]", (err, data)=> {

if(!err){
[Link]([Link]());
} else {
[Link]([Link]);
}
})

[Link](`---- Read End -----`);

MongoDB Drivers

Sudhakar Sharma

Sep 27, 2023

Node MongoDB Drivers:

- Every server side technology uses database drivers to communicate with backend database.
- Database Drivers act as middleware to handle communication between server side node app and
database.
- Every database requires different drivers.
- To communicate with mongodb database you have to install mongodb drivers
> npm install mongodb --save

Connecting with MongoDb:

------------------------------------
1. You have to import MongoDB module with a class "MongoClient"
MongoClient is a class that provides the properties and methods used to
communicate with mongodb database.

var mongoClient = require("mongodb").MongoClient;

2. You can connect with MongoDB server by using "connect()" method. It requires a
connectionstring.

[Link]("mongodb://[Link]:27017")
.then((clientObject)=> { onsuccess })
.catch((error)=> { on error })

Syntax:
var mongoClient = require("mongodb").MongoClient;

[Link]("mongodb://localhost:27017")
.then((clientObject)=>{
[Link]("Connected Successfully..");
})
.catch((error)=>{
[Link](error);
})

3. You can communicate with any database in MongoDB by using "Client Object".

[Link]("databaseName");

var database = [Link]("databaseName");

4. You can interact with any collection in database using "collection()"

[Link]("collectionName").find()
.insertOne()
.insertMany()
.updateOne()
.deleteOne() etc..

Syntax:
[Link]("tblproducts").find({}).toArray().then((docs)=>{
[Link](docs);
}).catch((error)=>{
[Link](error);
})

Ex: Reading Data from MongoDB collection

[Link]
-----------

var mongoClient = require("mongodb").MongoClient;

[Link]("mongodb://[Link]:27017").then((clientObj)=>{

var database = [Link]("videosdb");

[Link]("tblproducts").find({id:4}).toArray().then((documents)=>{
[Link](documents);
}).catch((error)=>{
[Link](error);
})

}).catch((error)=>{
[Link](error);
})

Ex: Inserting Data into Collection

[Link]
-----------
var mongoClient = require("mongodb").MongoClient;

var conStr = "mongodb://[Link]:27017";

[Link](conStr).then((clientObj)=>{
var database = [Link]("videosdb");

var data = {
"Admin_Id": 2,
"Name": "David",
"Password": "david@11",
"Email": "david@[Link]",
"Age": 32,
"Phone": "+919988776331"
}

[Link]("adminTable").insertOne(data).then(()=>{
[Link]("Record Inserted");
}).catch((error)=>{
[Link](error);
})
})

Ex: Updating Document

[Link]
----------

var mongoClient = require("mongodb").MongoClient;

var conStr = "mongodb://[Link]:27017";

[Link](conStr).then((clientObj)=>{
var database = [Link]("videosdb");

[Link]("adminTable").updateOne({Admin_Id:1},{$set:{Age:29}}).then(()=>{
[Link](`Record Updated..`);
})

})

Ex: Deleting Document

[Link]
----------
var mongoClient = require("mongodb").MongoClient;

var conStr = "mongodb://[Link]:27017";

[Link](conStr).then((clientObj)=>{
var database = [Link]("videosdb");

[Link]("adminTable").deleteOne({Admin_Id:2}).then(()=>{
[Link](`Record Deleted..`);
})

})

Express JS

Middleware and Distributed Computing

Sudhakar Sharma

Sep 28, 2023

Distributed Computing

- Distributed computing allows two different applications running on two different machines to share
information.

- It also allows 2 different applications running in 2 different process of same machine to share
information.

- There are various distributed computing technologies used by different languages

CORBA 14 languages, C++, Java

[Common Object Request Broken Architecture]

DCOM Visual Basic

[Distribute Component Object Model]

RMI J2EE
[Remote Method Invocation]

EJB Java
[Enterprise Java Beans]

Web Service All technologies

[PHP, JSP, ASP..]

Remoting .NET

- Distributed computing comprises of Consumer and Provider.

- Client Application is consumer and Server Application is provider.
- There are 3 specifications for communication

a) SOAP
b) REST
c) JSON

- SOAP [Service Oriented Architecture Protocol]

Consumer => XML Request

Provider => XML Response

- REST [Representational State Transfer]

Consumer => Query Request

Provider => XML Response | JSON Response

- JSON [JavaScript Object Notation]

Consumer => JSON Request

Provider => JSON Response

- API is Application Programming Interface, which is a distributed computing architecture.

- The aim of API is to make data available to all devices and platforms.

- API allows data to reach any place, any time and to any device.

- API started in early 2000 with "ebay".

- To create the business logic and server side API you need a server side technology and middleware,
which is Node and Express.

Express JS
----------------
- It is a middleware framework.
- Middleware is a software used in network based applications to handle communication between
devices and apps.
- A framework is a software architectural pattern that can build application and control the
application flow.
- It is a set of libraries.
- Install Express JS in your project

>npm install express --save

Ex:
[Link]

var express = require("express");

var app = express();

[Link]("/",(request, response)=>{
[Link]("Welcome to API");
});

[Link]("/products", (req, res)=>{

[Link]([{Name:"TV", Price:5600.44},{Name:"Mobile", Price:12000}]);
});

[Link](6600);
[Link]("Server Started : [Link]

REST API

Sudhakar Sharma

•
Sep 29, 2023

Creating REST API

- API Comprises of various request handling methods

GET Fetch Data

POST Submit Data
PUT Modifying & Updating Data
DELETE Remove Data

- API requires the following libraries in server app

> npm install express --save

> npm install mongodb --save
> npm install cors --save

Express is required to handle communication between client & server app.

MongoDb is required to handle communication between server app & database.
CORS is require to manage Cross Origin Resource Sharing.
[Handling Request and managing data sharing]

Note: A body-parser library is required in old versions of server apps, to convert the
client data into JSON.
How ever the latest express js library is in-built provided with a body-parser.

- Server Side API is creating using Express JS library.

- It is a server side app that uses routing.
- Routing is a technique used in web applications to handle navigation. It configures user and SEO
friendly url's.
- Routes are created using server app with various request methods.

Syntax:
var express = require("express");
var app = express();

[Link]("/path", function(request, response){

})

- Request object provides a set of properties and methods that are used by server to request data
from client.
Query String
Form Body
Cookies
LocalStorage
SessionStorage etc..
- Response object is used by server to send a response to client, which can be
HTML Response
Text Response
XML Response
JSON Response
File Response etc..

- Path configures the client request path

/ root level application

/name It returns specific request content
* It returns the content when client request is not matching with
routes in route table.

- Application starts listening to client request by using "listen()" method.

- Every application on server listens on specific port number.

Syntax:
[Link](4400);

Note: If application is not listening then the request can't be processed.

Ex: Routes with GET request

[Link]
--------------
var express = require("express");

var app = express();

[Link]("/", (req, res)=>{

[Link](`
<h3>Home</h3>
<a href='/mobiles'>Mobiles</a> |
<a href='/watches'>Watches</a>
`);
});

[Link]("/mobiles", (req, res)=>{

[Link]("<h3>Amazon</h3><p>Mobiles Page</p><a href='/'>Back to Home</a>");
});

[Link]("/watches", (req, res)=>{

[Link]("<h3>Amazon</h3><p>Watches Home</p><a href='/'>Back to Home</a>");
});

[Link]("*", (req, res)=>{

[Link]("<h3>Not Found</h3><code>404: Page you requested not found</code><a href='/'>Back
to Home</a>");
});

[Link](4400);
[Link](`Server Started : [Link]

Route Parameters:
-------------------------
- A route parameter allows user to query any content directly from URL.
- To accept the query values from client your route must accept parameters.
- The route parameters are defined by using "/:paramName"

Syntax:
[Link]("/products/:id/:name/:price", (req, res)=>{

})

/products/1/tv/34000

- The route parameters are collected by using "request" object.

- It uses "params" property, which returns a object of parameters.

[Link] = { id:1, name:"tv", price:34000 }

[Link]
[Link]
[Link]

Ex:
[Link]

var express = require("express");

var app = express();

[Link]("/", (req, res)=>{

[Link](`
<h3>Home</h3>
<a href='/mobiles'>Mobiles</a> |
<a href='/watches'>Watches</a>
`);
});

[Link]("/mobiles", (req, res)=>{

[Link]("<h3>Amazon</h3><p>Mobiles Page</p><a href='/'>Back to Home</a>");
});
[Link]("/watches", (req, res)=>{
[Link]("<h3>Amazon</h3><p>Watches Home</p><a href='/'>Back to Home</a>");
});

[Link]("/products/:id/:name/:price",(req, res)=>{
[Link](`
<h2>Product Details</h2>
<dl>
<dt>Product Id </dt>
<dd>${[Link]}</dd>
<dt>Name</dt>
<dd>${[Link]}</dd>
<dt>Price</dt>
<dd>${[Link]}</dd>
</dl>
`);
})

[Link]("*", (req, res)=>{

[Link]("<h3>Not Found</h3><code>404: Page you requested not found</code><a href='/'>Back
to Home</a>");
});

[Link](4400);
[Link](`Server Started : [Link]

Ex: Query from Database

[Link]

var express = require("express");

var mongoClient = require("mongodb").MongoClient;

var conString = "mongodb://[Link]:27017";

var app = express();

[Link]("*", (req, res)=>{

[Link]("<h3>Not Found</h3><code>404: Page you requested not found</code>");
});

[Link](4400);
[Link](`Server Started : [Link]

End to End App

Sudhakar Sharma

Sep 30, 2023

REST API Methods to handle CRUD operations:

GET [Link]() Fetching data

POST [Link]() Submitting data
PUT [Link]() Modifying data
DELETE [Link]() Deleting data

Note: You can download and install web debugger for API testing.
- Fiddler
- Postman
- Swagger etc..

REST API post, put and delete requires additional configuration in server side
application.

a) Setup CORS
b) Use CORS
c) Configure URL Encoding
d) Convert data to JSON

Syntax:
> npm install cors --save

var cors = require("cors");

[Link](cors);
[Link]([Link]({extended:true});
[Link]([Link]());

Ex:
[Link]

var express = require("express");

var mongoClient = require("mongodb").MongoClient;
var cors = require("cors");

var app = express();

[Link](cors());

[Link]([Link]({
extended:true
}));
[Link]([Link]());

[Link]("/",(req, res)=>{
[Link]("Home");
});

[Link]("/edituser", (req, res)=>{

[Link]("Modify user details..");
[Link]();
});

[Link]("/deleteuser", (req,res)=>{
[Link]("Delete User Details..");
[Link]();
})

[Link]("*", (req, res)=>{

[Link]("<h3>Not Found</h3><code>404: Page you requested not found</code>");
});

[Link](4400);
[Link](`Server Started : [Link]

Project Example:

Deployment

Sudhakar Sharma

Oct 4, 2023

Cloud Deployment
- You can use local servers for deploying web application
- IIS [Internet Information Services Manager]
- Apache Tomcat
- WAMP server

Ex: Hosting Website on Local Server

1. Open your windows control panel

2. Go to "Programs and Features"

3. Click on "Turn windows features ON or OFF"

4. Select "Internet Information Services Manager"

5. Click OK to add into your PC

6. Open IIS from program and create a new website, which is a "Virtual Directory".

7. Expand Local Server in IIS [ [Link] ]

8. Expand "Sites" folder

9. Right Click on "Default Website"

10. Select the option "Add Virtual Directory"

alias [website name] : onlinestore

physical path : E:\online-store

11. Click OK a website is created on local server

Note: Make sure that website is having [Link] in root folder

12. Open browser and request your website

[Link]

Deploying on cloud servers:

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

Firebase
GIT Hub Pages
AWS
AZURE
Netify etc..

Firebase Deploying

1. Install firebase tools on your PC

C:\> npm install -g firebase-tools

2. Visit firebase official website and login with your google account

[Link]

3. Go to "Console" category

4. Create new Project

- Add Project
name : ui-developer-portfolio

- Continue by selecting "default account"

5. Create a project on your PC, make sure that all files are kept in public folder.

6. Make sure that you are using only CDN links for libraries

7. Add [Link] in public folder

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI-Developer</title>
<link href="[Link]
rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/
Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="[Link]
[Link]">
<script src="[Link]
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL
" crossorigin="anonymous"></script>
</head>
<body class="container-fluid">
<header class="bg-warning text-dark d-flex justify-content-between p-2">
<div class="h4">Rakesh</div>
<div>
I am Talented Web Developer
</div>
<div>
<span class="bi bi-facebook me-2"></span>
<span class="bi bi-twitter me-2"></span>
<span class="bi bi-instagram"></span>
</div>
</header>
<section style="height: 100vh;" class="bg-dark mt-4 text-white">

</section>
</body>
</html>

8. Open Terminal

>firebase login

>firebase init

? Are you ready to proceed : Y

? Which Firebase features do you want to set up for this directory.. :

(*) Hosting : select configure files for firebase hosting

[use space bar for select & deselect]

? Use Existing project

? Select your project : ui-developer-portfolio
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /[Link])? No
? Set up automatic builds and deploys with GitHub? No

9. You project is not ready to deploy

> firebase deploy

[Link]

10. After every modification in local device run the command

>firebase deploy

Deploying website on GIT Hub Pages

Sudhakar Sharma

Oct 6, 2023

Publishing Website on Github Pages:

1. Create a new account on Github

2. Signin into account

3. Create a new Respository

Name : student-portfolio

Description: some thing about project

Share : public

Add a README file: yes

Create Repository

4. Go to "Settings" of repository

5. Click on "Pages" and configure your page after connecting with Editor.

6. Download and Install "Github Desktop Tool"

[Link]

7. Login into your Git account on GIT Desktop

8. Select your repository and click clone

youraccount/student-portfolio

9. Copy the virtual and physical path generated

[Link]
C:\Users\HP\OneDrive\Documents\GitHub\student-portfolio

10. Open VS code and open the physical path folder

- Create your project

- Add public , src
- [Link]

11. Go to GIT desktop

12. It will identify the changes in your project, which you have to commit by adding summary

summary : "First Version [public, src, index]"

13. Click Commit and then click "Push Origin"

14. Go to Github page website

15. Settings => Pages => Branch "main" => folder "root" => Save

16. Copy the domain name

[Link]

HTML Sudhakar Sharma Notes
No ratings yet
HTML Sudhakar Sharma Notes
152 pages
UI Full Stack Web Development Guide
No ratings yet
UI Full Stack Web Development Guide
532 pages
HTML5 Spinner Control Configuration
No ratings yet
HTML5 Spinner Control Configuration
31 pages
Full Stack Web Development Overview
No ratings yet
Full Stack Web Development Overview
12 pages
TSMG Material Fullstack Series 1
No ratings yet
TSMG Material Fullstack Series 1
17 pages
Understanding Full Stack Development
No ratings yet
Understanding Full Stack Development
16 pages
HTML Basics for Beginners
No ratings yet
HTML Basics for Beginners
21 pages
Diving Into Web Development
No ratings yet
Diving Into Web Development
65 pages
HTML - Class 01
No ratings yet
HTML - Class 01
24 pages
Module Ans
No ratings yet
Module Ans
23 pages
Beginner's Web Development Course
No ratings yet
Beginner's Web Development Course
13 pages
Beginning Modern JavaScript A Step-By-Step Gentle Guide To Learn JavaScript For Beginners (Code With Nathan) (Sebhastian, Nathan) (Z-Library)
No ratings yet
Beginning Modern JavaScript A Step-By-Step Gentle Guide To Learn JavaScript For Beginners (Code With Nathan) (Sebhastian, Nathan) (Z-Library)
179 pages
Web Development Overview and Technologies
No ratings yet
Web Development Overview and Technologies
5 pages
Web Development Training Project Report
No ratings yet
Web Development Training Project Report
16 pages
Understanding Web Technology Basics
No ratings yet
Understanding Web Technology Basics
35 pages
Full Stack Development Course Overview
No ratings yet
Full Stack Development Course Overview
1,001 pages
Understanding Dynamic HTML (DHTML)
No ratings yet
Understanding Dynamic HTML (DHTML)
135 pages
HTML5 Web Development Terminologies
No ratings yet
HTML5 Web Development Terminologies
17 pages
CLASS-1 Introduction To Web Development
No ratings yet
CLASS-1 Introduction To Web Development
7 pages
Introduction to HTML Basics and Tags
No ratings yet
Introduction to HTML Basics and Tags
94 pages
HTML Tutorial for Beginners - YouTube
No ratings yet
HTML Tutorial for Beginners - YouTube
60 pages
Web Dev Syllabus
No ratings yet
Web Dev Syllabus
8 pages
I2IS - 06-WebTechnologies and Databases
No ratings yet
I2IS - 06-WebTechnologies and Databases
14 pages
Full Stack Development-Digital Notes
No ratings yet
Full Stack Development-Digital Notes
277 pages
Beginner's Guide to Web Development
No ratings yet
Beginner's Guide to Web Development
229 pages
HTML Basics and Node.js Setup Guide
No ratings yet
HTML Basics and Node.js Setup Guide
30 pages
Full Stack Web Development Guide
No ratings yet
Full Stack Web Development Guide
1 page
Web Developtment Internship
No ratings yet
Web Developtment Internship
102 pages
Css Tricks Com Transpiling Es6
No ratings yet
Css Tricks Com Transpiling Es6
12 pages
Web Platform Development Guide
No ratings yet
Web Platform Development Guide
72 pages
Web Technologies Course Overview
No ratings yet
Web Technologies Course Overview
39 pages
Front End Web Development Tasks Guide
No ratings yet
Front End Web Development Tasks Guide
6 pages
Introduction To Web Development
No ratings yet
Introduction To Web Development
10 pages
Web Development Overview and Basics
No ratings yet
Web Development Overview and Basics
18 pages
Web Technology Overview and HTML Basics
No ratings yet
Web Technology Overview and HTML Basics
78 pages
Intuitive Weather Forecast App Guide
No ratings yet
Intuitive Weather Forecast App Guide
23 pages
Web Development Fundamentals Guide
No ratings yet
Web Development Fundamentals Guide
41 pages
Single Page Web Apps Course Overview
No ratings yet
Single Page Web Apps Course Overview
18 pages
Introduction To Web Programming
No ratings yet
Introduction To Web Programming
26 pages
Internet and Web Technologies Lab Guide
No ratings yet
Internet and Web Technologies Lab Guide
14 pages
Full Stack Development Malla Reddy College of Engineering 3231
No ratings yet
Full Stack Development Malla Reddy College of Engineering 3231
278 pages
HTML, CSS, and JavaScript Overview
No ratings yet
HTML, CSS, and JavaScript Overview
144 pages
HTML & CSS Basics for Web Development
No ratings yet
HTML & CSS Basics for Web Development
92 pages
Understanding JavaScript in Web Development
No ratings yet
Understanding JavaScript in Web Development
88 pages
UI Technologies: HTML, CSS, JavaScript Guide
No ratings yet
UI Technologies: HTML, CSS, JavaScript Guide
113 pages
Mastering Frontend: Zero to Hero Guide
100% (1)
Mastering Frontend: Zero to Hero Guide
733 pages
Seminar Complete Documentation
No ratings yet
Seminar Complete Documentation
34 pages
WEB Development Week 1 and 2
No ratings yet
WEB Development Week 1 and 2
71 pages
Web Development: HTML, CSS, JavaScript
No ratings yet
Web Development: HTML, CSS, JavaScript
65 pages
7a.MODULE 1 & 2
No ratings yet
7a.MODULE 1 & 2
84 pages
HTML Basics: This Work Is Licensed Under A
No ratings yet
HTML Basics: This Work Is Licensed Under A
83 pages
Web Development Bootcamp Day 1 Overview
No ratings yet
Web Development Bootcamp Day 1 Overview
19 pages
Website Development Fundamentals Guide
No ratings yet
Website Development Fundamentals Guide
14 pages
Web Development-Full Course
No ratings yet
Web Development-Full Course
227 pages
Web Development Basics: HTML, CSS, JS
No ratings yet
Web Development Basics: HTML, CSS, JS
27 pages
Overview of UI Module Course
No ratings yet
Overview of UI Module Course
480 pages
Modern Web Browser: Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 8
No ratings yet
Modern Web Browser: Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 8
16 pages
Web Development Careers Overview
No ratings yet
Web Development Careers Overview
92 pages
CSC 209 - Final Lecture - Web Development Notes New Version
No ratings yet
CSC 209 - Final Lecture - Web Development Notes New Version
5 pages
Devops With AWS - JVN Academy 3
No ratings yet
Devops With AWS - JVN Academy 3
4 pages
Akshay Thatkar Resume
No ratings yet
Akshay Thatkar Resume
1 page
Comprehensive HTML Tutorial Guide
No ratings yet
Comprehensive HTML Tutorial Guide
367 pages
Introduction to LESS CSS Pre-processor
No ratings yet
Introduction to LESS CSS Pre-processor
24 pages
Detailed Room Dimensions and Layouts
No ratings yet
Detailed Room Dimensions and Layouts
2 pages
Database Design and Management Overview
No ratings yet
Database Design and Management Overview
22 pages
Digital Health Tracker for Daily Wellness
No ratings yet
Digital Health Tracker for Daily Wellness
12 pages
3DxWare 10.6 BETA Release Overview
No ratings yet
3DxWare 10.6 BETA Release Overview
5 pages
Indoteq Office Automation Manager CV
No ratings yet
Indoteq Office Automation Manager CV
4 pages
M 3 L 11
No ratings yet
M 3 L 11
7 pages
Managing User Threats in Cybersecurity
No ratings yet
Managing User Threats in Cybersecurity
1 page
VHDL Interview Questions and Answers
No ratings yet
VHDL Interview Questions and Answers
7 pages
Build a Line Following Robot Guide
No ratings yet
Build a Line Following Robot Guide
21 pages
Class IX IT Worksheet for 2024-25
No ratings yet
Class IX IT Worksheet for 2024-25
2 pages
Luna EFT Japan PIN User Guide - PN007-012066-001 - RevB
No ratings yet
Luna EFT Japan PIN User Guide - PN007-012066-001 - RevB
7 pages
C# and .NET Lab Manual for Students
100% (3)
C# and .NET Lab Manual for Students
88 pages
Software Testing and QA Specialist Resume
No ratings yet
Software Testing and QA Specialist Resume
14 pages
Cloud Computing Networking Overview
No ratings yet
Cloud Computing Networking Overview
32 pages
A Simulation of A Monitoring and Alarm System in An Energy
No ratings yet
A Simulation of A Monitoring and Alarm System in An Energy
58 pages
Optimizing School Bus Routes with ACO
No ratings yet
Optimizing School Bus Routes with ACO
7 pages
Microsoft Teams Educator Guide
No ratings yet
Microsoft Teams Educator Guide
64 pages
Machine Learning: Chromosome Feature Extraction
No ratings yet
Machine Learning: Chromosome Feature Extraction
5 pages
Data Entry and Typing Skills Guide
No ratings yet
Data Entry and Typing Skills Guide
3 pages
Binary Search Algorithm Explained
No ratings yet
Binary Search Algorithm Explained
5 pages
C Programming Problem Solving Techniques
No ratings yet
C Programming Problem Solving Techniques
5 pages
Cubase 7 Quick Start Guide
No ratings yet
Cubase 7 Quick Start Guide
95 pages
RFM22 Manual
No ratings yet
RFM22 Manual
150 pages
DBMS Project Report for Hotel Himalaya
No ratings yet
DBMS Project Report for Hotel Himalaya
31 pages
Mac OS X Quarantine Attribute Guide
No ratings yet
Mac OS X Quarantine Attribute Guide
1 page
Cloud Paks Foundational Services Quiz Review
No ratings yet
Cloud Paks Foundational Services Quiz Review
14 pages
Getinge Steam Sterilizer Functional Spec
No ratings yet
Getinge Steam Sterilizer Functional Spec
45 pages
Hotstar Clone App with Jenkins CI/CD
No ratings yet
Hotstar Clone App with Jenkins CI/CD
43 pages
Polymorphism Lab Activities for CSC584
No ratings yet
Polymorphism Lab Activities for CSC584
12 pages
FTTH-Smart Link Mapper Overview
No ratings yet
FTTH-Smart Link Mapper Overview
7 pages
Rahulc 2026
No ratings yet
Rahulc 2026
2 pages