SAMPLE REPORT

Typing Speed Test

Project report submitted

in partial fulfilment of requirement for the degree of

Bachelor of Technology

in

Computer Science and Engineering

OR

Information Technology Engineering

Name of Student & Roll No. Name of Supervisor & Designation

Raghvendra Yadav
Saurabh Kumar Gupta
Pal Kalpesh
Ritesh Sharma
Vijayshankar Sudha Gautam
Assistant Professor

Department of Computer Science and Engineering

OR

Department of Information Technology

B.N. COLLEGE OF ENGINEERING AND TECHNOLOGY

Approved by AICTE, NBA(CSE), Dr APJ AKTU, Lucknow

NH-24, Sitapur Rd, near Sahara Art and Management, Bakshi Ka Talab, Lucknow, Uttar Pradesh
226201
Session- 2022-2023

1
 DECLARATION

We hereby certify that the work which is being presented in B.Tech Project Report entitled “ Typing

Speed Test ”, as partial fulfilment of the requirement for the degree of Bachelor of Technology in

Computer Science and Engineering or Information t

Technology, submitted to the Department of Computer Science and Engineering of B.N. College of

Engineering and Technology, NH-24, Sitapur Rd, near Sahara Art And Management, Bakshi Ka

Talab, Lucknow, Uttar Pradesh 226201, is an authentic record of my own work carried out during my

academic period of 5th semester under the supervision of Ms.Sudha Gautam Assistant Professor in the

Computer Science and Engineering Department.

The matter presented in this project report is full or part, has not been submitted by me for the award

of any other degree elsewhere and is free from plagiarism.

RaghvendraYadav
Ritesh Sharma
Saurabh Kumar Gupta
Pal Kalpesh
Vijayshankar Gautam

2
 CERTIFICATE

This is to certify that:

Mr. Raghvendra Yadav, Mr. Saurabh Kumar Gupta, Mr.Ritesh Sharma, Mr. Pal Kalpesh Mr.

Vijayshankar has worked on. This project is a part of a partial fulfilment of requirement for the degree

of Bachelor in Technology in Computer Science and Engineering.

To the best of my knowledge and belief, this is the original work and has not been submitted for any

other degree elsewhere.

Date-

Place- Lucknow Signature

Ms. Sudha Gautam

CSE, AssistantProfessor

Signature
Prof.(Dr.) Mohit Gangwar CSE,
HOD

3
 ACKNOWLEDGEMENTS

First of all, we offer up our sincere thanks to the Almighty, for providing me the tremendous strength

and courage to undertake this project work successfully. I express my humble sentiments and

gratitude to my worthy HOD sir, my Supervisor and all the Computer Science and Engineering

Faculties. Their encouragements, personal and professional guidance, help and immense support

throughout this work has led to the successful completion of this project work.

We are also thankful to my team members for having faith in me and for cheering me on and also

helping me in all the ways they can.

Raghvendra Yadav Ritesh Sharma

Saurabh Kumar Gupta Pal Kalpesh
Vijayshankar Gautam

4
 TABLE OF CONTENT

Content Page No.

1. INTRODUCTION TO HYPER 5-15

TEXT MARKUP LANGUAG
1.1.1 HTML

1.1.2 HTML Markup

1.1.3 Nesting HTML Tags

1.1.4. Creating HTML Text using Notepad++

1.1.5. Processing Forms

1.1.6. Basic HTML Tags and Description

2. INTRODUCTION TO CASCADING 16-17

STYLE SHEETS

2.1. CSS

2.2. Advantages of Style Sheets

2.3. Minimum Hardware and Software requirements

3. INTRODUCTION TO JAVASCRIPT 18-24

3.1. JAVASCRIPT

3.2. HISTORY OF JAVASCRIPT

3.2.1. Creation at Netscape

3.2.2. Adoption by Microsoft

3.2.3. The rise of JScript

3.2.4. Growth and standardization

3.2.5. Reaching maturity

3.3. Trademark

5
 3.4. Website client-side usage

3.4.1. Examples of scripted behaviour

3.4.2. Libraries and frameworks

4. Minimum Hardware and 24-26

Software requirements

4.1. Operating System

4.2. Browsers

4.3. Browser Configuration

4.4. Software

4. ABOUT THE PROJECT 27

