GUJARAT TECHNOLOGICAL UNIVERSITY

Chandkheda, Ahmedabad

Affiliated

SAL EDUCATION CAMPUS

SAL Engineering and Technical Institute

“online-voting system”
A Report
Submitted By

Patel Jay Dharmendrabhai

211260107100

Under Subject of

SUMMER INTERNSHIP (3170001)

Of
BACHELOR OF ENGINEERING
In
Computer Engineering

Under the guidance of

prof. Harshit Vora.

Academic Year
2024-25
ATTACH THE CERTIFICATE DOWNLOADED FROM PMMS
ATTACH THE CERTIFICATE HERE FROM THE COMPANY/AGENCY (for the
OFFLINE INTERNSHIP only)
 SAL ENGINEERING AND TECHNICAL INSTITUTE
COMPUTER ENGINEERING
2024

CERTIFICATE

Date:

This is to certify that the “e commerce website” has been carried out by Patel Jay D.
(211260107100) under my guidance in completion of Summer Internship in Computer
Engineering Branch 7th Semester of Gujarat Technological University, Ahmedabad
during the academic Year 2024-25.

prof. Harshit Vora. Madhuri Parekh

Internal Guide Head of Department

Computer Engineering/ICT/CSE/IT CE, Department
SETI
 Summer Internship (3170001) 211260107100
dv

Table of Contents
Chapter 1: HTML....................................................................................... (3-9)
Introduction to HTML ....................................................................................................(3-5)

Core Elements of HTML...............................................................................................(6-9)

Chapter 2: CSS........................................................................................... (10-14)

Introduction to CSS..........................................................................................................(10-11)

Box Model ...........................................................................................................................(12-14)

Chapter 3: Bootstrap................................................................................... (15-21)

Introduction to Bootstrap...............................................................................................(15-17)

Bootstrap Grid System....................................................................................................(17-21)

Chapter 4: JavaScript..................................................................................(22-34)
Introduction to JavaScript .............................................................................................(22-26)

JavaScript in React .............................................................................................................(27-34)

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

 Summer Internship (3170001) 211260107100
dv

ABSTRACT

A Myntra clone project is a project to create a replica of the Myntra website, an Indian
fashion and lifestyle e-commerce company. Myntra was founded in 2007 to sell
personalized gifts, and in 2014, Flipkart acquired Myntra.com. The goal of a Myntra
clone project is to replicate the website's look and features using HTML, CSS and JS.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

1
 Summer Internship (3170001) 211260107100
dv

INTRODUCTION

Websenor offers a Myntra clone script, which is a ready-to-use online

shopping and delivery programme for ecommerce startups and small
enterprises. People nowadays prefer to order things online and have it
delivered to their home in a reasonable amount of time. Looking to create a
Myntra-style app for your online shopping and delivery service? You’ve
come to the correct location! We have a specialised team of professionals who
can assist you in establishing a customer-centric e-commerce platform for
your company, similar to the Myntra clone app. Launch an online shopping
and delivery app for your company, such as a Myntra clone, and enjoy the
smooth service.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

2
 Summer Internship (3170001) 211260107100
dv

CHAPTER 1: HTML

Introduction to HTML

1.Definition and Importance of HTML

HTML (HyperText Markup Language) is the standard language used
to create and structure content on the web. It forms the backbone of
web pages, allowing developers to organize text, images, links, and
other media into a coherent format that browsers can render.

 Definition: HTML uses a system of tags and elements to define the

structure and content of a web page. Each element is represented by
tags, which are enclosed in angle brackets, like <tag>. These tags
provide instructions to the web browser on how to display thecontent.

 Importance:
o HTML is the foundation of web development, serving as the
starting point for creating web pages.
o It provides the structure that is styled with CSS and made
interactive with JavaScript.
o It ensures that web content is accessible and understandable by
search engines and screen readers.

1. Core Elements
o Headings (<h1>, <h2>, etc.).
o Paragraphs (<p>).
o Lists (<ul>, <ol>, <li>).
o Links (<a>).
o Images (<img>).
o Forms and Inputs (<form>, <input>, etc.).
2. Semantic HTML
o Importance of semantic elements.
o Examples: <header>, <footer>, <article>, <section>.
3. HTML in React
o JSX in React: How HTML integrates with React components.
GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

