Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
1K views

React Internship Report

Day 1: The intern discussed websites, HTML, common tags like <head>, <title>, <h1-6>, and <p>. Day 2: They learned about CSS, its types (inline, internal, external), selectors like id, class, tag names, and properties like margin, padding, width, height. They designed a card with image, title, content, and button using HTML and CSS. Day 3: They discussed more CSS properties like margin, padding, width, height. They designed another card with these properties. Day 4: They learned about the float property and designed two cards side-by-side using float. They also created a navigation bar using float.

Uploaded by

Annonymous
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

React Internship Report

Day 1: The intern discussed websites, HTML, common tags like <head>, <title>, <h1-6>, and <p>. Day 2: They learned about CSS, its types (inline, internal, external), selectors like id, class, tag names, and properties like margin, padding, width, height. They designed a card with image, title, content, and button using HTML and CSS. Day 3: They discussed more CSS properties like margin, padding, width, height. They designed another card with these properties. Day 4: They learned about the float property and designed two cards side-by-side using float. They also created a navigation bar using float.

Uploaded by

Annonymous
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 65

➢ Day 1

Today we had discussed about the workflow of the whole


internship, what is a website?, introduction to html.
What is a website?
A website is a collection of web pages and related content that is
identified by a common domain name and published on at least one web
server.
Any website contains three:
1. Frontend → Design or the structure of website
a. Languages used for frontend development → HTML, Css,
Php, Bootstrap, React, Django, Tailwind css, Material Ui
2. Backend → Functionality that the Website provides
a. Languages used for backend development → php, python,
java, javascript, nodejs
3. Database → For storing the data in organized manner
a. Mostly used databases → mysql, oracle, mariadb, mongodb,
firebase
Introduction to HTML
▪ H → Hyper
▪ T → Text
▪ M → Markup
▪ L → Language
HTML is divide in two:
1. HyperText → Basic meaning of HyperText is “Text within Text”.
2. MarkupLanguage → Basic meaning of MarkupLanguage is
“Formatted Text”.

1|Page
➔ We had also discussed about the most commonly used tags in html
for web development and that tags are as follows:
1. Tags used in <head>…</head>
a. <title>…</title>
b. <style>…</style>
c. <script>…</script>
d. <link>…</link>
2. Heading tags
a. <h1>…</h1>
b. <h2>…</h2>
c. <h3>…</h3>
d. <h4>…</h4>
e. <h5>…</h5>
f. <h6>…</h6>
3. Paragraph Tag → <p>...</p>
4. Preformatted Tag → <pre>…</pre>
5. Blockquote Tag → <blockquote>…</blockquote>
6. Division Tag → <div>…</div>
Etc…

2|Page
➢ Day 2
Basic introduction to CSS
Today we had discussed about CSS, it’s types, selectors in CSS
and the basic properties of CSS
Introduction to CSS
▪ C → Cascading
▪ S → Style
▪ S → Sheets
→CSS is basically used to style and layout the webpages and it can be
used by three ways:
1. Inline CSS
2. Internal CSS
3. External CSS
1.Inline CSS: Inline CSS is used by using style attribute of the HTML
elements.
2.Internal CSS: Internal CSS is used within the <style> element occurring
between the <head> element.
→It is mostly used only for one-page HTML website.
3.External CSS: External CSS is used by using the <link> element to link the
External CSS file.
→The External CSS is generally used when you want to make changes on multiple
pages.
❖ CSS Selectors:
1. Id: Used for unique content
2. Class: Used for multiple element styling
3. Tag name: Used for same tag names
4. Universal: Used for every element of the page
5. Group: Used for two or more element’s styling

3|Page
➢ Day 3
Today we had discussed about some CSS Properties like margin,
padding, width, height and a task is given to us to perform.

• Margin: The CSS margin property is used to create space around


elements, outside of any defined borders.
• Padding: The CSS padding property is used to generate space around an
element’s content, inside of any defined borders.
• Width: The CSS width property is used to set the width of the content
area of an element.
• Height: The CSS height property defines specifies the content height of
the boxes and accepts any of the length values.

➔ Task 1: Aim: Design a card using HTML and CSS which


contains a picture, a title of card and some content with a button.

• Code:
<html>
<head>
<title>Document</title>
<style>
.container{
width: 300px;
border: 5px;
border: 5px solid black;
border-radius: 30px;
}
img{
width: 300px;

4|Page
height: 200px;
border-radius: 25px 25px 0px 0px;
}
.content{
text-align: center;
margin: 10px;
}
h4{
text-align: center;
}
p{
text-align: left;
margin: 10px;
}
</style>
</head>
<body>
<center>
<div class="container">
<img src="IMG_20230721_123042.jpg" alt="image">
<div class="content">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit ex
accusantium sit nisi ab perspiciatis!</p>
<button>Go Somewhere</button>
</div>
</div>
</center>
</body>
</html>

5|Page
• Output:

6|Page
➢ Day 4
Today we had discussed about the float property of CSS and some
tasks are given to us to perform.

• Float Property:
The CSS float property controls the positioning and formatting of content
on the page.
→ Its most common use is to wrap text around images.
→ However, you can use the float property to wrap any inline elements around
a defined HTML element, including lists, paragraphs, divs, spans, tables,
iframes, and blockquotes.

➔ Task 1: Aim: Design two cards using HTML and CSS that are
side by side of each other and which contains an image and some content.
• Code:
<html lang="en">
<head>
<title>Document</title>
<style>
div{
width: 430px;
margin: 20px;
border-radius: 30px;
border: 5px solid black;
float: left;
}
img{
width: 430px;
height: 120px;

7|Page
border-radius: 25px 25px 0px 0px;
}
h3{
text-align: center;
margin:20px;
}
p{
margin: 20px;
}
</style>
</head>
<body>
<div>
<img src="IMG_20230721_123042.jpg" alt="image">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus
asperiores saepe facere nisi! Similique, deleniti?</p>
</div>
<div>
<img src="IMG_20230721_123042.jpg" alt="image">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus
asperiores saepe facere nisi! Similique, deleniti?</p>
</div>
</body>
</html>

8|Page
• Output:

➔ Task 2: Aim: Design a navigation bar using HTML and


CSS.
• Code:
<html lang="en">
<head>
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
div{
height:60px;
background-color: black;
color:white;
}
ul{
list-style-type: none;
}
.logo{
margin: 10px 20px 0px 25px;
}
li{

9|Page
float:left;
margin:20px 50px;
}
img{
border-radius: 50%;
}

</style>
</head>
<body>
<div>
<ul>
<li class="logo"><img src="IMG_20230721_123042.jpg" alt="image"
width="40px" height="40px"></li>
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Login</li>
</ul>
</div>
</body>
</html>
• Output:

10 | P a g e
➢ Day 5
Today we had discussed about the position property of CSS and
some tasks are given to us to perform using the position property.

• Position Property:
The CSS position property defines the position of an element in a
document.
→This property works with the left, right, top, bottom and z-index
properties to determine the final position of an element on a page.

➢ Task 1: Aim: Create a card without using a background image but


it contains an image as background.
• Code: (File name: task.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="5style.css">
</head>
<body>
<div class="main">
<div class="image">
<img src="IMG_20210815_090736.jpg" alt="image">
</div>
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Doloremque, maiores fuga natus iure blanditiis aperiam.</p>
</div>
</div>

11 | P a g e
</body>
</html>
(File name: 5style.css)
*{
margin: 0;
padding: 0;
}
.main{
border: 2px solid black;
border-radius: 10px;
position: relative;
width: 250px;
height: 300px;
color: white;
margin: 40px;
}
.image{
position: absolute;
}
img{
border-radius: 10px;
width: 250px;
height: 300px;
}
.content{
position: absolute;
bottom: 20px;
left: 10px;
}
h3{
margin: 0px 0px 20px 0px;
}

12 | P a g e
• Output:

➢ Task 2: Aim: Create 3 cards with the circle image in the center of the
card and some paragraph and a title of a card and 3 cards should be
floating in the left.
• Code: (File name: task.html)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="6style.css">
<title>Document</title>
</head>
<body>
<div>
<img src="IMG_20230721_123042.jpg" alt="image">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
tempore vel, soluta dolore ullam aperiam delectus provident vero perspiciatis
illo?</p>

13 | P a g e
</div>
<div>
<img src="IMG_20230721_123042.jpg" alt="image">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
tempore vel, soluta dolore ullam aperiam delectus provident vero perspiciatis
illo?</p>
</div>
<div>
<img src="IMG_20230721_123042.jpg" alt="image">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
tempore vel, soluta dolore ullam aperiam delectus provident vero perspiciatis
illo?</p>
</div>
</body>
</html>
(File name: 6style.css)
*{
margin: 0;
padding:0;
}
div{
width: 250px;
height: 250px;
border: 2px solid black;
border-radius: 10px;
margin-top: 100px;
margin-left: 52px;
float: left;
position: relative;
}

14 | P a g e
img{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
left: 80px;
top: -50px;
}
h3{
position: absolute;
top: 70px;
left: 65px;
}
p{
text-align: center;
position: absolute;
top: 100px;
}
• Output:

15 | P a g e
➢ Day 6
Today we have discussed about the hover property, display: flex
property and some tasks are given to use to perform.

• Flex Property:
The flex property is used to set the length of flexible items. The flex
property is much more responsive and mobile-friendly.
→It is easy to position child elements and the container.

• Hover Property:
The :hover selector is used to select elements when you mouse over them.

➢ Task 1: Aim: Create a navigation bar such that when you hover on
any item of navigation bar it will open a dropdown list and when you
hover on any list items it will also open a dropdown list on the left or
right side.
• Code: (File name: task.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="3style.css">
</head>
<body>
<div>
<ul>
<li class="logo"><img src="IMG_20230721_123042.jpg"
alt="image" width="40px" height="40px"></li>
<li>Home</li>
<li>About</li>
16 | P a g e
<li class="mainservice">Services
<div class="childservice">
<ul>
<li class="service1">Service1
<div class="childservice1">
<ul>
<li>service1-a</li>
<li>service1-b</li>
<li>service1-c</li>
</ul>
</div>
</li>
<li>Service2</li>
<li>Service3</li>
</ul>
</div>
</li>
<li>Login</li>
</ul>
</div>
</body>
</html>
(File name: 3style.css)
*{
margin:0px;
padding:0px;
}
div{
height: 60px;
background-color: black;
color: white;
}

17 | P a g e
ul{
list-style-type: none;
}
.logo{
margin: 5px 10px;
}
li{
float: left;
margin: 10px 50px;
}
img{
border-radius: 50%;
}
.childservice{
background-color: black;
color: white;
width: 60px;
text-align: center;
display: none;
clear: left;
height: 80px;
}
.childservice li{
margin: 5px 0px 0px 0px;
}
.mainservice:hover > .childservice{
display: block;
}
.service1{
position: relative;
}
.childservice1 li{

18 | P a g e
border-bottom: 1px solid black;
}
.childservice1{
height: auto;
background-color: white;
color: black;
display: none;
position: absolute;
top: 0;
left: 60px;
width: 70px;
border: 1px solid black;
}
.service1:hover > .childservice1{
display: block;
}
• Output:

➢ Task 2: Aim: Create a navigation bar using the display: flex


property which contains an image and some navigation items.
• Code: (File name: task.html)
<!DOCTYPE html>
<html lang="en">
<head>
19 | P a g e
<title>Document</title>
<link rel="stylesheet" href="8style.css">
</head>
<body>
<div class="main">
<div class="image">
<img src="IMG_20230721_123042.jpg" alt="image" width="40px"
height="40px">
</div>
<div class="nav">
<div>Home</div>
<div>About</div>
<div>Services</div>
<div>Login</div>
</div>
</div>
</body>
</html>
(File name: 8style.css)
*{
margin: 0;
padding: 0;
}
img{
border-radius: 50%;
}
.main{
display: flex;
justify-content: space-around;
background-color: black;
color: white;
}

20 | P a g e
.nav{
display: flex;
justify-content: space-between;
width: 30%;
}
• Output:

21 | P a g e
➢ Day 7
Today we have discussed about flex-direction and media query
concepts and a task is given to us to perform.

• Flex-direction:
Flex direction in CSS is a sub-property of the flexible box layout module.
→It establishes the main axis, thus defining the direction flex items are ordered of
placed ion the flex container.
• Media query:
Media queries allow you to apply CSS styles depending on a device’s
general type or other characteristics such as screen resolution or browser
viewport width.

➢ Task 1: Aim: Create a webpage which is similar to the zomato’s


website and apply the media query on it.
• Code: (File name: index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="navbar">
<ul class="getapp"><li>Get the App</li></ul>

22 | P a g e
<ul class="nav">
<li>Investor Relations</li>
<li>Add restaurant</li>
<li>Log in</li>
<li>Sign up</li>
</ul>
</div>
<div class="content">
<img src="zomato1.avif" alt="Image" height="60px"
width="300px">
<h1>Discover the best food & drinks in Ahmedabad</h1>
</div>
</div>
<div class="new">
<div class="cards">
<div class="card">
<img src="zomatohome.jpg" alt="image">
<div class="cardcontent">
<p class="title">Order Online</p>
<p class="subtitle">Stay home and order to your doortep</p>
</div>
</div>
<div class="card">
<img src="zomatohome.jpg" alt="image">
<div class="cardcontent">
<p class="title">Dining</p>
<p class="subtitle">View the city's favourite dining venues</p>
</div>
</div>
</div><br><br><br><br>
<div class="cards1">
<h1>Collections</h1>

23 | P a g e
<p>Explore curated lists of top restaurants, cafes, pubs, and bars in
Ahmedabad, based on trends</p><br><br>
<div class="dflex">
<div class="card1 c1">
<img src="zomatohome.jpg" alt="image">
<h3>7 Picturesque Cafes</h3>
<p>6 Places</p>
</div>
<div class="card1 c2">
<img src="zomatohome.jpg" alt="image">
<h3>Winners of Zomato Restaurant Awards</h3>
<p>8 Places</p>
</div>
<div class="card1 c3">
<img src="zomatohome.jpg" alt="image">
<h3>8 Newly Opened Restaurants</h3>
<p>8 Places</p>
</div>
<div class="card1 c4">
<img src="zomatohome.jpg" alt="image">
<h3>7 Great Buffets</h3>
<p>7 Places</p>
</div>
</div>
</div>
</div>
</body>
</html>
(File name: style.css)
*{
margin: 0;
padding: 0;

24 | P a g e
font-family: "Okra", Helvetica, sans-serif;
font-weight: normal;
}
.main{
background-image: url("zomatohome.avif");
background-position: center;
color: white;
height: 419px;
}
ul{
list-style-type: none;
}
.getapp{
font-size: 14px;
padding: 0px 0px 10px;
}
.navbar{
display: flex;
justify-content: space-between;
position: relative;
margin: 0px auto;
margin: 0px 110px 0px 110px;
padding: 17px 0;
}
.nav{
display: flex;
width: 480px;
justify-content: space-between;
font-size: 18px;
padding: 8px;
}
.content, .content h1{

25 | P a g e
margin: 30px;
text-align: center;
}
.cards{
display: flex;
justify-content: space-evenly;
margin-top: 40px;
}
.card{
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
width: 540px;
height: 240px;
}
.card img{
width: 100%;
height: 160px;
}
.cardcontent{
padding: 10px 20px 16px;
}
.title{
font-size: 20px;
}
.subtitle{
font-size: 16px;
font-weight: lighter;
}
.title, .subtitle{
padding: 5px;
}

26 | P a g e
.cards1{
display: flex;
flex-direction: column;
}
.cards1 h1{
font-size: 36px;
}
.cards1 p{
font-size: 18px;
margin-top: 10px;
font-weight: lighter;
}
.new{
margin: 0px 80px 0px 80px;
}
.card1{
border: 2px solid black;
border-radius: 10px;
width: 267px;
height: 320px;
position: relative;
color: white;
overflow: hidden;
float: left;
margin-right: 9px;
}
.card1 img{
width: 100%;
height: 100%;
position: absolute;
}
.card1 h3 , .card1 p{

27 | P a g e
position: absolute;
bottom: 10px;
padding: 0px 16px;
}
.card1 p{
font-size: 14px;
}
.card1 h3{
font-size: 18px;
margin: 0px 0px 20px 0px;
font-weight: normal;
}
/*Media Query*/
@media only screen and (max-width:768px){
.cards{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.card{
margin: 10px 0px;
width: 90%;
}
.card img{
width: 100%;
}
.navbar, .nav{
display: flex;
flex-direction: column;
}
.main{

28 | P a g e
width: 100%;
}
.getapp{
display: none;
}
.c3{
clear: left;
}
.c3, .c4{
margin: 10px 9px 0px 0px;
}
}
• Output: (Responsive)

29 | P a g e
30 | P a g e
➢ Day 8
Today we have discussed about Bootstrap basics and a task is
given to us to perform.

• What is Bootstrap?
→Bootstrap is the most popular CSS Framework for developing responsive and
mobile-first websites.

• How to use Bootstrap?


We can use Bootstrap by two ways:
1. By using the online CDN.
2. By downloading the CSS and JQuery and JS Files.

➢ Task: Aim: Create Carousel using bootstrap in which the image is


circle and on the left side and the description is on the right side of the
Carousel.
• Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.cs
s" integrity="sha384-

31 | P a g e
xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD6
9Npy4HI+N" crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+O
rCXaRkfj" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.m
in.js" integrity="sha384-
Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9d
O5Vg3Q9ct" crossorigin="anonymous"></script>
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-
ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row bg-dark" style="height:400px;">
<img src="https://picsum.photos/200/300" class="d-block w-50
rounded-circle col-6 h-100" alt="IMG_20210815_090736.jpg">
<div class="col-6 d-flex flex-column justify-content-center align-
middle h-100">
<p class="text-light" style="font-size: 25px;">Lorem ipsum
dolor sit amet consectetur adipisicing elit. Consequuntur deserunt modi

32 | P a g e
doloremque necessitatibus similique enim molestias libero unde qui, veritatis
illo ab. Eveniet, alias totam!</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row bg-dark" style="height:400px;">
<img src="https://picsum.photos/200" class="d-block w-50
rounded-circle col-6 h-100" alt="IMG_20210815_090736.jpg">
<div class="col-6 d-flex flex-column justify-content-center align-
middle h-100">
<p class="text-light" style="font-size: 25px;">Lorem ipsum
dolor sit amet consectetur adipisicing elit. Consequuntur deserunt modi
doloremque necessitatibus similique enim molestias libero unde qui, veritatis
illo ab. Eveniet, alias totam!</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row bg-dark" style="height:400px;">
<img src="https://picsum.photos/id/237/200/300" class="d-block
w-50 rounded-circle col-6 h-100" alt="IMG_20210815_090736.jpg">
<div class="col-6 d-flex flex-column justify-content-center align-
middle h-100">
<p class="text-light" style="font-size: 25px;">Lorem ipsum
dolor sit amet consectetur adipisicing elit. Consequuntur deserunt modi
doloremque necessitatibus similique enim molestias libero unde qui, veritatis
illo ab. Eveniet, alias totam!</p>
</div>
</div>
</div>
</div>

33 | P a g e
<button class="carousel-control-prev" type="button" data-
target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-
target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</body>
</html>
• Output:

34 | P a g e
➢ Day 9
Today we have discussed about grid system and difference
between container and container-fluid concepts and a task is given to us
to perform.

• Grid System in Bootstrap: Bootstrap’s grid system uses a series of


containers, rows and columns to layout and align content.
→It’s built with flexbox and is fully responsive.

• Container: Containers are the most basic layout element in Bootstrap and
are required when using default grid system.
→ Containers are used to contain, pad, and (sometimes) center the content
within them. While containers can be nested, most layouts do not require a
nested container.
→Bootstrap comes with three different containers:

1) .container, which sets a max-width at each responsive breakpoint


2) .container-fluid, which is width: 100% at all breakpoints
3) .container-{breakpoint}, which is width: 100% until the specified
breakpoint

→The table below illustrates how each container’s max-width compares to the
original .container and .container-fluid across each breakpoint.

Extra small Small Medium Large Extra large


<576px ≥576px ≥768px ≥992px ≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

35 | P a g e
➢ Task: Aim: Create a clone of a Zomato.com using
bootstrap and the website has to be responsive.

zomatobootstrap.zip

36 | P a g e
➢ Day 10
Today we have discussed about basics of JavaScript and some core
JS concepts like variable, print statements (console.log()), etc.

• What is JavaScript?
Java-Script is a high-level programming language means it is an English like
language which is easy to understand by the humans and it is interpreted language.

• Features of JavaScript:
1) High-level language: JavaScript is a high-level programming language,
meaning it provides a more abstract and human-readable syntax, making it
easier for developers to write and understand code.
2) Interpreted language: JavaScript is an interpreted language, which
means that it doesn't require a separate compilation step. Instead, the code
is executed directly by the web browser or a JavaScript engine.
3) Dynamic typing: JavaScript uses dynamic typing, allowing variables to
hold values of any data type. The data type of a variable can change at
runtime.
4) Object-oriented programming (OOP) support: JavaScript supports
object-oriented programming concepts like classes, objects, inheritance,
and polymorphism.
5) Functions as first-class citizens: Functions in JavaScript are treated as
first-class citizens, meaning they can be assigned to variables, passed as
arguments to other functions, and returned from functions.
6) Event-driven programming: JavaScript is well-suited for event-driven
programming, allowing developers to respond to user interactions (e.g.,
clicks, key presses) and other events (e.g., timers, HTTP requests).
7) Asynchronous programming: JavaScript supports asynchronous
programming through mechanisms like callbacks, promises, and

37 | P a g e
async/await, which are crucial for handling time-consuming operations
without blocking the main thread.
8) Cross-platform compatibility: JavaScript is supported by all major web
browsers, making it a cross-platform language for web development.
9) DOM manipulation: JavaScript can interact with the Document Object
Model (DOM), allowing developers to dynamically modify the content
and structure of web pages, enabling interactive and responsive user
interfaces.
10) Libraries and frameworks: JavaScript has an extensive ecosystem of
libraries and frameworks, such as React, Angular, and Vue.js, which
simplify and enhance web development tasks.

• Applications of JavaScript:
1) Web Development: JavaScript is primarily used for front-end web
development to create dynamic and interactive user interfaces. It allows
developers to manipulate the DOM, handle user events, and create
responsive web pages.
2) Web Applications: JavaScript is the backbone of many modern web
applications, enabling functionalities like form validation, user
authentication, and real-time updates.
3) Single-Page Applications (SPAs): SPAs are web applications that load a
single HTML page and dynamically update the content as users interact
with the application. JavaScript frameworks and libraries like React,
Angular, and Vue.js are widely used for building SPAs.
4) Browser Extensions and Add-ons: JavaScript is commonly used to
develop browser extensions and add-ons, which enhance the functionality
of web browsers.
5) Mobile App Development: With frameworks like React Native and Ionic,
JavaScript can be used to build cross-platform mobile applications for iOS
and Android devices.

38 | P a g e
6) Game Development: JavaScript can be utilized to create simple browser-
based games and interactive animations using HTML5 canvas and other
game development libraries like Phaser and Three.js.
7) Server-side Development: Node.js is a popular runtime environment that
allows developers to use JavaScript for server-side programming. It
enables building scalable, real-time, and event-driven server applications.
8) Desktop Applications: Technologies like Electron leverage JavaScript to
build desktop applications using web technologies, which can run on
various platforms like Windows, macOS, and Linux.
9) Data Visualization: JavaScript libraries like D3.js enable developers to
create interactive and visually appealing data visualizations and charts for
displaying complex data sets.
10) Internet of Things (IoT): JavaScript is used in IoT development,
particularly in the context of IoT platforms and applications that require
client-side interactions and real-time data processing.
11)
• What is Variable? and how to define a variable?
A variable is a named container used to store the data.
→To define a variable the ‘var’ keyword used in JavaScript.
▪ Syntax:
var variable_name = value;
▪ Example:
var name = “abc”;
• Console.log() statement in JavaScript:
▪ Syntax:
console.log(“String”, variable);
▪ Example:
var a = 5;
console.log(“value of a = ”, a);

39 | P a g e
➢ Day 11
Today we have discussed about conditional statements and loops
in JavaScript and some tasks are given to us.
• Conditional Statements:
1) If statement
2) If…else statement
3) If…else if…else statement
4) Switch case
• Looping Statements:
1) For loop
2) While loop
3) Do…while loop

➢ Task 1: Aim: Print the odd and even numbers to the given number
using for and while loop.
• Code:
<html>
<script>
var a = prompt();
var i=1;
while(i<=a){
if(i%2==0){
console.log("Even numbers: ", i);
}
i++;
}
for(var j=1; j<=a; j++){
if(j%2!=0){
console.log("Odd numbers: ", j);
}

40 | P a g e
}
</script>
</html>

• Output:

➢ Task 2: Aim: Take percentage from the user and convert it to the grade.
• Code:
<html>
<script>
var per = prompt();