5. FAQ’S ABOUT THE PROJECT 28-30

6. CODE IMPLEMENTATION 31-42

ON PROJECT

6.1. HTML Code Implementation

6.2. CSS Code Implementation
6.3. JavaScript Code Implementation

7. IMPLEMENTED OUTPUT SCREEN 43

8. CONCLUSION 43

9. REFERENCES 43

6
1. INTRODUCTION TO HYPER TEXT MARKUP LANGUAGE

1.1 HTML
This language provides the format for specifying simple logical structure and links in a hypertext
document. As a markup language, special formatting commands are placed in the text describing how
the final version should appear. These formatted documents are interpreted by a Web browser which
uses the HTML code to format the page being displayed. Although most professionals use special
authoring tools to write HTML documents and to manage sites, developers of e-commerce sites and
applications need to know the nitty-gritty detail of HTML, and this is what you will study. HTML has
had several versions over the years. "HTML 2.0" was the first standard HTML specification which
was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999.
Though HTML 4.01 version is widely used but currently we are having HTML 5 version which is an
extension to HTML 4.01, and this version was published in 2012. This course will take you through
website creation using HTML5.

1.2. HTML Markup

HTML pages are created by tagging textual information with HTML markup. HTML markup consists
of tags, which appear inside angled brackets < and > . An example of an HTML tag is, which causes
text to appear in bold. only notes where text should begin to appear in bold, while the tag marks the
end of the emboldening. Most HTML tags have a corresponding end tag, which is specified by the
name of the tag preceded by the / character.

1.3. Nesting HTML Tags

7
Text may be both bold and italicized. This is done by using both the and tags. When doing so, it is
important to remember not to overlap HTML tags Overlapping tags is a common mistake. Although
Web browsers are usually smart enough to work out what is meant, it can lead to problems.
Furthermore, for an HTML page to be considered valid HTML, it must contain no overlapping tags.

1.4. Creating HTML Text using Notepad++

This section covers the creation of an HTML page. You will need a Web browser and a text editor.
Use HTML: Basics 3 any text editor you wish to, but the following Activity descriptions will use
Notepad++. Notepad++ is a free Windows editor that also supports several programming languages.
For example, you will notice that HTML keywords are highlighted in different colours.

1. Open your Web browser. This sections' goal is to create a Web document that can be opened with
your browser.

2. Open Notepad++. It can be found by selecting Start, then All Programs, then Notepad++.

3. Type the following text into Notepad++: your name and the module number. Save this file as
start.txt.

4. Now load start.txt into the browser by dragging start.txt onto your browser.

5. The browser should now display the text contained in start.txt. (If it does not, make sure that you
have saved start.txt and that this is the file you are opening).

6. Once you have displayed start.txt, return to Notepad. Add the text "Typing Speed Test", and save
the file again.

7. Return to the Web browser and reload the document (by using either by using the Refresh or
Reload toolbar buttons, or by selecting File/Open once again).

8. If you are able to see the new piece of text, you have successfully used Notepad to create your first
Web page.

1.5. Processing Forms

Although forms could simply be used to display information, HTML provides them in order to supply
a way for the user to interact with a Web server. The most widely used

8
method to process the data submitted through a form is to send it to server-side software typically
written in a scripting language, although any programming language can be used. The figure below
outlines the kind of processing that takes place.

1. The user retrieves a document containing a form from a Web server.

2. The user reads the Web page and interacts with the form it contains.

3. Submitting the form sends the form data to the server for processing.

4. The Web server passes the data to a CGI programme.

5. The CGI software may use database information or store data in a server-side database. HTML
Forms

6. The CGI software may generate a new Web page for the server to return to the user.

7. The user reads the new Web document and may interact with it.

1.6. Basic HTML Tags and Description

<!DOCTYPE>

Defines the document type

<html>

Defines an HTML document <head> Defines information about the document

<title>

Defines a title for the document <body> Defines the document's body

<h1> to <h6>

Defines HTML headings <p> Defines a paragraph

<br>

Inserts a single line break <hr> Defines a thematic change in the content

<!--...-->

Defines a comment <abbr> Defines an abbreviation or an acronym

9
<address>

Defines contact information for the author/owner of a document/article <b> Defines bold text

<bdi>

Isolates a part of text that might be formatted in a different direction from other text outside it <bdo>
Overrides the current text direction

<big>

Not supported in HTML5. Use CSS instead. Defines big text <blockquote> Defines a section that is
quoted from another source

<center>

Not supported in HTML5. Use CSS instead. Defines centered text <cite> Defines the title of a work

<code>

Defines a piece of computer code <del> Defines text that has been deleted from a document

<dfn>

Represents the defining instance of a term <em> Defines emphasized text

<font>

Not supported in HTML5. Use CSS instead. Defines font, color, and size for text <i> Defines a part of
text in an alternate voice or mood

<ins>

Defines a text that has been inserted into a document <kbd> Defines keyboard input

<mark>

Defines marked/highlighted text <meter> Defines a scalar measurement within a known range (a
gauge)

<pre>

10
Defines preformatted text

<progress> Represents the progress of a task

<q>

Defines a short quotation <rp> Defines what to show in browsers that do not support ruby annotations

<rt>

Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<s>

Defines text that is no longer correct <samp> Defines sample output from a computer program

<small>

Defines smaller text <strike> Not supported in HTML5. Use <del> or <s> instead. Defines
strikethrough text

<strong>

Defines important text <sub> Defines subscripted text

<sup>

Defines superscripted text <template> Defines a template

<time>

Defines a date/time <tt> Not supported in HTML5. Use CSS instead. Defines teletype text

<u>

Defines text that should be stylistically different from normal text <var> Defines a variable

<wbr>

Defines a possible line-break Forms and Input

11
<form>

Defines an HTML form for user input <input> Defines an input control

<textarea>

Defines a multiline input control (text area) <button> Defines a clickable button

<select>

Defines a drop-down list <optgroup> Defines a group of related options in a drop- down list

<option>

Defines an option in a drop-down list <label> Defines a label for an <input> element

<fieldset>

Groups related elements in a form <legend> Defines a caption for a <fieldset> element

<datalist>

Specifies a list of pre-defined options for input controls <output> Defines the result of a calculation
Frames

<frame> Not supported in HTML5. Defines a window (a frame) in a frameset

<frameset>

Not supported in HTML5.

Defines a set of frames <noframes> Not supported in HTML5. Defines an alternate content for users that
do not support frames

<iframe>

Defines an inline frame Images

<img>

Defines an image <map> Defines a client-side image-map

<area>

Defines an area inside an image-map <canvas> Used to draw graphics, on the fly, via scripting
(usually JavaScript)

12
<figcaption>

Defines a caption for a <figure> element <figure> Specifies self-contained content

<picture>

Defines a container for multiple image resources <svg> Defines a container for SVG graphics

Audio/Video

<audio> Defines sound content

<source>

Defines multiple media resources for media elements (<video>, <audio> and
<picture>) <track> Defines text tracks for media elements (<video> and <audio>)

<video>

Defines a video or movie Links

<a>

Defines a hyperlink <link> Defines the relationship between a document and an external resource
(most used to link to style sheets)

<nav>

Defines navigation links Lists

<ul>

Defines an unordered list <ol> Defines an ordered list

<li>

Defines a list item <dir> Not supported in HTML5. Use <ul> instead. Defines a directory list

<dl>

Defines a description list <dt> Defines a term/name in a description list

<dd>

13
Defines a description of a term/name in a description list <menu> Defines a list/menu of commands

<menuitem>

Defines a command/menu item that the user can invoke from a popup menu Styles and Semantic

<style>

Defines style information for a document <div> Defines a section in a document

<span>

Defines a section in a document <header> Defines a header for a document or section

<footer>

Defines a footer for a document or section <main> Specifies the main content of a document

<section>

Defines a section in a document <article> Defines an article

<aside>

Defines content aside from the page content <details> Defines additional details that the user can view or
hide

<dialog>

Defines a dialog box or window <summary> Defines a visible heading for a <details> element

<data>

Links the given content with a machine-readable translation Meta Info

<head>

Defines information about the document <meta> Defines metadata about an HTML document

<base>

14
Specifies the base URL/target for all relative URLs in a document <basefont> Not supported in
HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document

15
2. INTRODUCTION TO CASCADING STYLE SHEETS

2.1. CSS
There is no format to follow for teaching the aesthetics of style - most people, though, can recognize
something that follows a classical design. But some things can be said about the style of a website. For
instance, when Web pages belong to the same website, each page should have a consistent look in
order to provide familiarity for the user. Style sheets (sometimes referred to as templates) are used in
desktop publishing to provide consistency when formatting text. The format applied by the stylesheet
could be to indent every first line of a paragraph by 2cm, insert a page break at the end of every
chapter, and so on. Naturally, due to multimedia, Web pages not only have to consider text formatting,
but also visual and sound presentation, and various multimedia formats in general. Before we
continue, let us briefly discuss the advantages and disadvantages of using style sheets.

2.2. Advantages of Style Sheets

1. Multiple Styles –
A single document can be presented in multiple styles by using multiple style sheets.

2. Re-styling –
The use of style sheets (which are separate to the HTML files) allows the quick re- styling of any
document, without modifying the original HTML.

3.Document maintenance –

16
The ability to re-style many documents allow us to easily make changes to the appearance of many
Web pages without separately editing each one.

4. Consistency –
Style sheets guarantee consistency throughout website.

5. Optimal file size –

The smaller the files the faster the download. Using style sheets can help minimize file sizes, since,
for example, every < font > tag, is defined in one place in a style sheet, rather than in multiple places
in the HTML file.

6. Style and structure –

first developed, HTML was only concerned with document markup and not with the document's
formatting. This eventually changed, with more and more functionality being added to HTML to
allow for formatting. With the introduction of style sheets, the HTML document is again concerned
only with structural document markup — all formatting is now placed in the style sheet.

17
3. INTRODUCTION TO JAVASCRIPT

3.1. JAVASCRIPT

JavaScript, often abbreviated as JS, is a programming language that is one of the core technologies of
the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the
client side for webpage behaviour, often incorporating third-party libraries. All major web browsers
have a dedicated JavaScript engine to execute the code on users' devices.

JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript
standard. It has dynamic typing, prototype-based object-orientation, and first-class functions. It is
multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has
application programming interfaces (APIs) for working with text, dates, regular expressions, standard
data structures, and the Document Object Model (DOM).

The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or
graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for
I/O.

JavaScript engines were originally used only in web browsers, but are now core components of some
servers and a variety of applications. The most popular runtime system for this usage is Node.js.

18
Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two
languages are distinct and differ greatly in design.

3.2. HISTORY OF JAVASCRIPT

3.2.1. Creation at Netscape

The first popular web browser with a graphical user interface, Mosaic, was released in 1993.
Accessible to non-technical people, it played a prominent role in the rapid growth of the nascent
World Wide Web. The lead developers of Mosaic then founded the Netscape corporation, which
released a more polished browser, Netscape Navigator, in 1994. This quickly became the most-used.

During these formative years of the Web, web pages could only be static, lacking the capability for
dynamic behaviour after the page was loaded in the browser. There was a desire in the flourishing web
development scene to remove this limitation, so in 1995, Netscape decided to add a scripting language
to Navigator. They pursued two routes to achieve this: collaborating with Sun Microsystems to embed
the Java programming language, while also hiring Brendan Eich to embed the Scheme language.

Netscape management soon decided that the best option was for Eich to devise a new language, with
syntax similar to Java and less like Scheme or other extant scripting languages. Although the new
language and its interpreter implementation were called LiveScript when first shipped as part of a
Navigator beta in September 1995, the name was changed to JavaScript for the official release in
December.

The choice of the JavaScript name has caused confusion, implying that it is directly related to Java. At
the time, the dot-com boom had begun and Java was the hot new language, so Eich considered the
JavaScript name a marketing ploy by Netscape.

3.2.2. Adoption by Microsoft

19
Microsoft debuted Internet Explorer in 1995, leading to a browser war with Netscape. On the
JavaScript front, Microsoft reverse-engineered the Navigator interpreter to create its own, called
JScript.[16]

JScript was first released in 1996, alongside initial support for CSS and extensions to HTML. Each of
these implementations was noticeably different from their counterparts in Navigator. These
differences made it difficult for developers to make their websites work well in both browsers, leading
to widespread use of "best viewed in Netscape" and "best viewed in Internet Explorer" logos for
several years.

3.2.3. The rise of JScript

In November 1996, Netscape submitted JavaScript to Ecma International, as the starting point for a
standard specification that all browser vendors could conform to. This led to the official release of the
first ECMAScript language specification in June 1997.

The standards process continued for a few years, with the release of ECMAScript 2 in June 1998 and
ECMAScript 3 in December 1999. Work on ECMAScript 4 began in 2000.

Meanwhile, Microsoft gained an increasingly dominant position in the browser market. By the early
2000s, Internet Explorer's market share reached 95%.[20] This meant that JScript became the de facto
standard for client-side scripting on the Web.

Microsoft initially participated in the standards process and implemented some proposals in its JScript
language, but eventually it stopped collaborating on Ecma work. Thus ECMAScript 4 was
mothballed.

20
3.2.4. Growth and standardization

During the period of Internet Explorer dominance in the early 2000s, client-side scripting was
stagnant. This started to change in 2004, when the successor of Netscape, Mozilla, released the
Firefox browser. Firefox was well received by many, taking significant market share from Internet
Explorer.

In 2005, Mozilla joined ECMA International, and work started on the ECMAScript for XML (E4X)
standard. This led to Mozilla working jointly with Macromedia (later acquired by Adobe Systems),
who were implementing E4X in their ActionScript 3 language, which was based on an ECMAScript 4
draft. The goal became standardizing ActionScript 3 as the new ECMAScript 4. To this end, Adobe
Systems released the Tamarin implementation as an open-source project. However, Tamarin and
ActionScript 3 were too different from established client-side scripting, and without cooperation from
Microsoft, ECMAScript 4 never reached fruition.

Meanwhile, very important developments were occurring in open-source communities not affiliated
with ECMA work. In 2005, Jesse James Garrett released a white paper in which he coined the term
Ajax and described a set of technologies, of which JavaScript was the backbone, to create web
applications where data can be loaded in the background, avoiding the need for full page reloads. This
sparked a renaissance period of JavaScript, spearheaded by open-source libraries and the communities
that formed around them. Many new libraries were created, including jQuery, Prototype, Dojo
Toolkit, and MooTools.

Google debuted its Chrome browser in 2008, with the V8 JavaScript engine that was faster than its
competition. The key innovation was just-in-time compilation (JIT), so other browser vendors needed
to overhaul their engines for JIT.

In July 2008, these disparate parties came together for a conference in Oslo. This led to the eventual
agreement in early 2009 to combine all relevant work and drive the

21
language forward. The result was the ECMAScript 5 standard, released in December 2009.

3.2.5. Reaching maturity

Ambitious work on the language continued for several years, culminating in an extensive collection of
additions and refinements being formalized with the publication of ECMAScript 6 in 2015.

The creation of Node.js in 2009 by Ryan Dahl sparked a significant increase in the usage of JavaScript
outside of web browsers. Node combines the V8 engine, an event loop, and I/O APIs, thereby
providing a stand-alone JavaScript runtime system. As of 2018, Node had been used by millions of
developers, and npm had the most modules of any package manager in the world.

The ECMAScript draft specification is currently maintained openly on GitHub, and editions are
produced via regular annual snapshots. Potential revisions to the language are vetted through a
comprehensive proposal process. Now, instead of edition numbers, developers check the status of
upcoming features individually.

The current JavaScript ecosystem has many libraries and frameworks, established programming
practices, and substantial usage of JavaScript outside of web browsers. Plus, with the rise of single-
page applications and other JavaScript-heavy websites, several transpilers have been created to aid the
development process.

3.3. Trademark
"JavaScript" is a trademark of Oracle Corporation in the United States. The trademark was originally
issued to Sun Microsystems on 6 May 1997, and was transferred to Oracle when they acquired Sun in
2010.

22
3.4. Website client-side usage
JavaScript is the dominant client-side scripting language of the Web, with 98% of all websites (mid–
2022) using it for this purpose. Scripts are embedded in or included from HTML documents and
interact with the DOM. All major web browsers have a built-in JavaScript engine that executes the
code on the user's device.

3.4.1. Examples of scripted behaviour

Loading new web page content without reloading the page, via Ajax or a WebSocket. For example,
users of social media can send and receive messages without leaving the current page.

Web page animations, such as fading objects in and out, resizing, and moving them. Playing browser

games.

Controlling the playback of streaming media.

Generating pop-up ads or alert boxes.

Validating input values of a web form before the data is sent to a web server.

Logging data about the user's behaviour then sending it to a server. The website owner can use this
data for analytics, ad tracking, and personalization.

Redirecting a user to another page.

Storing and retrieving data on the user's device, via the storage or Indexed DB standards.

3.4.2. Libraries and frameworks

Over 80% of websites use a third-party JavaScript library or web framework for their client-side
scripting.

jQuery is by far the most popular library, used by over 75% of websites. Facebook created the React
library for its website and later released it as open source; other sites, including Twitter, now use it.
Likewise, the Angular framework created by Google for

23
its websites, including YouTube and Gmail, is now an open-source project used by others.

In contrast, the term "Vanilla JS" has been coined for websites not using any libraries or frameworks,
instead relying entirely on standard JavaScript functionality

24
4. Minimum Hardware and Software requirements

Below is a list of the minimum Hardware and Software requirements to access the basic website content.

4.1. Operating System -

• Windows 7, Windows 8 , Windows 10 or Windows 11.

• Mac OSX 10.8, 10.9, 10.10 or 10.11 Hardware:

• Processor (CPU) with 2 gigahertz (GHz) frequency or above

• A minimum of 2 GB of RAM • Monitor Resolution 1024 X 768 or higher

• A minimum of 20 GB of available space on the hard disk

• Internet Connection Broadband (high-speed) Internet connection with a speed of 4 Mbps or higher

• Keyboard and a Microsoft Mouse or some other compatible pointing device

• Sound card

• Speakers or headphones

• Strongly Recommended - Microphone and Webcam

4.2. Browsers -
• Chrome* 36+

• Edge* 20+

• Mozilla Firefox 31+

• Internet Explorer 11+ (Windows only)

• Safari 6+ (MacOS only)

25
*Google Chrome version 42+ and Microsoft Edge do not support NPAPI-type plug- ins, including
Java plug-ins and many media browser plug-ins. Blackboard does not support these browsers for use
with media that require NPAPI plug-ins for viewing.

4.3. Browser Configuration -

Browser must be configured as follows:

• Strongly Recommended to trusted sites.

• JavaScript must be enabled

• Cookies must be enabled.

• Pop-up windows must be enabled.

4.4. Software -
• Microsoft Office--a free copy of Office 365

• PowerPoint viewer--PowerPoint Viewer lets you view full-featured presentations created in

PowerPoint 97 and later versions.

• Adobe Acrobat Reader --for PDF files Adobe® Reader® software is the global standard for
electronic document sharing. It is the only PDF viewer that can open and interact with all PDF
documents. Use Adobe Reader to view, search, digitally sign, verify, print, and collaborate on Adobe
PDF files.

26
5. ABOUT THE PROJECT
With our academic knowledge and a little bit of knowledge of the basics of HTML, CSS, and
JavaScript, we have made a tool to test our typing speed so that we can judge how fast we are while
typing. In addition, it also helps us improve our regular typing speed and reduces our rate of typing
errors.

You can converse with others more quickly the faster you can type. Any type of task that involves
typing will allow you to save a tonne of time. You won't really notice it at first, but it will take a few
more minutes. The minutes will eventually grow into hours of time saved, which you can use for
other things. There are various platforms that require fast typing speed, and there are also various job
opportunities for a person who types faster.

According to a survey report, the ideal typing speeds by age are as follows: Elementary
school (Grades 3–5): 8–15 WPM.
Middle school (Grades 6–8): 12–25 WPM

High school (Grades 9–12): 20–35 WPM

College/Adult: 50 WPM.

But we Indians are far away from this average typing speed report. Only about 40– 50% of the
population is able to compete with others in this fast-typing era.

But relax there is no need to be stress that we are not able to type fast because by following some
simple tips and tricks, we will also be able to type faster like others. All we need to do is to take a
deep breath, relax your fingers, and move slowly. You need to be focused and not annoyed when
attempting the typing speed test. The best thing you can do to start typing faster is to type more. The
more practise you get under your belt, the faster your "typing-fu" will be. It’s all about developing
muscle memory. Just make sure you are reinforcing good habits and not ones that will leave your
fingers hurting after an intense typing session.

27
6. FAQ’S ABOUT THE PROJECT

There are various Questions that arises in our mind before taking a Typing Speed Test, that are-

1. Why is it important to take a typing speed test?