3
 Summer Internship (3170001) 211260107100
dv

o Dynamic rendering of HTML using React.

2. Basic Structure of an HTML Document

An HTML document typically follows a specific structure, which includes
several key elements. Here’s a breakdown:

 <!DOCTYPE html>: This declaration defines the document as an

HTML5 document.

 <html>: The root element that contains all the content of the page.

 <head>: Contains meta-information about the document, such as the

character encoding, viewport settings for responsive design, and the
document's title.

 <title>: Sets the title of the document, which appears in the browser
tab.
 <body>: Contains all the content that is visible on the page, such as
text, images, and links.
GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

4
 Summer Internship (3170001) 211260107100
dv

 <header>, <main>, <footer>: Semantic tags that help structure the

document. The <header> typically contains introductory content,
<main> contains the main content, and <footer> includes closing or
copyright information.

3. Role of HTML in React.js

In React, HTML plays a crucial role in defining the structure and
content of components. However, React uses a syntax extension
called JSX (JavaScript XML) that allows developers to write HTML-
like code within JavaScript files.

 JSX Syntax: JSX enables writing HTML within JavaScript, making

it easier to visualize the structure of the UI directly in the code. For
example:

 Dynamic Rendering: React allows you to use HTML tags within

JSX to create dynamic content. You can insert variables, handle
events, and manage states all within the JSX structure, making it
more powerful than traditional HTML.

 Component-Based Structure: Instead of writing an entire HTML

page, React encourages building reusable components. Each
component can represent a part of the UI, like a button or form, which
can be combined to create complex applications.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

5
 Summer Internship (3170001) 211260107100
dv

Core Elements of HTML

1. Headings (<h1>, <h2>, etc.)

Headings in HTML are used to define the titles and subtitles of a

webpage. They range from <h1> to <h6>, with <h1> being the
highest or most important level of heading, and <h6> being the
lowest.

 Usage:

o <h1>: Represents the main heading or title of the page. There

should typically be only one <h1> on a page.

o <h2>: Represents a subheading under <h1>.

o<h3> to <h6>: These are further subheadings, used to create a

hierarchy of content.
 Example:

2. Paragraphs (<p>)

The <p> tag is used to define a paragraph of text. It is a block-level

element, meaning it takes up the full width available on the page.

 Usage:

o Wraps a block of text to create a paragraph.

o Automatically adds space above and below the text to separate

it from other elements.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

6
 Summer Internship (3170001) 211260107100
dv

4. Links (<a>)

The <a> tag, also known as an anchor tag, is used to create hyperlinks
that allow users to navigate from one page or section to another.

 Attributes:

o href: Specifies the URL or destination of the link.
o target="_blank": Opens the link in a new tab or window.

 Example:

5. Images (<img>)

The <img> tag is used to embed images in a webpage. It is an empty

tag, meaning it does not have a closing tag, and it requires attributes
to function properly.

 Attributes:

o src: Specifies the path or URL of the image file.

o alt: Provides alternative text for the image, used for
accessibility and in cases where the image cannot be displayed.
o width and height: Optional attributes to control the size of the
image.

 Example:

6. Forms and Inputs (<form>, <input>, etc.)

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

8
 Summer Internship (3170001) 211260107100
dv

Forms are used to collect user input on a webpage. The <form> tag
is the container for all form elements, while the <input> tag
represents various types of data entry fields.

 Form Elements:

o <form>: Defines the form and can include attributes like action
(where the form data should be sent) and method (how the data
is sent, typically GET or POST).

o <input>: Used to create input fields, such as text boxes, radio

buttons, checkboxes, and submit buttons.

o <label>: Associates a text label with an input element for better

accessibility.

 Common Input Types:

o text: For single-line text input.

o password: For password entry.

o radio: For selecting one option from a set.

o checkbox: For selecting multiple options.

osubmit: For submitting the form data.

 Example:

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

9
 Summer Internship (3170001) 211260107100
dv

CHAPTER 2: CSS

Introduction to CSS

1. What is CSS and Its Role in Web Development

CSS (Cascading Style Sheets) is a stylesheet language used to control

the presentation and layout of web pages. It works alongside HTML,
which provides the structure, by adding styles such as colors, fonts,
spacing, and positioning to HTML elements. CSS is essential for
creating visually appealing and user-friendly websites.

 Definition: CSS allows developers to apply styles to HTML