if(per>=80){
console.log("A grade");
}
else if(per>=75 && per<80){
console.log("B grade");
}
else if(per>=55 && per<75){
console.log("C grade");
}
else if(per>=35 && per<55){
console.log("D grade");

41 | P a g e
}
else if(per<35){
console.log("F grade");
}
else{
console.log("invalid input");
}
</script>
</html>
• Output:

➢ Task 3: Aim: Print 10 to 1 using for and while loop.


• Code:
<html>
<script>
var j=10;
console.log("Using while");
while(j>=1){
console.log(j);
j--;

42 | P a g e
}
console.log("Using for");
for(var i=10; i>=1; i--){
console.log(i);
}
</script>
</html>
• Output:

➢ Task 4: Aim: Take a number input from the user and create a table of
that number.
• Code:
<html>
<script>
var a = prompt();
for(var i = 1; i<=10; i++){
console.log(a, "X", i, "=", (a*i));
}
</script>

43 | P a g e
</html>
• Output:

44 | P a g e
➢ Day 12
Today we have discussed about the string and array functions and
some tasks are given to use to perform.

• String Functions:
1) Length → to find the length of string.
2) Slice() → slice out the string from one position to another position.
3) Substring() → slice out the string from one position to another
position.
4) Substr() → slice out the string from one position to the given length.
5) Replace() → replace the first occurring character with the other string
or character passed in the parameter.
6) Replaceall() → replace all the characters occurring in the string with
the string or character passed in the parameter.
7) toUpperCase() → convert the String in to the upper case.
8) toLowerCase() →convert the string in to the lower case.
9) concat() → concatenate two strings.

• Array Functions:
1) Length → to find out the length of array.
2) toString() → to convert the array to the string.
3) pop() → to delete the element from the end of the array.
4) push() → to add the element at the end of the array.
5) shift() → removes the first array element and shifts all other elements
to a lower index.
6) unshift() → adds a new element to an array at the beginning and
unshifts older elements.

➢ Task 1: Aim: reverse the string.

45 | P a g e
• Code:
<html>
<script>
var a = prompt();
var len = a.length-1;
var temp = "";
for(var i=len; i>=0; i--){
temp = temp.concat(a[i]);
}
document.write(temp);
</string>
</html>
• Output:

➢ Task 2: Aim: Count the number of vowels occurring in the


string.
• Code:
<html>
<script>
var a = prompt();
var len = a.length-1;
var count = 0;

46 | P a g e
for(var i = 0; i<=len;i++){
if(a[i]=='a' || a[i]=='e' || a[i]=='i' || a[i]=='o' || a[i]=='u'){
count = count+1;
}
}
document.write("Number of vowels ouccuring in the string = ",count);
</string>
</html>
• Output:

➢ Task 3: Aim: replace the characters occurring on the even index


with *.
• Code:
<html>
<script>
var a = prompt();
var len = a.length-1;
for(var i = 0; i<=len; i++){

47 | P a g e
if(i%2==0){
a = a.replace(a[i],"*");
}
}
document.write(a);
</string>
</html>
• Output:

➢ Task 4: Aim: Print the sum of all the numbers in the array.
• Code:
<html>
<script>
var arr = [10,20,30,40];
var count = 0;
for (let i = 0; i < arr.length; i++) {
count = count+arr[i];
}
document.write(count);

48 | P a g e
</string>
</html>
• Output:

➢ Task 5: Aim: Print the longest word in the array.


• Code:
<html>
<script>
var temp = "";
var arr = ["hi", "hello", "hii", "abcdefghijasdf", "asdklf"];
for (let i = 0; i < arr.length; i++) {
if(arr[i].length>temp.length){
temp = arr[i];
}
}
document.write(temp);
</string>
</html>
• Output:

49 | P a g e
➢ Day 13
Today we have discussed about some queries and some tasks are
given us to perform.

➢ Task 1: Aim: Take a sentence input from the user and reverse
the sentence.
• Code:
<html>
<script>
var a = prompt();
var b = a.split(" ");
for(let i = b.length-1; i>=0; i--){
document.write(b[i], " ");
}
</script>
</html>
• Output:

50 | P a g e
➢ Task 2: Aim: Check if the combination of words in array are
similar for two arrays or not.
• Code:
<html>
<script>
var a1 = ["ab","cdef"];
var a2 = ["abc","def"];
var temp1 = a1.toString();
var temp2 = a2.toString();
temp1 = temp1.replace(",", "");
temp2 = temp2.replace(",", "");
if (temp1==temp2) {
document.write("True");
}
else{
document.write("False");
}
</script>
</html>
• Output:

➢ Task 3: Aim: Find out the sentence that have most number of
word from the array.
• Code:
<html>
<script>

51 | P a g e
var a = ["Lorem ipsum dolor sit.", "lorem", "Lorem, ipsum.",
"Lorem ipsum dolor sit amet."];
var arr = [];
var len = "";
for (let i = 0; i < a.length; i++) {
arr.push(a[i].split(" "));
if(arr[i].length>len.length){
len = arr[i];
}
}
var temp = len.toString();
document.write("LONGEST SENTENCE IN THE ARRAY = ",
temp.replaceAll(","," "));
</script>
</html>
• Output:

52 | P a g e
➢ Day 14
Today we have discussed about functions in java script and some
tasks are given to us to perform.

• Functions:
In JavaScript, a function is a block of reusable code that performs a
specific task or a set of tasks.
→ Functions are fundamental building blocks of JavaScript
programming and allow you to encapsulate logic, promote reusability,
and organize your code into manageable units.

➢ Task 1: Aim: combine two strings in third string such that first
string’s first character than second string’s first character than first
string’s second character and so on.
• Code:
<html>
<script>
var str1 = "abc";
var str2 = "pqrstr";
var str3 = "";
for (let i = 0; i < str1.length; i++) {
str3+=str1[i]+str2[i];
}
for (let j = str1.length; j < str2.length; j++) {
str3+=str2[j];
}
console.log(str3);
</script>
</html>
53 | P a g e
• Output:

➢ Task 2: Aim: There are 2 strings compare 1st string’s characters


with the 2nd string and print total number of occurring characters.
• Code:
<html>
<script>
var str1 = "oS";
var str2 = "kafooSnson";
var temp = 0;
for (let i = 0; i < str1.length; i++) {
for (let j = 0; j < str2.length; j++) {
if(str1[i]==str2[j]){
temp++;
}
}
}
console.log(temp);
</script>
</html>
• Output:

54 | P a g e
➢ Task 3: Aim: Create a simple numeric calculator using function
which takes 3 arguments 2 numbers and 1 operator.
• Code:
<html>
<script>
function calculator(n1, n2, sign){
switch(sign){
case '+':
console.log(n1 + n2);
break;
case '-':
console.log(n1 - n2);
break;
case '*':
console.log(n1 * n2);
break;
case '/':
console.log(n1 / n2);
break;
case '%':
console.log(n1 % n2);
break;
default:
console.log("invalid choice");
}
}
calculator(10, 20, '+');
</script>
</html>

55 | P a g e
• Output:

56 | P a g e
➢ Day 15
Today we have discussed about ES6 concepts in java script and
some tasks are given to us to perform.

➢ Let keyword: The let keyword in JavaScript is used to declare


variables with block scope.
→ The key characteristics of variables declared using let are as
follows:
1) Block Scope: Variables declared with let have scope limited to the block,
statement, or expression where they are defined. This means they are
only accessible within the nearest pair of curly braces {} that encloses the
variable declaration.
2) No Hoisting: Unlike variables declared with var, variables declared with
let are not hoisted to the top of their scope. They remain in the temporal
dead zone until the line of code where they are declared is executed. This
prevents accessing the variable before it's declared.
3) Reassignment: Variables declared with let can be reassigned new values
after their initial declaration. This makes them suitable for situations
where the variable's value might change.

➢ Const keyword: In JavaScript, the const keyword is used to


declare a variable with a constant value. Once a value is assigned
to a const variable, it cannot be changed or reassigned throughout
the rest of its scope.
→ Here are some key points about const:
1) Constant Value: Once a value is assigned to a const variable, it cannot
be changed:
2) Block Scoped: Like let, const is block-scoped, which means it is only
accessible within the block of code where it is defined:

57 | P a g e
3) Not Hoisted: const variables are not hoisted to the top of their scope like
var variables are. They are in the Temporal Dead Zone until the line of
code where they are defined is reached:
4) Immutable Reference: When using const with objects or arrays, the
reference to the object or array is constant, but the contents of the object
or array can still be modified:

➢ Arrow Function: An arrow function in JavaScript is a concise


way to write a function. It was introduced in ECMAScript 6 (ES6)
and provides a more compact syntax compared to traditional
function expressions. Arrow functions are especially useful for
writing short, inline functions and for preserving the lexical value
of this.
→Here's the basic syntax of an arrow function:
const functionName = (parameter1, parameter2) => {
// function body
};

➢ The … operator: The ... operator, known as the "spread"


operator or the "rest" operator, has different uses in JavaScript
depending on the context in which it's used.

→Spread Operator:
The spread operator is used to spread elements from an iterable (like an
array or a string) into individual elements. It can be used in various situations to
make copies of arrays, concatenate arrays, or to pass elements as arguments to
functions.
→Example:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

58 | P a g e
const combinedArray = [...array1, ...array2]; // Combining arrays
const copyOfArray1 = [...array1]; // Creating a copy of an array

➢ For of loop: The for...of loop is a type of loop in JavaScript that


simplifies iterating over iterable objects such as arrays, strings,
maps, sets, and more. It was introduced in ECMAScript 6 (ES6)
and provides a more concise and readable way to iterate over the
elements of an iterable compared to traditional loops like for or
forEach.
→ Here's the basic syntax of the for...of loop:
for (const element of iterable) {

// code to be executed for each element

➢ Array Map method: Mapping in JavaScript usually refers to


the process of transforming elements of one array (or iterable) into
a new array by applying a specified function to each element. This
is often achieved using the .map() method, which is available for
arrays.
→ The .map() method takes a callback function as an argument. This
callback function is applied to each element of the array, and the
results are collected into a new array. The original array remains
unchanged.
→Here's the basic syntax of the .map() method:
const newArray = originalArray.map((element, index, array) => {

// return transformed value

59 | P a g e
});

✓ element: The current element being processed.


✓ index: The index of the current element being processed.
✓ array: The array on which .map() was called.

➢ Array filter: The filter() method is a built-in JavaScript array


method that allows you to create a new array containing all
elements from the original array that satisfy a certain condition. It's
used to filter out elements based on a specified criteria, and the
resulting array only contains elements that passed the filter.
→ Here's the basic syntax of the filter() method:
const newArray = originalArray.filter((element, index, array) => {

// Return true to include element in new array, false otherwise

});

✓ element: The current element being processed.


✓ index: The index of the current element being processed.
✓ array: The array on which .filter() was called.

➢ Task 1: Aim: Write a script in which there is one array check


each array element’s first and last letter is vowel and print number
of strings whose first and last letter is vowel.
• Code:
<html>
<script>
var a = ["how", "are", "abce", "ufls"];
var count = a.filter((item) => {

60 | P a g e
return ((item[0]=="a" || item[0]=="e" ||item[0]=="o"
||item[0]=="i" ||item[0]=="u")&&(item[item.length-1]=="a" ||
item[item.length-1]=="e" ||item[item.length-1]=="o"
||item[item.length-1]=="i" ||item[item.length-1]=="u"));
}).length;
console.log(count);
</script>
</html>
• Output:

➢ Task 2: Aim: Write a script in which we have a string which has


even number of characters. Divide the string in half and check if
both parts contain same number of vowels or not.
• Code:
<html>
<script>
var a = "aser";
var temp1 = "";
var temp2 = "";
var count1 = 0;
var count2 = 0;
temp1+=a.slice(0, a.length/2);
temp2+=a.slice(a.length/2, a.length);
for (const i of temp1) {
if(i=="a" || i=="e" || i=="i" || i=="o" || i=="u"){
count1++;

61 | P a g e
}
}
for (const i of temp2) {
if(i=="a" || i=="e" || i=="i" || i=="o" || i=="u"){
count2++;
}
}
if(count1==count2){
console.log("true");
}
else{
console.log("false")
}
</script>
</html>
• Output:

62 | P a g e
➢ Day 16
Today we understood what is React JS and what are the
features of it and how to setup the workspace for React JS.
• What is React JS?
ReactJS, commonly referred to as React, is an open-source
JavaScript library used for building user interfaces (UIs) and user
interface components. It was developed by Facebook and later
maintained by Facebook along with a community of developers
and companies. React allows developers to create reusable UI
components and manage the state of an application efficiently.

→The main features and concepts of React include:


1) Component-Based Architecture: React allows developers to break
down the user interface into small, reusable components. Each
component encapsulates its own logic and rendering, making it easier
to manage and maintain complex UIs.
2) Virtual DOM: React utilizes a Virtual DOM (Document Object
Model) to optimize the process of updating the UI. When there are
changes in the application's state, React creates a virtual
representation of the DOM and calculates the most efficient way to
update the actual DOM, minimizing unnecessary reflows and repaints.
3) Declarative Syntax: React uses a declarative approach to describe
how the UI should look based on the current state. Developers
describe the desired UI state, and React takes care of updating the
actual UI to match that state.
4) State Management: React allows components to have their own local
state, which is used to manage data that can change over time.
Additionally, for more complex state management needs, developers
often use state management libraries like Redux or MobX.

63 | P a g e
5) JSX: JSX (JavaScript XML) is a syntax extension for JavaScript used
in React. It allows developers to write UI components using a syntax
similar to HTML within JavaScript code, making it more intuitive to
describe UI elements and their structure.
6) One-Way Data Binding: Data flows in a one-way direction in React.
Changes in the state of a component trigger a re-rendering of the
component and its children, ensuring a predictable flow of data and
reducing the likelihood of unexpected side effects.
7) Component Lifecycle Methods: React components have lifecycle
methods that developers can hook into. These methods provide
control over the different phases of a component's existence, such as
when it's created, updated, or removed from the UI.
8) Component Reusability: React's component-based architecture
promotes reusability. Developers can create a library of components
that can be easily reused across different parts of an application or
even across multiple projects.

• How to install React JS and setup workspace?


→To get started with React.js, you need to set up your development
environment. Here are the steps to install and set up React.js:
1) Node.js and npm Installation:
React.js requires Node.js and npm (Node Package Manager) to
manage dependencies and run scripts. You can download and install
Node.js from the official website: https://nodejs.org/
2) Create a New React Application:
Once you have Node.js and npm installed, you can use the create-
react-app command-line tool to create a new React application with a
basic setup. Open your terminal and run the following command:
npx create-react-app my-react-app
Replace "my-react-app" with the desired name for your application.
This command will create a new directory with the same name
containing the basic project structure and dependencies.
64 | P a g e
3) Navigate to Your Project Directory:
Move into your project directory using the terminal:
cd my-react-app
4) Start the Development Server:
Inside your project directory, you can start the development server
using the following command:
npm start

This will start the development server and open your React application in a
web browser. The development server automatically reloads the page
whenever you make changes to the code.

• Output:

65 | P a g e

You might also like