A

REPORT ON

Create Lead Form Using

React.js
At
IT IDOL TECHNOLOGIES
Submitted by

Amit Kumawat (210860131019)

In partial fulfillment for the award of the degree

of

BACHELOR OF ENGINEERING
in

COMPUTER SCIENCR & ENGINEERING

Laxmi Institute of Technology-Sarigam

Gujarat Technological University, Ahmedabad

July, 2024
 Laxmi Institute of Technology-Sarigam
At: Sarigam, P.B. No-15, P.O.: Valsad, Pin: 396155

CERTIFICATE

This is to certify that the report submitted has been carried out by Amit
Kumawat (210860131019) under my guidance in fulfilment for the course
named Summer Internship (3170001) in the degree of Bachelor of
Engineering in Computer Science & Engineering of Gujarat Technological
University, Ahmedabad during the academic year 2024-25. He has done his
summer internship in IT IDOL TECHNOLOGIES and successfully
completed all activities related to summer internship under my guidance.

Ms. Ankita Rachh Mr. Rohan Desai

Project Guide Head of Department
CSE Department CSE Department
LIT- Sarigam, Gujarat LIT- Sarigram, Gujarat
Completion Certificate

III
Certificate from Industry

IV
 Acknowledgement

I would like to express my sincere gratitude to Ms. Kruti Mahyavanshi , my

mentor and guide during this internship, for their invaluable support,
guidance, and encouragement throughout the duration of my training at IT
Idol Technologies. Their insights and expertise in web development and
React.js have significantly enhanced my understanding of these subjects.

I am also thankful to IT Idol Technologies for providing me with the

opportunity to work on real-world assignments that have broadened my
knowledge and skills in web development.

A special thanks to my colleagues and fellow interns for their cooperation

and for creating a collaborative learning environment that made this
experience even more enriching.

Finally, I would like to thank my family and friends for their constant
support and encouragement during this internship. Their belief in my
abilities has always motivated me to give my best.

V
 Table of content
Sr No. Title Page No.
1. Completion Certificate III
2. Certificate from Industry IV
3. Acknowledgement V
4. Table of content VI

5. List of figures VII

6. Chapter 1: Introduction to Industry 1

7. Chapter 2: Details of Internship 2

8. Chapter 3: Skill developed during Internship 38

9. Chapter 4: Conclusion 40

VI
 List of figures
Sr No. Title Page No.

2.1 HTML Form 4

2.2 Custom HTML Page with CSS Styling 7

2.3 JavaScript Operations and Simple Calculator 12

2.4.1 Output of the Longest Substring Code 14

2.4.2 Output of the Merge Two Sorted Arrays 16

2.4.3 Output of the Longest Common Prefix Among a List of Strings 17

2.4.4 Output of the Rotated Matrix 90 Degrees Clockwise 18

2.5 Quiz App 22

2.6 Event Filter Component 26

2.7 Reusable Table and Component 30

2.8 Output of Lead form using React.js 37

VII
 210860131019 Summer Internship (3170001)

Chapter 1: Introduction to Industry

IT Idol Technologies is a dynamic and rapidly expanding company dedicated to

delivering high-quality IT solutions to clients across various industries. With a strong
emphasis on building long-term relationships, IT Idol has a proven track record of
successfully completing multiple projects, catering to the diverse needs of its clients.
The company boasts a team of highly skilled developers with extensive expertise in all
major programming languages, encompassing both website and mobile application
development.

At IT Idol Technologies, innovation and excellence are at the core of everything we do.
Whether it’s bringing a client’s idea to life on the internet or developing cutting-edge
applications, our team is equipped to handle even the most complex challenges. Our
commitment to professional development ensures that our developers stay ahead of
industry trends, continually enhancing their skills through access to the latest resources
and training programs.

With a vision to redefine possibilities in the digital age, IT Idol Technologies is more
than just a service provider; we are a partner in our clients’ success. Our mission is to
empower businesses with tailored IT services and solutions that drive growth and
technological advancement. As we continue to push the boundaries of what’s possible in
the world of technology, our goal remains steadfast: to be the premier choice for
businesses seeking innovative, reliable, and efficient IT solutions.

Department of Computer Science & Engineering 1

 210860131019 Summer Internship (3170001)

Chapter 2: Details of Internship

Day 1-2: Introduction to HTML and CSS

Overview: The first two days of the internship were dedicated to laying the foundation
for web development with an introduction to HTML and CSS. These sessions focused
on understanding the basic structure of web pages, how to style them effectively, and
implementing basic form validation.

1. HTML (HyperText Markup Language):

• Basic Structure of an HTML Document:

o <!DOCTYPE html>: Declaration to define the document type and version
of HTML.
o <html>: The root element that wraps all the content.
o <head>: Contains meta-information about the document, such as the title,
character set, and links to stylesheets.
o <title>: Sets the title of the webpage, which appears in the browser's
title bar.
o <body>: Contains all the visible content of the webpage, such as text,
images, and other elements.
• Text Elements:
o Headings (<h1> to <h6>): Used to define headings of various levels.
<h1> is the main heading, and <h6> is the least important.
o Paragraph (<p>): Used to define a block of text.
o Links (<a>): Creates hyperlinks that connect to other pages or resources.
o Images (<img>): Embeds images into the webpage using the src
attribute to define the image source.
• Lists:
o Unordered List (<ul>): Creates a bulleted list.
o Ordered List (<ol>): Creates a numbered list.
o List Item (<li>): Defines an item within a list.
• Forms:
o Introduction to form elements like <input>, <select>, <textarea>, and
<button>.
o Basic form attributes and how to collect user input.
• Form Validation:
o HTML5 Form Validation: We learned how to implement client-side
validation directly in HTML5 using attributes such as:
▪ required: Ensures that the user cannot submit the form without
filling out the field.
▪ pattern: Specifies a regular expression that the input's value
must match for the form to be submitted.
▪ maxlength: Limits the number of characters the user can input in
a text field.

Department of Computer Science & Engineering 2

 210860131019 Summer Internship (3170001)

▪ min and max: Define the minimum and maximum values for
numeric inputs.
▪ type="email" and type="url": Automatically validate the
format of email addresses and URLs.
• Containers:
o <div>:A block-level element used to group content together for styling
or layout purposes.
o <span>: An inline element used to group text or other inline elements
without affecting layout.
• Semantic Elements:
o <header>, <footer>, <nav>, <article>, and <section>: Introduced to
create more meaningful and accessible web pages.

2. CSS (Cascading Style Sheets):

• Introduction to CSS:
o What is CSS?: A language used to describe the presentation of HTML
elements, including colors, layout, and fonts.
o Inline CSS: Applying styles directly to an HTML element using the
style attribute.
o Internal CSS: Placing CSS code within the <style> tag inside the
<head> of the HTML document.
o External CSS: Linking to an external stylesheet using the <link> tag in
the <head>.
• CSS Selectors:
o Element Selector: Targets HTML elements by their tag name (e.g., p {
color: blue; }).
o Class Selector (.): Targets elements by their class attribute (e.g.,
.className { font-size: 14px; }).
o ID Selector (#): Targets elements by their ID attribute (e.g., #idName {
margin: 20px; }).
o Descendant Selector: Targets elements within another element (e.g., div
p { color: red; }).
• Basic CSS Properties:
o Color and Background: Setting text color with color and background
color with background-color.
o Text Styling: Using font-family, font-size, font-weight, and
text-align to style text.
o Margins and Padding: Controlling space around and inside elements
using margin and padding.
o Borders: Adding borders around elements using the border property.
o Width and Height: Setting the dimensions of elements.
o Box Model: Understanding how padding, borders, and margins affect the
size of elements.
• Introduction to Layout:
o Display Property: Using block, inline, inline-block, and none to
control the layout.
o Positioning: Using static, relative, absolute, and fixed to position
elements on the page.

Department of Computer Science & Engineering 3

 210860131019 Summer Internship (3170001)

Practical Application:

• Students created a basic web page that included a variety of HTML elements,
such as headings, paragraphs, lists, and images.
• Basic CSS was applied to style the page, including setting text colors, fonts, and
layouts, which provided a strong understanding of how CSS affects the
appearance and structure of HTML content.
• HTML5 validation was implemented to ensure that user inputs met certain
criteria before submission, enhancing the reliability of the form.

Fig : 2.1 HTML Form

Department of Computer Science & Engineering 4

 210860131019 Summer Internship (3170001)

Day 3-4: Advanced CSS and Responsive Design

Overview: During Days 3 and 4, the focus was on advanced CSS techniques and the
principles of responsive design. These sessions aimed to deepen understanding of
modern layout methods and how to create web pages that adapt to different devices and
screen sizes.

1. Advanced CSS Techniques:

• Flexbox:
o Concept: Flexbox is a one-dimensional layout model that enables easier
alignment and distribution of space among items within a container. It addresses
common layout challenges such as vertical alignment and flexible item sizing.
o Key Properties:
▪ display: flex;: Converts an element into a flex container, allowing
its child elements (flex items) to be laid out using Flexbox rules.
▪ flex-direction: Defines the direction in which flex items are placed
in the flex container. Possible values include:
▪ row: Items are laid out horizontally (default).
▪ column: Items are laid out vertically.
▪ justify-content: Aligns flex items along the main axis of the
container. Common values include:
▪ center: Centers items horizontally (or vertically if flex-
direction is column).
▪ space-between: Distributes items evenly with the first item
at the start and the last item at the end.
▪ space-around: Distributes items evenly with equal space
around them.
▪ align-items: Aligns flex items along the cross axis (perpendicular to
the main axis). Key values include:
▪ flex-start: Aligns items to the start of the cross axis.
▪ center: Aligns items in the center of the cross axis.
▪ stretch: Stretches items to fill the container (default).
▪ flex-wrap: Controls whether flex items should wrap onto multiple
lines. Values include:
▪ nowrap: Items are kept on a single line (default).
▪ wrap: Items wrap onto multiple lines from top to bottom.
▪ wrap-reverse: Items wrap onto multiple lines from bottom to
top.
• Grid:
o Concept: CSS Grid Layout is a two-dimensional layout system that allows for
the creation of complex grid-based designs. It facilitates the positioning of
elements into rows and columns.
o Key Properties:
▪ display: grid;: Defines an element as a grid container, enabling
grid layout.
▪ grid-template-columns and grid-template-rows: Define the
number and size of columns and rows in the grid. Values can be
specified in units like pixels (px), percentages (%), or fractions (fr).
▪ Example: grid-template-columns: 1fr 2fr; creates a
grid with two columns, the second column being twice as wide
as the first.

Department of Computer Science & Engineering 5

 210860131019 Summer Internship (3170001)

▪ grid-column and grid-row: Control the placement and span of grid

items. Values specify the start and end lines of the grid.
▪ Example: grid-column: 1 / 3; makes an item span from
the first to the third column line.
▪ gap: Defines the space between grid items. It can be set for both rows
and columns.
▪ Example: gap: 10px; creates a 10-pixel gap between grid
items.
• Media Queries:
o Concept: Media queries enable responsive design by applying different styles
based on the device's characteristics, such as screen width, height, and
resolution.
o Key Properties:
▪ @media: Defines conditions under which certain CSS rules are applied.
Commonly used with features like width, height, and
orientation.
▪ Example: @media (max-width: 768px) { ... } applies
styles when the viewport width is 768 pixels or less.
▪ Responsive Units: Use relative units like em, rem, and percentages (%)
to make designs more flexible.
▪ Example: width: 50%; makes an element take up half the
width of its container.

2. Responsive Design:

• Concept: Responsive design ensures that web pages are usable and visually appealing
across a variety of devices, including desktops, tablets, and mobile phones.
• Techniques:
o Fluid Grids: Design layouts using percentage-based widths rather than fixed
pixel values, allowing elements to resize proportionally.
▪ Example: width: 50%; makes an element take up 50% of its
container’s width.
o Flexible Images: Ensure images resize within their containers to maintain
layout consistency. Use the max-width property to make images responsive.
▪ Example: img { max-width: 100%; height: auto; } ensures
images scale according to their container’s width.
o Viewport Meta Tag: Include this meta tag to control layout on mobile
browsers and ensure proper scaling.
▪ Example: <meta name="viewport" content="width=device-
width, initial-scale=1.0">.

Department of Computer Science & Engineering 6

 210860131019 Summer Internship (3170001)

Assignment 2: HTML Page with Custom CSS Styling

• Task: Create an HTML page styled with custom CSS to match a provided reference
image. This task required applying advanced CSS techniques to achieve the desired
layout and visual design.
• Objective: Demonstrate the ability to use Flexbox and Grid for layout, apply media
queries for responsive design, and create a visually appealing web page that adheres to
design specifications.
• Challenge: Focused on translating a static design into a responsive layout, ensuring that
the page adapts to different screen sizes while maintaining design integrity.

Fig 2.2 Custom HTML Page with CSS Styling

Department of Computer Science & Engineering 7

 210860131019 Summer Internship (3170001)

Day 5-6: Introduction to JavaScript

Overview: Days 5 and 6 focused on introducing JavaScript, a crucial scripting language

for web development. These sessions aimed to cover the basics of JavaScript, including
variables, data types, operators, and fundamental operations on arrays and objects.

1. Basics of JavaScript:

• Variables:
o Declaration: JavaScript variables are declared using var, let, or const.
▪ var: Declares a variable with function or global scope.
▪ let: Declares a block-scoped variable, allowing reassignment.
▪ const: Declares a block-scoped variable with a constant value
that cannot be reassigned.
o Example:

let name = "John";

const age = 25;

• Data Types:
o Primitive Types: Include Number, String, Boolean, undefined, null,
and Symbol.
▪ Number: Represents numeric values (e.g., 42, 3.14).
▪ String: Represents textual data (e.g., "Hello", 'World').
▪ Boolean: Represents true or false values.
▪ undefined: Indicates a variable that has not been assigned a
value.
▪ null: Represents the intentional absence of any object value.
▪ Symbol: Represents a unique identifier.
o Example:

let isActive = true; // Boolean

let score = 95; // Number
let message = "Hello, world!"; // String

• Operators:
o Arithmetic Operators: Perform mathematical operations (e.g., +, -, *,
/).
▪ Example: let sum = 5 + 3;
o Comparison Operators: Compare values (e.g., ==, ===, !=, !==, >, <).
▪ Example: let isEqual = (5 === 5);
o Logical Operators: Perform logical operations (e.g., &&, ||, !).
▪ Example: let result = (true && false);

2. Introduction to Arrays and Objects:

Department of Computer Science & Engineering 8

 210860131019 Summer Internship (3170001)

• Arrays:
o Concept: Arrays are ordered collections of values, which can be of any
data type.
o Key Operations:
▪ Adding Elements: Use the push method to add elements to the
end of an array.
▪ Example: array.push(4);
▪ Removing Elements: Use the pop method to remove the last
element, or shift to remove the first element.
▪ Example: array.pop();
▪ Updating Elements: Access elements by index to update their
values.
▪ Example: array[1] = 10;
o Example:

let fruits = ["apple", "banana", "cherry"];

fruits.push("date"); // Adds "date" to the end
fruits.pop(); // Removes "date"

• Objects:
o Concept: Objects are collections of key-value pairs, where keys are
strings (or Symbols) and values can be any data type.
o Key Operations:
▪ Creating Objects: Use object literals to create objects.
▪ Example: let person = { name: "Alice", age: 30
};
▪
Accessing Values: Use dot notation or bracket notation to access
object properties.
▪ Example: person.name or person["name"];
▪ Updating Values: Modify property values directly.
▪ Example: person.age = 31;
o Example:

let student = { name: "John", age: 20, grade: "A" };

student.age = 21; // Updates age

3. Assignment 3: JavaScript Operations and Simple Calculator

• Part 1: Variables and Data Types

o Task: Declare variables of various data types and log them to the
console. This exercise was designed to familiarize participants with
JavaScript’s data types and variable declarations.
o Example:

var Name = "Amit Kumawat";

console.log("Name:", Name);
var age = 22;
console.log("Age:", age);
var hobbies = ["travel", "listening music", "gaming"];

Department of Computer Science & Engineering 9

 210860131019 Summer Internship (3170001)

console.log("Hobbies:", hobbies);
var address = { street: "321 Main Street", city: "Vapi", state:
"Gujarat" }; // object
console.log("Address:", address);
var ishuman = true;
console.log("Is Human:", ishuman);

Part 2: Array of Student Objects

o Task: Create an array of student objects with attributes such as name,

age, and grade. Perform operations including:
▪ Adding a New Student: Use push to add a new student object to
the array.
▪ Removing the Last Student: Use pop to remove the last student
object.
▪ Updating a Student's Grade: Modify the grade property of a
student object.
▪ Logging All Students: Use a loop to print the details of each
student.
▪ Finding a Student with Grade 'A': Use the find method to
locate a student with a specific grade.
o Example:

//array of student objects

let student = [
{ name: "Amit", age: 20, grade: "A" },
{ name: "Vishal", age: 22, grade: "B" },
{ name: "Aniket", age: 21, grade: "A" },

];

// Add new student

student.push({ name: "Abhishek", age: 22, grade: "B"});

// Remove the last student from the array

student.pop();

// Update a student's grade

student[1].grade = "A+";

//logging all student

console.log("student: ",student);

// Find student with grade 'A'

let studentWithGradeA = student.find((student) => student.grade

=== "A");

console.log("Student with grade 'A':", studentWithGradeA.name);