elements and control the layout of multiple web pages all at once. It
provides a way to separate content (HTML) from design (CSS),
making it easier to maintain and update the look of a website.

 Role in Web Development:

o Visual Design: CSS is responsible for the appearance of a

website, including colors, fonts, margins, padding, borders, and
more.

o Layout Control: CSS enables developers to create responsive

layouts that adapt to different screen sizes and devices, such as
mobile phones, tablets, and desktops.

o Consistency: With CSS, you can ensure a consistent look and

feel across all pages of a website by applying styles globally.

o Accessibility: CSS can enhance the accessibility of a website

by allowing for better control over text size, contrast, and visual
focus, ensuring that content is usable by people withdisabilities.

o Separation of Concerns: By separating content (HTML) from

design (CSS), it simplifies code management and allows teams
to work more efficiently.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

10
 Summer Internship (3170001) 211260107100
dv

2. Differences Between Inline, Internal, and External CSS

There are three main ways to apply CSS to an HTML document:

inline, internal, and external. Each method has its own use cases and
implications.

1. Inline CSS

o Definition: Inline CSS is applied directly to HTML elements

using the style attribute within the element's tag.

o Usage: Inline CSS is typically used for small, specific style

changes that affect only a single element or when you need to
override other styles temporarily.

o Example:

Advantages:

o Quick and easy to apply for single elements.

o Overrides other CSS rules (inline styles have high specificity).
Disadvantages:

o Difficult to maintain and update, especially with larger

projects.
o Reduces the separation of content and presentation, making the
HTML code less readable.
Box Model

1. Explanation of Margin, Border, Padding, and Content

 Content:

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

11
 Summer Internship (3170001) 211260107100
dv

o Definition: The content area is where the actual text, images, or other
media are displayed. It represents the inner part of the box where the
content resides.

o Size: The size of the content area can be controlled using properties like
width and height.

o Example:

 Padding:

 Definition: Padding is the space between the content and the border. It
creates a buffer around the content, pushing the border away from the
content.

 Impact: Padding increases the size of the element without affecting the
content's dimensions, as it adds space inside the element.

 Example:

 Border:
o Definition: The border is the outer edge of the padding. It wraps
around the content and padding, and can be styled using properties
such as border-width, border-style, and border-color.

o Impact: The border adds additional width and height to the element
and visually separates it from surrounding elements.

o Example:

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

12
 Summer Internship (3170001) 211260107100
dv

 Margin:

o Definition: Margin is the space outside the border. It defines the

space between the element and other elements on the page.

o Impact: Margin creates distance between elements, and unlike

padding, it does not affect the element's size. Margins can collapse
(i.e., combine) when vertical margins of adjacent elements meet.

o Example:

2. Practical Example Using a Layout

Consider the following HTML and CSS example that demonstrates the
box model in action:

Explanation of the Example:

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

13
 Summer Internship (3170001) 211260107100
dv

1. Content Area: The text "This is a box model example." resides

within the content area of the box, which is 200px wide and 100px
tall.

2. Padding: The padding is set to 20px, which adds space between the
content and the border. This padding pushes the content away from
the border, making the box's total width and height 240px by 140px
(200px + 20px padding on each side for width and 100px + 20px
padding on each side for height).

3. Border: The border is 5px thick and blue in color. It surrounds the
padding and content, adding an additional 10px to both the width and
height (240px + 5px border on each side for width and 140px + 5px
border on each side for height).

4. Margin: The margin is set to 30px, creating space around the box
and separating it from other elements or the edge of the browser
window.

Total Dimensions Calculation:

 Width: Content width (200px) + Padding (20px on both sides =

40px) + Border (5px on both sides = 10px) = 250px.

 Height: Content height (100px) + Padding (20px on both sides =

40px) + Border (5px on both sides = 10px) = 150px.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

14
 Summer Internship (3170001) 211260107100
dv

CHAPTER 3: BOOTSTRAP

Introduction to Bootstrap
1. What is Bootstrap and Its Significance

Bootstrap is a popular open-source front-end framework that helps

developers quickly design and build responsive and mobile-first
websites. It includes a collection of CSS and JavaScript components,
such as grids, buttons, forms, navigation bars, and more, which are
pre-styled and can be customized to fit the needs of any project.

 Significance:

o Responsive Design: Bootstrap's grid system and responsive utilities

make it easy to create layouts that adapt to different screen sizes,
ensuring a consistent user experience across desktops, tablets, and
mobile devices.

o Pre-built Components: Bootstrap offers a wide range of pre-styled

components, such as buttons, modals, carousels, and more. These
components save time and effort, as developers don't need to start
from scratch.

o Cross-browser Compatibility: Bootstrap ensures that your website

will look consistent across different browsers (e.g., Chrome, Firefox,
Safari, Edge) by providing styles that address common compatibility
issues.

o Customizability: Although Bootstrap provides default styles, it is

highly customizable. Developers can override the default styles with
their own CSS or use Bootstrap's built-in customization options to
tailor the design to their needs.

o Community Support: As one of the most widely used front-end

frameworks, Bootstrap has a large community of developers and
contributors. This means that there are plenty of resources, tutorials,
and plugins available to help you get the most out of the framework.
GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

15
 Summer Internship (3170001) 211260107100
dv

2.Integrating Bootstrap into a Project

There are several ways to integrate Bootstrap into your project,

depending on your development environment and preferences.

1. Using Bootstrap via CDN (Content Delivery Network)

o The simplest way to include Bootstrap in your project is by

linking to the Bootstrap CSS and JavaScript files hosted on a
CDN. This method requires no installation and is quick to set
up.

o Steps:
1. Include Bootstrap CSS: Add the following <link> tag
inside the <head> section of your HTML file to include
Bootstrap's CSS:

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/
css/bootstrap.min.css" rel="stylesheet">

2. Include Bootstrap JS and jQuery: Bootstrap's JavaScript

components require jQuery and Popper.js for full functionality. Add
the following <script> tags just before the closing </body> tag:

<script src="https://code.jquery.com/jquery-
3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/poppe
r.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap
.min.js"></script>

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

16
 Summer Internship (3170001) 211260107100
dv

Advantages of Using CDN:

 Quick Setup: No need to download or install anything. Just copy and

paste the links.

 Performance: CDN-hosted files are often cached in users' browsers,

which can lead to faster load times.

 Automatic Updates: By linking to the latest version, you automatically

get updates when Bootstrap is improved or patched.

Disadvantages:

 Internet Dependency: Requires an internet connection to load the

Bootstrap files. If the CDN is down or slow, your site may be affected.

 Customization Limitations: While you can override Bootstrap styles

with your own CSS, you cannot easily customize the core Bootstrap
code when using a CDN.

Bootstrap Grid System

Explanation of the Grid System and Breakpoints

The Bootstrap grid system is a powerful and flexible layout system that
allows you to create responsive, mobile-first designs easily. It is based
on a 12-column grid, meaning you can divide the layout into 12 equal
parts. The grid system uses a combination of rows and columns to
structure the content on a webpage.

1. Grid System Basics:

o Containers: The grid system is wrapped inside a .container or

.container-fluid class, which provides padding and centers the
content.

o .container: A fixed-width container with responsive behavior.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

17
 Summer Internship (3170001) 211260107100
dv

o .container-fluid: A full-width container that spans the entire width of

the viewport.

o Rows: Rows (<div class="row">) are horizontal groups of columns.

They ensure that the columns within them align properly and have the
correct spacing.

o Columns: Columns (<div class="col">) are the building blocks of the

grid system. They are placed inside rows and can be customized to span
any number of the 12 available columns.

2. Breakpoints: Bootstrap's grid system is responsive and adjusts the

layout based on the viewport's size. This is achieved through predefined
breakpoints, which are specific screen widths where the layout changes.
Breakpoints allow you to create layouts that work well on different
devices, from small mobile screens to large desktops.

o Breakpoints in Bootstrap:

 xs (Extra small): <576px (Mobile devices)

 sm (Small): ≥576px (Tablets)
 md (Medium): ≥768px (Small laptops)
 lg (Large): ≥992px (Desktops)
 xl (Extra large): ≥1200px (Large desktops)
 xxl (Extra extra large): ≥1400px (Very large desktops)

o Column Classes: To create responsive layouts, you can use specific

