Summer Training Report (July-October 2023)

Place of Training: Remote Internship on Full stack Development

Period of Training: 01 July, 2023–30 October, 2023

Submitted to
Department of Computer Science and Engineering
Summer Training In-charge at TINJRIT: Ms. Deepti Gour

By
Anurag Salvi
(Batch 2020-2024)
Branch: Computer Science and Engineering
Roll No.: 20ETCCS008

Techno India NJR Institute of Technology

Plot-T, Bhamashah (RIICO) Industrial Area, Kaladwas,
Udaipur – 313001, Rajasthan
Certificate I

i
 Certificate II

This is to certify that Mr. ANURAG SALVI, Bachelor of Computer Science & Engineering has
successfully completed her Summer Training on Full Stack Web Development with YHills
Edutech Pvt. Ltd. as partial fulfillment of Bachelor of Engineering CSE. The Summer
Training Report, Presentation and Project are genuine work done by his and the same is
being submitted for evaluation.

Signature
Ms. Deepti Gour
Assistant Professor (CSE Department)
Techno India NJR Institute of Technology, Udaipur

ii
 ACKNOWLEDGMENTS

I take this opportunity to express my profound gratitude and deep regards to my guide Ms.
Deepti Gour for his exemplary guidance, monitoring and constant encouragement
throughout the course of the training. The blessing, help and guidance given by him time to
time shall carry me a long way in the journey of life on which I am about to embark .

I specially take the opportunity to thank our Mentor Mr. Nischal Aremanda for their valuable
Information and guidance which helped me in completing this task through various stages. I
also take this opportunity to express a deep sense of gratitude to all my teachers of
Computer Science and Engineering Department for their coordinal support.

I am thankful to the almighty and my parents for their moral support and my friends with
whom I shared my day-to-day experience and received lots of suggestions that improved my
quality of work.

Thanks

Anurag Salvi

7th Sem / 4th Year

20ETCCS008

iii
 CONTENTS
Page No.

Certificate I …………...……………………………….................... i

Certificate II …………...……………………………….................... ii

Acknowledgements .......……….……………………................... iii

List of Tables ……………………………………………………… vi

List of Figures ………………………………………………………. vii

About YEPL …………………………………………………………. viii

Chapter 1: Introduction to Web Development ……………………. 1-1

1.1 What is Web Development ………………………………………………….. 1

1.1 How Internet Works…………………………………………………………… 1

Chapter 2: Understanding HTML and CSS ………………………….. 2-14

2.1 HTML - Basic, Elements, Attributes, Heading .......................................... 2

2.2 HTML - Paragraphs, Styles, Formatting, Comments ............................... 3
2.3 HTML - Colors ………………………...………........................................... 4
2.4 HTML - Form Tags…………...………....................................................... 4
2.5 HTML – Form Attributes………………………………………………………. 5
2.6 What is CSS …………………………………………………………………… 5
2.7 Types of CSS............................................................................................ 6
2.8 CSS – classes and ID…………………………………................................ 7
2.9 Fundamental Concepts in CSS……………………………………………… 8
2.10 Flexbox in CSS ……………………………………………………………….. 10
2.11 CSS Framework (Bootstrap) …………..…………………………………… 13
2.12 CSS – Transitions and Animations ………………………………………… 13

iv
Chapter3: JavaScript Basic to Advanced……………………..............
15-20
3.1 JavaScript - Overview, Syntax, Placement, Variables …………………… 15
3.2 Comments in JavaScript ……………………………………………………. 16
3.3 JavaScript- Operators ………………………………………………………. 16
3.4 JavaScript –Decision Making Statements……….…............................... 16
3.5 JavaScript –Looping Statements….……………………………. 17
3.6 JavaScript –Functions and Functions Methods…………………….. 17
3.7 JavaScript – Events ………………………… 18
3.8 JavaScript – Cookie Page Redirection, Dialog Boxes …..…………….. 19

Chapter 4: JavaScript Frontend Library – React JS....................... 21-28

4.1 React JS Features …………………………………………………………. 21

4.2 React JSX …………………………………………………………………… 22

4.3 React Components …………………………………………………………. 23

4.4 React Props and Props Validation …………………………………………. 23

4.5 State vs Props ……………………………………………………………… 24

4.6 React Component API …………………………………………………….. 25

4.7 Event Handling Methods in React ……………………………………….. 26

4.8 React Forms ……………………………………………………………….. 27

4.9 React JS Conditional Rendering ………………………………………… 28

Chapter 5: Backend with Node JS …………………………………….. 29-33

29
5.1 Started Backend with Node JS ……………………………………………
29
5.2 Node JS Features ………………………………………………………….
30
5.3 MongoDB Database ……………………………………………………….
32
5.4 Creating an API Backend – I………………………………………………
32
5.5 Creating an API Backend – II …………………………………………….

34
Conclusion ……………………………………………………………………….
35
Bibliography ……………………………………………………………………..

v
 List of Tables:

Table No. Title Page No.

Table2.8.1 Difference Between Class and Id…………………. 7

Table3.6.1 JavaScript Function Methods…...…………………. 18

vi
 List of Figures:
Fig No. Title Page No.
Fig2.3.1 HTML Colors………………………………………… 4

Fig2.10.1 Visual References of CSS Flexbox …………………… 12

Fig2.12.1 Transition starting at a point A and ended at point B

with no intermediate point ……………………………… 14
Fig2.12.2 Animation starting at point A ended at B with other
Points in between ………………………………………… 14
Fig3.7.1 HTML5 Standard Events…………………………………. 19

Fig 4.3.1 Class vs Functional Components………………........... 23

Fig 4.5.1 State vs Props …………………………………………….. 25

Fig 5.2.1 REPL in Node JS ……………………..………………...... 30

vii
 INTRODUCTION ABOUT YEPL:

YEPL: Yhills Edutech Private Limited

Head Quartered: East Delhi, India
Establishment: 17 February, 2021

COMPANY PROFILE:
Yhills Edutech Private Limited (YEPL) was incorporated in India on February 17,
2021. It is a registered startup operating as a Private Limited Indian Non-Government
Company. The company's registered office is in East Delhi, Delhi, India.

Yhills is an online platform that provides multi-disciplinary learning solutions. It offers

cost-effective learning and expertise to young aspirants with an incentive of
certificate from sterling companies.

YHills came into being as a comprehensive platform to offer customized cost-

effective training to college students and fresh graduates by professionals in
the industry. We have trained 15,000+ students and the learners truly rave at
the value addition re-affirming the tagline "Learning Beyond Expectation.

viii
 Chapter 1
Introduction to Web Development

1.1 What is Web Development?

Web development, also known as website development, refers to the tasks associated with
creating, building, and maintaining websites and web applications that run online on a
browser. It may, however, also include web design, web programming, and database
management.

Web development is closely related to the job of designing the features and functionality of
apps (web design). The term development is usually reserved for the actual construction of
these things (that is to say, the programming of sites).