Department of Computer Science & Engineering 10

 210860131019 Summer Internship (3170001)

Part 3: Average Age Calculation

o Task: Calculate the average age of students in the array. This required
summing the ages of all students and dividing by the number of students.
o Example:

// average age of students

let agesum = student.reduce((acc, student) => acc +
student.age,0);

let averageAge = agesum / student.length;

console.log("Average Age:", averageAge);

Part 4: Simple Calculator

o Task: Develop a simple calculator that performs basic arithmetic

operations, including addition, subtraction, multiplication, and division.
o Example:

// Create a simple calculator

function calculator(num1, num2, operator) {
switch (operator) {
case "+":
return num1 + num2;
case "-":
return num1 - num2;
case "*":
return num1 * num2;
case "/":
if (num2 === 0) {
throw new Error("Cannot divide by zero!");
}
return num1 / num2;
default:
throw new Error("Invalid operator!");
}
}

// Test the calculator

console.log("Sum (2&3) : ",(calculator(2, 3, "+")));

console.log("Sub (5&2) : ",(calculator(5, 2, "-")));
console.log("Mul (4&5) : ",(calculator(4, 5, "*")));
console.log("Div (10by2) :",(calculator(10, 2, "/")));

Department of Computer Science & Engineering 11

 210860131019 Summer Internship (3170001)

Fig 2.3 JavaScript Operations and Simple Calculator

Department of Computer Science & Engineering 12

 210860131019 Summer Internship (3170001)

Day 7-8: Problem-Solving with JavaScript

Overview: Days 7 and 8 were dedicated to applying JavaScript for problem-solving,

focusing on string manipulation, array handling, and tackling common algorithmic
challenges. These sessions aimed to enhance problem-solving skills through practical
exercises and algorithmic thinking.

1. String Manipulation and Array Handling:

• String Manipulation:
o Concept: String manipulation involves altering or analyzing strings to
achieve specific results. This includes operations like searching,
replacing, and extracting substrings.
o Common Methods:
▪ length: Returns the number of characters in a string.
▪ Example: "hello".length returns 5.
▪ slice(start, end): Extracts a portion of a string from the start
index to the end index.
▪ Example: "hello".slice(1, 4) returns "ell".
▪ substring(start, end): Similar to slice, but the indices are
not negative and the end index is exclusive.
▪ Example: "hello".substring(1, 4) returns "ell".
▪ replace(searchValue, newValue): Replaces the first
occurrence of a specified value with a new value.
▪ Example: "hello".replace("e", "a") returns
"hallo".
▪ toUpperCase() and toLowerCase(): Convert a string to
uppercase or lowercase, respectively.
▪ Example: "hello".toUpperCase() returns "HELLO".
• Array Handling:
o Concept: Arrays are collections of items. JavaScript provides various
methods to manipulate arrays, including adding, removing, and iterating
over elements.
o Common Methods:
▪ push(element): Adds an element to the end of an array.
▪ Example: let arr = [1, 2]; arr.push(3); results in
[1, 2, 3].
▪ pop(): Removes the last element from an array.
▪ Example: arr.pop() removes 3, resulting in [1, 2].
▪ shift(): Removes the first element from an array.
▪ Example: arr.shift() removes 1, resulting in [2].
▪ unshift(element): Adds an element to the beginning of an
array.
▪ Example: arr.unshift(0) adds 0, resulting in [0, 2].
▪ map(callback): Creates a new array with the results of calling a
provided function on every element.
▪ Example: arr.map(x => x * 2) results in [0, 4].

Department of Computer Science & Engineering 13

 210860131019 Summer Internship (3170001)

▪ filter(callback): Creates a new array with all elements that

pass the test implemented by the provided function.
▪ Example: arr.filter(x => x > 0) results in [2].

2. Problem-Solving Techniques for Common Algorithmic Challenges:

• Concept: Problem-solving involves breaking down complex problems into

smaller, manageable parts and applying algorithmic techniques to find solutions.
Common challenges include working with strings, arrays, and matrices.
• Algorithmic Challenges:
o Task 1: Find the Length of the Longest Substring Without Repeating
Characters
▪ Objective: Determine the length of the longest substring in a
given string where no characters are repeated.
▪ Approach: Use a sliding window technique with two pointers to
keep track of the current substring and its length.
▪ Example:

function lengthOfLongestSubstring(s) {
let set = new Set();
let maxLength = 0, left = 0;

for (let right = 0; right < s.length; right++) {

while (set.has(s[right])) {
set.delete(s[left]);
left++;
}
set.add(s[right]);
maxLength = Math.max(maxLength, right - left
+ 1);
}
return maxLength;
}

// Example usage:
console.log(lengthOfLongestSubstring("abcabcbb"));
console.log(lengthOfLongestSubstring("bbbbb"));

Fig 2.4.1 Output of the Longest Substring Code

Department of Computer Science & Engineering 14

 210860131019 Summer Internship (3170001)

o Task 2: Merge Two Sorted Arrays

▪ Objective: Merge two pre-sorted arrays into one sorted array.
▪ Approach: Use two pointers to iterate through both arrays,
comparing elements and adding the smaller one to the result
array.
▪ Example:

function mergeSortedArrays(arr1, arr2) {

let mergedArray = [];
let i = 0, j = 0;

while (i < arr1.length && j < arr2.length) {

if (arr1[i] < arr2[j])
mergedArray.push(arr1[i])
i++;
} else {
mergedArray.push(arr2[j]);
j++;
}
}
while (i < arr1.length) {
mergedArray.push(arr1[i]);
i++;

}
while (j < arr2.length) {
mergedArray.push(arr2[j]);
j++;

return mergedArray;

// Example usage:
console.log(mergeSortedArrays([1, 3, 5], [2, 4, 6]));
console.log(mergeSortedArrays([0, 2, 4], [1, 3, 5]));

Department of Computer Science & Engineering 15

 210860131019 Summer Internship (3170001)

Fig 2.4.2 Output of the Merge Two Sorted Arrays

o Task 3: Determine the Longest Common Prefix Among a List of

Strings
▪ Objective: Find the longest common prefix shared by all strings
in a given array.
▪ Approach: Compare characters from each string position by
position until a mismatch is found.
▪ Example:

function longestCommonPrefix(strs) {
if (strs.length === 0) return "";
let prefix = strs[0];

for (let i = 1; i < strs.length; i++) {

while (strs[i].indexOf(prefix) !== 0) {
prefix = prefix.substring(0,
prefix.length - 1);
if (prefix === "") return "";
}
}

return prefix;
}

// Example usage:
console.log(longestCommonPrefix(["flower", "flow",
"flight"]));
console.log(longestCommonPrefix(["dog", "racecar",
"car"]));

Department of Computer Science & Engineering 16

 210860131019 Summer Internship (3170001)

Fig 2.4.3 Output of the Longest Common Prefix Among a List of Strings

o Task 4: Rotate a Matrix 90 Degrees Clockwise

▪ Objective: Rotate a 2D matrix by 90 degrees clockwise.
▪ Approach: Transpose the matrix and then reverse each row to
achieve the rotation.
▪ Example:

function rotateMatrix(matrix) {
let n = matrix.length;

// Transpose the matrix

for (let i = 0; i < n; i++) {
for (let j = i; j < n; j++) {
[matrix[i][j], matrix[j][i]] = [matrix[j][i],
matrix[i][j]];
}
}

// Reverse each row

for (let i = 0; i < n; i++) {
matrix[i].reverse();
}

return matrix;
}

Department of Computer Science & Engineering 17

 210860131019 Summer Internship (3170001)

Fig 2.4.4 Output of the Rotated Matrix 90 Degrees Clockwise

Department of Computer Science & Engineering 18

 210860131019 Summer Internship (3170001)

Day 9-10: Introduction to React.js

Overview: Days 9 and 10 introduced React.js, a popular JavaScript library for building
user interfaces, particularly single-page applications. The focus was on understanding
React components, props, state, and JSX, and applying these concepts to create a
functional quiz application.

1. Introduction to React.js:

• Components:
o Concept: React applications are built using components, which are
reusable and self-contained pieces of code that return a React element to
be rendered on the page.
o Types of Components:
▪ Functional Components: Defined as functions that return JSX.
▪ Example:

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

▪ Class Components: Defined as classes that extend

React.Component and include a render method that returns JSX.
▪ Example:

class Greeting extends React.Component {

render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

• Props:
o Concept: Props (short for properties) are used to pass data from parent
components to child components. Props are read-only and cannot be
modified by the child component.
o Usage:
▪ Passing Props:

<Greeting name="Alice" />

▪ Accessing Props in Functional Component:

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

▪ Accessing Props in Class Component:

class Greeting extends React.Component {

render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

Department of Computer Science & Engineering 19

 210860131019 Summer Internship (3170001)

• State:
o Concept: State is a built-in object that stores property values that belong
to a component. State is mutable and can be changed using setState in
class components or useState in functional components.
o Usage in Functional Components:
▪ Example:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

o Usage in Class Components:

▪ Example:

class Counter extends React.Component {

constructor(props) {
super(props);
this.state = { count: 0 };
}

render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count:
this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}

2. Basics of JSX:

• Concept: JSX (JavaScript XML) is a syntax extension for JavaScript that allows
writing HTML elements and components within JavaScript code. JSX makes it
easier to create and understand React elements.
• Usage:
o Embedding Expressions:
▪ Example:

Department of Computer Science & Engineering 20

 210860131019 Summer Internship (3170001)

const name = 'Alice';

const element = <h1>Hello, {name}!</h1>;

o Conditional Rendering:
▪ Example:

function Greeting(props) {
return (
<div>
{props.isLoggedIn ? <p>Welcome back!</p> :
<p>Please sign up.</p>}
</div>
);
}

o Lists and Keys:

▪ Example:

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);
return <ul>{listItems}</ul>;
}

3. Building Reusable UI Components:

• Concept: Reusable components help in building modular and maintainable user

interfaces. Components can be composed of other components and can be reused
across different parts of an application.
• Example:
o Button Component:

function Button(props) {
return (
<button onClick={props.onClick}>
{props.label}
</button>
);
}

o Card Component:

function Card(props) {
return (
<div className="card">
<h2>{props.title}</h2>
<p>{props.content}</p>
</div>
);
}

Department of Computer Science & Engineering 21

 210860131019 Summer Internship (3170001)

Assignment 5: Quiz App

• Task: Develop a Quiz App using React.js

o Objective: Create a Quiz App that features 3 questions with a timer for
each question. The app should provide an interactive experience with
questions that can be based on any programming language such as
HTML, CSS, or JavaScript.
o Key Features:
▪ Question Display: Show questions one at a time, with multiple-
choice answers.
▪ Timer: Implement a countdown timer for each question to
enhance user engagement and track response time.
▪ Score Tracking: Calculate and display the user’s score based on
correct answers.

Fig 2.5 Quiz App

Department of Computer Science & Engineering 22

 210860131019 Summer Internship (3170001)

Day 11-12: State Management and Event Handling in React.js

Overview: Days 11 and 12 focused on deepening the understanding of state

management and event handling in React.js. These topics are crucial for creating
interactive and dynamic user interfaces. The sessions covered how to manage state
effectively within React components using the useState hook and how to handle user
interactions through event handling.

1. Managing State in React Components Using the useState Hook:

• Understanding State in React:

o Concept: State is a way to store and manage data that can change over
time within a component. Each time the state changes, the component re-
renders to reflect the updated state.
o Why It Matters: Managing state effectively is essential for creating
dynamic UIs where the display updates in response to user actions or
other events.
• The useState Hook:
o Introduction: useState is a React hook that allows functional
components to have state variables. It returns an array with two elements:
the current state value and a function to update it.
o Basic Syntax:

const [state, setState] = useState(initialValue);

▪ Example:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

o Practical Usage:
▪ Managing form inputs.
▪ Toggling UI elements (e.g., modal visibility).
▪ Handling complex UI states, such as tabs or dropdowns.

2. Handling Events in React Components:

• Event Handling in React:

o Concept: Events in React are triggered by user actions such as clicks,
key presses, or form submissions. Event handlers are functions that are

Department of Computer Science & Engineering 23

 210860131019 Summer Internship (3170001)

called in response to these events, allowing the UI to respond

dynamically.
o Why It Matters: Proper event handling is vital for creating interactive
applications where the user’s input directly affects the behavior and
appearance of the UI.
• Common Events and Their Handlers:
o Click Events:
▪ Example:

function Button() {
function handleClick() {
alert('Button clicked!');
}

return (
<button onClick={handleClick}>
Click me
</button>
);
}

o Form Events:
▪ Example:

function Form() {
const [inputValue, setInputValue] = useState('');

function handleChange(event) {
setInputValue(event.target.value);
}

function handleSubmit(event) {
event.preventDefault();
alert(`Submitted value: ${inputValue}`);
}

return (
<form onSubmit={handleSubmit}>
<input type="text" value={inputValue}
onChange={handleChange} />
<button type="submit">Submit</button>
</form>
);
}

o Keyboard Events:
▪ Example:

function TextInput() {
function handleKeyPress(event) {
if (event.key === 'Enter') {
alert('Enter key pressed!');
}
}

return (

Department of Computer Science & Engineering 24

 210860131019 Summer Internship (3170001)

<input type="text" onKeyPress={handleKeyPress} />

);
}

3. Integrating State Management with Event Handling:

• Practical Application: Combine useState with event handlers to build

dynamic and responsive components. This involves updating the state in
response to user interactions and ensuring the UI reflects those changes
immediately.

Assignment 6: Event Filter Component

• Task: Create a React Component for Event Filtering

o Objective: Develop a React component that displays a list of events and
allows users to filter them by name. The component should use state to
manage both the search input and the filtered event list.
• Steps to Implement:
o Step 1: Set Up Initial State
▪ Use useState to initialize the list of events and the search input
value.
▪ Example:

const [searchInput, setSearchInput] = useState('');

const [filteredEvents, setFilteredEvents] =
useState(events);

o Step 2: Handle Search Input Changes

▪ Create an event handler to update the search input state whenever
the user types in the search field.
▪ Example:

function handleSearchChange(event) {
setSearchInput(event.target.value);
filterEvents(event.target.value);
}

o Step 3: Filter the Event List

▪ Create a function to filter the event list based on the search input.
Update the filteredEvents state with the filtered list.
▪ Example:

function filterEvents(query) {
const filtered = events.filter(event =>

event.name.toLowerCase().includes(query.toLowerCase()
)
);
setFilteredEvents(filtered);
}

o Step 4: Render the Component

Department of Computer Science & Engineering 25

 210860131019 Summer Internship (3170001)

▪ Display the filtered list of events in the UI. The list should update
dynamically as the user types in the search field.
▪ Example:

return (
<div>
<input
type="text"
placeholder="Search events"
value={searchInput}
onChange={handleSearchChange}
/>
<ul>
{filteredEvents.map(event => (
<li key={event.id}>
{event.name} - {event.date} -
{event.location}
</li>
))}
</ul>
</div>
);

Fig 2.6 Event Filter Component

Department of Computer Science & Engineering 26

 210860131019 Summer Internship (3170001)

Day 13-14: React.js Routing and Component Reusability

Overview: Days 13 and 14 of the internship were dedicated to understanding and

implementing navigation in React applications using React Router, as well as building
reusable components. These concepts are fundamental in creating scalable and
maintainable React applications, where navigation between different views and
reusability of components are critical for efficiency and code quality.

1. React Router for Implementing Navigation:

• Introduction to React Router:

o Concept: React Router is a library that enables navigation between
different views or pages in a React application without reloading the
entire page. It uses the browser’s history API to manage routing and
provides components like Router, Route, Link, and Switch to define
and handle routes.
o Why It Matters: Implementing proper routing is essential for creating
single-page applications (SPAs) where users can navigate seamlessly
between different sections without the need for full-page reloads.
• Basic Components of React Router:
o BrowserRouter: Acts as the router context for the application, allowing
the use of routing features.
o Route: Defines a path and the component to render when the path is
matched.
o Link: Provides navigation between different routes without reloading the
page.
o Switch: Renders the first Route that matches the current URL, ensuring
only one route is rendered at a time.
o Example Setup:

import { BrowserRouter as Router, Route, Switch, Link }

from 'react-router-dom';

function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}

o Practical Usage:
▪ Navigation bars and menus.
▪ Conditional rendering based on user authentication or role.

Department of Computer Science & Engineering 27

 210860131019 Summer Internship (3170001)

▪ Nested routing for complex UI layouts.

2. Building Reusable Components in React:

• Importance of Reusability:
o Concept: Reusability in React involves creating components that can be
reused across different parts of an application with minimal modification.
This is achieved by designing components that are flexible and accept
various props to control their behavior and appearance.
o Why It Matters: Building reusable components reduces redundancy,
enhances consistency across the application, and makes the codebase
easier to maintain and extend.
• Creating Reusable Components:
o Example: Reusable Table Component
▪ A reusable table component can be designed to accept dynamic
data and configurations, such as columns and rows, making it
adaptable to different use cases.
▪ Example Implementation:

function Table({ columns, data }) {

return (
<table>
<thead>
<tr>
{columns.map((column, index) => (
<th key={index}>{column.header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index}>
{columns.map((column, colIndex) => (
<td
key={colIndex}>{row[column.accessor]}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

▪ Props:
▪ columns: An array of objects defining the headers and
corresponding data keys.
▪ data: An array of objects representing the rows of data to
be displayed.

• Benefits of Reusability:
o Consistent UI elements across the application.
o Easier maintenance and updates.

Department of Computer Science & Engineering 28

 210860131019 Summer Internship (3170001)

o Improved development speed by leveraging existing components.

Assignment 7: Reusable Table Component and Routing

Task 1: Create a Reusable Table Component to Display Data

• Objective: Develop a table component that can be reused in different parts of

the application. The component should be flexible, accepting dynamic columns
and rows via props.
• Implementation Steps:
o Design the table structure using HTML and CSS.
o Make the table dynamic by using props for columns and data.
o Test the component with various datasets to ensure its flexibility and
reusability.

Task 2: Implement Routes for Different Menus in the Application’s Header

• Objective: Use React Router to create navigation between different sections of

the application. Each section should render a table with different data.
• Implementation Steps:
o Set up the BrowserRouter in the main application component.
o Define Route components for each menu, linking them to the
corresponding tables.
o Use Link components in the header to allow users to navigate between
different tables.
o Ensure that the URL path changes appropriately when different menus
are selected, reflecting the current view.

Department of Computer Science & Engineering 29

 210860131019 Summer Internship (3170001)

Fig 2.7 Reusable Table Component and Routing

Department of Computer Science & Engineering 30

 210860131019 Summer Internship (3170001)

Day 15: Final Project and Review

Create Lead Form Using React.js

In this mini project, I developed a Create Lead form using React.js. The form is
designed to capture and manage lead information efficiently. Below is a detailed
description of the form's features and functionalities:

Objective

The goal of this project was to create a user-friendly interface for inputting lead details,
ensuring that the data is validated and submitted correctly.

Form Overview

The Create Lead form is divided into several sections, each focusing on different
aspects of the lead's details:

1. Personal Details:
o Profile Picture Upload: Users can upload a profile picture for the lead.
o First Name & Last Name: Text inputs for entering the lead's first and
last name.
2. Contact Details:
o Email: An email input field with validation.
o POC LinkedIn: A URL field for the point of contact's LinkedIn profile.
o Phone Number: A phone number input field with validation.
3. Company Details:
o Company Name: Text input for the company name.
o Company LinkedIn: A URL input for the company's LinkedIn profile.
o Number of Employees: A numeric input field for the company's size.
o Street: A textarea for the company’s address.
4. Other Details:
o Mark as Primary: A dropdown menu allowing the user to mark the lead
as primary.
o Lead Status, Lead Industry, Lead Sources, Designation: Text input
fields to capture additional details about the lead.
o Website: A URL input field for the lead's website.
o Note: A textarea to add any additional notes.

Form Validation and Submission

The form includes basic validation to ensure that required fields, such as first name, last
name, email, and phone number, are filled out before submission. The submission logic
alerts the user upon successful submission. The form also includes a cancel button,
which resets all fields to their default states.

Department of Computer Science & Engineering 31

 210860131019 Summer Internship (3170001)

Implementation Details

The form is implemented using React's functional components and the useState hook
to manage form state. Each input field is linked to the component's state, and changes
are handled by a central handleChange function.

Code Example (LeadForm.js):

import React, { useState } from 'react';

import './LeadForm.css';

const LeadForm = () => {

const [form, setForm] = useState({
firstName: '',
lastName: '',
email: '',
phoneNumber: '',
companyName: '',
street: '',
pocLinkedIn: '',
companyLinkedIn: '',
numberOfEmployees: '',
markAsPrimary: false,
leadStatus: '',
leadIndustry: '',
leadSources: '',
designation: '',
website: '',
note: '',
});

const handleChange = (e) => {

const { name, value, type, checked } = e.target;
setForm({
...form,
[name]: type === 'checkbox' ? checked : value,
});
};

const handleSubmit = (e) => {

e.preventDefault();
// Add your form validation and submission logic here
alert('Form submitted successfully!');
};

const handleCancel = () => {

// Logic to handle form cancellation
setForm({
firstName: '',
lastName: '',

Department of Computer Science & Engineering 32

 210860131019 Summer Internship (3170001)

email: '',
phoneNumber: '',
companyName: '',
street: '',
pocLinkedIn: '',
companyLinkedIn: '',
numberOfEmployees: '',
markAsPrimary: false,
leadStatus: '',
leadIndustry: '',
leadSources: '',
designation: '',
website: '',
note: '',
});
};

return (
<div className="lead-form-container">
<div className="header">
<img src="/logo1.png" alt="Profile" className="logo" />
<h1>Create Lead</h1>
</div>
<form onSubmit={handleSubmit}>
<h2>Personal Details</h2>
<div className="form-group">
<img src="/profile.jpg" alt="Profile" className="profile" />
<label>Profile Picture:</label>
<input type="file" name="profilePicture" />
</div>

<div className="form-group">
<label>First Name:</label>
<input
type="text"
name="firstName"
value={form.firstName}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<label>Last Name:</label>
<input
type="text"
name="lastName"
value={form.lastName}
onChange={handleChange}
required
/>

Department of Computer Science & Engineering 33

 210860131019 Summer Internship (3170001)

</div>

<h2>Contact Details</h2>
<div className="form-group">
<label>Email:</label>
<input
type="email"
name="email"
value={form.email}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<label>POC LinkedIn:</label>
<input
type="url"
name="pocLinkedIn"
value={form.pocLinkedIn}
onChange={handleChange}
/>
</div>
<div className="form-group">
<label>Phone Number:</label>
<input
type="tel"
name="phoneNumber"
value={form.phoneNumber}
onChange={handleChange}
required
/>
</div>

<h2>Company Details</h2>
<div className="form-group">
<label>Company Name:</label>
<input
type="text"
name="companyName"
value={form.companyName}
onChange={handleChange}
/>
</div>
<div className="form-group">
<label>Company LinkedIn:</label>
<input
type="url"
name="companyLinkedIn"
value={form.companyLinkedIn}
onChange={handleChange}

Department of Computer Science & Engineering 34

 210860131019 Summer Internship (3170001)

/>
</div>
<div className="form-group">
<label>Number of Employees:</label>
<input
type="number"
name="numberOfEmployees"
value={form.numberOfEmployees}
onChange={handleChange}
/>
</div>
<div className="form-group">
<label>Street (Enter your address):</label>
<textarea
name="street"
value={form.street}
onChange={handleChange}
></textarea>
</div>

<h2>Other Details</h2>
<div className="form-group ">
<label>Mark as Primary:</label>
<div className="custom-select">
<select
name="markAsPrimary"
value={form.markAsPrimary}
onChange={handleChange}
>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</div>

<div className="form-group">
<label>Lead Status:</label>
<input
type="text"
name="leadStatus"
value={form.leadStatus}
onChange={handleChange}
/>
</div>
<div className="form-group">
<label>Lead Industry:</label>
<input
type="text"
name="leadIndustry"

Department of Computer Science & Engineering 35

 210860131019 Summer Internship (3170001)

value={form.leadIndustry}
onChange={handleChange}
/>
</div>
<div className="form-group">
<label>Lead Sources:</label>
<input
type="text"
name="leadSources"
value={form.leadSources}
onChange={handleChange}
/>
</div>
<div className="form-group">
<label>Designation:</label>
<input
type="text"
name="designation"
value={form.designation}
onChange={handleChange}
/>
</div>
<div className="form-group">
<label>Website:</label>
<input
type="url"
name="website"
value={form.website}
onChange={handleChange}
/>
</div>
<div className="form-group">
<label>Note:</label>
<textarea
name="note"
value={form.note}
onChange={handleChange}
></textarea>
</div>
<div className="form-buttons">
<button type="button" onClick={handleCancel}>
Cancel
</button>
<button type="submit">Create</button>
</div>
</form>
</div>
);}
export default LeadForm;

Department of Computer Science & Engineering 36

 210860131019 Summer Internship (3170001)

Fig 7.8 Output of Lead form using React.js

Department of Computer Science & Engineering 37

 210860131019 Summer Internship (3170001)

Chapter 3: Skill developed

during Internship

During the 15-day internship at IT Idol Technologies, I gained hands-on experience in

web development, which significantly contributed to the enhancement of my technical
and problem-solving skills. The following are the key skills I developed during this
period:

1. HTML and CSS Proficiency

• Structure and Layout Design: I developed a strong understanding of HTML

for structuring web pages and CSS for styling them. This included creating
responsive layouts using Flexbox and Grid, ensuring that web pages look good
on different screen sizes.
• Semantic HTML: I learned to use semantic elements like <header>, <nav>,
<section>, and <footer> to create more meaningful and accessible web pages,
improving SEO and user experience.
• CSS Styling Techniques: I enhanced my skills in applying CSS properties to
style text, images, and other elements. I also learned advanced techniques like
CSS animations and transitions to make web pages more interactive.

2. JavaScript Fundamentals

• Variable Management and Data Types: I gained a deep understanding of how

to declare and manage variables in JavaScript, using different data types like
strings, numbers, booleans, arrays, and objects.
• DOM Manipulation: I learned how to manipulate the Document Object Model
(DOM) using JavaScript to dynamically update content, styles, and structure of
web pages without reloading them.
• Problem-Solving with JavaScript: I tackled various algorithmic challenges,
which honed my skills in string manipulation, array operations, and working
with complex data structures.

3. React.js Development

• Component-Based Architecture: I developed the ability to break down a user

interface into reusable components, understanding the importance of components
in creating scalable and maintainable code in React.js.
• State Management: I learned to manage state within React components using
the useState hook, allowing me to create interactive applications where the UI
dynamically responds to user input.
• Event Handling: I acquired skills in handling events in React, such as clicks
and form submissions, to build responsive user interfaces.
• Routing in React.js: I learned how to implement client-side routing using React
Router, enabling the creation of multi-page applications with smooth transitions
between views.

4. Form Validation and Data Handling

Department of Computer Science & Engineering 38

 210860131019 Summer Internship (3170001)

• Form Creation and Validation: I developed expertise in creating forms with

HTML and validating user inputs using both HTML5 attributes and custom
JavaScript functions. This included handling errors and ensuring that the data
submitted is correct and secure.
• State-Driven Form Management: I learned how to manage form data in React,
ensuring that form inputs are controlled by the component’s state, allowing for
real-time validation and feedback to users.
• Data Display and Reusability: I acquired skills in displaying data dynamically
in tables using React components, reinforcing the importance of reusability and
consistency in web development.

5. Problem-Solving and Algorithmic Thinking

• Algorithm Development: I improved my problem-solving abilities by tackling

various algorithmic challenges, such as finding the longest substring without
repeating characters, merging sorted arrays, and rotating matrices. These
exercises sharpened my ability to think algorithmically and develop efficient
solutions.

6. Project Management and Collaboration

• Time Management: Throughout the internship, I learned how to manage my

time effectively to complete tasks and assignments within the given deadlines.
This skill is crucial in a professional setting, where timely delivery of projects is
essential.
• Collaboration: Working in a team environment, I learned the importance of
communication and collaboration. This included discussing ideas with peers,
seeking feedback, and integrating suggestions to improve the quality of the final
ou

Department of Computer Science & Engineering 39

 210860131019 Summer Internship (3170001)

Chapter 4: Conclusion

The 15-day internship at IT Idol Technologies was a transformative journey that

strengthened my web development skills. Starting with HTML and CSS, I learned to
structure and style responsive web pages using techniques like Flexbox and Grid.
Moving on to JavaScript, I enhanced my understanding of programming fundamentals
and problem-solving, which honed my logical thinking. The highlight was diving into
React.js, where I gained hands-on experience with components, state management, and
routing to create dynamic, scalable applications. Practical tasks like form validation and
data handling solidified my understanding of web security. Alongside technical growth,
I developed soft skills like time management and teamwork, preparing me for real-world
project environments.

Department of Computer Science & Engineering 40