column classes that correspond to these breakpoints. For example:

 col-sm-6: This column will take up 6 out of 12 columns (half the

row) on small screens and above.
 col-md-4: This column will take up 4 out of 12 columns (one-third
of the row) on medium screens and above.
 col-lg-3: This column will take up 3 out of 12 columns (one-fourth
of the row) on large screens and above.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

18
 Summer Internship (3170001) 211260107100
dv

3. Grid Classes:

o Equal Width Columns: Columns can automatically adjust their

width to fit the row using the .col class. If you add more columns,
they will divide the space equally.
o Custom Width Columns: By specifying the number of columns
(e.g., .col-4), you control how much space each column takes up.
o Offsetting Columns: You can offset columns using classes like
.offset-md-2, which adds space before the column, pushing it to
the right.
o Nesting Columns: You can nest rows and columns within a
column to create more complex layouts.

Practical Examples of Responsive Layouts

1. Basic Grid Layout (Two Columns): In this example, two columns

are created using the grid system. The columns will stack on top of
each other on small screens but appear side by side on larger screens.

Explanation:
o col-sm-6: Each column takes up 6 out of 12 columns (50% of the row)
on small screens and above. On screens smaller than 576px, the
columns will stack vertically.

2. Three-Column Layout with Different Breakpoints: In this example,

the grid layout adapts to different screen sizes using breakpoints.
GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

19
 Summer Internship (3170001) 211260107100
dv

 Explanation:
o col-12: On screens smaller than 768px (mobile devices and
tablets), each column will take up the full width of the row
(stacking vertically).
o col-md-4: On screens 768px and wider, each column will take
up 4 out of 12 columns (one-third of the row) and display side
by side.
 Responsive Layout with Offset Columns: This example
demonstrates how to offset columns to create space between them.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

20
 Summer Internship (3170001) 211260107100
dv

Explanation:

 offset-md-2: The first column is offset by 2 columns on medium

screens and above, creating space to the left of the column.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

21
 Summer Internship (3170001) 211260107100
dv

CHAPTER 4: JAVASCRIPT
Introduction to JavaScript
JavaScript's Role in Web Development

JavaScript is a versatile and powerful programming language that plays a

crucial role in modern web development. Initially designed to add
interactivity to websites, JavaScript has evolved into a full-fledged
language capable of handling everything from front-end user interfaces to
back-end server logic.

 Client-Side Scripting: JavaScript is primarily used for client-side

scripting, which means it runs directly in the user's browser. This
allows developers to create dynamic and interactive web pages. For
example, JavaScript can be used to:

o Validate form inputs before sending them to the server.

o Create animations and effects, such as sliders and pop-ups.
o Update content on the page without reloading, through
techniques like AJAX.
o Handle user interactions, such as clicks, key presses, and mouse
movements.

 Server-Side Scripting: With the advent of environments like

Node.js, JavaScript can also be used for server-side scripting. This
allows developers to build entire web applications using JavaScript,
both on the client and server sides.

 Role in Modern Web Development:

o Enhancing User Experience: JavaScript makes web pages

more interactive and engaging by enabling real-time updates,
animations, and rich user interfaces.

o Building Web Applications: JavaScript is the foundation for

building modern web applications, especially single-page
applications (SPAs) that provide a seamless user experience by
dynamically loading content without full-page reloads.
GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

22
 Summer Internship (3170001) 211260107100
dv

o Frameworks and Libraries: JavaScript has a vast ecosystem of

frameworks (e.g., React, Angular, Vue) and libraries (e.g., jQuery,
D3.js) that simplify development and allow for the creation of complex
applications more efficiently.

o Cross-Platform Development: JavaScript isn't limited to the web.

With frameworks like React Native, Electron, and others, developers
can build cross-platform mobile and desktop applications using
JavaScript.

Basics of Variables, Data Types, and Operators

1. Variables: Variables in JavaScript are used to store data that can be

referenced and manipulated later in the code. Variables act as
containers for values and can be used to store numbers, text, objects,
and more.

o Declaring Variables: In JavaScript, you can declare variables

using the var, let, or const keywords:

 var: The old way to declare variables. It's function-

scoped, meaning it's accessible throughout the function in
which it is declared. However, it has some quirks, such as
hoisting and being accessible outside of block scope.

 let: Introduced in ES6 (ECMAScript 2015), let is block-

scoped, meaning it's only accessible within the block in
which it is declared (e.g., within a loop or a function). It's
the preferred way to declare variables that may change in
value.

 const: Also introduced in ES6, const is used to declare

constants, which are variables whose values cannot be
reassigned. Like let, it's block-scoped.

o Example:

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

23
 Summer Internship (3170001) 211260107100
dv

Data Types: JavaScript has several data types that can be divided
into two categories: primitive types and object types.

o Primitive Data Types:

 Number: Represents both integers and floating-point

numbers.
 Example: let age = 25;
 String: Represents text, enclosed in single or double
quotes.
 Example: let name = "John";
 Boolean: Represents a logical value, either true or false.
 Example: let isActive = true;
 Null: Represents an intentional absence of any object
value.
 Example: let data = null;
 Undefined: Represents an uninitialized variable or a
variable with no assigned value.
 Example: let result; // result is undefined
 Symbol: Represents a unique identifier (introduced in
ES6).
 Example: let sym = Symbol("unique");

o Object Data Types:

 Object: Represents a collection of key-value pairs.

 Example: let person = { name: "John", age: 25 };
 Array: Represents an ordered list of values.
 Example: let numbers = [1, 2, 3, 4];
 Function: Represents a block of code that can be
executed.
 Example: function greet() { console.log("Hello!"); }
GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

24
 Summer Internship (3170001) 211260107100
dv

2. Operators: Operators in JavaScript are symbols that perform

operations on variables and values. They can be categorized into
different types:

o Arithmetic Operators: Used to perform mathematical

operations.

 +: Addition
 Example: let sum = 5 + 3; // 8
 -: Subtraction
 Example: let diff = 10 - 4; // 6
 *: Multiplication
 Example: let product = 4 * 5; // 20
 /: Division
 Example: let quotient = 20 / 4; // 5
 %: Modulus (remainder)
 Example: let remainder = 10 % 3; // 1

o Assignment Operators: Used to assign values to variables.

 =: Assigns a value to a variable.

 Example: let x = 10;
 +=: Adds a value to the current value of the variable.
 Example: x += 5; // x becomes 15
 -=: Subtracts a value from the current value of the
variable.
 Example: x -= 3; // x becomes 7

o Comparison Operators: Used to compare two values.

 ==: Equality (compares values only).

 Example: 5 == "5"; // true
 ===: Strict equality (compares both value and type).
 Example: 5 === "5"; // false
 !=: Inequality (compares values only).
 Example: 5 != "3"; // true
 !==: Strict inequality (compares both value and type).
GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

25
 Summer Internship (3170001) 211260107100
dv

 Example: 5 !== "5"; // true

 >: Greater than.
 Example: 7 > 5; // true
 <: Less than.
 Example: 3 < 4; // true
 >=: Greater than or equal to.
 Example: 5 >= 5; // true
 <=: Less than or equal to.
 Example: 6 <= 10; // true

o Logical Operators: Used to perform logical operations.

 &&: Logical AND (true if both operands are true).

 Example: true && false; // false
 ||: Logical OR (true if at least one operand is true).
 Example: true || false; // true
 !: Logical NOT (inverts the truth value).
 Example: !true; // false

o String Operators: Used to concatenate (join) strings.

 +: Concatenates two strings.

 Example: let greeting = "Hello, " + "world!"; // "Hello,
world!"

o Unary Operators: Operate on a single operand.

 ++: Increment (increases a variable's value by 1).

 Example: let x = 5; x++; // x becomes 6
 --: Decrement (decreases a variable's value by 1).
 Example: let y = 10; y--; // y becomes 9

o Ternary Operator: A shorthand for the if-else statement.

 condition ? expr1 : expr2: Returns expr1 if the condition is

true, otherwise returns expr2.
 Example: let age = 18; let isAdult = (age >= 18) ?
"Yes" : "No"; // "Yes"
GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

26
 Summer Internship (3170001) 211260107100
dv

JavaScript in React

How JavaScript Interacts with React Components

React is a JavaScript library for building user interfaces, primarily

for single-page applications. It allows developers to create reusable
UI components that can handle dynamic data and user interactions.
In React, JavaScript plays a central role in defining the behavior of
components and managing the application state.

 Components as Functions or Classes: React components can be

written as JavaScript functions or classes. These components accept
inputs (called "props") and return JSX (JavaScript XML), which is a
syntax extension that looks like HTML but is used to describe the UI
structure within JavaScript.

 JavaScript.

o Functional Components: These are simpler and are written as

JavaScript functions. They receive props as arguments and
return JSX.

o Class Components: These are more feature-rich and can

maintain their own state. They are defined as JavaScript classes
that extend the React.Component class.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

27
 Summer Internship (3170001) 211260107100
dv

 JSX: JSX allows you to write HTML-like code within JavaScript,

making it easier to visualize the UI structure directly in the code. JSX
elements are transformed into JavaScript objects, which React then
renders to the DOM.

 Dynamic Rendering: JavaScript can be used within JSX to

dynamically render content based on conditions, loops, or data. For
example:

 Event Handling: JavaScript is used to handle events in React, such

as clicks, form submissions, and keyboard inputs. React's event
handling is similar to traditional DOM event handling, but it uses
camelCase syntax and passes events as functions:

Handling State and Props in React

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

28
 Summer Internship (3170001) 211260107100
dv

In React, state and props are two core concepts that allow
components to manage and pass data.

1. Props (Properties):

o Definition: Props are short for "properties" and are used to pass
data from a parent component to a child component. Props are
read-only and cannot be modified by the child component.

o Usage: Props are passed as attributes when a component is

rendered.

o Key Characteristics:

 Props are immutable, meaning they cannot be changed by

the component receiving them.
 They allow components to be dynamic and reusable by
passing different values.
2. State:

o Definition: State is a built-in object that allows components to

manage and store data that can change over time. Unlike props,
state is local to the component and can be updated within the
component.

o Usage: In class components, state is initialized in the

constructor, and in functional components, it's managed using
hooks like useState.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

29
 Summer Internship (3170001) 211260107100
dv

o In Functional Components (with Hooks):

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

30
 Summer Internship (3170001) 211260107100
dv

Key Characteristics

 State is mutable and can be changed using the setState method

in class components or the setState function in functional
components.

 State changes trigger re-renders, allowing the UI to update in

response to user interactions or other events.

Introduction to React Hooks: useState and useEffect

React hooks were introduced in React 16.8 and allow functional

components to use state and other React features that were previously
only available in class components. Two of the most commonly used
hooks are useState and useEffect.

1. useState Hook:

o Purpose: The useState hook allows you to add state to

functional components. It returns an array with two elements:
the current state value and a function to update it.
o Syntax:

o Example:

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

31
 Summer Internship (3170001) 211260107100
dv

o Explanation:

 count is the current state value, and setCount is the function that
updates the state.
 useState(0) initializes the count state with a value of 0.
 Clicking the button updates the state, causing the component to
re-render with the new count value.

2. useEffect Hook:

o Purpose: The useEffect hook allows you to perform side

effects in functional components, such as fetching data, setting
up subscriptions, or manually changing the DOM. It runs after
every render by default but can be customized to run only when
specific dependencies change.
o Syntax:

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

32
 Summer Internship (3170001) 211260107100
dv

o Example: Explanation:

 The effect in this example sets up a timer that increments the

seconds state every second.
 The empty dependency array ([]) ensures that the effect only
runs once after the initial render, similar to
componentDidMount in class components.
 The cleanup function clearInterval(interval) stops the timer
when the component is unmounted, preventingmemory leaks.

o Dependency Array:

 The second argument to useEffect is an optional dependency

array. If you include dependencies, the effect will only re-run
when one of the dependencies changes. For example:

o Explanation:
GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

33
 Summer Internship (3170001) 211260107100
dv

o Common Use Cases:

 Fetching data from an API when the component mounts.

 Subscribing to or unsubscribing from events.
 Updating the document title based on the component'sstate.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

34
 Summer Internship (3170001) 211260107100
dv

CONCLUSION

This has been a great and wonderful experience for me to build this website in a given
time. The excitement of building a certain website almost similar to the main website
was unexpectedly a good thing that I had. It is so satisfying. There were many conflicts
that occurred . But the more you do it, the better you become.

And also we got a new experience on working over #html #CSS # JavaScript.

GUJRAT TECHNOLOGY UNIVERSITY SAL ENGINEERING AND TECHNICAL INSTITUTE

35