SUMMER TRAINING REPORT

ON

STOP WATCH WEB APPLICATION

Submitted to Guru Gobind Singh Indraprastha University, Delhi(India)in partial
fulfillment of the requirement for the award of the degree of

B.TECH
in
INFORMATION TECHNOLOGY
Submitted By

Pratyush Kumar
Singh(IT-2)
Roll.No. 06315003120

DEPARTMENT OF INFORMATION TECHNOLOGY

MAHARAJA SURAJMAL INSTITUTE OF TECHNOLOGY,
NEW-DELHI-110058
OCTOBER 2022
I
 ACKNOWLEDGEMENT
A research work owes its success from commencement to completion, to the people in
love with researchers at various stages. Let me in this page express my gratitude to all those
who helped us in various stage of this study. First, I would like to express my sincere
gratitude indebtedness to Dr. Tripti Sharma (HOD, Department of Information Technology,
Maharaja Surajmal Institute of Technology, New Delhi) for allowing me to undergo the
summertraining of 45 days at Udemy.
I am grateful to our guide Maximilian Schwarzmuller, for the help provided in completion
of the project, which was assigned to me. Without his friendly help and guidance, it was
difficult to develop this project.
I am also thankful to my mentors for their true help inspiration and for helping me
to preparation of the final report and presentation.

Last but not least, I pay my sincere thanks and gratitude to all the Staff Members of
Udemy for their support and for making our training valuable and fruitful.

Submitted By:

Pratyush Kumar Singh

4
 CANDIDATE’S DECLARATION

I, Pratyush Kumar Singh, Roll No. 06315003120, B. Tech (Semester- 5th) of the Maharaja Surajmal
Institute of Technology, New Delhi hereby declare that the Training Report entitled
“INTRODUCTION TO WEB DEVELOPMENT” is an original work and data provided in the study
is authentic to the best of my knowledge. This report has not been submitted to any other Institute for
the award of any other degree.

Pratyush Kumar Singh

(Roll no. 06315003120)

Place: Maharaja Surajmal Institute Of Technology

Date: 24-12-2022

5
 ABSTRACT

This project considers several instances of abstraction that arose in the design and implementation of
the web programming language Links. The first concerns user interfaces, specified using HTML
forms. We wish to construct forms from existing form fragments without introducing dependencies on
the implementation details of those fragments. Surprisingly, many existing web systems do not support
this simple scenario. We present a library which captures the essence of form abstraction, and extend it
with more practical facilities, such as validation of the HTML a program produces and of the input a
user submits. An important part of our library is a simple semantics, given as the composition of three
primitive “idioms”, an interface to computation introduced by McBride and Paterson. In order to
justify this approach, we present a comparison of idioms with the related notions of monads and
arrows, refining the informal claims in the literature. Our library forms part of the Links framework for
stateless web interactions. We describe a related aspect of this system, a preprocessor that derives
generic instances of functions, which we use to serialize server state between client requests. The
abstraction in this case involves the shape of data types: the serialization operation is specified
independently of the particular types involved. Our final instance of abstraction involves abstract types.
Functional programming languages typically offer one of two styles of abstract type: the abstraction
boundary may be drawn using a private data constructor, or using a type signature. We show that there
is a pair of semantics-preserving translations between these two styles. In the light of this, we revisit
the decision of the Haskell designers to offer the constructor style, and define a library that supports
signature-style definitions in Haskell by translation into the constructor style.

Among Web programmers and professionals, "Web development" usually refers to mainly non-design
aspects of building Web sites: probably writing some markup (if web designer hasn't done so) and
website programming, and web coding. Web development may use content management systems
(CMS) to make content changes easier and available with basic technical skills.

For the largest organizations and businesses, Web development teams can consist of up to hundreds of
people (Web developers) and to handle this to follow standardized methods like Agile methodologies
while developing Web sites. Smaller organizations may only require some permanent or contracted
developers, or secondary assignments to related job positions such as a graphic designer, web
designers and information systems technicians. Web development may be also a collaborative work
between departments rather than the domain of a designated department. Sometimes differentiation
between web designer and web programmer is known as with referring to three kinds of Web
developer specialization, as web designer is assigned with more developing tasks: front-end developer,
back-end developer (server-side), and full-stack developer. Front-end developers are responsible for
behavior and visuals that run in the user browser, while back-end developers deal with the servers.

6
 CONTENTS

CHAPTERS. TOPIC PAGE NO.

TITLE PAGE I
CERTIFICATE (STUDENT) II
CERTIFICATE (INTERNSHIP) III
ACKNOWLEDGEMENT IV
CANDIDATE’S DECLARATION V
ABSTRACT VI

1 INTRODUCTION 5-8
1.1 NEED OF ANDROID DEVEPLOPMENT
1.2 OBJECTIVE OF ANDROID APP DEVELOPMENT
1.3 METHODOLOGY
1.4 SOFTWARE USED
1.5 ABOUT ORGANISATION 9-11

2 PROJECT DESIGN 12-18

2.1 USE CASE DIAGRAM
2.2 HOW TO RUN THE PROJECT
2.3 SNIPPETS OF PROJECT
3 IMPLEMENTATION 19-29
3.1 AGILE
3.2 TESTING
3.21 UNIT TESTING
3.22 SYSTEM TESTING
3.33 PERFORMANCE TESTING
4 RESULT AND 30-33
DISCUSSION
5 FUTURE SCOPE CONCLUSION 34-36
REFERENCE 37

7
 CHAPTER – 1
INTRODUCTION:-

Web development is 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 a simple single Web page
with plain text and some images, static page to complex web pages, web applications, electronic
businesses, and even social media websites (social network services). A more comprehensive list of
tasks to which Web development commonly refers, may include Web design, Web programming, Web
engineering, Web content writing and development, Web content management, client-side/server-side
scripting, client liaison, Web server configurating and website security, additionally network security

8
configuration, and e-commerce development.

If first web pages where predominantly belonging to university and educational resources, with the up
rise of search engines and a separate web engineering sphere, and especially after the beginning of
making websites for businesses and even at some point with the commercialization of the Web, Web
development has become a growing industry. The growth of this industry is being driven by businesses
wishing to use their Web sites to promote their business, advertise and also sell products online,
additionally with the promotion of online services to customers.

However, there are many open-source tools for Web development such as Berkeley DB, Linux,
Apache servers, My SQL, PHP stack and Perl, Glass Fish. This makes web development much easier
and for some businesses has kept the salary cost for programmers learning Web development to a
minimum. Another contributing factor to the growth of the industry has been the rise of easy-to-use
WYSIWYG Web-development software as WYSIWYG Web Builder, Microsoft FrontPage and such
as Adobe Dreamweaver, Blue Griffon, or Microsoft Visual Studio. Having knowledge of Hyper Text
Markup Language (HTML) or of web programming languages is still required to use such software,
but the basics can be learned and implemented quickly.

Web development has also impacted personal communications and networking, and business
marketing. Web sites as Facebook, Instagram and Twitter provide users with a platform to
communicate on personal, company topics and even politics, and organizations with a more personal
and interactive way to engage the public.

1.1 NEED OF WEB DEVELOPMENT

Contrary to what some may believe, web development is still an extremely vital part of any marketing
strategy. A common belief today is that social media platforms have replaced the need for a
conventional website but that simply is not the case.

It’s true that in recent years there has been a shift toward online interactions with social media sites,

9
mobile devices and apps topping the charts. As a result, the way people access the web to shop, chat
and find information has also changed dramatically. Businesses of all shapes and sizes have had to
adapt their web presence to stay in front of their consumers.

So, with all the digital and social advancements, why is web development still important? These 5
reasons outline why your website is key to building a successful online presence for your business.

1. Maintaining Ownership
It’s critical to protect your brand identity by owning your web address and website. This will avoid
surrendering control of your brand to a third-party website and their ads. Remember, owning your own
domain name and using a reputable host company is just as important as choosing the domain name
itself. Owning your domain name is vital to your business, brand and online presence. Not only does it
build your brand, it also makes people more likely to engage with your website.

2. Control Your Content with Good Web Development

The old adage that “Content is King” still rings true to this day, possibly even more than before. How
you present your content is just as important. Make sure content is original, relevant and interesting to
effectively get your message across. With good web development, you control the user experience,
manage content relevancy and your conversion process.

Good content is what sets your website apart from everyone else and delivers the right message to your
customers. Website content always begins with proper market research where you identify your high-
value customers (HVC). From there you can start defining personas for your website.

3. Create a Content Hub

It’s no secret that blogs are fundamental to your digital marketing strategy and should be the focal
point for all your content marketing activities. Use your social media presence as a means to engage
your audience and ultimately bring visitors to your website.

Your company blog will also increase the number of relevant inbound links that send readers to the
main parts of your website. This, along with SEO, will increase traffic and the duration of each visit to
your site.

4. Attracting Search Traffic

10
Good web development means a fully optimized website which plays a vital role in attracting valuable
search engine traffic. Consumers are essentially still looking for information by using keyword
searches in Google and other search engines. Implementing the right keywords and topics on your
website will significantly help visitors find your site.

Website traffic is an important indicator and driver of business growth and really helps you to:
 Determine ROI to see how well your marketing is working
 Gather insight into your audience to make informed decisions
 Improve your SEO and search engine credibility
 Generate more leads, increase conversions, and get more customers overall

There are many SEO tactics you can perform on every page of your website to increase their search
engine rankings and get more visitors. Take a look at one of our recent blog posts on Adaptive SEO
Best Practice For Top Google Rankings.

5. Monitor, Tweak and Improve

Effective web development gives you the ability to accurately analyse website statistics. It includes
measuring conversion rates, monitoring back links and assessing visitor engagement, all of which are
essential to improve all your online marketing activities. The goal is to ultimately achieve a return on
your web investment and integrating Google Analytics, Google Webmaster tools and a CMS will
certainly help.

If you are serious about digital marketing and truly want to achieve success, don’t neglect your
business website; it’s your most valuable online asset. Just take a look at the recent WMA Awards
where WSI’s website was among the winning submissions.

1.2 OUTLINE OF WEB DESIGN AND WEB DEVELOPMENT

11
The following outline is provided as an overview of and topical guide to web design and web
development, two very related fields:

Web design encompasses many different skills and disciplines in the production and maintenance of
websites. The different areas of web design include web graphic design; interface design; authoring,
including standardized code and proprietary software; user experience design; and search engine
optimization. Often many individuals will work in teams covering different aspects of the design
process, although some designers will cover them all. The term web design is normally used to
describe the design process relating to the front-end (client side) design of a website including writing
markup. Web design partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role involves creating
markup then they are also expected to be up to date with web accessibility guidelines.

Web development is 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 a simple single static
page of plain text to complex web-based internet applications (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, web server 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. Web development may use content management
systems (CMS) to make content changes easier and available with basic technical skills.

For larger organizations and businesses, web development teams can consist of hundreds of people
(web developers) and follow standard methods like Agile methodologies while developing websites.
Smaller organizations may only require a single permanent or contracting developer, or secondary
assignment to related job positions such as a graphic designer or information systems technician. Web
development may be a collaborative effort between departments rather than the domain of a designated
department. There are three kinds of web developer specialization: front-end developer, back-end
developer, and full-stack developer. Front-end developers are responsible for behavior and visuals that
run in the user browser, back-end developers deal with the servers and full-stack developers are
12
responsible for both. Currently, the demand for React and Node.JS developers are very high all over
the world.

1.3 METHODOLOGY

There are many articles, both academic and journalistic, proposing a methodology for Web
development. Closer examination, however, shows these to be little more than ideas for best practice in
designing the "look and feel" of a Web-site. For example, there are countless articles on how to reduce
the size of an image, how to use color effectively, or the "pros and cons" of animation; no doubt, many
of these are useful tips, but they fail to address the wider issue of how to develop a Web-site.

However, the literature review has pointed to several design methodologies that are being used for the
development of Web-sites. Some of these methodologies are outlined below. Each methodology will
be critiqued in order to help with the formulation of the newly proposed methodology.

All of the above methodologies address some part of the Web development problem. The methodology
put forward by Russo and Graham is the most applicable of all of the methodologies outlined above
and has provided a sound basis on which to develop a new methodology. Information gleaned from the
literature review has been assembled, along with one of the author's personal experiences as a web
developer, to present a new methodology described below.

From this literature review it can be seen that many of the methodologies have certain limitations and
there are problems that are unique to the development of Web-sites. For this reason, any methodology
that is produced must be generic and flexible enough to account for the uniqueness and individuality
that is specific to Web-sites, yet concise enough to achieve the task of development. Therefore, it is
assumed that a certain amount of method tailoring is required in order to make use of any
methodology, or indeed several methodologies may need to be combined. The proposed methodology
will probably have limitations, if not now then almost certainly in the future. As long as the
development practitioner can identify these limitations they can be replaced by more appropriate
methods. Just as the nature of the Web is changing rapidly, any methodology supporting Web
development must also evolve with it.

13
1.4 SOFTWARE USED

The various implementation tools are listed below:

Operating System : Windows 10
Development environment :HTML5, CSS3, Bootstrap, JavaScript

IDE :Notepad++, Sublime Text, Visual Studio

Tools Used:-
The front is an abstraction, simplifying the underlying component by providing a user-friendly
interface. There are several tools available that can be used to develop the front end of a website

Visual Studio Code:-

Visual Studio Code is an Integrated Development Environment (IDE) made by Microsoft for
Windows, Linux and mac OS. Features include support for debugging, syntax highlighting, intelligent
code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard
shortcuts, preferences, and install extensions that add additional functionality.

Microsoft has released most of Visual Studio Code's source code on Git Hub under the permissive MIT
License, while the releases by Microsoft are proprietary freeware.

In the Stack Overflow 2021 Developer Survey, Visual Studio Code was ranked the most popular
developer environment tool, with 70% of 82,000 respondents reporting that they use it.

Visual Studio Code was first announced on April 29, 2015, by Microsoft at the 2015 Build conference.
A preview build was released shortly thereafter.

On November 18, 2015, the source of Visual Studio Code was released under the MIT License, and
made available on Git Hub. Extension support was also announced.On April 14, 2016, Visual Studio
Code graduated from the public preview stage and was released to the Web.

14
HTML:-
The Hyper Text Markup Language, or HTML is the standard markup language for documents designed
to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets
(CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other
objects such as interactive forms may be embedded into the rendered page. HTML provides a means to
create structured documents by denoting structural semantics for text such as headings, paragraphs,
lists, links, quotes and other items. HTML elements are delineated by tags, written using angle
brackets. Tags such as <img> and <input > directly introduce content into the page. Other tags such as
<p> surround and provide information about document text and may include other tags as sub-
elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.

HTML was first created by Tim Berners-Lee, and others starting in 1989. It stands for Hyper Text
Markup Language.

Hypertext means that the document contains links that allow the reader to jump to other places in the
document or to another document altogether. The latest version is known as HTML5.
A Markup Language is a way that computers speak to each other to control how text is processed and
presented. To do this HTML uses two things: tags attribute

HTML can embed programs written in a scripting language such as JavaScript, which affects the
behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The
World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the
CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

CSS:
CSS is used to control the style of a web document in a simple and easy way.
CSS is the acronym for "Cascading Style Sheet". This tutorial covers both the versions CSS1,CSS2
and CSS3, and gives a complete understanding of CSS, starting from its basics to advanced concepts.

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify
the process of making web pages presentable.
CSS is a MUST for students and working professionals to become a great Software Engineer
specially when they are working in Web Development Domain. I will list down some of the key
advantages of learning CSS:
 Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS, you
can control the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used, layout designs
,variations in display for different devices and screen sizes as well as a variety of other effects.
15
  Becomea web designer - If you want to start a carrier as a professional web designer, HTML
and CSS designing is a must skill.
 Controlweb - CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the markup
languages HTML or XHTML.
 Learnother languages - Once you understands the basic of HTML and CSS then other related
technologies like javascript, php, or angular are become easier to understand.

A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −

 Selector − A selector is an HTML tag at which a style will be applied. This could be any tag
like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes
are converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −

selector { property: value }

Example − We can define a table border as follows −

table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid #C00 is the value of that
property.

You can define selectors in various simple ways based on your comfort. Let me put these selectors one
by one.

The Type Selectors

This is the same selector we have seen above. Again, one more example to give a color to all level 1
headings −

h1 {

Color: #36CFFF;

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply matches the name
of any element type −

16
*{

Color: #000000;

This rule renders the content of every element in our document in black.

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside a particular
element. As given in the following example, style rule will apply to <em> element only when it lies
inside <ul> tag.

ul em {

Color: #000000;

The Class Selectors

You can define style rules based on the class attribute of the elements. All the elements having that
class will be formatted according to the defined rule.

.black {

Color: #000000;

This rule renders the content in black for every element with class attribute set to black in our
document. You can make it a bit more particular. For example −

h1.black {

Color: #000000;

This rule renders the content in black for only <h1> elements with class attribute set to black.

You can apply more than one class selectors to given element. Consider the following example −

<p class = "center bold">

This para will be styled by the Classes center and bold.

</p>

17
The ID Selectors

You can define style rules based on the id attribute of the elements. All the elements having that id will
be formatted according to the defined rule.

#black {

Color: #000000;

This rule renders the content in black for every element with id attribute set to black in our document.
You can make it a bit more particular. For example −

h1#black {

Color: #000000;

This rule renders the content in black for only <h1> elements with id attribute set to black.

The true power of id selectors is when they are used as the foundation for descendant selectors, For
example −

#black h2 {

Color: #000000;

CSS is one of the most widely used style language over the web. I'm going to list few of them here:
 CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to as many Web pages as you
want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less
code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all elements in all
the web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can
give a far better look to your HTML page in comparison to HTML attributes.

18
  Multiple Device Compatibility - Style sheets allow content to be optimized for more than one
type of device. By using the same HTML document, different versions of a website can be
presented for handheld devices such as PDAs and cell phones or for printing.
 Global web standards - Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.

Java Script:

JavaScript is a dynamic computer programming language. It is lightweight and most commonly used
as a part of web pages, whose implementations allow client-side script to interact with the user and
make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

JavaScript was first known as Live Script, but Netscape changed its name to JavaScript, possibly
because of the excitement being generated by Java. JavaScript made its first appearance in Netscape
2.0 in 1995 with the name Live Script. The general-purpose core of the language has been embedded in
Netscape, Internet Explorer, and other web browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript language.

• JavaScript is a lightweight, interpreted programming language.

• designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• Open and cross-platform.
• Client-Side JavaScript.
• Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need not be a static HTML, but can include programs that interact with the
user, control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages over traditional CGI server-side
scripts. For example, you might use JavaScript to check if the user has entered a valid e-mailaddress in
a form field.

The JavaScript code is executed when the user submits the form, and only if all the entries are valid,
they would be submitted to the Web Server.

JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other
actions that the user initiates explicitly or implicitly.

Advantages of JavaScript
The merits of using JavaScript are −

Less server interaction − You can validate user input before sending the page off to the server. This
saves server traffic, which means less load on your server.

Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have

19
forgotten to enter something.

Increased interactivity − You can create interfaces that react when the user hovers over them with a
mouse or activates them via the keyboard.

Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and
sliders to give a Rich Interface to your site visitors.

JavaScript Development Tool:-

One of major strengths of JavaScript is that it does not require expensive development tools. You can
start with a simple text editor such as Notepad. Since it is an interpreted language inside the context of
a web browser, you don't even need to buy a compiler.

To make our life simpler, various vendors have come up with very nice JavaScript editing tools. Some
of them are listed here −

Microsoft FrontPage − Microsoft has developed a popular HTML editor called FrontPage. FrontPage
also provides web developers with a number of JavaScript tools to assist in the creation of interactive
websites.

Macromedia Dreamweaver MX − Macromedia Dreamweaver MX is a very popular HTML and

JavaScript editor in the professional web development crowd. It provides several handy prebuilt
JavaScript components, integrates well with databases, and conforms to new standards such as
XHTML and XML.

Macromedia Home Site 5 – Home Site 5 is a well-liked HTML and JavaScript editor from
Macromedia that can be used to manage personal websites effectively.

Syntax example

<Script>

// declare a variable and initialize it

// global variable declaration
var Name="Apple";

// Function definition
function MyFunction() {

// Local variable declaration

var num = 45;

// Display the value of Global variable

document.writeln(Name);

// Display the value of local variable

document.writeln("<br>" + num );
}

20
// Function call
MyFunction();

</script>

Google Chrome:

Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for
Microsoft Windows, built with free software components from Apple Web Kit and Mozilla Firefox. It
was later ported to Linux, mac OS, IOS, and Android, where it is the default browser. The browser is
also the main component of Chrome OS, where it serves as the platform for web applications.

Most of Chrome's source code comes from Google's free and open-source software project Chromium,
but Chrome is licensed as proprietary freeware. Web Kit was the original rendering engine, but Google
eventually forked it to create the Blink engine; all Chrome variants except IOS now use Blink.

As of October 2021, Stat Counter estimates that Chrome has a 68% worldwide browser market share
(after peaking at 72.38% in November 2018) on personal computers (PC), is most used on tablets
(having surpassed Safari), and is also dominant on smartphones, and at 65% across all platforms
combined. Because of this success, Google has expanded the "Chrome" brand name to other products:
Chrome OS, Chromecast, Chromebook, Chromebit, Chromebox, and Chromebase.

Following are the features are given below:

It is easy to use fast and secure.

Web pages can also be accessed and loaded very easily, even with heavy graphics, advertisements, and
video material browsing across several pages. The interface is simple and easy to use, even for
beginners
It provides automated changes that are enforced to ensure that safety is reviewed.
It provides search google in the bar.

Google Chrome is a Google-designed free Web browser that is used to view Internet sites. As of May
2020, with more than 60 percent of web browser market share, it’s the world’s most popular web
browser option. Google Chrome is also a cross-platform browser, so versions are running on many
laptops, handheld devices, and Operating systems. Statista notes that Google Chrome is the most-used
version for Android that retains more than 32 percent of the global market share for web browsers in
February 2020. Google chrome was the first web browser to use the search box and address bar, which
other rivals followed. In 2010, google launched the online shop chrome in which web-based software
can be bought and installed by consumers.

Google Chrome is a Google-designed free Web browser that is used to view Internet sites. As of May
2020, with more than 60 percent of web browser market share, it’s the world’s most popular web
browser option. Google Chrome is also a cross-platform browser, so versions are running on many
laptops, handheld devices, and Operating systems. Statista notes that Google Chrome is the most-used
version for Android that retains more than 32 percent of the global market share for web browsers in
February 2020. Google chrome was the first web browser to use the search box and address bar, which
other rivals followed. In 2010, google launched the online shop chrome in which web-based software
can be bought and installed by consumers.

21
1.5 ABOUT ORGANIZATION

Udemy, Inc. is an American massive provider aimed at professional

adults and students. It was founded in May 2010 by Eren Bali, Gagan Biyani and OktayCaglar.
As of June of 2021, the platform has more than 44 million students, 183,000 courses, and 65,000
instructors teaching courses in 75 languages. There have been over 594 million course enrollments.[
Students take courses primarily to improve job-related skills. Some courses generate credit toward
technical certification. Udemy has made a special effort to attract corporate trainers seeking to create
coursework for employees of their company.
The headquarters of Udemy is located in San Francisco US, with hubs in Denver,
US; Dubline, Ireland, Ankara, Turkey,Sao Paulo, Brazil, and Gurugram, India.
In 2007, Udemy (you-de-mee, portmanteau of you + academy) founders Eren Bali, and built a
software for a live virtual classroom while living in Turkey. They saw potential in making the product
free for everyone, and moved to Silicon Valley to found a company two years later. The site was
22
In February 2010, the founders tried to raise venture capital funding, but the idea failed to impress
investors and they were rejected 30 times, according to Gagan Biyani. In response to this,
they bootstrapped the development of the product and launched Udemy—"The Academy of You"—in
May 2010.
Within a few months, 1,000 instructors had created about 2,000 courses, and Udemy had nearly 10,000
registered users. Based on this favorable market reaction, they decided to attempt another round of
financing, and raised $1 million in venture funding by August.
.
On April 22, 2014, the Wall Street Journal's digital edition reported that Dennis Yang, Chief
Officer of Udemy was named CEO, replacing Eren Bali.
In May 2014, Udemy raised another $32 million in a Series C funding, led by Norwest Venture
Partners, as well as Insight Venture Partners and MHS Capital.
In June 2015, Udemy raised a $65 million Series D financing round, led by Stripes Now Udemy joined
another online learning house Skills doxInc of Canadato open up School of Skills in India.
In June 2016, Udemy raised $60 million from Naspers Venturesas a follow-up to the $65 million
Series D round of financing from June 2015.
On February 5, 2019, Udemy announced that the board of the company appointed Gregg Coccari as its
new chief executive officer.
In February 2020, Udemy raised $50 million from long-time partner in Japan, Benesse Holdings, Inc.
and announced $2 billion valuation.
In November 2020, Udemy raised $50 million at a $3.25 billion valuation led by Tencent Holdings

23
 CHAPTER-2

Project Design:-

In this tutorial, we will learn how to create a Stopwatch web app, which will have basic features
of a stopwatch like Start, Stop, Pause, Reset and Resume.

In this article a web app is created to display a basic stopwatch in the desktop

2.1 Use Case diagram of the Project:-

A use case diagram is a way to summarize details of a system and the users within that system. It
is generally shown as a graphic depiction of interactions among different elements in a system.
Use case diagrams will specify the events in a system and how those events flow, however, use
case diagram does not describe how those events are implemented.

A use case is a methodology used in system analysis to identify, clarify, and organize system
requirements. In this context, the term "system" refers to something being developed or operated,
such as a mail-order product sales and service Web site. Use case diagrams are employed in UML
(Unified Modeling Language), a standard notation for the modeling of real-world objects and
systems. There are a number of benefits with having a use case diagram over similar diagrams
such as flowcharts.

24
 Fig. Illustrate the use Case Diagram of Stopwatch Working

2.2 How to Run the Project?

To run this project, you don’t need to have any kind of local server but yet a browser. We recommend
you to use modern browsers like Google Chrome and Mozilla Firefox. To run this system, first, open
the project in your browser by clicking the home.html file.
.

The layout of the stop watch includes:-

Five Buttons I have used in this web application :-

Start- A button labeled “Start…” that is on the screen by clicking on the start button you can
25
 access this application program.

Stop- A button labeled “Stop…” that is on the screen by clicking on the stop button you can stop
this application functionality.

Resume - A button labeled “Resume…” that is on the screen by clicking on the Resume button you
can resume your application when it will pause.
Reset-The on click property of a Reset object refers to an event handler function that is invoked
when the user clicks on the Reset button ..... The Reset button has the special function of resetting all
form elements to their default value. The on click event handler may add any additional functionality
to the Reset button.

Lap-Usually when using this button .when we clicking on this lap button , shows the elapsed time to
that point but stopwatch will continue to measure the “full “ span of time subsequent clicking of the
lap
function show those longer time measurement and when you finally click stop the total time is shown.

26
My HTML Snippet

27
My CSS Snippet

28
My JS Snippet

29
After Clicking on Start Button

30
 CHAPTER-3

Implementation:-

Beforeyougetacquaintedwit hthemethodologiesofwebproductcreation,its important to know what

stages of development exist.

3.1 Agile
Agile is another methodology widely used for web app development projects. The Agile method
is often used for the projects with no definite requirements and limited short time frames.

The key characteristics of the Agile methodology are the following:

There is no pre-planning of the entire project so the tasks area accomplish in an adaptive
manner. The teams’ efforts are concentrated on small tasks that require urgent attention.
Agile approach also supports quick modifications in the project’s scope and direction based
on the market changes.

Agile is better suited to manage complex web development projects that involve variability. It
allow steams to develop in short iterations that have a specified time frame and deliverables
but don’t have a specific order.

Create a new project and name it. We have named our project as stopwatch. After doing so we
will see two files opened in front of us, So in the file activity_main.html After writing the code for
activity_main.html we’ll write the code in MainActivity.css file. And Main.js After writing these
code we’re ready to run the web application project.

3.2 Testing
Testing is a method of assessing the functionality of a program. Testing is a set of processes
aimed at investigating, evaluating and ascertaining the completeness and quality of project
Testing refers to the process of implementing all or part of the system with the intent of finding
errors It is performed in order to find the bugs or errors in the system and minimize it In general
testing is finding out how well something works Testing is more than just debugging.

31
 3.21 Unit Testing:-

Each division class of every page is tested in the browser Inspecting HTML and modifying style
and layout in real-time.

3.22 System Testing:-

After completing the overall website design and development it is tested for error by uploading
the file in w3c, which shows errors along with the warnings It also provides the validation output
errors with detailed descriptions along with the code as well as line and column number in which
the error occurred.W3c provides the validation by URI, by file upload and by direct input.

3.33 Performance testing:-

Performance testing is designed to test the run-time performance of software within the context of
an integrated system. Performance testing occurs throughout all steps in the testing process even
at the unit level, the performance of an individual module may be assessed as white-box tests are
conducted. This project reduce attendance table, codes. It will generate report fast, no have extra
time or waiting of results, entered correct data will show result in few millisecond just used only
low memory of our system. Automatically do not getting access at another software Get user
permission and access to other applications.

32
 CHAPTER-4
RESULT:-

After some interval of time there are some laps record shown in the desktop

Discussion:-
I have learned a lot while making this application, and this was a great learning experiment for me.
The instructor Development Island (Uk) is very knowledge able and helpful. Whenever I found any
difficulty I contacted him and he by his best knowledge and effort helped me to clear my doubts.
With his assistance i enjoyed the whole journey of learning the complete course and want to
increase more knowledge in this domain.
This project has really helped to know how actually communications happens over the internet,
through various social media apps .this projects meets all the fundamental requirements up to a great
2
extent.

CHAPTER–5
FUTURE SCOPE AND CONCLUSION
Future Scope:-
A stop watch allows you to time an event, like a run, duration of cooking, duration of a trip, etc. Most allow
you to stop and continue timing. More advanced ones allow you to time splits.

The ordinary watch shows the time. If the watch has a stop watch function, it can perform the functions of a
stop watch, as detailed above, and also tell the time

We can add more function in this web responsive application by using the web language that is java script.
We can also use as a timer for small activities.
We can add more functionality in this single web application that is alarm timer, etc
The stopwatch function is also present in many electronic devices such as wristwatches, computers, cell
phones, and portable music players.
we can extend its principal in many fields where time management is more important we can use it in many
electronic applications.

Conclusion:-

I enjoyed and learned various concepts while working on the project .The project is designed in such a
That future modifications can be done easily.
The following conclusion can be deduced from the development of the project:
 It gives a friendly graphical user interface which proves to be better when compared to existing
system.
 It gives appropriate access to authorized users depending on their permissions.
 It effectively overcomes the delay in communications.
 Updating information becomes easier.
 System security, data security and reliability are the striking features.
 The system has adequate scope for modifications in future if is necessary.

The Internet has become major resource in modern business thus many websites has been developed in a
large extent.. The website will be used by the student who wants to give the test from anywhere. It also
provides the students to see their result just after completing the test.
Hence we have design the project to provide the student with easy navigation, the retrieval of data and
necessary feedback as much as possible. To implement this project we use js as a backend language.
Our system have minimize the human effort, helps in fast processing and immediate results with high
security.
It is easily accessible and always available. This particular project deals with all the related problems and
reduce the problem which occur when carried manually.

3
 Identification of the drawbacks of the existing system leads to the designing of computerized system that
will be compatible to the existing system with the system which is more user friendly and more GUI
oriented.
This project helps in understanding the creation of an interactive web page and technologies used to
implement it. The design of the project which includes data model and process model illustrate how the
database is built with different tables, how the data is access and process from the tables.
The project from a personal point of view also helped us in understanding the following aspects of
project development:
The planning that goes into implementing a project.
The importance of proper planning and an organized methodology.
The project also provide me the opportunity of interacting with our teachers and to gain from their best
experience.

The stopwatch feature allows you to measure elapsed times . By using the corresponding buttons, the
stopwatch can be started, stop and reset. After we done with our project about stopwatch we are able to
learn and develop knowledge. We are also able learn how to developed skills and knowledge in systematic
design approach. According to our project we are able to use the best method that can be used to write the
program the main reason is we can know the time can be executed.

Reference:-
For HTML:-
https://html.com/
https://www.geeksforgeeks.org/javascript
https://www.tutorialspoint.com/javascript/javascript_overview
https://www.youtube.com
https://www.wikipedia.com

For CSS:-
https://www.geeksforgeeks.org/javascript
https://www.w3schools.com
https://www.youtube.com
https://www.wikipedia.com

For JS:-

https://www.geeksforgeeks.org/javascript
https://www.w3schools.com
https://www.youtube.com
https://www.wikipedia.com
4