INTERNSHIP REPORT

On
Web Development
By
K. SNEHA LATHA
Regd. No.: 321910303012

LetsGrowMore
BENGALURU.
(Duration: 1st August, 2022 to 1st September, 2022)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Gandhi Institute of Technology and Management
(DEEMED TO BE A UNIVERSITY)
BENGALURU, KARNATAKA, INDIA
SESSION:2019-2023
 ACKNOWLEDGEMENT

First I would like to thank Mr  Aman Kesarwani FOUNDER, Head, of

LetsGrowMore for giving me the opportunity to do an internship within the

organization.

I also would like all the people that worked along with me with their patience

and openness to create an enjoyable working environment.

It is indeed with a great sense of pleasure and immense sense of gratitude that

I acknowledge the help of these individuals.

I would like to thank my Head of the Department Mr  Aman Kesarwani for

his constructive criticism throughout my internship.

I am extremely great full to my department staff members and friends who

helped me in successful completion of this internship.

K. SNEHA LATHA

(321910303012)
 Internship Objectives

➢ This Internship is generally thought of to be reserved for college

students looking to gain experience in a particular field. However, a
wide array of people can benefit from Training Internship in order to
receive real world experience and develop their skills.

➢ An objective for this position should emphasize the skills you already
possess in the area and your interest in learning more

➢ Internship is utilized in a number of different career fields, including

architecture, engineering, healthcare, economics, advertising and many
more.

➢ Some internships are used to allow individuals to perform scientific

research while others are specifically designed to allow people to gain
first-hand experience working.

➢ Utilizing internships is a great way to build your resume and develop

skills that can be emphasized in your resume for future jobs. When you
are applying for a Training Internship, make sure to highlight any special
skills or talents that can make you stand apart from the rest of the
applicants so that you have an improved chance of landing the position

➢ LetsGrowMore internship goal is to help others to gain personal and

professional skills in the area of Technological development. The
purpose is to provide a structure through which students may exercise
their right to freely associate in pursuit of a common purpose or goal that
enhances community at LetsGrowMore
 WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

WEEK 1:
BEGINNER LEVEL Task to create a TO DO LIST WEB APP .

WEEK 2:
INTERMEDIATE LEVEL Task to create a REGISTRATION
FORM whose data display in the same page using HTML, CSS,
JAVA
SCRIPT.

WEEK 3:
INTERMEDIATE LEVEL Task to create a CALCULATOR using
HTML, CSS, JAVA SCRIPT.

WEEK 4:
Task submission
 Requirements

Software :

● Operating system : Windows 11.

● Languages : HTML, CSS, JAVA SCRIPT

● Front-End : Visual Studio Code

● Other : GitHub
 TECHNOLOGY
ASP.NET
ASP.NET is a web development platform, which provides a programming
model, a comprehensive software infrastructure and various services required
to build robust web applications for PC, as well as mobile devices.
Overview of JavaScript
Create special effects with images that give the impression that a button is
either highlighted or depressed whenever the mouse pointer is hovered
over it.

Validate information that users enter into your web forms

Open pages in new windows, and customize the appearance of those new
windows.

Detect the capabilities of the user’s browser and alter your page’s content
appropriately.

Create custom pages “on the fly” without the need for a server-side
language like PHP. JavaScript is not Java, though if you come from a Java
background, you will notice that both languages look similar when written.
Java is a full featured and comprehensive programming language similar to
C or C++, and although JavaScript can interact with Java web applications,
the two should not be confused.

Different web browsers will run your JavaScript in different, sometimes

incompatible ways. In order to work around this, it is often necessary to
use JavaScript itself to detect the capabilities of the browser in which it
finds itself, and alter its operation depending on the result
Overview of HTML:

HTML (HyperText Markup Language) is the code that is used to structure a

web page and its content. For example, content could be structured within a
set of paragraphs, a list of bulleted points, or using images and data tables. As
the title suggests, this article will give you a basic understanding of HTML
and its functions

HTML is a markup language that defines the structure of your content.

HTML consists of a series of elements, which you use to enclose, or wrap,
different parts of the content to make it appear a certain way, or act a certain
way. The enclosing tags can make a word or image hyperlink to somewhere
else, can italicize words, can make the font bigger or smaller, and so on

The main parts of our element are as follows:

1. The opening tag: This consists of the name of the element (in this case,

p), wrapped in opening and closing angle brackets. This states where
the element begins or starts to take effect — in this case where the
paragraph begins.
2. The closing tag: This is the same as the opening tag, except that it

includes a forward slash before the element name. This states where
the element ends — in this case where the paragraph ends. Failing to
add a closing tag is one of the standard beginner errors and can lead to
strange results.
3. The content: This is the content of the element, which in this case, is

just text.
4. The element: The opening tag, the closing tag, and the content together

comprise the element.

Overview of CSS:

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

presentation of a document written in HTML or XML (including XML
dialects such as SVG, MathML or XHTML). CSS describes how elements
should be rendered on screen, on paper, in speech, or on other media.

CSS styling text

With the basics of the CSS language covered, the next CSS topic for you to
concentrate on is styling text — one of the most common things you'll do
with CSS. Here we look at text styling fundamentals, including setting font,
boldness, italics, line and letter spacing, drop shadows, and other text
features. We round off the module by looking at applying custom fonts to
your page, and styling lists and links.

CSS layout
At this point we've already looked at CSS fundamentals, how to style text,
and how to style and manipulate the boxes that your content sits inside. Now
it's time to look at how to place your boxes in the right place in relation to the
viewport, and to each other. We have covered the necessary prerequisites so
we can now dive deep into CSS layout, looking at different display settings,
modern layout tools like flexbox, CSS grid, and positioning, and some of the
legacy techniques you might still want to know about.

Use CSS to solve common problems

This module provides links to sections of content explaining how to use CSS
to solve common problems when creating a web page.
Task_1:
BEGINNER LEVEL Task to create a TO DO LIST WEB APP .
Code:
<!--html_code.html– ->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Todo List</title>
<link rel="stylesheet" href="css_code.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css_code.css">

</head>
<body>
<h1 style="position: fixed; top: 8%; width:100%; text-align: center ;font-
size: 40px;"> To Do List App</h1>

<div class="wrapper">
<div class="task-input">
<input type="text" placeholder="Add tasks...">
</div>
<div class="controls">
<div class="filters">
<span class="active" id="all">List of Tasks</span>
<span id="completed">Finished Task</span>
</div>
<button class="clear-btn">Clear Tasks</button>
</div>
<ul class="task-box"></ul>
</div>
<p style="position: fixed; bottom: 0; width:100%; text-align: center ">
Create An Account Here To <a href="#">Sign in</a>.</p>

<script src="js_code.js"></script>

</body>
</html>
<!--css_code.css--!>

/* Import Google Font - Poppins */

@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
width: 100%;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #00ffc8f6, #079782);
}
::selection{
color: #fff;
background: #0da373;
}
.wrapper{
max-width: 405px;
padding: 130px 0 30px;
margin: 137px auto;
background: rgb(245, 65, 197);
border-radius: 7px;
box-shadow: 0 10px 30px rgba(108, 231, 206, 0.1);
}
.task-input{
height: 52px;
padding: 0 25px;
position: relative;
}
.task-input img{
top: 50%;
position: absolute;
transform: translate(17px, -50%);
}
.task-input input{
height: 100%;
width: 100%;
 outline: none;
font-size: 18px;
border-radius: 5px;
padding: 0 20px 0 53px;
border: 1px solid #999;
}
.task-input input:focus,
.task-input input.active{
padding-left: 52px;
border: 2px solid #57e7bb;
}
.task-input input::placeholder{
color: #bfbfbf;
}
.controls, li{
display: flex;
align-items: center;
justify-content: space-between;
}
.controls{
padding: 18px 25px;
border-bottom: 1px solid #ccc;
}
.filters span{
margin: 0 8px;
font-size: 17px;
color: #444444;
cursor: pointer;
}
.filters span:first-child{
margin-left: 0;
}
.filters span.active{
color: #65f8d0;
}
.controls .clear-btn{
border: none;
opacity: 0.6;
outline: none;
color: #fff;
cursor: pointer;
font-size: 13px;
padding: 7px 13px;
 border-radius: 4px;
letter-spacing: 0.3px;
pointer-events: none;
transition: transform 0.25s ease;
background: linear-gradient(135deg, #247568 0%, #0a8674 100%);

}
.clear-btn.active{
opacity: 0.9;
pointer-events: auto;
}
.clear-btn:active{
transform: scale(0.93);
}
.task-box{
margin-top: 50px;
margin-right: 2px;
padding: 0 20px 10px 25px;
}
.task-box.overflow{
overflow-y: auto;
max-height: 300px;
}
.task-box::-webkit-scrollbar{
width: 5px;
}
.task-box::-webkit-scrollbar-track{
background: #f1f1f1;
border-radius: 25px;
}
.task-box::-webkit-scrollbar-thumb{
background: #e6e6e6;
border-radius: 25px;
}
.task-box .task{
list-style: none;
font-size: 17px;
margin-bottom: 10px;
padding-bottom: 16px;
align-items: flex-start;
border-bottom: 1px solid #ccc;
}
.task-box .task:last-child{
 margin-bottom:0;
border-bottom:0;
padding-bottom:0;
margin-top:0;
}
.task-box .task label{
display: flex;
align-items: flex-start;
}
.task label input{
margin-top: 7px;
accent-color: #47fbce;
}
.task label p{
user-select: none;
margin-left: 12px;
word-wrap: break-word;
}
.task label p.checked{
text-decoration: line-through;
}
.task-box .settings{
position: relative;
}
.settings :where(i, li){
cursor: pointer;
}
.settings .task-menu{
z-index: 10;
right: -5px;
bottom: -65px;
padding: 5px 0;
background: rgb(228, 168, 204);
position: absolute;
border-radius: 4px;
transform: scale(0);
transform-origin: top right;
box-shadow: 0 0 6px rgba(0,0,0,0.15);
transition: transform 0.2s ease;
}
.task-box .task:last-child .task-menu{
bottom: 0;
transform-origin: bottom right;
}
.task-box .task:first-child .task-menu{
bottom: -65px;
transform-origin: top right;
}
.task-menu.show{
transform: scale(1);
}
.task-menu li{
height: 100px;
font-size: 24px;
margin-bottom: 2px;
padding: 17px 15px;
cursor: pointer;
justify-content: flex-start;
}
.task-menu li:last-child{
margin-bottom: 0;
}
.settings li:hover{
background: #f5f5f5;
}
.settings li i{
padding-right: 8px;
}

@media (max-width: 400px) {

body{
padding: 0 10px;
}
.wrapper {
padding: 20px 0;
}
.filters span{
margin: 0 5px;
}
.task-input{
padding: 0 20px;
}
.controls{
padding: 18px 20px;
}
.task-box{
 margin-top: 20px;
margin-right: 5px;
padding: 0 15px 10px 20px;
}
.task label input{
margin-top: 4px;
}
}

<!--js_code.js-–!>

const taskInput = document.querySelector(".task-input input"),

filters = document.querySelectorAll(".filters span"),
clearAll = document.querySelector(".clear-btn"),
taskBox = document.querySelector(".task-box");

let editId,
isEditTask = false,
todos = JSON.parse(localStorage.getItem("todo-list"));

filters.forEach(btn => {
btn.addEventListener("click", () => {
document.querySelector("span.active").classList.remove("active");
btn.classList.add("active");
showTodo(btn.id);
});
});

function showTodo(filter) {
let liTag = "";
if(todos) {
todos.forEach((todo, id) => {
let completed = todo.status == "completed" ? "checked" : "";
if(filter == todo.status || filter == "all") {
liTag += `<li class="task">
<label for="${id}">
<input onclick="updateStatus(this)" type="checkbox"
id="${id}" ${completed}>
<p class="${completed}">${todo.name}</p>
btn.classList.add("active");
showTodo(btn.id);
 });
});

function showTodo(filter) {
let liTag = "";
if(todos) {
todos.forEach((todo, id) => {
let completed = todo.status == "completed" ? "checked" : "";
if(filter == todo.status || filter == "all") {
liTag += `<li class="task">
<label for="${id}">
<input onclick="updateStatus(this)" type="checkbox"
id="${id}" ${completed}>
<p class="${completed}">${todo.name}</p>
localStorage.setItem("todo-list", JSON.stringify(todos))
}

function editTask(taskId, textName) {

editId = taskId;
isEditTask = true;
taskInput.value = textName;
taskInput.focus();
taskInput.classList.add("active");
}

function deleteTask(deleteId, filter) {

isEditTask = false;
todos.splice(deleteId, 1);
localStorage.setItem("todo-list", JSON.stringify(todos));
showTodo(filter);
}

clearAll.addEventListener("click", () => {
isEditTask = false;
todos.splice(0, todos.length);
localStorage.setItem("todo-list", JSON.stringify(todos));
showTodo()
});

taskInput.addEventListener("keyup", e => {
let userTask = taskInput.value.trim();
if(e.key == "Enter" && userTask) {
if(!isEditTask) {
 todos = !todos ? [] : todos;
let taskInfo = {name: userTask, status: "pending"};
todos.push(taskInfo);
} else {
isEditTask = false;
todos[editId].name = userTask;
}
taskInput.value = "";
localStorage.setItem("todo-list", JSON.stringify(todos));
showTodo(document.querySelector("span.active").id);
}
});

Output:

TASK2(REGISTRATION FORM)
TASK 3(SIMPLE CALCULATOR)

Verify Here
⮚ Linked in Profile: https://www.linkedin.com/in/sneha-latha-kallu

⮚ Task 1:GitHub repo link:- 

https://github.com/Sneha-kallu/LGMVIP-Web.git

⮚ Task 2:GitHub repo link:- 

https://github.com/Sneha-kallu/LGMVIP-TASK3.git

⮚ Task 3:GitHub repo link:-

https://github.com/Sneha-kallu/LGMVIP-TASK4.git  

Certification: