Internship Report

For Web Development

NAME: CHALLA NITISH KUMAR

REG.NO:L19EC186
COURSE: B.TECH(E.C.E)
COMPANY: VERZEO EDU TECH
DOMAIN:WEB DEVELOPMENT
INSTRUCTOR:ANNAMALA LAXMAN
DURATION: 01/05/2021-30/06/2021
Acknowledgement

The successful completion of this internship report would not have been possible
without the support and assistance of many individuals and organizations. I feel immensely
blessed to have gotten this during the course of my internship program. I would like to take
this opportunity to offer my earnest admiration to each and every one of them.

All thanks to my adorable parents for their profound help and support during the
cause of this project work. I express my sentiment of gratitude to our instructor, who has been
a continuous source of inspiration as my intern mentor. Without his constant guidance and
suggestions, this report would have been nowhere near completion. My gratitude for his trust
and generosity goes beyond words. I indebted and thankful to my learned and revered
supervisor for his upbeat personality, kindness; encouraging support and willingness to help
have tangibly and greatly improve the quality of my Internship Report and brought up to its
present status.

Thanks to our colleagues who helped us directly or indirectly to accomplish our work.
We are especially grateful to Mr.Ranga Babu (H.O.D OF R.V.R&J.C COLLEGE OF
ENGINEERING), has also been a positive and encouraging influence on our research efforts.

Finally, we thank to all our teachers and colleagues, who were the people, who
prepared us for this endeavor. We won you all our success.

ii
ABSTRACT

The internship report highlights the major works carried out by the myself in terms of
academic and non-academic perspectives. The scope of this document is to identify and
describe the analysis carried out, projects completed, experience gained and focuses on the
achievements as an intern.

The quest to make life easier and processing faster has led to computerization of
various processes. Computer technology has transformed so many sectors especially the
educational sector in no small measure.

In an effort to foster technology driven education, Verzeo Edu Tech has been develop
to make a common platform for instructor and students for utilizing their leisure time to share
knowledge and increase knowledge.

The projects that I worked in certainly helped me by increasing my practical knowledge

depth. The research and development projects were particularly helpful in widening my
views regarding different web application development frameworks.
Table of contents:
1. Introduction
2. Hardware and software requirements
3. Tools
4. HTML
5. CSS
6. JAVASCIPT
7. Mini Project
8. Major Project
9. Results
1.Introduction
Website is a collection of related web pages, including multimedia content, typically
identified with a common domain name, and published on at least one web server. A website
may be accessible via a public Internet Protocol (IP) network, such as the Internet, or a
private local area network (LAN), by referencing a uniform resource locator (URL) that
identifies the site.

Websites can have many functions and can be used in various fashions a website can
be a personal website, a commercial website for a company, government website or a non-
profit organization website. Websites are typically dedicated to a particular topic or purpose,
ranging from entertainment and social networking to providing news and education. All
publicly accessible websites collectively constitute the World Wide Web, while private
websites, such as a company's website for its employees, are typically a part of an intranet.

Web development is a broad term for the work involved in developing a web site for
the Internet (World Wide Web) or an intranet (a private network). Web development can
range from developing the simplest static single page of plain text to the most complex web
based internet applications (or just web apps') electronic businesses, and social network
services. A more comprehensive list of tasks to which web development commonly refers,
may include web engineering, web design, web content development client liaison, client
side/server-side scripting, webserver and network security configuration, and e-commerce
development. Among web professionals. "web development" usually refers to the main non-
design aspects of building web sites: writing markup and coding..

1.1 Several Aspects Of Web Developing:

 What to put on the web site?
 Who will host it?
 How to make it interactive?
 How to secure the source code frequently?
 Will the web site design display well in different browsers?
 Will the navigation menus be easy to use?
 Will the web site loads quickly?
 How easily will the site pages print?

1.2 PROCESS:
2 HARDWARE AND SOFTWARE REQUIREMENTS
Hard ware requirements: A monitor with OS >windows 7 with atleast 4gb ram
Software requirements: Any web browser, MySql, VS code text editor.
3 TOOLS:
Introduction:
The Translate and Edit application had been planned to consist of two parts-
front-end and back-end development. The front-end is the part of the web that you can
see and interact with (e.g. Client-side programming). While front-end code interacts
with the user in real time, the back-end interacts with a server to return user ready
results. The front-end is a combination of HTML, CSS and JavaScript coding. By using
JavaScript, modifications of the design of a web page can be made immediately,
however only temporary and visible only by the user.

Normally the user would not have rights to modify web content dynamically on the
server side. Logically, administrators are the ones who deal with back-end modification
of databases for example, as they often contain sensitive data which should not be
available to see or modify by the general public. These front-end and back-end tools
includes languages like HTML CSS JavaScript PHP MYSQL etc. We will discuss all
these languages in brief as given below.

4 HTML
4.1 INTRODUCTION
HTML. (Hyper Text Mark-Up Language) is what is known as a "mark-up language"
whose role is to prepare written documents using formatting tags. The tags indicate how the
document is presented and how it links to other documents.
The World Wide Web (WWW for short), or simply the Web. is the worldwide
network. formed by all the documents (called "web pages") which are connected to one
another by hyperlinks.
Web pages are usually organised around a main page, which acts as a hub for
browsing other pages with hyperlinks. This group of web pages joined by hyperlinks and
centred around a main page is called a website.The Web is a vast living archive composed of
a myriad of web sites, giving people access to web pages that may contain formatted text,
images, sounds, video, etc.

4.2 WHAT IS WEB?

The Web is composed of web pages stored on web servers, which are machines that
are constantly connected to the Internet and which provide the pages that users request. Every
web page, and more generally any online resource, such as images, video, music, and
animation, is associated with a unique address called a URL. The key element for viewing
web pages is the browser, a software program which sends requests to web servers, then
processes the resulting data and displays the information as intended, based on instructions in
HTML page.
The most commonly used web browsers are:
 Mozilla firefox
 Google chrome
 Microsoft IE
 Netscape Navigator
 Safari
 Opera

4.3 Versions of HTML

HTML was designed by Tim Berners-Lee, at the time a researcher at CERN (Chinese
Ecosystem Research Network), beginning in 1989. He officially announced the creation of
the Web on Usenet in August 1991. However, it wasn't until 1993 that HTML was considered
advanced enough to call it a language (HTML was then symbolically christened HTML 1.0).
RFC 1886 dated November 1995, represented the first official version of HTML,
called HTML 2.0. After the brief appearance of HTML 3.0, which was never officially
released. HTML 3.2 became the official standard on January 14. 1997. The most significant
changes to HTML 3.2 were the standardization of tables, as well as many features relating to
the presentation of web pages On December 18, 1997, HTML 4.0 was released. Version 4.0
of HTML was notable for standardizing style sheets and frames. HTML version 4.01, which
came out on December 24,Now the latest version being used id HTML 5 which came to
existance on 22 January 2008.
 Basic structure of HTML 5 is
<!DOCTYPE HTML>
<head>
</head>
<body>
</body>
</html>

5.CSS
5.1 What Is CSS?
 CSS stands for Cascading Style Sheets.
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
 CSS saves a lot of work. It can control the layout of multiple web pages all at once.
 External stylesheets are stored in CSS files.
 CSS describes how HTML elements should be displayed.
 CSS Saves a Lot of Work! The style definitions are normally saved in external.css
files.
 With an external stylesheet file, we can change the look of an entire website by
changing just one file!
 CSS can be either external or internal.

CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
CSS selector: The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by
curly braces.
The External CSS can be declared in the required HTML page as:
<link rel="stylesheet" href="CSS_file_name ".css">
The External CSS file is saved by using the .css extension whereas the internal CSS is saved
in. corresponding HTML file using the <style> tag. Using External CSS is much better than
using Internal.
Here are a few reasons this is better.
 Easier Maintenance
 Reduced File Size
  Reduced Bandwidth
 Improved Flexibility
5.1 CSS SELECTORS
The selectors that can be used to select the HTML part are:
 ID selector (#)
 Class selector (.)
 Universal selector (*)
Id Selector:
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element! To select an element with a specific id, write a hash (#) character, followed
by the id of the element. The style rule below will be applied to the HTML element with
id="paral":
Example
Suppose the HTML content is as follow,
<hl id="paral">content</h1>
Then Id will be declared as
#paral {
text-align: center;
color:blue;
font-family:jokerman;
}
Class Selector:
The class selector selects elements with a specific class attribute. To select elements with a
specific class, write a period (.) character, followed by the name of the class.
.para{
Bg-color:blue;
Text-align:centre;
Color:pink;
Font-family:jokerman;
}

5.3CSS Comments:
Comments are used to explain the code, and may help when you edit the source code at a
later date.Comments are ignored by browsers, A CSS comment starts with /* and ends
with.*/
Comments can also span multiple lines.
Example
.class{
text-align: center;
color:blue;
font-family: Jokerman;/*single line comment*/
<!--multiline comment-->
}

5.4 CSS Styles:

 Background properties
 Border properties
 Padding
 Margin
 Color
 Font properties
 Text properties
 Link properties
 Navigation bar properties.

6 JAVASCRIPT
6.1 Introduction
What is JavaScript?
JavaScript is an object-based scripting language that is lightweight and cross-platform.
JavaScript is not compiled but translated. The JavaScript Translator (embedded in browser) is
responsible to translate the JavaScript code.
It is mainly used for:
 Client-side validation.
 Dynamic drop-down menus.
 Displaying data and time.
 Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog
box and prompt dialog box).
 Displaying clocks etc.
Example of JavaScript
<h2>Welcome to JavaScript</h2>
<script>
document.write("Hello JavaScript by JavaScript");
</script>
Here, <script> tag is used to initialize the script and document.write() is a function used to
write.
Like CSS, JavaScript also can be can be placed in
1. Between the body tag of html.
2. In js file (external javaScript).
3. Between the head tag of html.
JavaScript Example: code between the body tag--
In the given example, we have displayed the dynamic content using JavaScript. Let's see the
simple example of JavaScript that displays alert dialog box,
<script type="text/javascript">
alert "Hello Javatpoint");
</script>
JavaScript Example: code in JS file --
message.js file
function msg(){
alert("Hello Javat point");
}
index.html
<head>
<script type="tex/javascript" src="message .js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="buton" value="dick" onclick="msg()”>
</form>
</body>
We can create external JavaScript file and embed it in many html page.
This example uses the method to "find" an HTML element (with id="demo") and changes the
element content (innerHTML.) to "Hello JavaScript":
Example
document.getElementById("demo").innerHTML = "Hello JavaScript"
document.getElement ById("demo").style.fontSize="25px";
<html>
<head>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="Paragraph changed.";
</script>
</head>
<body>
<h1>My Web Page</hl>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

6.2 Comments In JavaScript:

The JavaScript comments are meaningful way to deliver message. It is used to add
information about the code, warnings or suggestions so that end user can easily interpret the
code. The JavaScript comment is ignored by the JavaScript engine i.e embedded in the
browser.
Advantages of JavaScript comments:
There are mainly two advantages of JavaScript comments.
To make code easy to understand: It can be used to elaborate the code so that end user can
easily understand the code.
To avoid the unnecessary code: It can also be used to avoid the code being executed.
Sometimes, we add the code to perform some action. But after sometime, there may be need
to disable the code. In such case, it is better to use comments.
Single line comments:
Single line comments start with //
Multi-line Comments:

Multi-line comments start with /* and end with */.

Any text between /* and */ will be ignored by JavaScript.

6.3 JavaScript Variables

There are 3 ways to declare a JavaScript variable:

 Using var
 Using let
 Using const

JavaScript Identifiers

All JavaScript variables must be identified with unique names.

These unique names are called identifiers.

Identifiers can be short names (like x and y) or more descriptive names (age, sum,
totalVolume).

The general rules for constructing names for variables (unique identifiers) are:

 Names can contain letters, digits, underscores, and dollar signs.

 Names must begin with a letter
 Names can also begin with $ and _ (but we will not use it in this tutorial)
 Names are case sensitive (y and Y are different variables)
 Reserved words (like JavaScript keywords) cannot be used as names

JavaScript identifiers are case-sensitive.

6.4 JAVASCRIPT OPERATORS:

There are different types of operators are available in JS

 Arithmetic Operators
 Assignment Operators
 Logical Operators
 Bitwise operators
 Comparison Operators
 String Operators

6.5 JAVASCRIPT FUNCTIONS:

A JavaScript function is a block of code designed to perform a particular task.A JavaScript

function is executed when "something" invokes it (calls it).
A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).

The parentheses may include parameter names separated by commas:

(parameter1, parameter2, ...)

The code inside the function will execute when "something" invokes (calls) the function:

 When an event occurs (when a user clicks a button)

 When it is invoked (called) from JavaScript code
 Automatically (self invoked)

Example of JS function:

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

Advantages of using functions:

Code reusability
Less coding

6.6 EVENTS:

Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

6.7 ARRAYS:
An array is a special variable, which can hold more than one value:
const array_name = [item1, item2, ...];
Example:
Different ways of creating JS arrays
const cars = ["Saab", "Volvo", "BMW"];
const cars = new Array("Saab", "Volvo", "BMW");
Looping through an array:
Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

text = "<ul>";
for (let i = 0; i < f.Len; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

6.8 JS control Statements:

If -else:
Syntax:
if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
}

For loop:
Syntax: for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

While loop:
Syntax:
while (condition) {
  // code block to be executed
}
Switch:
Example:
switch(expression) {
  case x:
     // code block
    break;
  case y:
     // code block
    break;
  default:
    // code block
}

6.9 JAVASCRIPT CLASS:

Syntax:
class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}
Example:
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
 }
}

7 Mini Project
Title:Design of virtual piano
Tools:Web browser,Google chrome,VS Code editor

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>Piano</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css" rel="stylesheet">
<style>
#main{
text-align: center;
padding-bottom: 20px;
border: 1px solid black;
border-radius: 20px;
background-color: chartreuse;
margin-left: 100px;
margin-right: 100px;
}
body{
background-image: url("light.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
 background-size: 100% 100%;
margin-top: 75px;
/* margin-right: 400px;
margin-left: 400px; */
}
#color{
text-align: center;
}
button{
width: 80px;
height: 320px;
margin: -2px;
box-shadow: 8px 8px 8px black;
}
#f{
width: auto;
height: auto;
box-shadow: 0px 0px;
font-size: 25px;
}
#a{
width: 50px;
height: 200px;
background-color: lightslategray;
box-shadow: 4px 4px 4px black;
color: chartreuse;
font-size: 25px;
position: absolute;
margin-left: -25px;
margin-right: -25px;
z-index: 2;
}
#b{
width: 50px;
height: 200px;
background-color: lightslategray;
position: absolute;
box-shadow: 4px 4px 4px black;
color: chartreuse;
font-size: 25px;
margin-left: -25px;
margin-right: -25px;
z-index: 2;
}
#c{
width: 50px;
height: 200px;
background-color: lightslategray;
box-shadow: 4px 4px 4px black;
color: chartreuse;
font-size: 25px;
position: absolute;
margin-left: -25px;
margin-right: -25px;
z-index: 2;
}
#d{
width: 50px;
height: 200px;
background-color: lightslategray;
box-shadow: 4px 4px 4px black;
 color: chartreuse;
font-size: 25px;
position: absolute;
margin-left: -25px;
margin-right: -25px;
z-index: 2;
}
#e{
width: 50px;
height: 200px;
background-color: lightslategray;
box-shadow: 4px 4px 4px black;
color: chartreuse;
font-size: 25px;
position: absolute;
margin-left: -25px;
margin-right: -25px;
z-index: 2;
}
p{
position: relative;
top: 100px;
font-size: 25px;
}
#one{
word-spacing: 30px;
height: 150px;
border: 1px solid black;
text-align: center;
border-radius: 20px;
}
#two{
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
}
</style>
</head>
<body>
<h1 align="center">My Virtual Piano</h1>
<div id="main">
<div id="one"><br>
<i class="fas fa-sliders-h fa-3x"></i>
<i class="fas fa-play fa-3x"></i><br><br>
<i class="fas fa-volume-off fa-3x"></i>
<i class="fas fa-volume-mute fa-3x"></i>
<i class="fas fa-volume-up fa-3x"></i>
<i class="fas fa-volume-down fa-3x"></i>
</div><br>
<button onclick="play1()"><p>C</p></button>
<audio id="g" src="a.mp3"></audio>
<button id="a" onclick="play8()">C#</button>
<audio id="n" src="b.mp3"></audio>
<button onclick="play2()"><p>D</p></button>
<audio id="h" src="c.mp3"></audio>
<button id="b" onclick="play9()">D#</button>
<audio id="o" src="d.mp3"></audio>
<button id="z" onclick="play3()"><p>E</p></button>
<audio id="i" src="e.mp3"></audio>
<button id="y" onclick="play4()"><p>F</p></button>
 <audio id="j" src="f.mp3"></audio>
<button id="c" onclick="play10()">F#</button>
<audio id="p" src="g.mp3"></audio>
<button onclick="play5()"><p>G</p></button>
<audio id="k" src="h.mp3"></audio>
<button id="d" onclick="play11()">G#</button>
<audio id="q" src="i.mp3"></audio>
<button onclick="play6()"><p>A</p></button>
<audio id="l" src="j.mp3"></audio>
<button id ="e" onclick="play12()">A#</button>
<audio id="r" src="k.mp3"></audio>
<button onclick="play7()"><p>B</p></button>
<audio id="m" src="l.mp3"></audio>
<button onclick="play1()"><p>C</p></button>
<audio id="g" src="a.mp3"></audio>
<button id="a" onclick="play8()">C#</button>
<audio id="n" src="b.mp3"></audio>
<button onclick="play2()"><p>D</p></button>
<audio id="h" src="c.mp3"></audio>
<button id="b" onclick="play9()">D#</button>
<audio id="o" src="d.mp3"></audio>
<button id="z" onclick="play3()"><p>E</p></button>
<audio id="i" src="e.mp3"></audio>
<button id="y" onclick="play4()"><p>F</p></button>
<audio id="j" src="f.mp3"></audio>
<button id="c" onclick="play10()">F#</button>
<audio id="p" src="g.mp3"></audio>
<button onclick="play5()"><p>G</p></button>
<audio id="k" src="h.mp3"></audio>
<button id="d" onclick="play11()">G#</button>
<audio id="q" src="i.mp3"></audio>
<button onclick="play6()"><p>A</p></button>
<audio id="l" src="j.mp3"></audio>
<button id ="e" onclick="play12()">A#</button>
<audio id="r" src="k.mp3"></audio>
<button onclick="play7()"><p>B</p></button>
<audio id="m" src="l.mp3"></audio>
</div>
<div id="color">
<h3>To change the Color of Piano</h3>
<button id="f" onclick="Change()">Click Me!</button>
</div>
<script>
function Change(){
var r=Math.floor(Math.random() * 256);
var g=Math.floor(Math.random() * 256);
var b=Math.floor(Math.random() * 256);
var mycolor="rgb("+r+","+g+","+b+")";
document.getElementById("main").style.background=mycolor;
}
function play1(){
document.getElementById("g").play();
}
function play2(){
document.getElementById("h").play();
}
function play3(){
document.getElementById("i").play();
}
function play4(){
document.getElementById("j").play();
 }
function play5(){
document.getElementById("k").play();
}
function play6(){
document.getElementById("l").play();
}
function play7(){
document.getElementById("m").play();
}
function play8(){
document.getElementById("n").play();
}
function play9(){
document.getElementById("o").play();
}
function play10(){
document.getElementById("p").play();
}
function play11(){
document.getElementById("q").play();
}
function play12(){
document.getElementById("r").play();
}
</script>
</body>
</html>
Result:

8 MAJOR PROJECT
Title:To-Do List
Tools:Web browser,Google chrome,VS Code editor

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>To Do List</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.c
ss" rel="stylesheet">
<style>
body{
background-color: cyan;
}
#header{
background-color: chartreuse;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 0px;
}
#main{
border: 1px solid black;
border-radius: 20px;
padding-bottom: 10px;
margin-left: 300px;
margin-right: 300px;
margin-top: 30px;
background-image: linear-gradient(#ee6c16,#dad733, #49c025);
}
#one1{
width: 400px;
border-radius: 20px;
font-size: 25px;
}
#five5{
border-radius: 10px;
border: 1px solid orangered;
width: 100px;
background-color: white;
font-size: 20px;
}
button{
border-radius: 10px;
border: 1px solid orangered;
width: 100px;
font-size: 20px;
background-color: white;
}
#A:hover{
background-color:rgb(5,136,81);
}
#B:hover{background-color:rgb(255,191,0);
}
#C:hover{
background-color:rgb(218, 62, 75);
}
 #five5:hover{
background-color: green;
}
#six6{
border: 1px solid black;
border-radius: 20px;
margin-top: 55px;
padding-top: 20px;
margin-left: 300px;
margin-right: 300px;
background-color: cornsilk;
}
#seven7{
font-size: 30px;
color:white ;
}
#eight8{
margin-top: 20px;
border: 1px solid black;
border-radius: 20px;
padding-bottom: 10px;
padding-top: 10px;
margin-top: 55px;
margin-left: 300px;
margin-right: 300px;
background-color: rgb(243, 22, 195);
}
b{
font-size: 25px;
}
#footer{
font-size: 20px;
padding: 5px;
margin-top: 20px;
background-color: chartreuse;
}
label{
font-size: 25px;
margin: 10px;
color: blue;
}
</style>
</head>
<body>
<div align="center" id="header">
<h2 align="center">My To Do List Based On Priorities</h2></div>
<div id="main" align="center"><br>
<h3>Create Your To Do List Here</h3>
<br>
<input type="text" placeholder="Enter a Task here"
id="one1"><br><br>
<b>Priority:</b>
<label for="two2">
<input id="two2" type="radio" style="height:20px; width:20px;"
name="level" value="Low" onclick="low()"> Low</label>
<label for="three3">
<input id="three3" type="radio" style="height:20px; width:20px;"
name="level" value="Medium" onclick="medium()" > Medium</label>
<label for="four4">
<input id="four4" type="radio" style="height:20px; width:20px;"
name="level" value="High" onclick="high()" > High</label><br><br>
 <input id="five5" type="button" value="Save" onclick="save()">
</div>
<div id="six6" align="center">
<h3>Display Your To Do List Here</h3><br>
<div id="seven7"></div>
</div>
<div id="eight8" align="center">
<h3>Filter Your List Here Based On Priority</h3><br>
<button id="A" style="margin:20px;" onclick="showl()">Low</button>
<button id="B" style="margin:20px;"
onclick="showm()">Medium</button>
<button id="C" style="margin:20px;"
onclick="showh()">High</button><br>
</div>
<div id="footer" align="center">
<h3>@Copy Rights By Raghava</h3>
<marquee direction="right"><h5>for any queries
visit:www.verzeo.com</h5></marquee>
</div>
</body>
<script>
var txt,txt1,txt2,key;
var data="",data1="",data2="";
function low(){
key=document.getElementById("two2");
}
function medium(){
key=document.getElementById("three3");
}
function high(){
key=document.getElementById("four4");
}
function save(){
if(key.value=="Low"){
txt=document.getElementById("one1").value;
data=data+txt+"<br>";
document.getElementById("seven7").innerHTML += '<div
style="border-radius:20px;" class="col-sm bg-success">'+txt+" -
"+key.value+"(Priority)"+"</div>";
}
if(key.value=="Medium"){
txt1=document.getElementById("one1").value;
data1=data1+txt1+"<br>";
document.getElementById("seven7").innerHTML += '<div
style="border-radius:20px;" class="col-sm bg-warning">'+txt1+" -
"+key.value+"(Priority)"+"</div>";
}
if(key.value=="High"){
txt2=document.getElementById("one1").value;
data2=data2+txt2+"<br>";
document.getElementById("seven7").innerHTML += '<div
style="border-radius:20px;" class="col-sm bg-danger">'+txt2+" -
"+key.value+"(Priority)"+"</div>";
}
}
function showl(){
document.getElementById("seven7").innerHTML = "";
document.getElementById("seven7").innerHTML ="The Low Priority
Task/Tasks is/are:"+"<br>"+ data;
document.getElementById("seven7").style.backgroundColor =
"rgb(5,136,81)";
 document.getElementById("seven7").style.borderRadius = "20px";
}
function showm(){
document.getElementById("seven7").innerHTML = "";
document.getElementById("seven7").innerHTML ="The Medium Priority
Task/Tasks is/are:"+"<br>"+ data1;
document.getElementById("seven7").style.backgroundColor =
"rgb(255,191,0)";
document.getElementById("seven7").style.borderRadius = "20px";
}
function showh(){
document.getElementById("seven7").innerHTML = "";
document.getElementById("seven7").innerHTML ="The High Priority
Task/Tasks is/are:"+"<br>"+ data2;
document.getElementById("seven7").style.backgroundColor = "rgb(218,
62, 75)";
document.getElementById("seven7").style.borderRadius = "20px";
}
</script>
</html>
RESULTS: