INTERNSHIP REPORT / MINI PROJECT

A report submitted in partial fulfillment of the requirements of

BACHELOR OF TECHNOLOGY
in
APPLIED COMPUTATIONAL SCIENCE AND ENGINEERING
by

Name : Ayush Maurya

Roll No: 2001920100074

Under the Supervision of

Mr. Aditya Kumar

(Duration: From 10/10/2023 to 10/11/2023)

G.L. BAJAJ INSTITUTE OF TECHNOLOGY & MANAGEMENT,

GREATER NOIDA
Affiliated to

DR. A.P.J. ABDUL KALAM TECHNICAL UNIVERSITY,

LUCKNOW

2023-2024

1
 Declaration

We hereby declare that the internship presented in this report entitled “ Web
Develoment”, in partial fulfillment of the requirement for the award of the degree of
Bachelor of Technology in Applied Computational Science & Engineering, submitted to
A.P.J. Abdul Kalam Technical University, Lucknow, is based on our own work carried out
at Department of Applied Computational Science & Engineering, G.L. Bajaj Institute of
Technology & Management, Greater Noida. The work contained in the report is true and
original to the best of our knowledge and internship work reported in this report has not
been submitted by us for award of any other degree or diploma.

Signature:
Name: Ayush Maurya
Roll No: 2001920100074

2
 CERTIFICATE

This is to certify that the “Internship” entitled “Web Development” is being done by Ayush
Maurya
(2001920100074) in partial fulfillment of the requirements for the award of the degree
of BACHELOR OF TECHNOLOGY in Computer Science Engineering for the academic
session 2023-2024. He has completed his Summer Internship/ Mini Project from”
BHARAT INTERN/ (Virtual Internship)”.

3
Internship of Certificate

4
 ACKNOWLEDGEMENT

Firstly, I would like to thank BHARAT INTERN, an virtual internship

platform for giving me the opportunity to do an internship within the
organization.

I also would like to acknowledge all the people that worked along with
me and Mr. Divynath Chauhan and my colleague so with their patience and
openness they created an enjoyable learning environment. It is indeed with
a great sense of pleasure and immense sense of gratitude that I
acknowledge the help of these individuals.
I, an intern of “Web Developer”, with immense pleasure and
commitment would like to present the internship work. The implementation
of all the tasks has given me wide opportunities to think, implement and
interact with various aspects of the new emerging technologies in the area
of web development.

I pay special thanks to the Dean of the department Prof.(Dr.) Naresh Kumar
for his constructive criticism throughout my internship.

I would like to thank Prof. Rajiv Kumar, Internship coordinator for his
support and
advise to get and complete internship in above said organization.

I am extremely grateful to my department staff members and friends

who helped me in successful completion of this internship.

Name: Ayush Maurya

Roll No. 2001920100074

5
 Internship Feedback Form

Student Name: Ayush Maurya Company Name: Bharat Intern

Contact Number:8738893615 Title: Web Development
Duration of Internship: 10/10/2023 to 10/11/2023 Email:
Summary of student’s activities and responsibilities :

Excellent Above Average Below

Performance Areas Average Average
Basic Engineering Knowledge √

Problem Analysis √

Design/Development Skills √
Solving complex problems using research-based √
techniques
Familiarity with Modern Tools √
Engineer and Society √
Awareness on Environment and Sustainability √
Professional Ethics for Engineering Practice √
Individual and Teamwork √
√
Communication on complex engineering activities.
Project Management in multidisciplinary environments √
Life-Long Learning √
Use Problem solving skill to develop efficient algorithmic solution √
Develop a solution in the area for AI, Data Analytics, Computer √
Vision and IoT etc.
Based on the above observations, we put forward few suggestions regarding this internship program:

Supervisor’s Signature:
Name:
Designation:
Official Email_Id…

6
TABLE OF CONTENT

Declaration.................................................................................................. (ii)
Certificate ................................................................................................................. (iii)
Acknowledgement .......................................................................................................... (iv)
Feedback ................................................................................................................. (v)
Table of Content.................................................................................................................
(vi)
List of Figures ……………………………………………………………………… (viii) List of Tables
………………………………………………………………………. (ix)

Chapter 1. Introduction .......................................................................................... Pg. No.

1.1 Background……………………...............................................................
1.2 Objective………………………………………………………………..
1.3 Area of focus……………………………………………………………
Chapter 2. Motivation/Problem Pg.No
Statement.................................................................
2.1 Introduction …………………………………………………………..
2.2 Existing System....................................................................................
2.3

Chapter 3. Plan of work ………………………………………………. Pg.No

3.1 Tools and Technology used
3.2

Chapter 4. Methodology………….. …............................................................ Pg.No

4.1
4.2

Chapter 5. Result & Discussion Pg.No

………….…............................................................
5.1. Discussion

Chapter 6. Conclusion & Future Scope

Pg.No
………………………..........................................
6.1. Conclusion

6.2. Future Scopes

7
 LIST OF FIGURES

Page No.
Figure 1.1 Pg.No
Figure 1.2 Pg.No
Figure 2.1 Pg.No
Figure 2.2 Pg.No

8
 Introduction
The introduction section of the Summer Internship Report on HTML, CSS, and
JavaScript Responsive Website sets the context for the report and provides an
overview of the internship project. It aims to give readers a clear understanding
of the background and objectives of the internship.
Projects completed under the internship program
1. Quiz Application
2. Temperature Converter

1.1 Background

During my internship as a web developer at Bharat Intern, I had the opportunity to

work on various exciting projects and expand my knowledge and skills in web
development. This report presents a comprehensive overview of my internship
experience, the tasks I undertook, and the technologies I utilized.

1.2 Objectives

The primary objectives of my internship were to gain hands-on experience in

HTML, CSS, and JavaScript, and to apply these skills to develop functional and
visually appealing web applications. Additionally, I aimed to learn the basics of
Flutter, a popular framework for building mobile applications, and explore its
potential for cross-platform development.

1.3 Area of Focus

Throughout the internship, I focused on three main areas:

a) Front-end Development: Creating layouts using HTML, and CSS, and

implementing interactive components with JavaScript.

b) Web Development: Understanding the flow of projects and working with

back-end technologies to handle data and server-side functionality.

c) Mobile App Development: Exploring Flutter and setting up a development

environment for future projects.

9
 sYSTEM REQUIREMENTS SPECIFICATIONS
The software requirement specification can produce at the culmination of the
analysis task. The function and performance allocated to software as part of
system engineering are refined by established a complete information
description, a detailed functional description, a representation of system behavior,
and indication of performance and design constrain, appropriate validate criteria,
and other information pertinent to requirements.

Software requirements:
Operating System: Windows
Coding Language: HTML, CSS, JavaScript
Code Editor : VS Code

Hardware Requirements:
Processor : Intel core i3
Memory : 8GB RAM
Hard Disk : 1TB

Codes
Codes used in making of project while internship

.1. Quiz Application Codes

.1.1. HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

10
 <link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
</div>
</div>
</body>
</html>

.1.2. CSS Code

*, *::before, *::after { box-

sizing: border-box;
font-family: Gotham Rounded;
}

:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}

body {
--hue: var(--hue-neutral); padding: 0;
margin: 0; display: flex; width: 100vw;
height: 100vh; justify-content: center;
align-items: center; background-color:
hsl(var(--hue), 100%, 20%);
}

11
 body.correct {
--hue: var(--hue-correct);
}

body.wrong { --hue:
var(--hue-wrong);
}

.container { width:
800px; max-width:
80%; background-color:
white; border-radius:
5px; padding: 10px;
box-shadow: 0 0 10px 2px;
}

.btn-grid { display: grid; grid-

template-columns: repeat(2, auto);
gap: 10px;
margin: 20px
0; }

.btn {
--hue: var(--hue-neutral); border: 1px
solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}

.btn:hover { border
-color: black; }

.btn.correct {
--hue: var(--hue-
correct); color: black; }

.btn.wrong {
--hue: var(--hue-wrong);
}

.start-btn, .next-btn { font-

12
size: 1.5rem; font-weight:
bold;
padding: 10px 20px;
}

.controls { display:
flex; justify-content:
center; align-items:
center; }
.hide
{ display:
none; }

.1.3. JS Code

const startButton = document.getElementById('start-btn') const nextButton