~ Taking a typing speed test establishes your average typing speed (WPM) and accuracy, which is
an important baseline to know so you can increase speed and improve accuracy with practice.
Periodically taking typing speed tests can help you track your progress and measure improvement.
You even can use your WPM score from the typing test on your resume to highlight your
administrative skills!

The faster you type, the faster you will be able to communicate with others. You will be able to save a
ton of time on any kind of work that requires typing. At first, it will be a couple of extra minutes that
you won’t really notice. Over time, the minutes will turn into hours of saved time that you can spend
on other activities.

2. How is typing speed measured?

~ Typing speed is measured by the number of words you can type correctly in a set amount of time.
A “word” is equivalent to five keystrokes. During a test, both speed and accuracy are measured. You
will receive a number that indicates your average words per minute (WPM) and a percentage that
indicates your accuracy.

3. What is the WPM typing test?

~There are different types of tests for typing. This one is a typing test that expresses your typing
skills in words per minute. The more you practice typing, and the more you test your typing speed,
the higher your WPM score will be. Some online typing tests and typing test games focus only on
WPM typing. The disadvantage of the WPM typing test is that you are only learning how to type fast.
WPM typing tests do not show your accuracy.

28
4. What Is CPM and How Can You Calculate It?

~ The CPM stands for the number of characters you type per minute, including all the mistakes.
“Corrected” scores count only correctly typed words. WPM is just the corrected CPM divided by
five. This is the de facto international standard.

5. How do I increase my typing speed?

~ Take a deep breath, relax your fingers, and take it slow. You need to be focused and not annoyed
when attempting the typing speed test. The best thing you can do to start typing faster is to type more.
The more practice you get under your belt, the faster your ‘typing-fu’ will be. It’s all about
developing muscle memory. Just make sure you are reinforcing good habits and not ones that will
leave your fingers hurting after an intense typing session.

Practice typing as much as you can. Type a lot, type tests, and practice typing tests. Improve your
words per minute typing results, and test your typing speed often. Our typing speed test will keep
track of all typing tests that you’ve taken in the past so you will be able to see the improvements over
time. You will be able to see how your speed typing has changed. If you can do a five-minute typing
test every day, your typing skills will increase dramatically.

6. How fast should I type?

~ The ideal typing speeds by age are as follows:

Elementary school (Grades 3–5): 8–15 WPM

Middle school (Grades 6–8): 12–25 WPM

High school (Grades 9–12): 20–35 WPM

College/Adult: 50 WPM

29
7. How Many Words per Minute Is a Good Score?

~ An average professional typist usually types around 65 to 75 WPM. More advanced

positions require 80 to 95 (this is typically the minimum required for dispatch positions and
other time-sensitive typing jobs). There are also some advanced typists whose work requires
speeds above 120 WPM.

8. What Is the Best 10-Finger Typing Layout?

~ Of course, you should use ten fingers for typing, but you can start with a layout that’s the most
comfortable for you. The small bumps on the F and J keys will help your fingers locate the correct
position without looking. This setup should give you a full range of motion. The more you type, the
faster you will get. There are a few alternative layouts that propose a more ergonomic approach to
typing. You could also take the big leap and try out the Dvorak keyboard, but that’s a different story.

30
7. CODE IMPLEMENTATIONS

7.1. HTML Code Implementation

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Typing Test</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="stats">
<p>Time: <span id="timer">0s</span></p>
<p>Mistakes: <span id="mistakes">0</span></p>
</div>
<div
id="quote"
onmousedown="return false"
onselectstart="return false"
></div>
<textarea
rows="3"
id="quote-input"
placeholder="Type here when the test starts."
></textarea>
31
 <button id="start-test" onclick="startTest()">Start Test</button>
<button id="stop-test" onclick="displayResult()">Stop Test</button>
<div class="result">
<h3>Result</h3>
<div class="wrapper">
<p>Accuracy: <span id="accuracy"></span></p>
<p>Speed: <span id="wpm"></span></p>
</div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>

32
7.2. CSS Code Implementation

*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #3066f6;
}
.container {
width: 80vmin;
padding: 50px 30px;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.stats {
text-align: right;
font-size: 18px;
margin-bottom: 30px;
}
.stats span {
font-weight: 600;
}
#quote {
text-align: justify;
margin: 50px 0 30px 0;
}
textarea {
resize: none;
width: 100%;
border-radius: 5px;
padding: 10px 5px;
font-size: 16px;
}
button {
float: right;
33
 margin-top: 20px;
background-color: #3066f6;
color: #ffffff;
border: none;
padding: 10px 30px;
border-radius: 5px;
font-size: 18px;
}
.result {
margin-top: 40px;
display: none;
}
.result h3 {
text-align: center;
margin-bottom: 20px;
font-size: 22px;
}
.wrapper {
display: flex;
justify-content: space-around;
}
.wrapper span {
font-weight: 600;
}
.success {
color: #44b267;
}
.fail {
color: #e81c4e;
}

34
7.3. JavaScript Code Implementation
//Random Quotes Api URL
const quoteApiUrl = "https://api.quotable.io/random?
minLength=100&maxLength=1000";
const quoteSection = document.getElementById("quote");
const userInput = document.getElementById("quote-input");
let quote = "";
let time = 120;
let timer = "";
let mistakes = 0;

//Display random quotes

const renderNewQuote = async () => {
//Fetch contents from url
const response = await fetch(quoteApiUrl);

//Store response
let data = await response.json();

//Access quote
quote = data.content;

//Array of characters in the quote

let arr = quote.split("").map((value) => {
//wrap the characters in a span tag
return "<span class='quote-chars'>" + value + "</span>";
});
//join array for displaying
quoteSection.innerHTML += arr.join("");
};

//Logic for comparing input words with quote

userInput.addEventListener("input", () => {
let quoteChars = document.querySelectorAll(".quote-chars");
//Create an arrat from received span tags
quoteChars = Array.from(quoteChars);

//array of user input characters

let userInputChars = userInput.value.split("");

//loop through each character in quote

quoteChars.forEach((char, index) => {
//Check if char(quote character) = userInputChars[index](input character)
if (char.innerText == userInputChars[index]) {
35
 char.classList.add("success");
}
//If user hasn't entered anything or backspaced
else if (userInputChars[index] == null) {
//Remove class if any
if (char.classList.contains("success")) {
char.classList.remove("success");
} else {
char.classList.remove("fail");
}
}
//If user enter wrong character
else {
//Checks if we alreasy have added fail class
if (!char.classList.contains("fail")) {
//increment and display mistakes
mistakes += 1;
char.classList.add("fail");
}
document.getElementById("mistakes").innerText = mistakes;
}
//Returns true if all the characters are entered correctly
let check = quoteChars.every((element) => {
return element.classList.contains("success");
});
//End test if all characters are correct
if (check) {
displayResult();
}
});
});

//Update Timer on screen

function updateTimer() {
if (time == 0) {
//End test if timer reaches 0
displayResult();
} else {
document.getElementById("timer").innerText = --time + "s";
}
}

//Sets timer
const timeReduce = () => {
time = 60;

36
 timer = setInterval(updateTimer, 1000);
};

//End Test
const displayResult = () => {
//display result div
document.querySelector(".result").style.display = "block";
clearInterval(timer);
document.getElementById("stop-test").style.display = "none";
userInput.disabled = true;
let timeTaken = 1;
if (time != 0) {
timeTaken = (60 - time) / 100;
}
document.getElementById("wpm").innerText =
(userInput.value.length / 5 / timeTaken).toFixed(2) + " wpm";
document.getElementById("accuracy").innerText =
Math.round(
((userInput.value.length - mistakes) / userInput.value.length) * 100
) + " %";
};

//Start Test
const startTest = () => {
mistakes = 0;
timer = "";
userInput.disabled = false;
timeReduce();
document.getElementById("start-test").style.display = "none";
document.getElementById("stop-test").style.display = "block";
};

window.onload = () => {
userInput.value = "";
document.getElementById("start-test").style.display = "block";
document.getElementById("stop-test").style.display = "none";
userInput.disabled = true;
renderNewQuote();

37
8. IMPLEMENTED OUTPUT SCREEN

9. CONCLUSION

At the end of this project, we have successfully created an innovative platform that assists the
young generation in typing faster like a pro.

This project will assist them in testing and improving their current typing speed, resulting in faster
speed, reduced typing errors, faster work performance, and much more.

10. REFERENCES

 https://www.google.co.in/

 https://www.w3schools.com/

 http://github.com/

38
 https://www.wikipedia.org/

39