FULL STACK

WEB DEVELOPMENT INTERNSHIP

MANGAYARKARASI
COLLEGE OF ENGINEERING
REPORT

Prepared by:
[Link]
3rd Year BE(CSE)
WEB DEVELOPTMENT INTERNSHIP

DAY 1 : 10-02-25
Introduction of full stack web development
Full Stack Development refers to the development of both front end (client side)
and back end (server side) portions of web applications.

Full Stack Web Developers

Full Stack web developers have the ability to design complete web applications
and websites. They work on the frontend, backend, database, and debugging of
web applications or websites.

Technology Related to Full Stack Development

Front-end Development
It is the visible part of website or web application which is responsible for user
experience. The user directly interacts with the front end portion of the web
application or website.
Front-end Technologies
The frontend portion is built by using some languages which are discussed below:

HTML: HTML stands for Hyper Text Markup Language. It is used to design
the frontend portion of web pages using markup language. HTML is the
combination of Hypertext and Markup language. Hypertext defines the link
between the web pages. The markup language is used to define the text
documentation within tag which defines the structure of web pages.

CSS: Cascading Style Sheets, fondly referred to as CSS, is a simply designed

language intended to simplify the process of making web pages presentable. CSS
allows you to apply styles to web pages. More importantly, CSS enables you to
do this independent of the HTML that makes up each web page.

JavaScript: JavaScript is a famous scripting language used to create the magic

on the sites to make the site interactive for the user. It is used to enhancing the
functionality of a website to running cool games and web-based software.

Front End Libraries and Frameworks

AngularJS: Angular Js is a JavaScript opensource front-end framework that is
mainly used to develop single page web applications (SPAs). It is a continuously
growing and expanding framework which provides better ways for developing
web applications. It changes the static HTML to dynamic HTML. It is an open
Technology Related to Full Stack Development

Front-end Development
It is the visible part of website or web application which is responsible for user
experience. The user directly interacts with the frontend portion of the web
application or website.

[Link]: React is a declarative, efficient, and flexible JavaScript library for

building user interfaces. ReactJS is an open-source, component-based frontend
library responsible only for the view layer of the application. It is maintained by
Facebook.

Bootstrap: Bootstrap is a free and open-source tool collection for creating

responsive websites and web applications. It is the most popular HTML, CSS,
and JavaScript framework for developing responsive, mobile-first web sites.
jQuery: jQuery is an opensource JavaScript library that simplifies the
interactions between an HTML/CSS document, or more precisely the Document
Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies
HTML document traversing and manipulation, browser event handling, DOM
animations, Ajax interactions, and cross-browser JavaScript development.

SASS: It is the most reliable, mature and robust CSS extension language. It is
used to extend the functionality of an existing CSS of a site including everything
from variables, inheritance, and nesting with ease.

Some other libraries and frameworks are: Semantic-UI, Foundation, Materialize,

[Link], [Link] etc source project which can be freely used and changed
by anyone. It extends HTML attributes with Directives, and data is bound with
HTML.

Back-end Technologies
It refers to the server-side development of web application or website with a
primary focus on how the website works. It is responsible for managing the
database through queries and APIs by client-side commands. This type of website
mainly consists of three parts front end, back end, and database. The backend
portion is built by using some libraries, frameworks, and languages which are
discussed below:

PHP : PHP is a server-side scripting language designed specifically for web

development. Since, PHP code executed on server side so it is called server side
scripting language.

C++ : It is a general purpose programming language and widely used now a

days for competitive programming. It is also used as backend language.

Java : Java is one of the most popular and widely used programming language
and platform. It is highly scalable. Java components are easily available.

Python : Python is a programming language that lets you work quickly and
integrate systems more efficiently.

[Link]: [Link] is an open source and cross-platform runtime environment for

executing JavaScript code outside of a browser. You need to remember that
NodeJS is not a framework and it’s not a programming language. Most
of the people are confused and understand it’s a framework or a programming
language. We often use [Link] for building back-end services like APIs like
Web App or Mobile App. It’s used in production by large companies such as
Paypal, Uber, Netflix, Walmart and so on.

Back End Frameworks: The list of backend frameworks are: Express, Django,
Rails, Laravel, Spring etc.

The other backend program/scripting languages are: C#, Ruby, REST, GO etc.

HTML :
HTML stands for Hyper Text Markup Language. It is used to design the frontend
portion of web pages using markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between the web
pages. The markup language is used to define

the text documentation within tag which defines the structure of web pages.

HTML Tags:
!DOCTYPE html - According to the HTML specification or standards, every
HTML document requires a document type declaration.

Html - The html tag in HTML is used to define the root of HTML and XHTML
documents.

Head - The head tag in HTML is used to define the head portion of the document
which contains information related to the document.

Body - The body tag in HTML is used to define the main content present inside
an HTML page.

Break - The break tag inserts a single carriage return or breaks in the document.
This element has no end tag.

Div - The div tag is used in HTML to make divisions of content in the web page
(text, images, header, footer, navigation bar, etc).

TASK OF THE DAY:

• Html Tags
DAY 2 : 11-02-25
Html Tags:
Button - The button tag in HTML is used to define the clickable button. <button>
tag is used to submit the content.

Marquee - The marquee tag in HTML is used to create scrolling text or images
on a webpage. It scrolls either horizontally or vertically.

Pre - The pre tag in HTML is used to define the block of preformatted text which
preserves the text spaces.

Strike - HTML strike tag, along with understanding its implementation through
the example. The <strike> tag defines a strike or line through Text.

Strong – The strong tag in HTML is the parsed tag and is used to show the
importance of the text. Make that text bold.

Sub and sup Tags - The sub-tag is used to add a subscript text to the HTML
document. The <sup> tag is used to add superscript text to the HTML document.

Table - HTML Table, various ways to implement it, & will also understand its
usage through the examples. HTML Table is an arrangement of data in rows and
columns, or possibly in a more complex structure.

td - The table data tag is used to define a standard cell in an HTML table.

th - The table header tag in HTML is used to set the header cell of a table. Two
types of cells in the HTML table Header & Standard.

Style - The style tag in HTML helps us to design the web page.

Source - The source tag in HTML is used to attach multimedia files

Script - The script tag in HTML is used to define the client-side script.

Option - The option tag in HTML is used to choose an option from a Drop-Down
menu.

Object - The object tag is an HTML tag used to display multimedia like audio,
videos, images, PDFs, and Flash on web pages.
TASK OF THE DAY:
• Design a webpage

DAY 3 : 12-02-25
Webpage design:
Coding:
OUTPUT:
TASK OF THE DAY:
• Audio and video
• Colors
• Input labels
• Form elements and attributes

DAY 4 : 13-02-25
AUDIO AND VIDEO :
HTML AUDIO :
✓ To play an audio file in HTML, use the <audio> element
✓ The controls attribute adds audio controls, like play, pause, and volume.
✓ The <source> element allows you to specify alternative audio files which
the browser may choose from. The browser will use the first recognized
format.
✓ The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.

HTML <audio> Autoplay

✓ To start an audio file automatically, use the autoplay attribute

✓ Add muted after autoplay to let your audio file start playing automatically
(but muted)

HTML Audio Formats

There are three supported audio formats: MP3, WAV, and OGG.

File Format Media Type

▪ MP3 - audio /mpeg

▪ OGG - audio /ogg
▪ WAV - audio/wav

HTML Video :

The <video> element in HTML is used to add video content to web pages. It
supports various video formats, including MP4, WebM, and Ogg. Video and
audio tags are introduced in HTML5.

Syntax:
<video src ="" controls> ……….. </video>

✓ The src attribute specifies the URL of the video file.

✓ The controls attribute adds default video controls (play, pause, volume,
etc.).
✓ The <video> tag defines the video player, with width and height attributes
setting its dimensions.
✓ The controls attribute adds playback controls like play, pause, and volume.

HTML Video Tags

Here are the HTML tags used for adding video content:

<video>: Defines a video or movie on a webpage.

<source>: Specifies multiple media resources for video or audio elements (e.g.,
different video formats).

Adds text tracks (like subtitles or captions) to a video or audio element.

HTML Colors
HTML Colors can be applied to text, backgrounds, borders, links, forms, tables,
etc. This article provides an in-depth look at how colors can be applied to various
elements such as text, backgrounds, borders, links, forms, and tables in HTML.
We will explore different color formats including hexadecimal, RGB, RGBA,
HSL, and named colors, offering you precise control over the color presentation
on your web pages.

HTML Colors Name

HTML color names offer a user-friendly way to specify colors. From classic
colors like Red, Green, Blue, Pink, Purple, Sky Blue, Gray, and Orange, to more
exotic shades, HTML provides a wide palette for web designers. Whether you’re
designing a serene theme or a vibrant layout, HTML color names have got you
covered.

HTML Colors usage:

Background Color : HTML Background Color is the shade that appears behind
the content on a webpage. The background covers the total size of the element
with padding and border but excludes the margin. It makes the text so easy to
read for the user.
Text Color : Text color in HTML specifies the color of the text content, similar
to font color

Border Color : HTML Border Color refers to the color of borders around
elements like <div>, <img>, etc. It defines the color of the border lines.

Link Color : HTML Link Color specifies the color of the anchor tag within a
webpage, allowing us to define the color of clickable text, and making user
navigation more visual.

HTML Colors Example Explanation:

In this example we create HTML to structure content with elements like headings,
divs, links, and paragraphs.

Heading displays a gray background for emphasis.

Div is bordered with skyblue color for visual distinction.

Link text appears in tomato color for better visibility.

Paragraph text is styled with a dark green color for readability.

Color Values

Color values in HTML define the color of elements. They can be specified using
various formats such as hexadecimal, RGB, RGBA, HSL, HSLA, color names,
and system color keywords.

RGB Color Value

RGB, which stands for Red, Green, and Blue, is a method used in CSS to describe
colors. It works by mixing different amounts of three primary colors, each with
values ranging from 0 to 255. By adjusting these values, we can produce an
extensive range of colors, allowing for the creation of diverse and better color
palettes across websites.

RGB Color Value Properties

Some properties are:

✓ It's representation is as rgb(red, green, blue).

✓ By adjusting these values from 0 to 255, we can produce 16,777,216 unique
colors.
 ✓ For instance, specifying rgb(0, 255, 0) results in green because the green
value is at its maximum (255), while red and blue are at 0. Conversely,
using rgb(0, 0, 255) produces blue, with the blue channel set to its peak
(255), and red and green at 0.
✓ To render black, all color parameters are set to 0 (rgb(0, 0, 0)), and for
white, all parameters are set to their maximum (rgb(255, 255, 255)).

RGBA Color Value

RGBA (Red, Green, Blue, Alpha) is a color model similar to RGB, but with
an added alpha parameter representing transparency. The alpha value, which
ranges from 0 to 1, adjusts transparency, allowing the display of colors with
varying levels of opacity. It's representation is as rgba(red, green, blue, alpha).

RGBA Color values Properties

✓ RGBA Format Represents colors using Red, Green, Blue, and Alpha
(transparency) values, allowing control over opacity.
✓ Alpha value ranges from 0 (fully transparent) to 1 (fully opaque).
✓ RGBA values are expressed as rgba(red, green, blue, alpha).
✓ Ideal for creating semi-transparent elements, providing subtle visual
effects or layering content.

HEX Color Value

Hexadecimal color values, often referred to as hex values, use a six-digit code
made up of pairs of characters.

✓ Hexadecimal values in CSS are represented as #rrggbb, where rr,

gg, and bb denote the intensity of red, green, and blue,
respectively, ranging from 00 to ff.
✓ This encoding allows for 16,777,216 unique color combinations,
providing a vast spectrum for web design.
✓ For example, #ff0000 corresponds to red (max red, no green, no
blue), while #00ff00 represents green (max green, no red, no
blue).
✓ Black is denoted by #000000 (no red, no green, no blue), while
white is represented as #ffffff (max red, max green, max blue).

HSL (Hue, Saturation, Lightness) Value

HSL color values in HTML represent colors by defining their hue, saturation, and
lightness. The hue signifies the type of color (red, blue, green, etc.), saturation
refers to the intensity or purity of the color, and lightness determines the
brightness or darkness.

HSL Color value Properties:

✓ HSL representation defines colors based on Hue, Saturation, and Lightness

components, offering a more intuitive way to specify colors.
✓ Hue represents the color type, ranging from 0 to 360 degrees.
✓ Saturation determines the intensity or purity of the color, from 0%
(grayscale) to 100% (full color).
✓ Lightness controls the brightness of the color, ranging from 0% (black) to
100% (white), with 50% representing normal.

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form
elements:
• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

The <input> Element

✓ One of the most used form elements is the <input> element.

✓ The <input> element can be displayed in several ways, depending
on the type attribute.

The <label> Element

 ✓ The <label> element defines a label for several form elements.
✓ The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.
✓ The <label> element also help users who have difficulty clicking on very
small regions (such as radio buttons or checkboxes) - because when the
user clicks the text within the <label> element, it toggles the radio
button/checkbox.
✓ The for attribute of the <label> tag should be equal to the id attribute of the
<input> element to bind them together.

The <select> Element

✓ The <select> element defines a drop-down list

✓ The <option> element defines an option that can be selected.
✓ By default, the first item in the drop-down list is selected.
✓ To define a pre-selected option, add the selected attribute to the option

The <textarea> Element

✓ The <textarea> element defines a multi-line input field (a text area)

✓ The rows attribute specifies the visible number of lines in a text area.
✓ The cols attribute specifies the visible width of a text area.

The <button> Element

The <button> element defines a clickable button

The <fieldset> and <legend> Elements

✓ The <fieldset> element is used to group related data in a form.

✓ The <legend> element defines a caption for the <fieldset> element

The <datalist> Element

✓ The <datalist> element specifies a list of pre-defined options for an <input>

element.
✓ Users will see a drop-down list of the pre-defined options as they input
data.
✓ The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.

HTML Form Elements

 • <form> - Defines an HTML form for user input
• <input> - Defines an input control
• <textarea - Defines a multiline input control (text area)
• <label> - Defines a label for an <input> element
• <fieldset> - Groups related elements in a form
• <legend> - Defines a caption for a <fieldset> element
• <select> - Defines a drop-down list
• <optgroup> - Defines a group of related options in a drop-down list
• <option> - Defines an option in a drop-down list
• <button> - Defines a clickable button
• <datalist> - Specifies a list of pre-defined options for input controls
• <output> - Defines the result of a calculation

Introduction to CSS
Introduction:

✓ CSS (Cascading Style Sheets) is a language designed to simplify the

process of making web pages presentable.
✓ It allows you to apply styles to HTML documents by prescribing colors,
fonts, spacing, and positioning.
✓ The main advantages are the separation of content (in HTML) and styling
(in CSS) and the same CSS rules can be used across all pages and not have
to be rewritten.
✓ HTML uses tags and CSS uses rule sets.
✓ CSS styles are applied to the HTML element using selectors.

Why CSS?

✓ Saves Time : Write CSS once and reuse it across multiple HTML pages.
✓ Easy Maintenance : Change the style globally with a single modification.
✓ Search Engine Friendly : Clean coding technique that improves readability
for search engines.
✓ Superior Styles : Offers a wider array of attributes compared to HTML.
✓ Offline Browsing : CSS can store web applications locally using offline
cache, allowing offline viewing.
How to Add CSS to HTML?

✓ There are three different ways to add CSS styles to an HTML

document:

Types of css:

✓ Inline css
✓ Internal css
✓ External css

Inline CSS

✓ Use the style attribute on the HTML element to add styles to the web
page. It is used for small projects.

Example:

<html>
<body>
< !-- Using Inline CSS -->
<h3 style="text-align: center;">
Welcome To GFG
</h3>
<p>CSS Tutorial - GeeksforGeeks</p>
</body>
</html>

Internal CSS

✓ Place the CSS styles within a <style> tag inside the HTML file,
usually inside the <head> section.

Example:

<!-- File name: [Link] -- >

<html>
<head>
<!-- Using Internal CSS -- >
<style>
h3 {
color: green;
 }
</style>
</head>
<body>
<h3>Welcome To GFG</h3>
<p>CSS Tutorial - GeeksforGeeks</p>
</body>
</html>

External CSS

✓ Create a separate CSS file with a .css extension and link this file to
your HTML file using the <link> tag. It consider the best practice to
add CSS into HTML File.

Example:

<!-- File name: [Link] -->

<html>
<head>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<p>CSS Tutorial - GeeksforGeeks</p>
</body>
</html>
<!--File name:[Link]-->
p{
text-align: center;
}

How to change fonts ?

✓ The fonts can be imported with the help of the google fonts and by
using the font awesome.
✓ The fonts can be imported with the help of the sng and the png is not
used.
✓ In font awesome the font awesome library is opened and an tag is
copied and should be used in the code then the icons and the fonts
can be used.
 ✓ A simple example for this is the home screen icon is taken from the
google fonts and the font style is taken then the font is used by using
the @import statement and by using svg the icon is imported.
✓ In the font awesome the link tag is used and by giving the link in rel
the font is imported and by using the tag given in the website the
icon is imported. Like this we can import the icon and the font in
font awesome.

TASK OF THE DAY:

• CSS Math Functions
• CSS Conditional Rules
• CSS Logical Properties

DAY 5:14-02-25
CSS Priority or CSS Specificity:
✓ If there are two or more CSS rules that point to the same element, the
selector with the highest specificity will "win", and its style declaration
will be applied to that HTML element.
✓ Think of specificity as a hierarchy that determines which style declaration
is ultimately applied to an element.
✓ The priority table is given below:

Priority Example Description

Inline style <h1 Highest priority, directly applied with

style="color: the style attribute
pink;">

Id selectors #navbar Second highest priority, identified by

the unique id attribute of an element

Classes and .test, :hover Third highest priority, targeted using

pseudo-classes class names
 Attributes [type="text"] Low priority, applies to attributes

Elements and h1, ::before, Lowest priority, applies to HTML

pseudo-elements ::after elements and pseudo-elements

Example:

<html>

<head>

<style>

.test{color:green;}

p{color:red;}

</style>

</head>

<body>

<p class=”test”>Hello World!</p>

</body>

</html>

For the above code the output will be displayed as green color because of the
priority.

CSS SELECTORS:

✓ A CSS selector selects the HTML element(s) you want to style.

✓ CSS selectors are used to "find" (or select) the HTML elements you want
to style.
✓ We can divide CSS selectors into five categories

[Link] selectors (select elements based on name, id, class)

[Link] selectors (select elements based on a specific relationship
between them)

[Link]-class selectors (select elements based on a certain state)

[Link]-elements selectors (select and style a part of an element)

[Link] selectors (select elements based on an attribute or attribute value)

The CSS id Selectors:

✓ The id selector uses the id attribute of an HTML element to select a specific

element.
✓ The id of an element is unique within a page, so the id selector is used to
select one unique element!
✓ To select an element with a specific id, write a hash (#) character, followed
by the id of the element.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>
</html>

The CSS class Selectors:

✓ The class selector selects HTML elements with a specific class attribute.
✓ To select elements with a specific class, write a period (.) character,
followed by the class name.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>

</html>

The CSS Universal Selector:

✓ The universal selector (*) selects all HTML elements on the page.

Example:

<!DOCTYPE html>
<html>

<head>

<style>

*{

text-align: center;

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

The CSS Grouping Selectors:

✓ The grouping selector selects all the HTML elements with the same style
definitions.
✓ Look at the following CSS code (the h1, h2, and p elements have the same
style definitions)

Example:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {
 text-align: center;

color: red;

h2 {

text-align: center;

color: red;

p{

text-align: center;

color: red;

</style></head>

<body>

<h1>hello <h1>

<h2>mce<h2>

<p >Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

TASK OF THE DAY:

• CSS Animations
• CSS Transition
• CSS Inheritance
• CSS Transform
WEEKEND TASK:
• Design a login page

DAY6 : 17-02-25
Login page design:
Coding:
HTML Coding
CSS Coding:
OUTPUT:

CSS layout ( Float and Clear):

✓ The CSS float property specifies how an element should float.
✓ The CSS clear property specifies what elements can float beside the cleared
element and on which side.

The float Property:

✓ The float property is used for positioning and formatting content e.g. let an
image float left to the text in a container.
✓ The float property can have one of the following values:

• left - The element floats to the left of its container

• right - The element floats to the right of its container

• none - The element does not float (will be displayed just where it occurs in
the text). This is default

• inherit - The element inherits the float value of its parent

CSS Positions:

✓ Introduction to positions.
✓ 5 types of positions are used in css
• Position static
• Position fixed
 • Position sticky
• Position relative
• Position absolute
✓ Position relative and absolute are used at the same time and the absolute
depends on the relative.

CSS Animations
✓ An animation lets an element gradually change from one style to
another.
✓ You can change as many CSS properties you want, as many times as
you want.
✓ To use CSS animation, you must first specify some keyframes for the
animation.
✓ Keyframes hold what styles the element will have at certain times.

CSS Animation Properties

@keyframes : Specifies the animation code

Animation : A shorthand property for setting all the animation properties

animation-delay : Specifies a delay for the start of an animation

animation-direction : Specifies whether an animation should be played

forwards, backwards or in alternate cycles

animation-duration : Specifies how long time an animation should take to

complete one cycle

animation-fill-mode : Specifies a style for the element when the animation is not
playing (before it starts, after it ends, or both)

animation-iteration-count : Specifies the number of times an animation should

be played

animation-name : Specifies the name of the @keyframes animation

animation-play-state : Specifies whether the animation is running or paused

animation-timing-function : Specifies the speed curve of the animation

CSS Transitions :
CSS transitions allows you to change property values smoothly, over a given
duration.

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to

• the duration of the effect

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition

effect.

The transition-timing-function property can have the following values:

• ease - specifies a transition effect with a slow start, then fast, then end
slowly (this is default)

• linear - specifies a transition effect with the same speed from start to end

• ease-in - specifies a transition effect with a slow start

• ease-out - specifies a transition effect with a slow end

• ease-in-out - specifies a transition effect with a slow start and end

• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier

function

CSS Transition Properties

The following table lists all the CSS transition properties:

Transition : A shorthand property for setting the four transition properties into a
single property

transition-delay : Specifies a delay (in seconds) for the transition effect

transition-duration : Specifies how many seconds or milliseconds a transition

effect takes to complete
transition-property : Specifies the name of the CSS property the transition effect
is for

transition-timing-function : Specifies the speed curve of the transition effect

CSS 3D Transforms
✓ CSS 3D transforms are used to manipulate HTML elements in three
dimensions by rotating them along the x-axis, y-axis, and z-axis. There are
three main types of transformation which are listed below:

• rotateX(): Rotates an element around its X-axis.

• rotateY(): Causes rotation around the Y-axis.

• rotateZ(): Enables rotation along the Z-axis.

The rotateX() Method

✓ The rotateX() method in CSS is used to rotate an HTML element

around its X-axis, which is horizontal
The rotateY() Method
✓ The rotateY() method in CSS is used to rotate an HTML element
around its vertical Y-axis. This method allows the element to flip
side to side, creating a mirror-like rotation effect.
The rotateZ() Method
✓ The rotateZ() method in CSS is used to rotate an HTML element
around its Z-axis, which is perpendicular to the screen. This rotation
affects the element as if it were spinning flat on the screen.
CSS Inheritance
✓ Inheritance, a fundamental concept in object-oriented programming
(OOP), mirrors real-life inheritance where children inherit traits from
parents.
✓ CSS Inheritance: In CSS inheritance, the child element will naturally
inherit properties from its parent element.
Syntax:
<style>
#parentclass {
color: red;
}
</style>
<div id="parentclass">
Parent Div
 <div id="div1Child">Child Div 1</div>
<div id="div2Child">Child Div 2</div>
</div>

TASK OF THE DAY:

• CSS Specificity
• CSS Variables
• CSS Shadow DOM
• CSS Function
DAY 7: 18-02-25
CSS Positions:
✓ The position property specifies the type of positioning method used for
an element (static, relative, fixed, absolute or sticky).
✓ The position property specifies the type of positioning method used for
an element.
✓ There are five different position values:
• Static
• Relative
• Fixed
• Absolute
• Sticky
✓ Elements are then positioned using the top, bottom, left, and right
properties. However, these properties will not work unless the position
property is set first. They also work differently depending on the position
value.

position: static;

✓ HTML elements are positioned static by default.

✓ Static positioned elements are not affected by the top, bottom, left, and
right properties.
✓ An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page

position: relative;

✓ An element with position: relative; is positioned relative to its normal

position.
 ✓ Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its normal
position. Other content will not be adjusted to fit into any gap left by
the element.

position: fixed;

✓ An element with position: fixed; is positioned relative to the viewport,

which means it always stays in the same place even if the page is
scrolled. The top, right, bottom, and left properties are used to position
the element.
✓ A fixed element does not leave a gap in the page where it would
normally have been located.
✓ Notice the fixed element in the lower-right corner of the page.

position: absolute;

✓ An element with position: absolute; is positioned relative to the nearest

positioned ancestor (instead of positioned relative to the viewport, like
fixed).
✓ However; if an absolute positioned element has no positioned ancestors,
it uses the document body, and moves along with page scrolling.

CSS Specificity
CSS Specificity is a fundamental concept in CSS that determines the order of
style application. It is calculated based on the types of selectors used, including
inline styles, IDs, classes, attributes, and element types. Understanding CSS
Specificity is important for:

• Avoiding styling conflicts

• Ensuring consistent design application
• Maintaining control over CSS code

This knowledge is essential for you to make efficient, maintainable, and scalable
stylesheets that render their website or application as intended.

CSS Specificity Rules

1. Inline CSS
Inline CSS is a method of applying CSS styling directly within HTML elements
using the “style” attribute. It has the highest specificity and will override all other
selectors, including External stylesheets and Internal CSS.

2. Internal CSS

Internal stylesheets are a method for defining CSS styles within an HTML
document’s <style> element. This styling can be used when we want to directly
implement the styles within an HTML Document. The specificity of this styling
depends on the CSS Selector used with the Element. For instance, if an id is used
then it has the highest specificity, in comparison to the External stylesheet. For
this, internal CSS will override rules defined in an external stylesheet.

3. External CSS

External CSS is used to style multiple HTML pages with a single style sheet.
External CSS contains a separate CSS file with a .css extension. This style can be
linked via the <link> tag in the HTML document. The specificity of this styling
also depends on the CSS Selector used with the Element.

Shadow DOM
A shadow root is the root node of a shadow DOM, which is a hidden DOM
subtree attached to an element in the main DOM. This allows for the
encapsulation of HTML, CSS, and JavaScript, enabling the creation of self-
contained components.

Encapsulation: Isolates component styles and behavior from the global

document, preventing unintended interactions.

Reusability: Facilitates the development of modular components that can be

reused across different parts of an application.

Maintainability: Simplifies code management by keeping component-specific

code separate from the main document.

Shadow DOM in Web Components

✓ The Shadow DOM is a key feature of Web Components that enables

developers to encapsulate a component’s internal structure and styling.
This ensures that styles and scripts do not leak out or get affected by the
rest of the page
Key Concepts of Shadow DOM

✓ Shadow Host: The element to which the shadow DOM is attached.

✓ Shadow Tree: The DOM tree inside the shadow DOM.
✓ Shadow Boundary: The boundary between the main DOM and shadow
DOM.
✓ Shadow Root: The root node of the shadow tree.

CSS Variables

✓ CSS variables (custom properties) are reusable values defined with two
dashes (–) that make your CSS code efficient and easier to maintain.

• Store values like colors, sizes, or fonts in one place for centralized updates.

• Use var() to apply these variables anywhere in your CSS.

Syntax

var( --custom-name, value );

Parameters

✓ –custom-name: (Required) The name of the custom property, starting with

two dashes (–).
✓ value: (Optional) A value used if the custom property is not defined or is
invalid.

CSS Functions Complete Reference

✓ CSS functions are used to dynamically define or manipulate property
values in stylesheets, making designs more flexible and responsive.
✓ Retrieve values like attributes with attr() or calculate sizes with calc().
✓ Adjust colors using functions like rgb() or hsl().

CSS Functions

attr() : Returns the value of an attribute of the selected elements.

blur() : Apply a blurred effect filter on the image.

brightness() : Apply a filter to set the brightness of the image.

calc() : Returns the value of an attribute of the selected elements.

hsla() : Define the colors using the Hue Saturation Lightness Alpha (HSLA)
model.

linear-gradient() : Set the linear gradient as the background image.

max() : Return the largest value from a set of comma-separated values.

min() : Return minimum value from a set of comma-separated values.

rgb() : It is used to define the colors using the Red Green Blue (RGB) model.

translate() : Reposition an element in a horizontal and vertical direction.

url() : It is used to include a file.

var() : Insert a value for custom property.

TASK OF THE DAY:

• Measurement units
• Syntax
• Comments
• Ruleset

DAY 8:19-02-25
CSS Grid Layout
✓ The Grid Layout Module offers a grid-based layout system, with rows and
columns.
✓ The Grid Layout Module allows developers to easily create complex web
layouts.
✓ The Grid Layout Module makes it easier to design a responsive layout
structure, without using float or positioning.
✓ The CSS grid properties are supported in all modern browsers .

CSS Grid Components

A grid always consists of:

✓ a Grid Container - the parent (container) <div> element

✓ Grid Items - the items inside the container <div>
Grid Container and Grid Items

✓ A grid layout consists of a parent element (the grid container), with one or
more grid items.
✓ All direct children of the grid container automatically become grid items .

All CSS Grid Properties

align-content : Vertically aligns the whole grid inside the container (when total
grid size is smaller than container)

align-items : Aligns content in a grid item along the column axis

align-self : Aligns the content for a specific grid item along the column axis

display : Specifies the display behavior (the type of rendering box) of an element

column-gap : Specifies the gap between the columns

gap : A shorthand property for the row-gap and the column-gap properties

grid : A shorthand property for the grid-template-rows, grid-template-columns,

grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow
properties

grid-area : Either specifies a name for the grid item, or this property is a
shorthand property for the grid-row-start, grid-column-start, grid-row-end, and
grid-column-end properties

grid-auto-columns : Specifies a default column size

grid-auto-flow : Specifies how auto-placed items are inserted in the grid

grid-auto-rows : Specifies a default row size

grid-column : A shorthand property for the grid-column-start and the grid-

column-end properties

grid-column-end : Specifies where to end the grid item

grid-column-start : Specifies where to start the grid item

grid-row : A shorthand property for the grid-row-start and the grid-row-end

properties

grid-row-end : Specifies where to end the grid item

grid-row-start : Specifies where to start the grid item

grid-template : A shorthand property for the grid-template-rows, grid-template-

columns and grid-areas properties

grid-template-areas : Specifies how to display columns and rows, using named

grid items

grid-template-columns : Specifies the size of the columns, and how many

columns in a grid layout

grid-template-rows : Specifies the size of the rows in a grid layout

justify-content : Horizontally aligns the whole grid inside the container (when
total grid size is smaller than container)

justify-self : Aligns the content for a specific grid item along the row axis

place-self : A shorthand property for the align-self and the justify-self properties

place-content : A shorthand property for the align-content and the justify-content

properties

row-gap : Specifies the gap between the grid rows

CSS flex Property

The flex property is a shorthand property for:

• flex-grow
• flex-shrink
• flex-basis

The flex property sets the flexible length on flexible items.

CSS Syntax

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Property Values

flex-grow : A number specifying how much the item will grow relative to the rest
of the flexible items
flex-shrink : A number specifying how much the item will shrink relative to the
rest of the flexible items

flex-basis : The length of the item. Legal values: "auto", "inherit", or a number
followed by "%", "px", "em" or any other length unit

auto : Same as 1 1 auto.

Initia : Same as 0 1 auto. Read about initial

None : Same as 0 0 auto.

Inherit : Inherits this property from its parent element. Read about inherit

CSS Media Queries

✓ The @media rule, introduced in CSS2, made it possible to define different
style rules for different media types.
✓ Media queries in CSS3 extended the CSS2 media types idea: Instead of
looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

• width and height of the viewport

• orientation of the viewport (landscape or portrait)

• resolution

✓ Using media queries are a popular technique for delivering a tailored style
sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and
Android phones).

CSS Media Types

• All : Used for all media type devices

• Print : Used for print preview mode
• Screen : Used for computer screens, tablets, smart-phones etc.

CSS Common Media Features

Orientation : Orientation of the viewport. Landscape or portrait

max-height : Maximum height of the viewport

min-height : Minimum height of the viewport

height : Height of the viewport (including scrollbar)

max-width : Maximum width of the viewport

min-width : Minimum width of the viewport

width : Width of the viewport (including scrollbar)

Media Query Syntax

✓ A media query consists of a media type and can contain one or more media
features, which resolve to either true or false.

CSS Syntax
CSS (Cascading Style Sheets) is a stylesheet language used to describe the
presentation of a document written in HTML. Understanding CSS syntax is
fundamental for creating visually appealing and well-structured web pages.

Basic CSS Syntax

CSS is written as rulesets. A ruleset consists of a selector and a declaration block.

Here’s the basic structure

{...}

<style>

/* CSS Rule */

h1 {

color: blue;

/* Property: value */

font-size: 24px;

p{

color: green;

font-size: 16px;
 }

</style>

{...}

h1: This selector targets all <h1> elements on the page. The style applied to <h1>
will set the text color to blue and the font size to 24px.

p: This selector targets all <p> elements. The text color will be green and the font
size will be 16px.

CSS Syntax Breakdown

Selectors:
Selectors are used to “select” the HTML element you want to style. It can be an
element type (e.g., h1), a class (e.g., .class-name), an ID (e.g., #id-name), or a
combination of these.

Type Selector: Targets all elements of a specific type, like h1, p, div, etc.

h1 {
font-family: Arial, sans-serif;
}

Class Selector: Targets elements with a specific class. Example: .my-class { }

.box {
border: 1px solid black;
padding: 10px;
}

ID Selector: Targets an element with a specific ID. Example: #my-id { }

#header {

background-color: lightgray;

Universal Selector: Targets all elements (*).

*{
margin: 0;
 padding: 0;
}

Properties: Properties are the aspects of the selected elements you want to style
(like color, width, height, etc.).

color: Defines the text color.

background-color: Defines the background color of an element.

font-size: Sets the size of the font.

margin: Specifies the space around an element.

padding: Defines the space between the element’s content and its border.

Values: Values define the specifics of the property you want to apply, such as a
color name, a number (e.g., 16px), or percentages (e.g., 50%).

Grouping and Nesting

You can group selectors to apply the same styles or nest them for hierarchical
targeting.

1. Grouping

h1, h2, h3 {

color: darkblue;

2. Nesting

ul li {

list-style-type: square;

Inline, Internal, and External CSS

CSS can be written in three ways:

1. Inline CSS: Applied directly within the HTML element.

{...}
<body>

<p style="color: blue;">This is blue text.</p>

</body>

{...}

2. Internal CSS: Defined within the <style> tag in the <head> section.

{...}

<style>

h1 {

color: red;

</style>

{...}

3. External CSS: Linked through an external stylesheet.

{...}

<link rel="stylesheet" href="[Link]">

{...}

Media Queries
Media queries allow you to create responsive designs.

@media (max-width: 600px) {

body {

background-color: lightblue;

This changes the background color for screens narrower than 600 pixels.
Animations
CSS can be used to create animations for elements.

@keyframes move {

from {

left: 0px;

to {

left: 100px;

div {

position: relative;

animation: move 2s infinite;

CSS Variables
CSS variables helps to crate reusable values for any property.

:root {

--main-color: #3498db;

h1 {

color: var(--main-color);

Comments in CSS
Comments are used to explain code and are ignored by the browser.
/* Write your comment comment */

p{

font-size: 16px;

Comments are always written between /* these symbols */.

CSS Comments
CSS comments are used to add notes or explanations to your code, helping you
and others understand it better. They start with /* and end with */ and can be used
for both single-line and multi-line comments.

Syntax

/* Code comments */

CSS Ruleset
A CSS ruleset is the foundation of how styles are applied to HTML elements on
a web page. It consists of a selector and one or more declarations, which define
how elements are displayed.

• A CSS ruleset is made up of a selector and declarations.

• The selector targets HTML elements to apply styles.
• Declarations are pairs of property names and values that define how the
selected elements should be styled.
• The declarations are enclosed in curly braces {}.

CSS Units
CSS units define the size of elements, with absolute units (like px, cm) having
fixed values and relative units (like em, rem, %, vh) depending on factors like the
viewport or parent elements.

There are two types of units: Absolute and Relative.

Absolute units

Absolute units in CSS, such as px, cm, and mm, have fixed values and do not
change based on the viewport or parent elements. They are used when precise,
unchanging measurements are needed for elements.

1. cm

A centimeter (cm) is a length unit in the SI system, derived from the meter (m),
with 1 m = 100 cm. The SI system is maintained by the BIPM(International
Bureau of Weights and Measures).

1 cm = 1 / 100 m

2. mm

The millimeter (mm), introduced during the French Revolution’s metric system,
became part of the SI system. It is maintained by the International Bureau of
Weights and Measures (BIPM).

1 cm=10mm

3. inch(in)

The inch originated from ancient human measurements, based on the width of a
thumb or the length of a dried grain of barley. It was standardized in 1959 by an
international agreement, defining it as exactly 25.4 millimeters to align with the
metric system.

1 inch = 2.54cm =2.54 * 1cm=2.54* 10mm= 25.4mm

4. pixel (px)

A pixel (px) is the smallest unit on a digital screen, representing a point of light.
More pixels mean better image clarity and higher screen resolution.

1px = 0.26mm

5. pt (point)

A point (pt) is a typography unit equal to 1/72 of an inch, used for font sizes and
spacing in design.

1pt = 1/72 inch(1 inch=2.54cm)

1pt= 1.33px

6. 1 pc(pica)

A pica is a unit used in print and design, equal to 12 points or 1/6 of an inch (4.233
mm). It helps define layout dimensions like font and image sizes.

1pc=12pt=15.96px

Relative Unit’s

1. em

In CSS , the “em” unit refers to the font-size of its parent element, defaulting to
the root element (<html>) if it’s the only one in the DOM.

2. rem

In CSS, rem is based on the font-size of the root element (<html>) and stays the
same in all cases.

3. vw or view-width

In CSS, vw depends on the viewport width, which changes with screen size, so
an Android phone has a smaller vw than an HD TV.

4. vh or view-height

The vh unit in CSS is 1% of the viewport height, useful for responsive design to
scale elements with the window size.

5. percentage(%)

The % unit in CSS is relative to the parent element’s size, allowing elements to
adjust dynamically for responsive design.

6. vmin

The vmin unit in CSS is based on the smaller of the viewport’s width or height,
helping elements scale proportionally for responsive designs

7. vmax

vmax is a CSS unit that represents 1% of the larger viewport dimension (width or
height), helping elements scale based on the screen’s dominant size.
8. ch

The ch unit in CSS represents the width of the “0” character of the current font.
It’s a relative unit commonly used for sizing text elements to madatintain
proportional widths and heights based on character dimensions.

9. ex

Relative to the height of the letter “x” in the current font, primarily used for
vertical spacing and font-related measurements.

TASK OF THE DAY:

• Create an responsive webpage

DAY 9:20-02-25
✓ Revision of whole CSS

DAY 10:21-02-25
✓ Doubt clearing session in flex and grid

Difference Between CSS Grid and Flexbox

Property Grid Flexbox

Dimension Two – Dimensional One – Dimensional

Can flex combination of items

Can push content element
Features through space-occupying
to extreme alignment
Features

Support Type Layout First Content First

Primary Use Creating complex layouts with Aligning items in a row

Case rows and columns or column
Property Grid Flexbox

Can be less in performance due Generally faster for

Performance
to very complex grids simple layouts

WEEKEND TASK:
• Creating a multipage website.

DAY 11:24-02-25
RESPONSIVE WEB PAGE:
HTML CODING:
CSS CODING:
OUTPUT:

Desktop view:
Phone view: iPhone SE view:

Surface Duo: iPad Air view:

Multipage website:
HTML CODING:

CSS CODING:
OUTPUT:

Introduction to javascript
Introduction:

• JavaScript is the programming language of the web.

• It can update and change both HTML and CSS.

• It can calculate, manipulate and validate data.

• In HTML, JavaScript code is inserted

• between <script> and </script> tags.

• One of many JavaScript HTML methods is getElementById().

JavaScript Display Possibilities:

✓ JavaScript can "display" data in different ways:

✓ Writing into an HTML element, using innerHTML or innerText.
✓ Writing into the HTML output using [Link]().
✓ Writing into an alert box, using [Link]().
✓ Writing into the browser console, using [Link]().

Using innerHTML

✓ To access an HTML element, you can use the

[Link](id) method.
✓ Use the id attribute to identify the HTML element.
 ✓ Then use the innerHTML property to change the HTML content of the
HTML element:

Example:

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p>My First Paragraph</p>

<p id="demo"></p>

<script>

[Link]("demo").innerHTML = "<h2>Hello World</h2>";

</script>

</body>

</html>

Using innerText:

✓ To access an HTML element, use the [Link](id)

method.
✓ Then use the innerText property to change the inner text of the HTML
element:

Example:

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p>My First Paragraph</p>

<p id="demo"></p>
<script>

[Link]("demo").innerText = "Hello World";

</script>

</body>

</html>

Using [Link]():

✓ For testing purposes, it is convenient to use [Link]()

Example:

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<script>

[Link](5 + 6);

</script>

</body>

</html>

Using [Link]()

✓ For debugging purposes, you can call the [Link]() method in the
browser to display data.

Example:

<!DOCTYPE html>

<html>

<body>
<script>

[Link](5 + 6);

</script>

</body>

</html>

JavaScript Print:

✓ JavaScript does not have any print object or print methods.

✓ You cannot access output devices from JavaScript.
✓ The only exception is that you can call the [Link]() method in the
browser to print the content of the current window.

Example:

<!DOCTYPE html>

<html>

<body>

<h2>The [Link]() Method</h2>

<p>Click the button to print the current page.</p>

<button onclick="[Link]()">Print this page</button>

</body>

</html>

Javascript variables

✓ Variables are Containers for Storing Data

✓ JavaScript Variables can be declared in 4 ways:
• Automatically
• Using var
• Using let
• Using const

JavaScript let
 ✓ Variables declared with let have Block Scope
✓ Variables declared with let must be Declared before use
✓ Variables declared with let cannot be Redeclared in the same scope

Javascript var

✓ Variables declared with var have function Scope

✓ Variables declared with var must be Declared before use
✓ Variables declared with var can be Redeclared and reassigned in the same
scope

Javascript const

✓ Variables declared with const have Block Scope

✓ Variables declared with const must be Declared before use
✓ Variables declared with const cannot be Redeclared and reassigned in the
same scope

Types of JavaScript Operators:

There are different types of JavaScript operators:

✓ Arithmetic Operators
✓ Assignment Operators
✓ Comparison Operators
✓ String Operators
✓ Logical Operators
✓ Bitwise Operators
✓ Ternary Operators
✓ Type Operators

DAY 12:25-02-25
String concept
String concatenation:

• Using Quotes

A JavaScript string is zero or more characters written inside quotes.

Example:

let text = "Hamsa";

let text = ‘Hamsa’;

Template Strings

✓ Templates were introduced with ES6 (JavaScript 2016).

✓ Templates are strings enclosed in backticks (`This is a template string`).
✓ Templates allow single and double quotes inside a string

Example:

let text = `He's often called "Johnny"`;

Conditional Statements

✓ Very often when you write code, you want to perform different actions for
different decisions.
✓ You can use conditional statements in your code to do this.
✓ In JavaScript we have the following conditional statements:
▪ Use if to specify a block of code to be executed, if a specified
condition is true
▪ Use else to specify a block of code to be executed, if the same
condition is false
▪ Use else if to specify a new condition to test, if the first
condition is false
▪ Use switch to specify many alternative blocks of code to be
executed

The if Statement

Use the if statement to specify a block of JavaScript code to be executed if a

condition is true.

Syntax

if (condition) {

// block of code to be executed if the condition is true

The else Statement

Use the else statement to specify a block of code to be executed if the condition
is false.
Syntax:

if (condition) {

// block of code to be executed if the condition is true

} else {

// block of code to be executed if the condition is false

The else if Statement

Use the else if statement to specify a new condition if the first condition is false.

Syntax

if (condition1) {

// block of code to be executed if condition1 is true

} else if (condition2) {

// block of code to be executed if the condition1 is false and condition2 is true

} else {

// block of code to be executed if the condition1 is false and condition2 is false

The JavaScript Switch Statement

Use the switch statement to select one of many code blocks to be executed.

Syntax

switch(expression) {

case x:

// code block

break;

case y:
 // code block

break;

default:

// code block

This is how it works:

The switch expression is evaluated once.

The value of the expression is compared with the values of each case.

If there is a match, the associated block of code is executed.

If there is no match, the default code block is executed.

The typeof Operator:

The typeof operator returns the data type of a JavaScript variable.

Primitive Data Types:

In JavaScript, a primitive value is a single value with no properties or

[Link] has 7 primitive data types:

• string

• number

• boolean

• bigint

• symbol

• null

• undefined

The typeof operator returns the type of a variable or an expression.

Task of the day:

• Using switch case the condition is to get Friday

Day 13:26-02-25
• Discussing about the old topics
• Task discussion
switch (friday) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
default:
[Link]("invalid");
}

DAY 14:27-02-25
All absent due to the project expo in our college.

DAY 15:28-02-25
String elements:
JavaScript String Length:
The length property returns the length of a string:

Example:

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let length = [Link];

Extracting String Parts:

There are 3 methods for extracting a part of a string:

• slice(start, end)
• substring(start, end)
• substr(start, length)

JavaScript String slice():

✓ slice() extracts a part of a string and returns the extracted part in a new
string.
✓ The method takes 2 parameters: start position, and end position (end not
included).

JavaScript String substring():

✓ substring() is similar to slice().

✓ The difference is that start and end values less than 0 are treated as 0 in
substring().
✓ If you omit the second parameter, substring() will slice out the rest of the
string.
✓ JavaScript String substr():
✓ substr() is similar to slice().
✓ The difference is that the second parameter specifies the length of the
extracted part.

Converting to Upper and Lower Case:

✓ A string is converted to upper case with toUpperCase():

✓ A string is converted to lower case with toLowerCase():

JavaScript String concat():

concat() joins two or more strings:

Example:

let text1 = "Hello";

let text2 = "World";

let text3 = [Link](" ", text2);

JavaScript String trim():

The trim() method removes whitespace from both sides of a string:

Example:

let text1 = " Hello World! ";

let text2 = [Link]();

JavaScript String trimStart():

✓ ECMAScript 2019 added the String method trimStart() to JavaScript.

✓ The trimStart() method works like trim(), but removes whitespace only
from the start of a string.

Example:

let text1 = " Hello World! ";

let text2 = [Link]();

JavaScript String trimEnd():

ECMAScript 2019 added the string method trimEnd() to JavaScript.

The trimEnd() method works like trim(), but removes whitespace only from the
end of a string.

Example:

let text1 = " Hello World! ";

let text2 = [Link]();

WEEKEND TASK:
 • Design a calculator using HTMl,CSS,JavaScript

DAY 16:3-3-25

CSS:
OUTPUT:
JavaScript Array pop()
• The pop() method removes the last element from an array:

Example:

<!DOCTYPE html>
<html>
<body>
<p>The pop() method removes the last element from an array.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
[Link]("demo1").innerHTML = fruits;
[Link]();
[Link]("demo2").innerHTML = fruits;
</script>
</body>
</html>

OUTPUT:

The pop() method removes the last element from an array.

Banana,Orange,Apple,Mango

Banana,Orange,Apple
JavaScript Array push()

The push() method adds a new element to an array (at the end):

Example:

<!DOCTYPE html>

<html>

<body>

<p>The push() method appends a new element to an array:</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>

const fruits = ["Banana", "Orange", "Apple", "Mango"];

[Link]("demo1").innerHTML = fruits;

[Link]("Kiwi");

[Link]("demo2").innerHTML = fruits;

</script>

</body>

</html>

OUTPUT:

The push() method appends a new element to an array:

Banana,Orange,Apple,Mango

Banana,Orange,Apple,Mango,Kiwi

Shifting Elements

Shifting is equivalent to popping, but working on the first element instead of the
last.

JavaScript Array shift()

The shift() method removes the first array element and "shifts" all other elements
to a lower index.

Example

<!DOCTYPE html>

<html>

<body>

<p>The shift() method removes the first element of an array (and "shifts" the
other elements to the left):</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>

const fruits = ["Banana", "Orange", "Apple", "Mango"];

[Link]("demo1").innerHTML = fruits;

[Link]();

[Link]("demo2").innerHTML = fruits;

</script>

</body>

</html>

OUTPUT:

The shift() method removes the first element of an array (and "shifts" the other
elements to the left):

Banana,Orange,Apple,Mango

Orange,Apple,Mango

JavaScript Array unshift()

The unshift() method adds a new element to an array (at the beginning), and
"unshifts" older elements:
Example

<!DOCTYPE html>

<html>

<body>

<p>The unshift() method adds new elements to the beginning of an array:</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>

const fruits = ["Banana", "Orange", "Apple", "Mango"];

[Link]("demo1").innerHTML = fruits;

[Link]("Lemon");

[Link]("demo2").innerHTML = fruits;

</script>

</body>

</html>

OUTPUT:

The unshift() method adds new elements to the beginning of an array:

Banana,Orange,Apple,Mango

Lemon,Banana,Orange,Apple,Mango

DAY 17:4-3-25
What is An Event Loop in JavaScript?
The event loop is an important concept in JavaScript that enables asynchronous
programming by handling tasks efficiently. Since JavaScript is single-threaded,
it uses the event loop to manage the execution of multiple tasks without
blocking the main thread.
How the Event Loop Works

The event loop continuously checks whether the call stack is empty and whether
there are pending tasks in the callback queue or microtask queue.

Call Stack: JavaScript has a call stack where function execution is managed in
a Last-In, First-Out (LIFO) order.

Web APIs (or Background Tasks): These include setTimeout, setInterval,

fetch, DOM events, and other non-blocking operations.

Callback Queue (Task Queue): When an asynchronous operation is

completed, its callback is pushed into the task queue.

Microtask Queue: Promises and other microtasks go into the microtask queue,
which is processed before the task queue.

Event Loop: It continuously checks the call stack and, if empty, moves tasks
from the queue to the stack for execution.

Common Issues Related to the Event Loop

1. Blocking the Main Thread

Heavy computations block the event loop, making the app unresponsive.

while(true)
{

[Link]('Blocking...')

An infinite while(true) loop continuously runs, blocking the event loop and
freezing the browser by preventing any other task from executing.

2. Delayed Execution of setTimeout

setTimeout doesn’t always run exactly after the specified time.

[Link]("Start");

setTimeout(() => [Link]("Inside setTimeout"), 1000);

for (let i = 0; i < 1e9; i++) {} // Long loop

[Link]("End");

The blocking loop delays setTimeout execution because the Call Stack is busy
so, this code will also lead to Time Limit Exceed Error or will freeze the
Browser.

3. Priority of Microtasks Over Callbacks

Microtasks run before setTimeout, even if set with 0ms delay.

setTimeout(() => [Link]("setTimeout"), 0);

[Link]().then(() => [Link]("Promise"));

[Link]("End");

Explain

The event loop first check’s for function in the microtask queue and then in the
call back queue always in JavaScript microtask queue is given more priority
than the call back queue that’s why the functions present in the microtask queue
are executed first.

4. Callback Hell

Too many nested callbacks make code unreadable

setTimeout(() => {
 [Link]("Step 1");

setTimeout(() => {

[Link]("Step 2");

setTimeout(() => {

[Link]("Step 3");

}, 1000);

}, 1000);

}, 1000);

This creates Callback Hell, making it hard to read and maintain. Use Promises
or async/await instead.

Map in JS

A Map is a data structure that stores key-value pairs, where each key is unique.
It is similar to an object but has some advantages:

• Inserts keys in the order they were added.

• Allows keys of any type, not just strings and symbols.
• Provides better performance when dealing with large datasets.

Creating a Map

✓ Map() constructor allows two ways to create a Map in JavaScript.

✓ Passing an Array to new Map().
✓ Create a Map and use [Link]().

Properties of JavaScript Map

✓ set(key, val) : Adds or updates an element with a specified key and value.
✓ get(key) : Returns the value associated with the specified key.
✓ has(key) : Returns a boolean indicating whether an element with the
specified key exists.
✓ delete(key) : Removes the element with the specified key.
✓ clear(): Removes all elements from the Map.
✓ size: Returns the number of key-value pairs in the Map.

Advantages of Using Maps:

 • Key order: Maps remember the insertion order of the keys.

• Performance: Inserting and retrieving elements from a Map are

generally faster than objects, especially when the number of elements is
large.

• Any type of key: Unlike objects, Map keys can be of any data type,
including functions, objects, and primitive types.

DAY 18:5-03-25
JavaScript Callbacks
In JavaScript, callbacks play an essential role in handling asynchronous tasks like
reading files, making API requests, and executing code after certain events. If
you’ve ever heard the phrase “I will call back later!”, that’s exactly how callbacks
work.

What is a Callback Function?

✓ A callback function is a function that is passed as an argument to another

function and executed later.
✓ A function can accept another function as a parameter.
✓ Callbacks allow one function to call another at a later time.
✓ A callback function can execute after another function has finished.

function greet(name, callback) {

[Link]("Hello, " + name);

callback();

function sayBye() {

[Link]("Goodbye!");

greet("Ajay", sayBye);

Output

Hello, Ajay
Goodbye!

Here, sayGoodbye() is passed as a callback to greet(), which executes after the

greeting.

How Do Callbacks Work in JavaScript?

JavaScript executes code line by line (synchronously), but sometimes we need to

delay execution or wait for a task to complete before running the next function.
Callbacks help achieve this by passing a function that is executed later.

Callbacks for Asynchronous Execution

[Link]("Start");

setTimeout(function () {

[Link]("Inside setTimeout");

}, 2000);

[Link]("End");

Output

Start

End

Inside setTimeout (after 2 seconds)

setTimeout() is an asynchronous function that takes a callback to execute after 2

seconds.

The rest of the code continues executing without waiting.

Where Are Callbacks Used?

1. Handling Asynchronous Operations

Callbacks are widely used in

API requests (fetching data)

Reading files ([Link] file system)

Event listeners (clicks, keyboard inputs)

Database queries (retrieving data)

2. Callbacks in Functions Handling Operations

When a function needs to execute different behaviors based on input, callbacks

make the function flexible.

function calc(a, b, callback) {

return callback(a, b);

function add(x, y) {

return x + y;

function mul(x, y) {

return x * y;

[Link](calc(5, 3, add));

[Link](calc(5, 3, mul));

Output

15

calculate() receives two numbers and a function (add or multiply).

The passed function is executed inside calculate().

3. Callbacks in Event Listeners

JavaScript is event-driven, and callbacks handle user interactions like clicks and
key presses.

[Link]("myButton").addEventListener("click", function () {

[Link]("Button clicked!");
});

Here, the anonymous function is a callback that runs when the button is clicked.

4. Callbacks in API Calls (Fetching Data)

Callbacks are useful when retrieving data from APIs.

function fetch(callback) {

fetch("[Link]

.then(response => [Link]())

.then(data => callback(data))

.catch(error => [Link]("Error:", error));

function handle(data) {

[Link]("Fetched Data:", data);

fetch(handle);

fetchData() gets data from an API and passes it to handleData() for processing.

Features of JavaScript Callbacks

✓ Asynchronous Execution: Handle async tasks like API calls, timers, and
events without blocking execution.
✓ Code Reusability: Write modular code by passing different callbacks for
different behaviors.
✓ Event-Driven Programming: Enable event-based execution (e.g., handling
clicks, keypresses).
✓ Error Handling: Pass errors to callbacks for better control in async
operations.
✓ Non-Blocking Execution: Keep the main thread free by running long tasks
asynchronously.

Problems with Callbacks

Although callbacks are useful, they have some drawbacks.

1. Callback Hell (Nested Callbacks)

When callbacks are nested deeply, the code becomes unreadable and hard to
maintain.

function step1(callback) {

setTimeout(() => {

[Link]("Step 1 completed");

callback();

}, 1000);

function step2(callback) {

setTimeout(() => {

[Link]("Step 2 completed");

callback();

}, 1000);

function step3(callback) {

setTimeout(() => {

[Link]("Step 3 completed");

callback();

}, 1000);

step1(() => {

step2(() => {

step3(() => {

[Link]("All steps completed");

 });

});

});

As the number of steps increases, the nesting grows deeper, making the code
difficult to manage.

2. Error Handling Issues in Callbacks

Error handling can get messy when dealing with nested callbacks.

function divide(a, b, callback) {

if (b === 0) {

callback(new Error("Cannot divide by zero"), null);

} else {

callback(null, a / b);

function result(error, result) {

if (error) {

[Link]("Error:", [Link]);

} else {

[Link]("Result:", result);

divide(10, 2, result);

divide(10, 0, result);

Output

Result: 5
Error: Cannot divide by zero

Handling errors inside callbacks can complicate code readability.

Alternatives to Callbacks

1. Promises (Fixing Callback Hell)

Promises provide a better way to handle asynchronous tasks without deep nesting.

function step1() {

return new Promise(resolve => {

setTimeout(() => {

[Link]("Step 1 completed");

resolve();

}, 1000);

});

function step2() {

return new Promise(resolve => {

setTimeout(() => {

[Link]("Step 2 completed");

resolve();

}, 1000);

});

function step3() {

return new Promise(resolve => {

setTimeout(() => {
 [Link]("Step 3 completed");

resolve();

}, 1000);

});

step1()

.then(step2)

.then(step3)

.then(() => [Link]("All steps completed"));

Promises make code more readable by chaining .then() instead of nesting

callbacks.

2. Async/Await (Cleaner Alternative)

async/await provides an even cleaner way to handle asynchronous code.

async function processSteps() {

await step1();

await step2();

await step3();

[Link]("All steps completed");

processSteps();

async/await makes code look synchronous, improving readability.

When to Use and Avoid Callbacks?

Use callbacks when

✓ Handling asynchronous tasks (API calls, file reading).

✓ Implementing event-driven programming.
 ✓ Creating higher-order functions.

Avoid callbacks when

✓ Code becomes nested and unreadable (use Promises or async/await).

✓ You need error handling in asynchronous operations (Promises are better).

JavaScript Promise
JavaScript Promises make handling asynchronous operations like API calls, file
loading, or time delays easier. Think of a Promise as a placeholder for a value
that will be available in the future. It can be in one of three states

• Pending: The task is in the initial state.

• Fulfilled: The task was completed successfully, and the result is available.

• Rejected: The task failed, and an error is provided.

Syntax

let promise = new Promise((resolve, reject) => {

// Perform async operation

if (operationSuccessful) {

resolve(“Task successful”);

} else {

reject(“Task failed”);

});

• resolve(value): Marks the promise as fulfilled and provides a result.

• reject(error): Marks the promise as rejected with an error.

Let’s See Advanced Promise Methods and Patterns for Effective Async Handling

1. [Link]() Method

Waits for all promises to resolve and returns their results as an array. If any
promise is rejected, it immediately rejects.
[Link]([

[Link]("Task 1 completed"),

[Link]("Task 2 completed"),

[Link]("Task 3 failed")

])

.then((results) => [Link](results))

.catch((error) => [Link](error));

Output

Task 3 failed

2. [Link]() Method

Waits for all promises to settle (fulfilled or rejected) Method and returns an array
of their outcomes.

[Link]([

[Link]("Task 1 completed"),

[Link]("Task 2 failed"),

[Link]("Task 3 completed")

])

.then((results) => [Link](results));

Output

{ status: 'fulfilled', value: 'Task 1 completed' },

{ status: 'rejected', reason: 'Task 2 failed' },

{ status: 'fulfilled', value: 'Task 3 completed' }

3. [Link]() Method
[Link]() Method resolves or rejects as soon as the first promise settles.

[Link]([

new Promise((resolve) =>

setTimeout(() =>

resolve("Task 1 finished"), 1000)),

new Promise((resolve) =>

setTimeout(() =>

resolve("Task 2 finished"), 500)),

]).then((result) =>

[Link](result));

Output

Task 2 finished

4. [Link]() Method

[Link]() Method resolves with the first fulfilled promise. If all are rejected,
it rejects with an AggregateError.

[Link]([

[Link]("Task 1 failed"),

[Link]("Task 2 completed"),

[Link]("Task 3 completed")

])

.then((result) => [Link](result))

.catch((error) => [Link](error));

Output

Task 2 completed

5. [Link]() Method
[Link]() Method returns a promise that resolves with the given value.

[Link]("Immediate success")

.then((value) => [Link](value));

Output

Immediate success

6. [Link]() Method

[Link]() Method returns a promise that immediately rejects with a

given reason.

[Link]("Immediate failure")

.catch((error) => [Link](error));

Output:

Immediate failure

7. [Link]() Method

[Link]() Method runs a cleanup or final code block regardless of the

promise’s result (fulfilled or rejected).

[Link]("Task completed")

.then((result) => [Link](result))

.catch((error) => [Link](error))

.finally(() => [Link]("Cleanup completed"));

Output

Task completed

Cleanup completed

8. Chaining with [Link]() Method

Allows sequential execution of promises, passing results to the next .then()

Method.
[Link](5)

.then((value) => value * 2) // Multiplies by 2

.then((value) => value + 3) // Adds 3

.then((finalValue) => [Link](finalValue)); // Logs: 13

Output

13

9. Sequential Execution with [Link]()

let tasks = [1, 2, 3];

[Link]((prevPromise, current) => {

return [Link](() => {

return new Promise((resolve) => {

[Link](`Processing task ${current}`);

setTimeout(resolve, 500); // Simulate async task

});

});

}, [Link]());

Output

Processing task 1

Processing task 2

Processing task 3

10. Dynamic Promise Creation

Creating and resolving promises dynamically for runtime-based decisions.

function asyncTask(taskName) {

return new Promise((resolve) => {

 setTimeout(() =>

resolve(`${taskName} completed`), 1000);

});

asyncTask("Download File").then((result) =>

[Link](result));

Output:

Download File completed

11. Timeout Handling with [Link]() Method

Using [Link]() Method to set a timeout for a task.

let fetchData = new Promise((resolve) =>

setTimeout(() =>

resolve("Data loaded"), 3000));

let timeout = new Promise((_, reject) =>

setTimeout(() =>

reject("Timeout!"), 2000));

[Link]([fetchData, timeout])

.then((result) =>

[Link](result))

.catch((error) =>

[Link](error));

Output

Timeout!

12. Handling Multiple Failures with [Link]() Method

Works when you need to process all results, even if some promises fail.

[Link]([

[Link]("Task 1 done"),

[Link]("Task 2 failed"),

[Link]("Task 3 done")

])

.then((results) => [Link](results));

Output

{ status: 'fulfilled', value: 'Task 1 done' },

{ status: 'rejected', reason: 'Task 2 failed' },

{ status: 'fulfilled', value: 'Task 3 done' }

13. Combining Promises with Parallel and Sequential Execution

Run some promises in parallel, then process their results sequentially.

[Link]([

new Promise((resolve) =>

setTimeout(() =>

resolve("Task A done"), 1000)),

new Promise((resolve) =>

setTimeout(() =>

resolve("Task B done"), 500))

])

.then(([resultA, resultB]) => {

 [Link](resultA, resultB);

return new Promise((resolve) =>

setTimeout(() => resolve("Final Task done"), 700));

})

.then((finalResult) =>

[Link](finalResult));

Output

Task A done Task B done

Final Task done

14. Wrapping Callbacks into Promises

Convert callback-based async functions into promises.

function loadData(callback) {

setTimeout(() =>

callback("Data loaded"), 1000);

function promisifiedLoadData() {

return new Promise((resolve) => {

loadData((result) =>

resolve(result));

});

promisifiedLoadData().then((data) =>

[Link](data));

Output
Data loaded

Benefits of Promises

• Avoid Callback Hell: Promises organize asynchronous code more neatly

than nested callbacks.

• Error Handling: Errors can be caught in one place using .catch()

Method.

• Chaining: Perform tasks sequentially with .then() Method.

Async and Await in JavaScript

Async and Await in JavaScript is used to simplify handling asynchronous
operations using promises. By enabling asynchronous code to appear
synchronous, they enhance code readability and make it easier to manage
complex asynchronous flows.

async function fetchData() {

const response = await fetch("[Link]

const data = await [Link]();

[Link](data);

fetchData();

Output:

userId: 1,

id: 1,

title: ....',

body: ....}

Syntax:

async function functionName() {

 try {

const result = await someAsyncFunction();

[Link](result);

} catch (error) {

[Link]("Error:", [Link]);

Async Function

The async function allows us to write promise-based code as if it were

synchronous. This ensures that the execution thread is not blocked. Async
functions always return a promise. If a value is returned that is not a promise,
JavaScript automatically wraps it in a resolved promise.

Syntax:

async function myFunction() {

return "Hello";

const getData = async () => {

let data = "Hello World";

return data;

getData().then(data => [Link](data));

Output

Hello World

Await Keyword:The await keyword is used to wait for a promise to resolve. It

can only be used within an async block. Await makes the code wait until the
promise returns a result, allowing for cleaner and more manageable
asynchronous code.
const getData = async () => {

let y = await "Hello World";

[Link](y);

[Link](1);

getData();

[Link](2);

Output

Hello World

• The async keyword transforms a regular JavaScript function into an

asynchronous function, causing it to return a Promise.
• The await keyword is used inside an async function to pause its execution
and wait for a Promise to resolve before continuing.

Error Handling in Async/Await

JavaScript provides predefined arguments for handling promises: resolve and

reject.

resolve: Used when an asynchronous task is completed successfully.

reject: Used when an asynchronous task fails, providing the reason for failure.

async function fetchData() {

try {

let response = await fetch('[Link]

let data = await [Link]();

[Link](data);

} catch (error) {
 [Link]('Error fetching data:', error);

Advantages of Async and Await

Improved Readability: Async and Await allow asynchronous code to be written

in a synchronous style, making it easier to read and understand.

Error Handling: Using try/catch blocks with async/await simplifies error

handling.

Avoids Callback Hell: Async and Await prevent nested callbacks and complex
promise chains, making the code more linear and readable.

Better Debugging: Debugging async/await code is more intuitive since it

behaves similarly to synchronous code.

Task of the day

• Prime number generator

DAY 19:6-03-25
• Discussing about old topics

DAY 20:7-03-25
Prime number generator:
Output:
Destructuring in JavaScript
Destructuring Assignment is a JavaScript expression that allows to unpack of
values from arrays, or properties from objects, into distinct variables data can be
extracted from arrays, objects, and nested objects, and assigned to variables.

Array Destructuring

Array members can be unpacked into different variables. The following are
different examples.

const a = [10, 20, 30, 40]

[Link]("Example 1");

const [x, y, z, w] = a;

[Link](x);

[Link](y);

[Link](z);

[Link](w);

const [p, q, , r] = a;

[Link]("Example 2");

[Link](p);

[Link](q);

[Link](r);

const [s, t] = a;

[Link]("Example 3");

[Link](s);

[Link](t);

Output

Example 1
10

20

30

40

Example 2

10

20

40

Example 3

10

20

Example with Rest Operator : In order to assign some array elements to

variable and rest of the array elements to only a single variable can be achieved
by using rest operator (…) as in below implementation. But one limitation of rest
operator is that it works correctly only with the last elements implying a subarray
cannot be obtained leaving the last element in the array.

let [fst, , ...last] = ["a", "b", "c", "d"];

[Link](fst);

[Link](last);

Output

[ 'c', 'd' ]

Example of Swapping : Values can be swapped using destructuring assignment

as below:

let x = 10, y = 20;

// Swapping
[x, y] = [y, x];

[Link](x);

[Link](y);

Output

20

10

Example of Function Return: Data can also be extracted from an array returned
from a function. One advantage of using a destructuring assignment is that there
is no need to manipulate an entire object in a function but just the fields that are
required can be copied inside the function.

function NamesList() {

return ["a", "b", "c", "d"]

let [fst, snd] = NamesList();

[Link](fst);

[Link](snd);

Output

Example 6: In ES5 to assign variables from objects its implementation is

let marks = { x: 21, y: -34, z: 47 };

const { x, y, z } = marks;

[Link](x);

[Link](y);

[Link](z);
Output

21

-34

47

Object destructuring

Simple Object destructuring : In the below examplex, properties (and their

values) of an object are assigned to variables.

({ x, y} = { x: 10, y: 20 });

[Link](x); // 10

[Link](y); // 20

Output

10

20

({x, y, ...restof} = {x: 10, y: 20, m: 30, n: 40});

[Link](x); // 10

[Link](y); // 20

[Link](restof); // {m: 30, n: 40}

Output

10

20

{ m: 30, n: 40 }

Nesyed Object destructuring : The Nested objects can also be destructured using
destructuring syntax.

const marks = {

section1: { alpha: 15, beta: 16 },

 section2: { alpha: -31, beta: 19 }

};

const { section1: { alpha: alpha1, beta: beta1 } } = marks;

[Link](alpha1, beta1);

Output

15 16

let obj = {

name: "GFG",

add: {

country: "India",

state: {

code: "JS",

pincode: "820800",

article: {

topic: "destructuring"

let { name } = obj;

[Link](name)

let { add: { country: abcd } } = obj

[Link](abcd)

let { add: { state: { code: cd } } } = obj

[Link](cd)

let { add: { state: { article: { topic: ef } } } } = obj

[Link](ef);

Output

GFG

India

JS

Destructuring