= document.getElementById('next-btn') const questionContainerElement =
document.getElementById('question-container') const questionElement =
document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener('click',
startGame)
nextButton.addEventListener('click', () =>
{ currentQuestionIndex++
setNextQuestion()
})

function startGame() {
startButton.classList.add('hide') shuffledQuestions =
questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}

function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}

function showQuestion(question)
{ questionElement.innerText =
question.question
13
question.answers.forEach(answer =>
{ const button =
document.createElement('button')
button.innerText = answer.text
button.classList.add('btn') if
(answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}

function resetState() { clearStatusClass(document.body)

nextButton.classList.add('hide') while
(answerButtonsElement.firstChild)
{ answerButtonsElement.removeChild(answerButtonsElement.fir
stChild)
}
}

function selectAnswer(e) { const

selectedButton = e.target const correct =
selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex + 1)
{ nextButton.classList.remove('hide')
} else {
startButton.innerText = 'Restart'

startButton.classList.remove('hide')
}
}

function setStatusClass(element,
correct) { clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}

14
function clearStatusClass(element)
{ element.classList.remove('correct')
element.classList.remove('wrong')
}

const questions = [
{
question: 'Who is known as Father of Indian Constitution?',
answers: [
{ text: 'Dr. B.R. Ambedker', correct: true },
{ text: 'Mahatma Gandhi', correct: false
} ]
},
{
question: 'Which is the heavier material of these two?',
answers: [
{ text: 'Gold', correct: true },
{ text: 'Silver', correct: true },
{ text: 'Platinum', correct: true },
{ text: 'Steel', correct: true }
]
},
{
question: 'Brain of the computer is called?',
answers: [
{ text: 'Mouse', correct: false },
{ text: 'CPU', correct: true },
{ text: 'Keyboard', correct: false },
{ text: 'Nothing', correct: false }
]
},
{
question: '1024 Kilobytes is equals to?',
answers: [
{ text: '1 Terabyte', correct: false },
{ text: '1 Megabyte', correct: true }
]
}
]

15
.2. Temperature Converter Codes

.2.1.HTML Code

const startButton = document.getElementById('start-btn') const nextButton

= document.getElementById('next-btn') const questionContainerElement =
document.getElementById('question-container') const questionElement =
document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener('click',
startGame)
nextButton.addEventListener('click', () =>
{ currentQuestionIndex++
setNextQuestion()
})

function startGame() { startButton.classList.add('hide')

shuffledQuestions = questions.sort(() => Math.random()
- .5) currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}

function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}

function showQuestion(question)
{ questionElement.innerText =
question.question
question.answers.forEach(answer =>
{ const button =
document.createElement('button')
button.innerText = answer.text
button.classList.add('btn') if
(answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})

16
}

function resetState()
{ clearStatusClass(document.body)
nextButton.classList.add('hide') while
(answerButtonsElement.firstChild)
{ answerButtonsElement.removeChild(answerBu
ttonsElement.firstChild)
}
}

function selectAnswer(e) { const

selectedButton = e.target const correct =
selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex + 1)
{ nextButton.classList.remove('hide')
} else {
startButton.innerText = 'Restart'

startButton.classList.remove('hide')
}
}

function setStatusClass(element, correct)

{ clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}

function clearStatusClass(element)
{ element.classList.remove('correct')
element.classList.remove('wrong')
}

const questions = [
{
question: 'Who is known as Father of Indian Constitution?',
answers: [
{ text: 'Dr. B.R. Ambedker', correct: true },

17
 { text: 'Mahatma Gandhi', correct: false }
]
},
{
question: 'Which is the heavier material of these two?',
answers: [
{ text: 'Gold', correct: true },
{ text: 'Silver', correct: true },
{ text: 'Platinum', correct: true },
{ text: 'Steel', correct: true }
]
},
{
question: 'Brain of the computer is called?',
answers: [
{ text: 'Mouse', correct: false },
{ text: 'CPU', correct: true },
{ text: 'Keyboard', correct: false },
{ text: 'Nothing', correct: false }
]
},
{
question: '1024 Kilobytes is equals to?',
answers: [
{ text: '1 Terabyte', correct: false },
{ text: '1 Megabyte', correct: true }
]
}
]

.2.2. CSS Code

body{ margin-
top: 60px; text-
align:center; }

h1 {
padding-bottom: 0.5rem;
}

input[type=number]
{ cursor: pointer; }

#input-

18
celsius{ background-color:
#52DDCF; font-size:
2.5rem; }

#input-
fahrenheit{ background-
color: #16BAC5; font-size:
2.5rem; }

#input-kelvin{ background-
color: #42a0d9; font-size:
2.5rem;
}