The basic tools involved in web development are programming languages called HTML
(Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript. There are,
however, a number of other programs used to “manage” or facilitate the construction of
sites that would otherwise have to be done “from scratch” by writing code. A number of
content management systems (CMS) fall into this category, including WordPress, Joomla!,
Drupal, TYPO3, and Adobe Experience Manager, among others.

1.2 How Internet Works

The internet is a global network of interconnected computers. It operates on a system of
protocols, such as TCP/IP, which enable data to be transmitted in packets. These packets
travel through various devices like routers and switches, navigating the network based on
IP addresses.

When you type a website's address in your browser, a Domain Name System (DNS)
translates it into an IP address. Your request is then broken into packets that traverse the
internet, reaching the destination server. The server processes your request, sends back
the requested data in packets, and your browser reassembles them to display the
webpage.

In essence, the internet is a massive web of communication protocols and data exchange,
allowing seamless global connectivity.

1
 Chapter 2
Understanding HTML and CSS

2.1 HTML- Basic, Elements, Attributes and Headings

In this session, I learnt about the how to use elements with their attributes and headings of
HTML.

1. HTML Basics:
 HTML stands for Hypertext Markup Language.
 It is the standard markup language used to create the structure of web
pages.
 HTML documents are plain text files with a .html extension.
2. HTML Elements:
 HTML documents consist of HTML elements.
 Elements are the building blocks of HTML and are defined by tags.
 Tags are enclosed in angle brackets (<>), and most come in pairs (opening
and closing tags).
3. HTML Attributes:
 HTML elements can have attributes that provide additional information
about the element.
 Attributes are always included in the opening tag and are usually in
name/value pairs.
 Attributes modify or provide additional information about the element.
4. HTML Headings
 HTML provides six levels of headings, from <h1> (the highest level) to <h6>
(the lowest level).
 Headings define the structure and hierarchy of the content
5. Example of a Simple HTML Document:
 A basic HTML document typically includes a head and a body.

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

2
 <title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
 This example includes the document type declaration, the opening and
closing HTML tags, head and body sections, meta tags for character set
and viewport settings, a title in the head, and some content in the body.

2.2 HTML – Paragraphs, Styles, Formatting and Comments

1. Paragraphs (<p>):
 The <p> tag is used to define paragraphs in HTML.
 It represents a block of text with proper spacing.
 <p>This is a paragraph of text.</p>
2. Styles and Formatting
 HTML provides various tags for text formatting and styling.
 Common formatting tags include:
 <strong> or <b> for bold text.
 <em> or <i> for italicized text.
 <u> for underlined text.
 <s> for strikethrough text.
 <mark> for highlighted or marked text.
 <sub> for subscript text.
 <sup> for superscript text.
3. Styles with Attributes:
 Some tags have attributes for additional styling.
 Example: The <span> tag with the style attribute.
 <p>This is <span style="color: blue;">blue text</span>.</p>
4. HTML Comments (<!-- -->):
 Comments in HTML are used to add notes or explanations in the code.
 They are not displayed in the browser.
 <!-- This is a comment -->

3
  Comments are helpful for documenting code or temporarily excluding parts
of code.

2.3 HTML – Colors

This session will cover all types of colors used in HTML. In HTML, colors can be specified
using different methods, and they play a crucial role in styling the appearance of your web
pages. Here's a brief overview by Figure.

Figure 2.3.1 HTML Colors

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA
values, and HSLA values.

2.4 HTML – Form Tags

In this section I learnt how to implement form tag with web pages.

● The <form> tag in HTML is used to create an HTML form, which is a container for
various form elements that allow users to input data.
● Let's break down the attributes commonly used with the <form> tag.
○ action attribute:
■ Specifies the URL where the form data should be sent when the
user submits the form.
■ It can be an absolute or relative URL.
○ method attribute

 Specifies the HTTP method used to send the form data.

4
  Common values are "get" and "post."

 "GET" appends the form data to the URL, while "POST" sends it in
the request body.

● Forms are crucial for user interaction on websites, allowing users to provide input,
submit data, and interact with web applications.

2.5 HTML – Form Attributes

In this module learnt about the various attributes of form tag. HTML forms can have
various attributes that control their behavior and appearance. Let’s have a look at some
common attributes used with the <form> tag in this module:
 ‘action’
 ‘method’
 ‘target’
 ‘enctype’
 ‘autocomplete’
 ‘novalidate’
 ‘name’
 ‘accept-charset’
 ‘onsubmit’

2.6 What is CSS

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended
to transform the presentation of a Web Pages as well as many ostensibly nonweb
environments.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of
the text, the style of fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colors are used, layout designs, variations in display
for different devices and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation
of an HTML document. Most commonly, CSS is combined with the markup languages
HTML or XHTML.

5
CSS is being used extensively in web and non web based applications :
 All modern websites make use of CSS to beautify their web pages.
 Embedded-device displays often use CSS to style their user interfaces.
 RSS clients also let you apply CSS to feeds and feed entries.
 Instant message clients also use CSS to format chat windows.

2.7 Types of CSS

There are three main types of CSS:
1. Inline CSS
This type of CSS is applied directly within the HTML tags using the style attribute.
It's useful for applying styles to a specific element.
<p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>;\

2. Internal or Embedded CSS

This is placed within the <style> tag in the head section of an HTML document. It
applies styles to elements on that specific page.
<head>
<style>
p{
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal CSS.</p>
</body>
3. External CSS
This is stored in a separate CSS file and linked to the HTML document. It promotes
a cleaner separation of content and presentation and allows for consistent styling
across multiple pages.
<!-- In the head section of HTML -->
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

6
 /* styles.css */
p{
color: green;
font-size: 20px;
}
Each type has its own use case, but external CSS is often preferred for larger projects to
maintain a modular and organized structure.

2.8 CSS – Classes and ID

The selectors in CSS are part of the CSS ruleset and used to select the content we want to
style. Id and class both are the CSS element selectors and are used to identify an element
based on its assigned name. CSS id and class selectors are the most used selectors in
CSS.

During the use of selectors, sometimes there is confusion occurs between id and class.
Both of them do not have any default styling information; they require CSS to select them
and apply it to style. Although both are used for selecting the element, they are different
from each other in many ways.

The difference between the id and class is tabulated as follows.

Class Id

We can apply a class to various elements so The Id is unique in a page, and we can only
that it could be numerous times on a single apply it to one specific element.
page.
The class is assigned to an element and its The name of the Id starts with the "#" symbol
name starts with "." followed by the name of the followed by a unique id name.
class.
We can attach multiple class selectors to an We can attach only one ID selector to an
element. element.

Syntax: Syntax:
.class{ #id{
// declarations of CSS // declarations of CSS
} }

Table 2.8.1 Difference Between Class and Id

2.9 Fundamental Concepts in CSS
In this module, will be introduced fundamental Concepts in CSS.Some of fundamental
concepts in CSS are: -

7
1. Color
● You can set the color of text and backgrounds using properties like color
and background-color. You can use color names, hexadecimal codes, RGB
values, etc.
● CSS:
body {
color: #333; /* Text color */
background-color: #f0f0f0; /* Background color */
}

2. Floating:

 The float property is used for positioning elements to the left or right of their
container. It's often used in layouts, but keep in mind that it can affect the
layout of surrounding elements.

 CSS:
.float-left {
float: left;
}

.float-right {
float: right;
}

3. Positions:
 The position property is used to control the positioning method of an
element. Common values are static, relative, absolute, and fixed.
 CSS
.relative-position {
position: relative;
top: 10px;
left: 20px;
}

.absolute-position {
position: absolute;
top: 50px;

8
 right: 30px;
}

4. Margins:
 Margins create space outside of an element. You can set margins for each
side individually or use the shorthand property.
 CSS:
.margins-example {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;
}

5. Padding:
 Padding is similar to margin, but it creates space inside the element. Like
margins, you can set paddings for each side individually.
 CSS;
.padding-example {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;
}

6. Borders:
 Borders can be applied to elements, and you can control their width, style,
and color.
 CSS:
.border-example {
border: 2px solid #333; /* 2px solid border with color #333 */
border-radius: 5px; /* Rounded corners */
}
These are basic examples, and there's much more you can do with each of these
concepts. They form the building blocks for creating diverse and visually appealing layouts
on the web.

9
2.10 Flexbox in CSS

Flexbox, or the Flexible Box Layout, is a layout model in CSS that allows you to design
complex layouts more efficiently and with less code than traditional models. It provides an
easier way to distribute space and align items within a container, even when their size is
unknown or dynamic.

Here are some Key Concepts related to Flexbox:

1. Flex Container:
 To enable Flexbox, you first need to designate a container as a flex
container by setting its display property to flex or inline-flex.
 CSS:
.flex-container {
display: flex;
/* or display: inline-flex; for an inline-level flex container */
}

2. Flex Items:
 The children of a flex container are referred to as flex items. By default, they
will align horizontally in a row. You can change this to a column with the
flex-direction property.
 CSS:
.flex-container {
display: flex;
flex-direction: column; /* or row, row-reverse, column-reverse */
}

3. Justify-Content:
 The justify-content property aligns flex items along the main axis. It helps
distribute space between and around content items.
 CSS:
.flex-container {
display: flex;
justify-content: space-between; /* or center, flex-start, flex-end, space-
around, space-evenly */

10
 }

4. Align Items and Align Self:

 The align-items property aligns flex items along the cross axis. align-self can
be used on individual items to override align-items.
 CSS:
.flex-container {
display: flex;
align-items: center; /* or flex-start, flex-end, stretch, baseline */
}

.flex-item {
align-self: flex-end; /* Overrides align-items for this specific item */
}

5. Flex Wrap:
 By default, flex items will try to fit on one line. The flex-wrap property can be
used to allow items to wrap onto multiple lines if needed.
 CSS:
.flex-container {
display: flex;
flex-wrap: wrap; /* or no-wrap, wrap-reverse */
}

6. Flex Grow, Flex Shrink, Flex Basis:

 These properties control how flex items grow, shrink, and their initial size.
 CSS:
.flex-item {
flex-grow: 1; /* Determines the ability of the item to grow */
flex-shrink: 0; /* Determines the ability of the item to shrink */
flex-basis: 100px; /* Sets the initial size of the item */
}

Flexbox provides a powerful and responsive way to handle layout challenges, making it a
popular choice for building user interfaces.

11
 Figure 2.10.1 Visual Reference of CSS Flexbox

2.11 CSS Framework (Bootstrap)

A CSS framework is a pre-prepared library of CSS styles and often includes pre-built
HTML and JavaScript components. The primary purpose of CSS frameworks is to
streamline and simplify the process of web development by providing a consistent set of
styles and components.

CSS Bootstrap is a widely used open-source front-end framework that simplifies web
development. Let’s know more about this:

12
  Bootstrap is the most popular HTML, CSS and JavaScript framework for developing
a responsive and mobile friendly website.
 It is absolutely free to download and use.
 It is a front-end framework used for easier and faster web development.
 It includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many others.
 It can also use JavaScript plug-ins.
 It facilitates you to create responsive designs.

History of Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released
as an open-source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub.

Advantages of Bootstrap
 It is very easy to use. Anybody having basic knowledge of HTML and CSS can
use Bootstrap.
 It facilitates users to develop a responsive website.
 It is compatible on most of browsers like Chrome, Firefox, Internet Explorer,
Safari and Opera etc.

2.12 CSS – Transitions and Animations

Transition.
 CSS transitions allow you to change property values smoothly, but they always
need to be triggered like hover. Property changes do not take effect immediately.
Over a period of time, the property changes take place. For example, if you
change the color of an element from white to black, the change occurs instantly.
The CSS changes occur at time intervals following an acceleration curve which can
be customized.

13
 Figure 2.12.1 Transition starting at a point A and ended
at point B with no intermediate point.

Animations
 CSS animation allows animation of HTML elements, unlike transition which only
performs a point A to point B operation but can also make many more operations in
between. Animations consist of two steps, the CSS animation defined in
stylesheets and a set of keyframes indicating the start and end states of the
animation.
 Animations transitioning between two states are called implicit transitions as the
states between the start and final states are defined by the browser implicitly.

Figure 2.12.2 Animation starting at point A ended

at B with other Points in between.

14
 Chapter 3
JavaScript Basic to Advanced

3.1 JavaScript - Overview, Syntax, Placement, Variables

In this module, I learnt Overview, Syntax, Placement and Variables of JavaScript.
1. Overview
JavaScript is a high-level, interpreted programming language primarily used
for client-side web development. It enables dynamic content on web pages
and is often utilized in conjunction with HTML and CSS. JavaScript is
supported by all major browsers, making it a key technology for building
interactive and dynamic user interfaces.
2. Syntax
JavaScript syntax is similar to other C-style languages like Java and C++.
Here are a few fundamental syntax elements:
 Statements: JavaScript code is composed of statements, which are
executed line by line.
 Variables: Used to store and manipulate data.
 Functions: Blocks of reusable code that can be called with specific
arguments.
 Objects: Representing real-world entities, consisting of properties
and methods.
Here's a simple example:
<script ...>
JavaScript code
</script>
3. Placement
JavaScript code can be placed in three main locations:
 Inline: Directly within HTML tags using the onclick, onmouseover, or
other event attributes.
 Internal: Placed within <script> tags in the HTML document's
<head> or <body>.
 External: Stored in a separate .js file and linked to the HTML
document.

15
 4. Variables
Variables in JavaScript are containers for storing data values. They can be
declared using var, let, or const.let is used for variables that can be
reassigned, while const is used for constants whose values cannot be
changed after initialization.

3.2 Comments in JavaScript

In JavaScript, comments are used to add explanatory notes within the code. Comments
are ignored by the JavaScript interpreter and are solely for human readability. There are
two main ways to add comments in JavaScript —
1. Single-line comments: Single-line comments start with // and extend until the end of
the line. They are useful for adding short explanations or annotations to a single
line of code.
2. Multi-line comments: Multi-line comments begin with /* and end with */. They can
span commenting out blocks of code.

3.3 JavaScript Operators

In this section learn about JavaScript Operators and learn how to implement in our code.
JavaScript operators are symbols that perform operations on operands, which can be
values or variables. Here's a brief overview of the main types of operators in JavaScript:

There are following types of operators in JavaScript.

 Arithmetic Operators
 Comparison (Relational) Operators
 Bitwise Operators
 Logical Operators
 Assignment Operators

3.4 JavaScript Decision Making Statements

In this module, I learnt about different type of Decision-Making Statements of JavaScript.
JavaScript provides several decision-making statements that allow you to control the flow
of your program based on certain conditions. Here are the main decision-making
statements in JavaScript:

1. if 2. if-else 3. if-else-if
4. switch case 4. Ternary (Conditional Operator)

16
3.5 JavaScript Looping Statements
In this Section I learnt about different types of Looping Statements of JavaScript
Language.
JavaScript provides several looping statements that allow you to repeatedly execute a
block of code as long as a specified condition is true or for a specified number of times.
Here are the main looping statements in JavaScript:

1. for Loop: The for loop is used when you know the number of iterations beforehand.
2. while Loop: The while loop continues to execute a block of code as long as the
specified condition is true.
3. do-while Loop: Similar to the while loop, the do-while loop executes a block of
code at least once, and then repeats as long as the specified condition is true.
4. for...in Loop: The for...in loop is used to iterate over the properties of an object. It
enumerates the properties of an object or the elements of an array.
5. for...of Loop: The for...of loop is introduced in ES6 and is used to iterate over
iterable objects such as arrays, strings, and collections.
6. forEach Method: For arrays, the forEach method is a concise way to iterate over
each element without the need for a traditional loop.

These looping statements provide flexibility for handling different scenarios when we need
to repeat a certain block of code. So, we canchoose the appropriate loop based on your
specific use case.

3.6 JavaScript – Functions& Function Methods

In this Section I learn about implementation of functions and types of Function in
JavaScript.
Functions in JavaScript are reusable blocks of code that perform a specific task or
calculate a value. They play a crucial role in organizing and structuring code. Here's a brief
overview of JavaScript functions:

 JavaScript Function Example

Let’s see the simple example of function in JavaScript that does not has
arguments.
<script>
function msg(){
alert("hello! this is message");

17
 }
</script>
<input type="button" onclick="msg()" value="call function"/>
 JavaScript Function Argument
We can call function by passing arguments. Let’s see the example of function that
has one argument.
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
 Function with Return Value
We can call function that returns a value and use it in our program. Let’s see the
example of function that returns value.
<script>
function getInfo(){
return "hello javatpoint! How r u?";
}
</script>
<script>
document.write(getInfo());
</script>
 JavaScript Function Methods
Let's see function methods with description.

Method Description
apply() It is used to call a function contains this value and a single array of
arguments.
bind() It is used to create a new function.

call() It is used to call a function contains this value and an argument list.
toString() It returns the result in a form of a string.

Table 3.6.1 JavaScript Functions Methods

18
3.7 JavaScript – Events
 The session will cover the use and implementation of major events.
 In JavaScript, events are actions or occurrences that happen in the browser,
such as a user clicking a button, a page finishing loading, or a user pressing
a key. Handling events is a fundamental part of web development, and
JavaScript provides a way to respond to these events by using event
handlers.
 Some of the HTML5 standard events are shown in the given figure: -
 Mouse Events
 Keyboard Events
 Form Events
 Window Events
 Event Object
 Event Handling

Figure 3.7.1 HTML5 Standard Events

19
3.8 JavaScript – Cookies, Page Redirection and Dialog Boxes
In this module, I learnt about the Cookies, Page Redirection and Dialog Boxes.

Let’s have a look at what all I have studied in this module:

● What are Cookies?
● How Cookies Work?
● Storing Cookies
● Reading Cookies
● Setting Cookies Expiry Date
● Deleting a Cookie
● What is Page Redirection?
● JavaScript - Dialog Boxes
● Alert Dialog Box
● Confirmation Dialog Box
● Prompt Dialog Box

20
 Chapter 4
JavaScript Library – React JS

4.1 React JS Features

In this Section I learnt about various features of React JS. React JS is a popular JavaScript
library for building user interfaces, and it comes with some awesome features:
 Declarative
With React, you describe how your UI should look at any given point in time, and
React takes care of updating and rendering the components when the data
changes.
 Component-Based
React follows a component-based architecture, where UIs are broken down into
small, reusable components. This makes it easy to manage and maintain complex
UIs.
 Virtual DOM
React uses a virtual DOM to improve performance. Instead of updating the entire
DOM when changesoccur,React updates a virtual representation first and then
efficiently updates only the necessary parts of the actual DOM.
 JSX
React uses JSX (JavaScript XML), a syntax extension that allows you to write
HTML elements in your JavaScript code. It provides a more readable and concise
way to define UI components.
 Unidirectional Data Flow
React follows a unidirectional data flow, which means that data changes in the
application follow a single direction, making it easier to understand and debug.
 Reusable Components
React promotes the creation of reusable components, making it easier to maintain
and update your UI. Components can be composed together to build complex
interfaces.
 Lifecycle Methods
React components have lifecycle methods that allow you to perform actions at
different stages of a component's life, such as when it is created, updated, or
destroyed.

21
  One-Way Data Binding
React implements one-way data binding, meaning that the data flow is
unidirectional. This makes it easier to understand how data changes over time and
reduces unexpected side effects.

These features contribute to making React a powerful and efficient library for building
modern, interactive user interfaces.

4.2 React JSX

In this Session, I Learnt about How to use JSX while creating code in React JS. JSX, or
JavaScript XML, is a syntax extension for JavaScript that looks similar to XML or HTML.
It's commonly used with React to describe what the UI should look like. Here are some key
points about JSX:
1. Embedding Expressions:
You can embed JavaScript expressions within curly braces in JSX. This allows you
to dynamically include values or variables within the markup. Ex-
const name = "World";
const element = <h1>Hello, {name}!</h1>;
2. HTML-Like Syntax
JSX looks similar to HTML, making it more readable and familiar for developers
who are used to working with HTML. Ex-
const element = <div className="container">Hello, JSX!</div>;
3. React Elements
JSX gets transpiled into React elements. The example below:
const element = React.createElement('h1', null, 'Hello, World!');
gets transformed into:
const element = React.createElement('h1', null, 'Hello, World!');
4. Attributes
JSX allows you to use attributes similar to HTML, and you can use curly braces to
embed dynamic values
5. Babel Transpilation
JSX code needs to be transpiled to JavaScript using tools like Babel before it can
be understood by browsers. Babel transforms JSX into standard JavaScript that
React can work with.

22
4.3 React Components
In this module I Understand the Heart of React JS whose called React Components.
React components are the building blocks of a React application. They can be either
functional or class-based, take in inputs called props, and may have internal state.
Components can be nested to create complex UIs. Functional components are simpler,
while class components have additional features like state and lifecycle methods. With the
introduction of Hooks, functional components can now handle state and lifecycle aspects.
Components are reusable, promoting a modular and maintainable code structure.

Figure 4.3.1 Class Vs Functional Components

4.4 React Props & Props Validation

In this module, will be introduced to the React Props and Props Validation.
1. React Props
● Definition: "Props" is short for properties, and they are used to pass data
from a parent component to a child component in React.
● Passing Props:
// Parent Component
<ChildComponent name="John" />
// Child Component

23
 function ChildComponent(props) {
return <p>Hello, {props.name}!</p>;
}
● Accessing Props: Props are accessed in functional components through the
props parameter, and in class components through this.props.

2. Props Validation

 Definition:PropTypes is a mechanism for specifying the expected types of

props passed to a component. It helps catch bugs related to incorrect data
types.

 Example:
import PropTypes from 'prop-types';
function MyComponent(props) {
// Component logic
return <div>{props.message}</div>;
}
MyComponent.propTypes = {
message: PropTypes.string.isRequired,
};

 PropTypes:Common types include string, number, bool, array, object, func,

node, element, etc.

 isRequired:Specifies that the prop is required. It will throw a warning if the

prop is not provided.

24
4.5 React State vs Props
In this Session I learnt about the major difference between React State Vs React Props.

Figure 4.5.1 Props vs State

4.6 React Component API

In this module I've gained proficiency in the React Component API, mastering the render()
method for defining UI, managing internal state with state, leveraging lifecycle methods for
dynamic actions, utilizing props for external data, and effectively using setState() and
forceUpdate() for state updates and re-renders
The React component API provides a set of methods and properties that you can use to
interact with and control React components. Here's a brief overview of some key parts of
the React component API
1. render() Method:
The render method is where you define what the component should render. It
returns a React element.
2. State:
The state is an object that represents the internal state of a component. It can be
accessed and modified using the setState method.

25
 3. Lifecycle Methods:
Lifecycle methods allow you to perform actions at different stages in a component's
life, such as when it is created, updated, or unmounted. Ex –‘componentDidMount’,
‘componentDidUpdate’, ‘componentWillUnmount’.
4. Props:
props (short for properties) represent the external inputs to a component, passed
down from a parent component.
5. setState() Method:
The setState method is used to update the state of a component. It is
asynchronous and schedules a re-render of the component.
6. forceUpdate() Method:
The forceUpdate method forces a re-render of the component, bypassing the usual
shouldComponentUpdate mechanism.

These are just a few key aspects of the React component API. The API provides
developers with the tools needed to create, manage, and interact with components
throughout their lifecycle.

4.7 Event Handling Methods in React

In this Module I Learnt about Event Handling in React which is quite similar to event in
HTML.
 An event is an action that could be triggered as a result of the user action for
system generated event for example a mouse clicks, loading of a web
page,pressing a key, window resizes, and other interactions are called events.
 React has its own event handling systems which is very similar handling events on
DOM elements. The react event handling system is known as synthetic events. The
synthetic event is a cross-browser wrapper of the browser's native event.
 Handling events with react have some syntactic differences from handling event on
DOM.
 React events are named as camelCase instead of lowercase.
 With JSX, a function is passed as the event handler instead of a string. For
Example:
Event declaration in plain HTML
<button onclick = “showMessage()”>
Hello World
</button>

26
 Event declaration in React
<button onclick = {showMessage}>
Hello World
</button>

Remember, handling events in React is quite similar to handling events in regular HTML,
with a few React-specific nuances for synthetic events and component-based architecture.

4.8 React Forms

In this module I learnt about how to implement React Forms in our React JS Code.
React offers a stateful, reactive approach to build a form. The component rather than the
DOM usually handles the React form. In React, the form is usually implemented by using
controlled components.
There are mainly two types of form input in React.
1. Uncontrolled Component
2. Controlled component

Uncontrolled Component: - The uncontrolled input is similar to the traditional HTML

form inputs. The DOM itself handles the form data. Here, the HTML elements maintain
their own state that will be updated when the input value changes. To write an
uncontrolled component, you need to use a ref to get form values from the DOM. In
other words, there is no need to write an event handler for every state update. You can
use a ref to access the input field value of the form from the DOM.

Controlled Component: - In HTML, form elements typically maintain their own state
and update it according to the user input. In the controlled component, the input form
element is handled by the component rather than the DOM. Here, the mutable state is
kept in the state property and will be updated only with setState() method.

Controlled components have functions that govern the data passing into them on
every onChange event, rather than grabbing the data only once, e.g., when you click a
submit button. This data is then saved to state and updated with setState() method.
This makes component have better control over the form elements and data.

A controlled component takes its current value through props and notifies the changes
through callbacks like an onChange event. A parent component "controls" this
changes by handling the callback and managing its own state and then passing the

27
 new values as props to the controlled component. It is also called as a "dumb
component."

4.9 React JS Conditional Rendering

In this module I learnt how to use implement Conditional Rendering in several ways in
react.
In React, we can create multiple components which encapsulate behavior that we need.
After that, we can render them depending on some conditions or the state of our
application. In other words, based on one or several conditions, a component decides
which elements it will return. In React, conditional rendering works the same way as the
conditions work in JavaScript. We use JavaScript operators to create elements
representing the current state, and then React Component update the UI to match them.

From the given scenario, we can understand how conditional rendering works. Consider an
example of handling a login/logout button. The login and logout buttons will be separate
components. If a user logged in, render the logout component to display the logout button.
If a user not logged in, render the login component to display the login button. In React,
this situation is called as conditional rendering.

Let’s have a look at what are different ways of Conditional Rendering I have studied in this
module.
o if
o ternary operator
o logical && operator
o switch case operator
o Conditional Rendering with Enums

28
 Chapter 5
Backend with Node JS

5.1 Started Backend with Node JS

Node.js is an open-source, cross-platform, JavaScript runtime environment that executes
JavaScript code outside a web browser. It is used to develop server-side and networking
applications. Node.js is built on Chrome’s JavaScript runtime and can be used to build
large-scale and complex applications with ease. It is an event-driven, non-blocking I/O
model that makes it lightweight and efficient. Node.js is also used for real-time web
applications because of its asynchronous nature.

JavaScript is without a doubt the undisputed leader in programming languages.

Surprisingly, while it is used on the client side, its true power can also be applied on the
back end thanks to Node.js.

Node.js is often used for backend development because it is efficient and easy to use.
When building the backend of an application, you’ll use Node.js to create the server,
routes, and APIs. You can also use it to create webhooks and handle HTTP requests.

Node.js can also create a highly scalable application with its asynchronous, non-blocking
I/O model. This means that multiple client requests can be handled simultaneously, making
it an ideal choice for applications that handle a lot of data or require frequent interactions
with a database and web servers. Incoming requests may involve concurrent requests that
are handled simultaneously.

Node.js also has a huge selection of libraries and frameworks that can be used to make
application development easier. For example, Express.js is a popular framework for
creating web applications, while Socket.io is often used to create real-time applications.

5.2 Node JS and its features

I this Section I learnt about Node JS and its Features. Node.js is a JavaScript runtime built
on the V8 JavaScript engine. It allows developers to execute JavaScript code on the server
side, enabling the development of scalable and high-performance web applications.
Node.js is event-driven and non-blocking, making it efficient for handling concurrent
requests.

29
Some Features of Node JS are –
 REPL (Read-Eval-Print Loop)
REPL is a command-line interface that comes with Node.js. It provides an
interactive environment for developers to execute JavaScript code line by line. It
reads user input, evaluates the code, prints the result, and then awaits further input.
This iterative process is valuable for testing snippets of code, exploring language
features, and debugging

Figure 5.2.1 REPL in Node JS

 Native Modules:
Native modules in Node.js are modules written in C or C++ that can be seamlessly
integrated into Node.js applications. These modules provide low-level system
access and are often used for tasks requiring performance optimization or
interactions with hardware. Examples include modules for cryptography, file I/O,
and interfacing with external libraries.
 Modules in Node.js
Node.js uses a module system to organize and structure code. A module
encapsulates specific functionality, promoting code modularity and reusability. The
'require' keyword is used to import modules, and the 'module.exports' object allows
developers to expose functionalities from one module to another. This modular
approach simplifies code maintenance and encourages the creation of reusable
components, contributing to a more maintainable and scalable codebase.

30
5.3 Mongo DB Database
In this Section I learnt about the databases and specially focus on MongoDB Database. A
database is a structured collection of data that is organized for efficient storage, retrieval,
and management. MongoDB is a NoSQL database, storing data in flexible, JSON-like
documents within collections.

More About MongoDB –

1. Installing MongoDB:
 Download and install MongoDB from the official website.
 Set up necessary configurations like data directory and log paths.
 Start the MongoDB server.

2. CRUD Operations:
 Create (Insert): db.collection.insertOne() and db.collection.insertMany() to add
documents.
 Read (Query): db.collection.find() to retrieve documents based on specified
criteria.
 Update: db.collection.updateOne() and db.collection.updateMany() to modify
existing documents.
 Delete: db.collection.deleteOne() and db.collection.deleteMany() to remove
documents.

3. Relationship in MongoDB:
 Embedded Documents: Embed one document inside another to represent
relationships.
 References: Use references between documents to establish connections.

4. Mongoose (ODM Library for MongoDB):

 Mongoose is an Object-Document Mapping (ODM) library for MongoDB and
Node.js.
 It provides a schema-based solution, enforcing data validation and abstraction
over MongoDB interactions.

5. Data Validation:
 Mongoose schemas define the structure of documents, enforcing data
validation rules.

31
  Validators ensure that data adheres to predefined standards.

6. Delete and Update:

 ‘updateOne()’ and ‘updateMany()’ modify documents based on specified
criteria.
 ‘deleteOne()’ and ‘deleteMany()’ remove documents based on given conditions.

7. Connecting Documents:
 Relationships are established using references or embedded documents.
 ‘$lookup’ in aggregation allows joining data from multiple collections.

Understanding these MongoDB concepts is crucial for effective data management,

ensuring data integrity, and building scalable and efficient applications.

5.4 Creating an API backend - I

In this Module I learnt about APIs for backend. Implemented the functionality using the
REST architecture guidelines. All the functionalities are implemented on the server side
and accessed from the client side using an interface represented by a path or URL which
is essentially called an API endpoint. The things I covered in this module are :-

 Introduction to Web Services

 Request & Response in Web Service
 SOAP and REST Architecture
 HTTP Protocol
 HTTP Request-Response
 Request-Response in JSON
 Web API

5.5 Creating an API backend – II

In this section I also Learned about further concepts use for build and APIs in backend
part.
Implemented certain best industry practices in developing the endpoint such as exception
handling, password encryption, authentication and authorization. I also go through the
following Concepts:
 Password Encryption
 Authentication

32
 Authentication (JWT Token)
 Authentication (Base64 Encoding)
 Authentication Controller
 Authorization (Exception Handling)
 Graded Questions

33
 Conclusion

In conclusion, my internship at YHills as a Full Stack Web Developer has been a

transformative journey filled with invaluable experiences and opportunities for growth. Over
the course of this internship, I've had the chance to immerse myself in a dynamic and
collaborative work environment that allowed me to apply and enhance my skills in both
front-end and back-end development.

Working with a talented team at YHills has not only broadened my technical proficiency but
also provided me with insights into the intricacies of real-world web development projects.
I've had the privilege of contributing to various aspects of the development life cycle, from
conceptualizing and designing user interfaces to implementing robust server-side
functionalities.

One of the key takeaways from this internship has been the emphasis on continuous
learning. The ever-evolving nature of web technologies requires a proactive approach to
staying updated, and YHills has fostered a culture that encourages and supports ongoing
skill development. I've had the opportunity to explore emerging technologies, experiment
with different frameworks, and gain a deeper understanding of industry best practices.

Moreover, the mentorship and guidance I received from seasoned professionals at YHills
have been instrumental in shaping my approach to problem-solving and refining my coding
practices. The collaborative nature of the team has not only facilitated knowledge
exchange but has also created a supportive environment where everyone's contributions
are valued.

I am grateful for the experiences gained, the relationships built, and the knowledge
acquired during my time at YHills. This internship has been a stepping stone in my
professional development, and I look forward to applying and expanding upon the skills I've
cultivated here in my future endeavors.

34
 Bibliography

➢ https://brainstation.io/career-guides/what-is-web-development
➢ https://developer.mozilla.org/en-
US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_wor
k
➢ https://www.tutorialspoint.com/css/what_is_css.htm
➢ https://www.javatpoint.com/css-class-vs-id
➢ https://www.reddit.com/r/webdev/comments/usln38/a_visual_reference_of_css_flex
box/?rdt=34358
➢ https://www.javatpoint.com/what-is-bootstrap
➢ https://www.geeksforgeeks.org/difference-between-animation-and-transition-in-css/
➢ https://www.javatpoint.com/javascript-operators

35