.form-padding {
padding: 2rem 1rem;
}

::-webkit-input-placeholder {
color: #FFFFFF !important;
}
::-moz-placeholder {
color: #FFFFFF !important;
}
:-ms-input-placeholder {
color: #FFFFFF !important;
}
:-moz-placeholder {
color: #FFFFFF !important;
}

footer{ padding-
top: 1.5rem; font-
size: 0.7rem; line-
height: 0.2rem;
text-align:center; }

.icons{ max-
width: 25px;
height: auto; }

.2.3. Javascript code

const celsiusInput = document.querySelector('#celsius > input');

const fahrenheitInput = document.querySelector('#fahrenheit >

19
input'); const kelvinInput = document.querySelector('#kelvin >
input');

const roundToTwoDP = (num) =>

{ return num.toFixed(2);
};

const celsiusToFaAndKe = () => { const

celsiusTemp = parseFloat(celsiusInput.value);
const fahrenheitTemp = (celsiusTemp * 1.8) +
32;
const kelvinTemp = celsiusTemp + 273.15;

fahrenheitInput.value = roundToTwoDP(fahrenheitTemp);
kelvinInput.value = roundToTwoDP(kelvinTemp);
};

const fahrenheitToCeAndKe = () => { const

fahrenheitTemp = parseFloat(fahrenheitInput.value);
const celsiusTemp = (fahrenheitTemp - 32) * (5 / 9);
const kelvinTemp = (fahrenheitTemp + 459.67) * (5 / 9);

celsiusInput.value = roundToTwoDP(celsiusTemp);
kelvinInput.value = roundToTwoDP(kelvinTemp);
};

const kelvinToCeAndFa = () => { const

kelvinTemp = parseFloat(kelvinInput.value);
const celsiusTemp = kelvinTemp - 273;
const fahrenheitTemp = 1.8 * (kelvinTemp - 273) + 32;

celsiusInput.value = roundToTwoDP(celsiusTemp);
fahrenheitInput.value = roundToTwoDP(fahrenheitTemp);
};

const main = () => {

celsiusInput.addEventListener('input', celsiusToFaAndKe);
fahrenheitInput.addEventListener('input', fahrenheitToCeAndKe);
kelvinInput.addEventListener('input', kelvinToCeAndFa);
};

main();

20
Result and Discussion
1. Discussion
During entire training session we discussed about how to analysis the project
and how to work on it as per the requirement of client.
The projects done during the internship are based on the tags of
programming language HTML & CSS.

.2. Learning Outcome

.2.1 HTML

• Basic Concept (WWW & HTTP, client server communication)

• Basic HTML (tags, element, attributes, paragraphs, headings, line
breaks, lists, table, color codes, font, text linking, email, images,
background, comments, media, charset)
• HTML Forms (input, text fields, password, checkbox, combo-box,
radio box, text areas, files, buttons)
• HTML5 feature
.2.2 CSS

• Basic CSS (selector, internal, external, inline, class, id, background,

font, text, padding, margin, border, list CSS, hovering and elements)
• Advance CSS (border-radius, opacity, cursor, layers, position,
display, float, gradient and multiple-column)
• Concept of Menu (single menu, drop-down menu)
• Template design using CSS div.

.2.3. JavaScript

• Basic JavaScript (syntax, enable, location, operators, variables,

events, alert, confirm, prompt, POP up, date, print)
• JavaScript string (strings, length, split, search, replace)

.3. Result

21
Completed two projects during the internship period
1. Quiz Application
2. Temperature Converter
Following are the screenshots of the projects done during the internship
period:

Project 1: Quiz Application

start

Fig.

Fig.

22
Project 2: Temperature Converter

Fig.

From my previous and current knowledge I've completed my internship program

with Bharat intern for a duration of 1 month which involves information about
web designing including HTML CSS Javascript bootstrap framework and jQuery
with basics and advanced level. This internet program really equipped me with
various targets which I completed on time.

23
Limitations and challenges:

During my internship as a web developer, I encountered several

limitations and faced various challenges. Some of the key ones
are as follows:

1. Browser Compatibility:

One of the significant challenges I faced while developing the

dashboards was ensuring cross-browser compatibility. Different
browsers interpret CSS and JavaScript differently, leading to
inconsistent layouts and functionalities. I had to invest extra
time in debugging and adjusting the code to make the
dashboards work seamlessly across popular browsers.

2. Mobile Responsiveness:

As more and more users access websites on mobile devices,

achieving optimal mobile responsiveness was crucial. Adapting
the dashboards to various screen sizes while maintaining the
user experience posed a considerable challenge. I had to make
use of media queries and adjust the layout and content to
ensure the dashboards looked and functioned well on both
desktop and mobile devices.

3. JavaScript Performance:

While implementing various JavaScript features, I faced

performance issues, especially with complex components like
the Carousel and Tabs. Excessive DOM manipulation and
inefficient algorithms resulted in slow loading times and laggy
user interactions. I had to optimize the code and use techniques
like lazy loading and debouncing to enhance the overall
performance.

24
 4. Time Constraints:

The internship had a fixed duration, and I had multiple tasks to

complete within that period. Balancing coursework, learning new
technologies, and working on the assigned projects was challenging. As
a result, I had to prioritize tasks and occasionally had limited time to
explore more advanced features or technologies.

5.Limited Backend Access

During the internship, I worked on vs code (code editor) at the

backend. This restricted me from fully testing the integration between
the frontend and backend components, leading to potential issues that
could only be discovered in a real-world scenario.

6. Version Compatibility:

As I worked with different libraries and frameworks, ensuring

compatibility between different versions became a challenge. Upgrading
or downgrading a library could potentially break other parts of the
project, requiring careful attention and testing.

Despite these challenges, I embraced them as opportunities for growth

and learning. Overcoming these limitations not only improved my
technical skills but also taught me valuable lessons in problem-solving

25
 Project Scope
The main objectives of the project were as follows:

1. Develop an intuitive and user-friendly dashboard interface

that allows clients to access and analyze their business data
efficiently.

2. Improve data visualization techniques to present complex

data in a visually appealing and comprehensible manner.

3. Enhance user experience through responsive design and real

-time updates.

4. Ensure the security and privacy of user data by

implementing robust authentication and data encryption
methods.

5. Deliver the project within the specified timeframe while

meeting all the requirements and quality standards.

Overall, the project aimed to provide clients with a powerful tool to

gain valuable insights into their business performance and make
data-driven decisions.

26
Conclusion
In conclusion, I can say that this internship was a great
experience. Thanks to this project, I acquired deeper knowledge
concerning my technical skills, but I also personally benefited.
Currently HTML is a common part of web applications, and it is one
of the most popular language for web designing used by professionals
worldwide. If we surf internet, we can see millions of websites
designed with HTML and CSS. I learned to live in a different
environment from the one I am used to. Indeed, I grew more
independent in work and also in everyday life. I realized that I could
do more things than I thought, like learning new things by myself.

There are huge opportunities available for the students who want
to work in this field. Many private and public organizations hire
web designer for their online work and website development. With
the rapid advent of online industry, the demand of web development
professionals is increasing, and this has created a huge job
opportunity for the aspirants in the upcoming days.

Also, an experienced person in this field can also work as a

freelancer;
there are many online companies which provide online projects
to the individuals
Future Scope

If someone has no experience in this field, finding work can be a real

challenge. A successful internship can help an individual turn an
experience into a career opportunity. So as a successful internship
some future scopes are:
• To work in IT company.
• Can work as a Software Engineer.
• Can work as a Web Designer.
• Can work as a Web Developer.
• Can work as a QA Tester.

27
REFERENCES

https://www.w3schools.com/js/js_examples.asp

https://in.000webhost.com/

https://getbootstrap.com/

Bharat Intern: https://bharatintern.live/

http://www.wikipidea.com

http://janastu.org

28