Titlul lucrarii: Web app – Alacrity.

Student: Carpine Marius Andrei.

Tipul lucrarii: Licenta.

Coordonator: Crina Anina Bejan.

Introduction

The reason i chose this subject for my graduation thesis is the fact that i want to work in the
software industry,the web development branch,to be precise.In my opinion,this field of work is
the fastest growing and most in demand in the job market,it offers the most flexibility and
highest earning potential while challenging you to continuously learn about the newest
technologies and trends,training the brain to always think logically,improving your problem
solving skills making you a smarter,more able person in day to day life too.

The main reason i love this industry is the fact that you can be completely self taught,you can
learn anywhere,you only need a laptop and an internet connection.I have always disliked
conventional and rigid means of learning,having a path of learning set in stone and having to
follow it without question is outdated and stressful in my opinion.In programming you can
choose the way you want to learn,be it online courses,bootcamps,videos,books,everyone can
learn their own way,optimizing their productivity.

That being said,everything has its drawbacks and self teaching is no exception.In my opinion the
main reason being self taught can be difficult is the fact that you have to put together all the
pieces yourself,finding and putting together all the steps to building a website with a fully
functional backend can be a very daunting task with the vast amount of information that is
available on the internet,it can be compared to drinking water from a fire hydrant,but in this case
it’s information.

Another reason software development is great in my opinion is the opportunity of working from
home,this option is ideal for people who can’t cope with the stress of an office
environment.Offices can be very distracting,you could be hard at work on solving a
problem,getting into a “flow” state of concentration when you are at peak productivity and
someone interrupts you,co-workers eating at their desk,people talking loudly,this can cause you
to lose focus and waste precious time while working on a deadline project.I believe work from
home solves these problems but it is not without its drawbacks.

A challenge someone might face while working from the comfort of their own home is getting
too comfortable,being tempted to spend time on entertainment and not working as hard,but i
believe this is a problem of motivation that can be fixed easier than the disadvantages of in-
office work.Overall i would say work from home is a better alternative,not having to

commute for hours to the office and back,and not having to deal with a potentially stressful
environment is the better 

option in my opinion.

Web applications are my favorite type of apps,they are built using standard technologies like:

 HTML,CSS and Javascript.

 They run inside of a standard web browser like: Safari,Chrome,Firefox.

 They are built and hosted like any web application or website on the internet.

The only difference is,they are built to look good and function well on any mobile devices,this
means that they are responsive and their design includes a “mobile first” approach,this means
their main focus is on the mobile view firsthand but make it work for desktop devices as well.

The advantages of building a web app include:

 They are easy to build,using web standards like HTML,CSS and Javascript,you don't
need to learn any difficult languages like java or swift.

 It is easy to host and maintain,simply upload to a hosting account with a domain,if you
build a static HTML site you can host it anywhere.

 Use any language/technology, you can use any stack or web technology that you
want,you can create a Python,Laravel,Node JS app, there are no limitations in that aspect.

  Web apps are cheaper than hybrid or native apps.

 One application for all platforms.The app is going to run on any

device,iOS,Android,desktop and laptop computers as long as it can run a browser and has
an internet connection.
The disadvantages of building a web app:

 The biggest disadvantage is that it needs a browser to run.This means that the user has to
go on Chrome on their iOS device or any browser they use on their phone,type in the
URL of the app and that leads to a really poor user experience.

 Slower than native apps.The reason being,native apps are created for a specific device
and they are optimized to run on that device as well as possible.

 Cannot interact with device utilities.For instance there is no API for the camera,for geo-
locations or similar features.

The World Wide Web,also known as the Web, is in my opinion the most fascinating piece of
software ever created,thus I would like to give a brief history of it.

It is the world’s main software platform,a space of information where web resources and
documents are accessed using a web browser.

One of the most important internet pioneers,a computer scientist by the name of Tim Berners-
Lee invented the World Wide Web in 1989,he used to work at CERN which is an european
organization that runs the largest laboratory in the world that deals with particle physics,the
laboratory being located in Switzerland.

But the scientists at CERN had one big problem,sharing information between each other was
very difficult,people had to log into different computers whenever they wished to share
information with each other,thus Tim started working on a technology called “hypertext”,which
is basically a piece of text that when clicked,leads you to some place else on the internet.In
essence he created this system that allows anyone to link text within text.

At this time the internet was really popular,the world didn’t have this type of technology so he
really wanted to make sure everyone had access to it,he created a document called “Information
Management:A Proposal. (CERN[1])

The main things that came from this document are:

 The invention of HTML or Hypertext Markup Language.Used to create pages displayed

on the internet.The backbone of the internet basically.

 HTTP,Hypertext Transfer Protocol.Allows anyone to get information from linked

resources on the internet.
  URL,Uniform Resource Identifier.An address that is unique and identifies each resource
on the internet.

Tim continued to pioneer universal access to information,creating the first browser called
WoldWideWeb.app which was made publicly available in 1990.in 1993 he pushed for the
technology to be open source,meaning no fees and no permission from anybody in order to use
it.In 1994,Tim leaves CERN to go to MIT to create the World Wide Web Consortium,which was
a internet community,pushing for open source standards across the world.

The biggest open web standards was decentralization,meaning you don’t need permission to post
something on the internet,no single point of failure and no kill switch in case someone tries to
shut down the internet.Because of standards like this we have a mostly open source and
uncensored internet,supporting the right to access information to further us as a human race.

1. Chapter 1 : How does the internet work?

1. The internet vs the web.

1. The internet.

It is a global network of networks that utilizes the internet protocol suite TCP/IP for
communication between devices and networks,it consists of public,private,business,government
and academic networks of global and local scope,it is connected by a vast number of
wireless,electronic and optical network technologies.

1. The world wide web.

Also known as the web is an information system in which anyone is able to share resources and
documents over the internet,those documents and resources are identified by URLs (Uniform
Resource Locators).

1. How browsing the web works.

Let’s say I am using a laptop and a working browser,Google Chrome for example.I type in
google.com and hit enter,what happens under the hood?.

When i hit enter a request is made all the way to my internet service provider,they get the request
and they send it off to the DNS (domain name servers),the DNS is essentially like a phone
book,one that has the list of all the URLs like google.com and it has the addresses of all of
them.They send my request with the google address attached to it back to my internet service
provider and back to my browser.

I receive the IP address,which is a string of unique characters that identifies devices on a

network,every device connected to the internet has one.Now the browser sends another
request,to the google servers.It knows where the google servers are because i now have the IP
address.In the next step,the google servers sends the HTML,CSS and Javascript files to my
browser in order for me to view the google website.

1. The internet’s backbone

If a user wishes to watch a youtube video for example,the data displayed on the user's screen
needs to travel thousands of miles from a google data center to reach the user's device.In this
section i am going to explain the details of this data’s journey.

The data center has the video stored inside it.But how does the data reach the users mobile phone
or laptop for example?.

It is done with the help of a network of optical fiber cables,which connect between the data
center and the user’s device.A phone could be connected to the internet via cellular data or a wifi
router,but ultimately the phone will be connected to the network of optical fiber cables.

In this example,the video a user is watching is held within a data center,more precisely a solid
state device in the data center.The SSD in question is the internal memory of the server,the
server being a powerful computer with the  job of providing the user with the video or other
stored content when requested.

1. How the data transfers from the center to the user’s device,via fiber optic cables.

Every device that is connected to the internet has an IP address,it is a unique string of numbers
that identifies the device connected to the internet.An IP address acts as a shipping address
through which all information reaches its destination.The internet service provider decides the IP
address of the user’s device,the user will then be able to see what IP address the internet service
provider gave their device.

The server from the data center has an IP address.It has a website and you can access it just by
knowing the IP address of the server,however it is very difficult to remember the address,thus in
order to solve this problem domain names like youtube.com are being used,they correspond to IP
addresses,being easier to remember than a string of numbers.

As explained in the above section,the user enters the domain name,the browser sends a request to
the DNS server to get the IP address.After getting the IP address the browser forwards the
request to the data center,to the respective server to be more precise.

When the server gets a request to access a specific website,the flow of the data starts,the data is
transferred in a digital format through optical fiber cables,in the form of light pulses.The light
pulses sometimes have to travel thousands of kilometers through the optical fiber cable in order
to reach their destination.During their journey,often times they have to travel through rough
terrain such as under the sea or hill,mountain areas.

This network of complex fiber optical cables is the backbone of the internet,these cables carrying
the light are stretched across the sea bed to everyone’s doorstep,connecting to the router.The
router converting the light signals to electrical signals,then an ethernet cable is used for
transmitting the electrical signals to the user’s laptop for example.However if someone is
accessing  the internet through a cellular data,from the optical cable the signal has to be sent to a
cell tower and from the cell tower the signal reaches the phone through electromagnetic waves. 

(Gralla #)[2]

1. Chapter 2:Technologies used for developing web applications

1. HTML,CSS and Javascript

Those three technologies are responsible for making web pages,they are the only thing that the
browser understands,the only technologies the browser expects web pages to utilize and they
each have a different responsibility.

1. HTML
Hypertext Markup Language is the language that determines the composition of the content in a
web page.It was created in 1989 by Tim Berners-Lee at CERN who had just invented the web,he
required a publishing language to present content on the web,thus he opted for a syntax based on
the standard generalized markup language.This language uses opening and closing tags to add
meaning to unorganized text,for example: <h> for heading,<p> for paragraph or <a> for
anchor,to link to a different web page.

This language went through a plethora of changes during the rising of the internet and in 2008 it
was standardized as HTML 5.

In the modern day HTML contains tags to handle a plethora of different media types such as :
<video>,<audio> or even <canvas> for drawing custom graphics on the fly.

The basic HTML element starts with an opening and closing tag,in the middle there is content
which can be text or other HTML elements called “children”,<h1><p>cat</p></h1> for
example.An opening tag can also have one or more attributes,those are key value pairs that may
customize the appearance of the element.

To build a web page we may create a file and name it index.html,this file containing a hierarchy
of nodes that are based on the DOM (Document Object Model)

A page on the web written in HTML starts with a HTML tag and has 2 children,a head and a
body.The head containing things that are not directly shown on the web page like a meta tag for
giving the page a description or a title.

The body is the tag that stores the actual user interface for the user.For example we may add a
<h1> heading and a <p> paragraph of text,if we want an image we can add an <img> tag with a
“src” attribute for the file path to the respective image also you can add an “alt” attribute to make
it accessible to screen reader.

The html code above will result in the following page displayed on a web page.

The thing that makes web pages revolutionary is them being able to link to other web pages on
the information superhighway,by creating a link with an anchor tag <a></a> then adding a
“href” attribute for the web page you wish to navigate to when clicked.

<a href=”catzanddoggos.com”>cats and dogs website</a>.

You can also add structural tags like division <div></div>,used for grouping elements together
which then can be styled to represent UI elements like a dropdown menu. (Gralla #)[3]
 1. CSS

Cascading Style Sheets is a stylesheet language that makes websites look good.A browser by
default will render HTML as a bland black and white document,CSS makes the markup of the
website look better.It modifies the color,size,layout and positioning of the HTML elements.

First released in 1996,by 1999 it developed into CSS3.To this day the language continues to
evolve,adding more features but a CSS4 update will never be made,only additional features to
the existing language.

A common way to write CSS starts with a selector that could be paired with an element in the
document containing the HTML.

Next,one can use braces in order to create a declaration block,containing properties that change
the appearance of said element,also known as a CSS rule.

The problematic thing is that CSS cascades,in a style sheet there could be multiple rules that are
assigned to the same element,this forms a hierarchy and rules which are more specific will
overwrite the rules of their parents,thus ordering of css rules matter.

In conclusion,the browser uses the concepts inheritance,specificity and cascade in order to

control the styles that are applied to an element.

We can think of every HTML element as a box,the content being in the middle followed by a
padding,a border and margins.The size of every area in the box can be customized,when defining
properties like margin or padding that can take pixel values or responsive values which are
relative to the parent element or a percentile of the viewport

By default these boxes will be stacked on top of each other to form a web page but there are
tools like grid layout or flex layout that control how they flow together.

(Grant #)[4]

It is able to also detect user interaction by using pseudo selectors like :hover,changing the color
on element when hovered over for example.

CSS has the option of adding logic to the code with custom properties or variables also by
making media queries that apply styles conditionally,based on device or style.

1. Javascript
Created in 1995 by Brendan Eich with the purpose of building a scripting language that is easy to
learn,made for the netscape browser.It is widely known for developing front-end web
applications,being the only language alongside web assembly that is natively supported in
browsers.

It can:

 Develop server side applications with the Node js technology.

 Mobile applications with Ionic or React Native.

 Desktop applications with Electron.

It is an interpreted scripting language but with the tools V8 engine and chromium it is converted
into machine code using a just-in-time compiler.

To write Javascript you need to create a file ending in .js,you can use the console in order to log
a value while using the built in debugger.

If you want to run the file in a front-end browser,you could reference it via a script tag,the
browser executing it when the html file is opened.

Javascript is often used to grab elements from the DOM in a website.For example we can grab a
button element with the document.querySelector(‘button’) syntax.Then it can be assigned to a
variable using const let or var,in case we wish to make the button interactive we could add an
event listener to it by assigning a function to the “onclick” event.

The function will be executed by the event loop whenever it is clicked.

Functions exist as  first class objects who support functional programming patterns,however
javascript also supports inheritance and classes for the purpose of object oriented
patterns.Although it is single threaded it also work asynchronously with the help of the promise
API,which supports the async await syntax.

Javascript code may also run on a server due to node js runtime,rather than buttons on a web
page it can interact with things similar to the file system api.One can execute code on the server
by opening the terminal and entering the node command for it. (Haverbeke #)[5]
 1. Most in-demand languages for web apps.

1. Java.

Java is great for banking and finance-related websites due to its solid functionality and security
features.

After Python, Java is the most popular programming language, followed by JavaScript. Java has
been the most widely used programming language for decades since it facilitates  both vertical
and lateral scalability. Furthermore, you no longer need to spend hours on invasive coding to
improve website performance and reaction time with Java full-stack experts. As a result, there
will always be a higher chance for web app development.

With its cross-platform nature, it adds higher benefit to web development for businesses. The
Java Running time — environment, for example, converts code into machine code that is also
consistent with native OS, whether it is MacOS,Windows or Linux. Furthermore, if you're trying
to employ web programmers, you'll discover that most businesses choose Java due to its strong
security features.

Spring, Hibernate, Play, GWT, and JSF are some of the most optimal frameworks for web app
development. It can also create complicated web apps with good performance.

For just about any Java web app development firm, Spring was always the most convenient and
trusted framework.

1. PHP

In the year 2022, PHP will be one of the most used languages for developing online applications.
As it is a dynamic, server-side scripting language, it is an excellent choice for developing fully
effective PHP web development services. WordPress is by far the most widely used PHP-based
software program.

It's suitable for static or dynamic websites as it's an open-source language featuring (built-in
tools and modules). It makes development faster and easier by providing many automation
tools,frameworks and libraries.

Furthermore, its management is utilized to construct high-quality web apps in much less
timeframes, making the programming language easier to debug.

It offers strong frameworks like Laravel, which allow PHP programmers to quickly construct
web apps that follow the modern-view-controller architectural pattern.
Web apps built with it include:Yahoo,Facebook,WordPress,Wikipedia,Flickr.

1. Python

Python has surpassed all other programming languages in terms of popularity. It is one of the
most popular web app development technologies, and its popularity among Python programmers
continues to grow.

Python is the top pick for novices for a variety of reasons, including the code's simplicity. It
saves time for developers, making it suitable for developing unique web applications. Python is
preferred by any website development company aiming to complete projects quickly while using
cutting-edge technology.

Python aids in the development of an application's server-side, or back end.

Python, like JavaScript, has a large ecosystem of frameworks, modules, and tools to help in
quick web application development.

Django aids in the development of full-stack web applications. You may also utilize Flask, a
minimalistic web development framework, for additional control.

Popular web apps created with it include:Pinterest,Dropbox,Uber,Instagram,Instacart.

1. Kotlin

It's great for both server-side and client-side programming, which makes it appealing to
programmers. Its popularity rose when Google designated it as an Android app developer. Kotlin
development services are supported by a statically typed general-purpose programming language
since it is simultaneously object-oriented and functional.

Kotlin is a high-level, object-oriented programming language in which "every value is an object"

and there are no primitive data types. It has strong and dynamic typing, as well as trash
collection that is automated.

Best suited for: (Web and android apps,client and server side) embedded systems.

1. Typescript
A collection of tools or JavaScript ++ additional features refers to this highly typed object-
oriented language. Within JavaScript code, it introduces static data. It simplifies and simplifies
the error-prone code, making it easier to read and debug.

What is the significance of TypeScript's appearance? JavaScript is a dynamic language with a lot
of versatility. The flexibility of codes, on the other hand, renders them prone to mistakes. Within
JavaScript code, TypeScript introduces static information. It makes web application development
less error-prone, easier to read, comprehend, and debug.

As a result, TypeScript is the best option.

Best used for:Javascript IDEs,Static checking,JS applications.

1. Pearl

Perl is a good fit for a certain purpose, and it's a programming language that's grown in
popularity among web developers. Previously, the main aim was to alter text; however, the scope
has expanded to include web applications, systems management, need, programming, and
network management. Development of a graphical user interface, for example

It's suitable in web application development and network management due to its text
manipulation and speedy development cycle. It has benefits since it is a fast-developing
language. Rapid development cycle and text manipulation

If a given notion succeeds, it is therefore a great language for businesses. It is, however, not as
common as some others, which have been consistent for years.

Used for : System administration,network programming,GUI development.

1. C#

Because it permits object-oriented development, it is often used as a benchmark language.

C Sharp) is really an object-oriented language based on C,while also being general-purpose,

similar to C++ and C Sharp. It was created as part of Microsoft's.NET framework for developing
Windows applications.

Top windows apps created with it:Photoshop,Skype,PaintBrush,MS Office,SQL.

Generally used for:Web app development,windows apps,building 2D and 3D games.

(Berkeley Extension)[6]

1. Chapter 3: Web app, Alacrity

1. How the app works

I have always found speed typing apps quite fun and addictive thus i have decided to create my
own,the idea of the app is to write the displayed random quote in a set amount of time.

There are 3 buttons with 3 difficulties given:

 Easy - write the quote in 30 seconds.

 Medium - write the quote in 20 seconds.

 Hard write the quote in 10 seconds.

If you fail or succeed to write the quote in selected amount of time you will be given 1 point and
the score will update but if you fail to do so the score will be set back to 0.

The random quote is generated from an API “https://api.quotable.io/random”.

There are also 3 buttons for :

 Stopping the application.

This will stop the time and give you time to think.

 Resume.

You can then restart the timer.

 Reset.

Completely reset the application.You will lose all points,the timer will reset and you will get a
new randomly generated quote.

If you lose the game and get a “Game Over” message being displayed,the first time you type the
quote given correctly,you will not be awarded 1 point because the timer will be at 0 and that
would be considered cheating.
Scoring points is significantly easier on a desktop device compared to a mobile device,having a
physical keyboard is a huge advantage compared to having to hold your phone and type out the
random quote given.

The random quote generator is also very polarizing,the random quote given can often times
contain a big number of characters making the difficulty excruciatingly difficult,being able to
score points when given a quote of 7 paragraphs is exceedingly difficult,only the fastest fingers
will be able to compete.But often times the quote can be quite short,offering a relatively easier
challenge yet still quote difficult for the average user.

In the future i hope to expand the application,adding a multiplayer online environment where
others can compete and earn cosmetic rewards for their avatars or characters.

The typeracer website has been a huge inspiration for this project and i wish in the future to

expand on their idea and strive to implement and design it even better.

(Steele)[7]

1. Technologies used

1. The HTML part:

For the structure of the web application i am using basic HTML,firstly i created an index.html
file where the code for the markup is stored,when clicked it opens the application in a web
browser.I am using Visual Studio Code to edit all of my files.

The very first part of a HTML document is the <head> tag.The other tags inside the <head> tag
are:

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />.

If someone is viewing the web page on a mobile device,this tag will make the page scale to the
mobile device’s width.

 <meta charset="UTF-8">
This tells the browser what kind of character encoding is used,it is the default and is the
encouraged tag for unicode.

 <title>Speed Eater</title>

The text inside the title tag is displayed on the browser tab of the application,it is important to
have a fitting page title for SEO purposes,it will tell the search engine what your page is about.

 <link rel="stylesheet" href="style.css">

This link tag connects to the style.css file,it is the file where the styling for the HTML elements
is written.

 <link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuX
oPkFOJwJ8ERdknLPMO" crossorigin="anonymous"  />

This link connects to my CSS framework of choice, Bootstrap.This framework allows for easier
markup and styling of the page.

Next,the <body> tag is used to enclose all elements within the page and where the general layout
of the page happens.

First i added a <header> tag which displays the title of the application with a black background.

With a class of “text-center” Bootstrap will center the text within the header, the “p and mb”
stand for the padding and margins of the header element.

When opening the application from the index.html file,the header component will look like this,

The next element is  a <div> which contains three buttons,the buttons are used to select the time
in which you must write the next in order to score a point.

This element has a class of “container” which makes it responsive when resizing the
page,Bootstrap gives it this functionality.

<div class="container text-center mb-3">

      <button id="easy" type="button" class="btn btn-dark mx-2">Easy</button>

      <button  id="medium" type="button" class="btn btn-dark mx-2">Medium</button>

      <button  id="hard" type="button" class="btn btn-dark mx-2">Hard</button>

    </div>

It is displayed like this in the page.

Next up is another <div> container which holds  instructions on how to use the app,the random
quote generated by the API i am using,a text input field and a short message which indicated the
state of the game,be it a win,loss or game over.

(“Structuring the web with HTML - Learn web development | MDN”)[8]

The bootstrap classes in this code snipper serve the purpose of centering the elements and text
inside this <div> container in the middle of the page.There are also classes responsible for the
font weight of the text and the color.

The “id” attribute is used selecting and manipulating the elements,for the example the
“seeconds” id dynamically updates the number of seconds in which you have to finish the task,
based on which difficulty button the user clicks on.

This code displays in the web page like this:

The next code snippet is responsible for the bottom half of the page.

It holds a <div> container with 3 buttons,those have the functionality of “Stop” “Resume” and
“Reset”,their use is explained by their names.

I have created another <div> as a child to the first one,containing the remaining time in which
you have write the quote to score a point and the score which is dynamically updated.

The code is displayed on the web page like this:

Next we have an instructions <div> element to explain how the game is played.

The instructions are displayed in the browser like this.

Lastly there is a <script> tag which links to the javascript file that creates the interactivity of the
page.

1. The CSS part.

Used for describing the presentation of the HTML page.First step is to create a .css file,in this
case i have named it style.css.

In Visual Studio Code,first thing i have done is import a new google font that changes the styling
of all the text in the application.

I have then selected “.correct” and “incorrect” id’s that i have created with javascript,which i will
explain later on.Their functionality is to change the text color when the user inputs text that
matches the quote generated or does not match it.

The text displayed will change color to a shade of yellow if the text being typed matches the one
from the code generated otherwise it will be a shade of red.

I have used media queries to resize the text font,size of buttons and input all the way up to 992px
width,this optimizes the size of text and elements for a better view on mobile.

In the final part of my css page i have changed the <body> background to a gradient color and
styled the elements black with wite text giving it a nice contrast.

After the styling of the page with CSS,the final product looks like this.

The CSS framework Bootstrap did most of the work for me in regards to styling the app and the
layout of it.

Bootstrap is designed to be an open-source and free CSS framework for front-end web
development that is focused on responsive, mobile-first design. Covering fonts, menus, buttons,
navigating, and other interface components, it includes HTML, CSS, or (alternatively)
JavaScript-based design templates.

Bootstrap is an HTML, CSS, and JS library aimed at making the creation of informational web
pages easier (as opposed to web apps). The main reason for include it in a web application is
really to apply Bootstrap's color, size, font, and layout options to it. As a result, the most
important element is if the programmers in charge like the options. Bootstrap offers basic style
settings for all HTML components once it is applied to a project. As a result, texts, tables, and
form components appear consistently across web browsers. Developers may also use the CSS
classes offered in Bootstrap to further personalize the look of their content. For instance,
Bootstrap has bright and dark-colored tables, website headers, and more.

(“CSS: Cascading Style Sheets | MDN”)[9]

 1. The javascript part

I am using javascript as my scripting language of choice,it is responsible for the interactivity of

the application.Using this technology i was able to make the application dynamic and create
events such as:

 Changing the difficulty of the game.

 Changing the number of seconds displayed when selecting a difficulty.

 Generating a random quote with an API.

 Creating a function that recognizes the correct and incorrect words being typed when
compared to the random quote generated.

 The status of the game being displayed based on a win or loss.

 Stop,resume and reset buttons dynamically changing the page on click.

 Elapsed time being dynamically displayed based on difficulty and resetting on button
click.

 Points counter updating on win or loss,and much more.

When implementing javascript on my page the first steps were to:

 Create a file with the .js text at the end of the name.

 Open Visual Studio Code and add said file in the application folder with the other app
files.

 Next is linking the Javascript file to the HTML file, I opened the index.html file and
added the <script> tag with the javascript file name at the end of the <body> tag,in this
case i named it main.js
Figure 31.script tag linking the pages.

After doing so, the javascript file is ready to be edited, this way you can manipulate the elements
inside the HTML page and dynamically change it.I enjoy working with this language because:

 To write or run JavaScript, i don't really need any special software.

 With minimal bootstrapping, it's simple to experiment and prototype new concepts.

 Data administration is simplified because to the JSON format and typeless variables.

 Creating new projects is made simpler by the abundance of plugins, modules,

frameworks, and scripts.

 The grammar is simple and straightforward, yet expressive and book-like to read.

 Javascript was built from the ground up to just be effective at asynchronous execution.

 Only when classes are an emergent characteristic of the code do I have to utilize them.

 "To produce data, use OOP; to stream and process it, use functionalism."
 I can locate any scripts online or use npm to install a solution for anything "very
complex."
 I never have to spend time developing types until my design is established; instead, I can
write the code as it comes to me and refactor just when patterns emerge, rather than
writing the patterns and then rewriting them. 

First thing im gona do in the javascript file is create an “init” function,when the browser window
is loading the init function will run.
There are a few things happening in this function namely:
 seeconds.innerHTML = currentLevel;
This line of code is responsible for dynamically displaying the number of seconds in which you
have to complete the task given.
 wordInput.addEventListener(‘input’,startMatch);
This is an event listener,which is a procedure from Javascript that waits for an event to happen.
In this case when the user starts typing in the input field, a “startMatch” function will fire off
matching the characters written by the user with the random quote generated.
 timeCountdown = setInterval(countdown, 1000);
The code above is a setInterval() method that makes the countdown function run every 1 second
and is wrapper in a “timeCountdown” variable.
The countdown function is responsible for decreasing the seconds from the given time.
 setInterval(checkStatus,50);
Another setInterval method that runs a “checkStatus” function every 50 milliseconds,responsible
for checking the status of the game.
Next I have added an event listener method, this will make the “init” function above run on page
load every time.
Importing the DOM elements is the next part of the code,the DOM basically is:
 A programming interface for online content is the Document Object Model (DOM). It
describes the webpage such that scripts can alter the layout, style, and content of the
document. The document is represented by the DOM as nodes and objects, which allows
computer languages to interact with it.
The next image represents the code for importing all the elements i am going to manipulate:
I am using the querySelector() method to import the elements with the unique id attached to
them, I have also assigned each of them to a const variable which makes it easier to select and
work with them individually without having to write the whole query selector method multiple
times.
Basically a const variable is a container which holds items that i assign to it,the difference
between a const variable and a normal variable is the fact that they can’t be changed through
reassignment.
Afterwards i have created a “levels” variable with an object inside holding 3 properties.They are
used for changing the difficulty of the game.
Also i have created a variable that stores the current level, the value inside it can also change on
button click, making the difficulty easier or harder.
The following code selects the difficulty buttons made with HTML and gives them their
functionality.
I have selected the unique “id” of each button, with the get GetElementById method, added an
event listener method which activated onclick and accomplishes the following things on every
button:
 When clicked, each button changes the “currentLevel” value to their respective value
which indicates the level of difficulty.
 The display of the time in which you have to complete the challenge changes when you
press one of the buttons.
 A new quote will be rendered with the rendernewQuote() method.
  The input field’s will be cleared with “wordInput.value = ‘’;” code.
 The score will reset, sccoreDisplay.innerHTML = 0;
In the next section i want to describe the functions that are the backbone of the entire application,
this functions create and connect the logic of the entire application.
In JavaScript, a function is comparable to a procedure—a series of words which performs tasks
or determines a value—but a procedure must accept some input and provide an output with some
evident link between both the output and the input to classify as a function.
A function is made up of three parts: a set of inputs, a set of outputs, and a rule that connects the
components of said set of input data to the elements of the set of outputs in such a manner that
each input is given one output.
First we have the “matchWords” function:
This function is responsible for matching the value of the input field with the current words
being displayed, this is done with an if statement.

if(wordInput.value === cuurrentWord.textContent) {

        meessage.innerHTML = 'Correct!!!';
        console.log(sccore);
        return true;
    }
If the statement is true, a variable named “meessage” will display 'Correct!!!' on the screen.
else {
        meessage.innerHTML = 'Wrong';
        return false;
    }
Otherwise 'Wrong' will be displayed.

“startMatch” is the next function being used, it has the job to keep the game going if
“matchWords” returns true.
First off, we have an if statement that stops the function from executing by returning it if the
“issPlaying” variable is false.
If  “matchWords” returns true the game keeps going:
 “issPlaying” is set to true.
  “tiime” variable responsible for displayed on the screen is = currentLevel + 1,resetting
the time based on which difficulty is chosen, the +1 is needed because a second is lost by
the page load.
 The input value is cleared with “wordInput.value = ‘’”.
 A sccore variable is incremented by 1 since the player wrote the quote correctly.
 A new random quote is being generated with “rendernewQuote()” method.
I have also added an if statement stating that if the score is -1, it will be equal to 0 and displayed
in the browser.
Next i have written a “countdown” function that decrements the time being allocated.This
function is inside a “timeCountown” variable and is attached to a setInterval()  method,the
interval is set to 1009 milliseconds making the function run every second, all of this being inside
the “init” function that initializes the game on page load.This basically creates a timer for my
application.
The countdown function looks like this:
I have declared an if statement that checks the “tiime” variable, if it is greater than 0 the variable
decrements by 1, otherwise if “tiime” is = 0 “issPlaying” is set to false and the game stops.Also
the time being displayed on the screen will be equal to the number in the “tiime” variable.

Another very important function i have declared is called “checkStatus”.

This is responsible for checking the state of the game and is also present in the main “init”
function set to a 50 milliseconds interval.It checks wether “issPlaying” is false and “tiime” is set
to 0, if those conditions are met, a “Game is over” message will be displayed on the screen and
the sccore variable will be set to -1, the score on the screen will also be displayed as 0.

In the next section i wish to describe the process of generating a random quote from an API
website, this random quote will be generated in a multitude of scenarios:
 On page load.
 When clicking the reset button.
 When selecting a difficulty.
 When scoring a point.
 After you lost a game.
This function is one of the crucial functions that hold the entire application together, it is called
in many different scenarios and has taken me quite abit of time to figure out how to implement
but it was entirely worth it.
The code looks like this:
I have used a free api from the quotable website, every time i access the URL in the
“randomQuote” variable the website will generate a quote in the “content” section.
All the steps when creating the function:

 I  created a const variable storing the URL of the randomly generated quote so i can reuse
it.

 I  created a function called “getrandomQuote()”, inside the function i have created a fetch
API putting the URL of the API inside it.

 Then i called the .then property, this returns a promise.Inside it there is a response object
and to convert it to json i just have to say response.json().

 This is also returning a promise so i created a separate “then” assigning it a “data”

attribute, which is basically the string of content in the browser.Then i want to get the
“content” key so im just gona write “.then(data => data.content)”.

The following step is to create an asynchronous function.I have created one called
“rendernewQuote()” and it looks like this :

 async function rendernewQuote(){}.

 Inside this function i can call getrandomQuote() and get my random quote if i put the
await keyword infront of it, i have also assigned it to a variable named “quote”.

 Next i added the element in which i want the quote to be displayed which has the variable
name of  “cuurrentWord” and set its innerHTML to the quote.

 A quote.split method is used next and im passing it an empty string (‘’) which is going to
convert my string into an array where every individual character is one element in that
array.

 Then i can loop over the array by using .forEach(character => {}), this way i can do
something for every character.

 I  created a new element “const charSpan = document.createElement('span')”

 Then took the span and set its innerText to that of “char”.
Essentially what im doing here is getting each character in my string, creating a span for it and
setting the text to that span to the individual character.

 Next i took the cuurrentWord variable and appended a child of the “charSpan”.

 Finally i called the rendernewQuote() function and it is usable.

To change the color of text if it is correct or incorrect i wrote the following code:

The steps to writing this are:

 Setting up an event listener “wordInput.addEventListener('input',() =>”.This event

listener is called when anything inside wordInput changes.

Essentially, this function will loop through all the different characters in the quote displayed and
will compare each character to the character in the input based on their positioning.

For example if the first character in each fields match, a .correct class will be added, otherwise
a .incorrect class will be added, this will change text color and indicate wether the input is
correct or incorrect.

 “const ArrayQuote =  cuurrentWord.querySelectorAll('span')”, will get all of the different

spans and store them in a variable.

 “const ArrayValue =  wordInput.value.split('')”, this will get the value of the input and
will split it on an empty string, this converts the string to an array of each individual
character.

 “ArrayQuote.forEach((charSpan,index) => {  const character = ArrayValue[index]”, this

allows us to match up the characters .

 if (character === charSpan.innerText) {

      charSpan.classList.add('correct');

     charSpan.classList.remove('incorrect'); - This will add the .correct class if the conditions are
met.

 else {

        charSpan.classList.remove('correct');
        charSpan.classList.add('incorrect');

        correct = false; 

    } - This will remove the correct class if conditions are not met

 if(character === null) {

        charSpan.classList.remove('correct');

       charSpan.classList.remove('incorrect');

        correct = false;

  } - This removes the correct and incorrect if  i havent typed anything in the input field.

The last few  features of the website that have javascript functionality are the “Stop”, “Resume”,
and “Reset buttons.

Im going to start with the “Stop” button.

Firstly, it is imported from the HTML document and set to a “stopBtn” variable like so:

 “const stopBtn = document.querySelector('#stop');”

Then i have added an event listener to it which calls the “stop()” function when you click the
button.

Then i’ve declared a “stop” function with the following things inside :

 issPlaying is set to “false”, making the game stop.

 clearInterval(timeCountdown), this stops “countdown()” from running which in turn

stops the timer from going down.

 wordInput.disabled = true; this line of code will disable the input field making the user
unable to type anything.

 resumeBtn.disabled = false; this enables the resume button to be clicked.

Up next, the resume button.

Its functionality is to resume the game from where it left off when stopped, description of the
code as follows:

 const resumeBtn = document.querySelector('#resume'); imported the button from the

HTML file, assigning it a “resumeBtn” const variable.

 resumeBtn.addEventListener('click',resume); event listener that when clicked executes

the “resume” function.

 function resume() {}; resume function created.

 issPlaying = true; set to true so that the app runs.

 timeCountdown = setInterval(countdown, 1000); setting countdown interval to 1 second

again, resuming time countdown.

 wordInput.disabled = false; enabling word input field so that the user can start typing
again.

 resumeBtn.disabled = true; resume button disabled so the user can’t click it twice in order
to make the “countdown” function run 2 times, making the entire application break.

Reset button up next.

Code snippet:

Explanation of code:

 const resetBtn = document.querySelector('#reset'); import it from html and assign a const

variable.

 resetBtn.addEventListener('click', reset); event listener, when clicked run the “reset()”

function.

 function reset(){}; reset function.

 rendernewQuote(); when button clicked give a new random quote.

 wordInput.value = ''; input field emptied out.

 seeconds.innerHTML = currentLevel; seconds being displayed on screen set to current

difficulty chosen.
  tiime = currentLevel; when button is clicked, time number is set to the current difficulty
chosen.

 sccore = - 1; setting the score variable to 0.

 sccoreDisplay.innerHTML = 0; score displayed on screen will be 0.

 resumeBtn.disabled = true; resume button will be disabled in order to not bug out the app.

 meessage.innerHTML = null; no “game over” message or anything of the sort will be

displayed.

(MDN)[10]

1. Uploading the app online

1. Working with GitHub.

I will be working with GitHub and it will allow me to more reliably store all the files of my
application, thus I can at any time make changes to my application, add a comment to better
remember the process or updating it, redownload the entire application in case the files are
removed from my computer, even host it online so others can see it with GitHubs “pages”
functionality.Next i will give an explanation on what GitHub is and how it works.

GitHub is really a platform as well as cloud-based service that allows developers to create and
manage their code while also tracking and controlling modifications. To fully grasp everything
GitHub is, one must first comprehend two interconnected principles:

 Version control.

 Git.

1. What does Version Control stand for?

The method of recording and controlling modifications to software code is known as version
control, or source control. Version control systems (VCS) being tools that aid software
development teams in managing source code changes over time. Version control technologies
help software teams operate quicker and smarter since development environments have
increased. They are extremely beneficial to DevOps teams, as they aid in reducing development
time and increasing deployment success.
Every change to the code is recorded in a particular database by version control software. When
a mistake has been made, developers may go back in time and compare prior versions of said
code to help repair the problem while causing the least amount of disturbance to the rest of the
team.

The source code is the crown jewels of practically all software projects, a valuable asset that
must be safeguarded. The source code is a store for most software teams' invaluable knowledge
and expertise of the issue domain, which the developers have gathered and polished through
time. Version control safeguards source code from disaster as well as the unexpected
repercussions of human mistake.

Software engineers working in groups are constantly developing new code and updating current
code. A folders hierarchy or "file tree" is generally used to organize any code for a product, app,
or software component. A programmer somewhat on the team could be working on a second

feature while another is updating code to solve an unrelated problem.

Version control assists teams in resolving such issues by recording each unique change made by
every participant and preventing concurrent work from clashing. Changes made in one portion of
the program may conflict with modifications made by some other developer working on the
same project at the same time. This issue should be identified and resolved in a timely way,
without interfering with the remainder of the team's work. Furthermore, each change in software
development might bring new flaws on its own, and new software cannot be trusted unless it has
been thoroughly tested. As a result, testing and development are carried out concurrently until a
new version is available.

Without enforcing one style of working, effective version control application supports a creator's
preferred workflow. It should ideally operate on any platform.

Instead of dictating which system software and product chain developers must use, it should
ideally function on any platform. Instead of the annoying and clunky process of file locking,
which gives the free pass to one developer at the price of halting the development of others,
excellent version control systems permit a smooth and steady stream of changes to the code.

1. What is Git?
The most widely utilized version control is Git. Git keeps pace with changes you apply to files so
you can see what you've done and go back to previous versions if you need to. Git also facilitates
cooperation by allowing several people's modifications to be merged into a single source.

Whether you produce coding that just you will view or work in teams, Git will be beneficial.

Git is a locally installed program. Your computer stores your data and their history. You may
also save a copy of the data and their change existing using internet hosting (like GitHub or
Bitbucket). You can cooperate more readily with other developers if you have a central location
where you can publish your modifications and get changes from others. Git can merge changes
automatically, so two individuals may work on different areas of the same file and then integrate
their modifications without losing each other's work!

Git is a piece of software that you may use using a command line (terminal) or a desktop tool
with the use of a GUI (graphical user interface), such as Sourcetree.

Every one of the project files, as well as the whole revision history, are stored inside a Git
repository (aka repo in short). You'll instruct Git to turn a regular collection of files (like a
website's root folder) into a repository. This generates a.git subdirectory along with all the Git
metadata needed to monitor changes.

Files and folders that begin with a period (.) are hidden on Unix-based operating systems like
macOS, so you won't see the.git directory in the macOS Finder until you enable hidden files, but
it's there! Some coding editors may be able to display it.

Git is basically  as a tool for keeping track of file changes. So, how do we instruct Git to keep
track of our changes? A commit is a record of a modification to either a file or collection of files.

We must inform Git the files we wish to commit before we commit. This is known as staging,
and it makes use of the add command. Why do we have to do this? Why aren't we able to just
commit the file? Assume you're working on documents, but only one is ready to be committed.
You don't want to be compelled to commit both files; just the one that's ready should be
committed. The add command in Git comes in handy here. We place files in a staging area
before committing them, afterwards we commit.

You may branch off of the main code base with Git. This makes it easier to collaborate with
other developers and provides you a lot of workflow flexibility.

Here's an instance as to how Git branches might come in handy. Let's imagine you're working on
a new website function. You make up a new branch then begin working on it. You haven't
completed your new feature yet, but you've been asked to make a last-minute tweak which has to
just go live on the website today. You return to a master branch, make those changes, and push it
live.

You may then return to the major feature branch and complete your work. When you're finished,
integrate the major feature branch into a master branch, which keeps both of the new feature and
the rush change!

When merging two branches (or merging a remote and local branch), a dispute might occur. For
instance, somebody and another developer may be working on the same area of a file without
realizing it. The other developer commits their work to the remote repository. There will be a
merge conflict when you pull them into your own repo.Fortunately, Git includes a mechanism of
resolving conflicts, so that you can view either groups of changes and choose which to preserve.

Pull requests are really a means to talk about changes before they're merged into your code.
Assume you're in charge of a project. A developer makes modifications to a different branch and
wants to merge them with the master branch. They can send you a pull request and request that
you look at their code. You can talk about the modifications and decide whether or not to merge
it.

1. Hosting my app online with GitHub Pages.

GitHub Pages allows me to publish static files that i push to my GitHub repository.

Here are the steps i followed to host my website online:

 Created a new GitHub repository.

  Opened the command prompt and changed directory to the folder where my application
is stored.
 Initializing Git on this repository with “git init”.
 Typed in “git status” command to show all files that can be added to Git.
 “git add .” to add all files that are ready to be committed to GitHub.
 “git commit” to commit all files ready to pe pushed to GitHub.
 “git remote add origin https://github.com/fivez12/Alacrity.git” - this command will tell
git to store the files in the repository i made for it.
 git push -u origin main - last command, this will upload all files to GitHub.
 o publish the website i went to GitHub under setting.
 Clicked the “Pages” option.
 And i selected my website to be published under the “master” branch.

 Now the website is ready to be viewed and interacted with by anyone accessing this link:

 https://fivez12.github.io/Alacrity/

 (W3Schools)[11]

1. Conclusion

In conclusion writing this app from scratch was a harder task than i anticipated, my prior
knowledge of HTML, CSS and Javscript was being challenged and i constantly had to google
even the most basic things but that seems to be very common in the software development
industry, in my opinion learning to code on the frontend is one of the harder parts of software
development.Having to firstly design the app from scratch, coding it and the difficulty that
comes with having to set up the integrated development environment alongside all the errors that
can pop up from minor mistakes can be allot to swallow at first.
In my opinion grit, perseverance and patience are the most important tools a developer can have,
the patience to sit, research and bang your head against the wall till you solve the problem are
invaluable in this industry. The most important thing i have gained from researching and
developing this app is strengthening my problem solving skills, there is a running joke in the
developer community that a dev is really just a “glorified googler” and every joke has abit of
truth in it, being able to solve the coding problems ive encountered along the way with google
has been invaluable and it translated into other areas of my life too.
I think the mind is like a muscle and coding is the perfect gym for growing it.In my opinion,
when solving coding problems daily the mind undergoes change through struggle, it becomes
more resilient, better at adapting to stress and more relaxed when overwhelmed.
Researching and stitching everything together for this app has given me a glimpse at what a real
day to day software job is like, filled with high and lows.When your code just wont work you
feel desperate and frustrated, but once you solve that problem and get it to run you feel like the
smartest man in the world.
Overall i feel like the reason why the software field is so in demand and well rewarded is the fact
that dealing with all of this everyday is very difficult and the industry needs talent, hardwork and
grit more than ever.I feel like this path is not cut out for everyone, only self motivated and self
driven people are ever going to make it.The demand is high but the supply is low, online there
are very many overly optimistic opinions on how in demand developers are and how future proof
this field is but realistically, the demand is only for those who have put years into building their
project and portfolio and the barrier to entry is very high.
In conclusion this app has been abit difficult,but rewarding to build and i hope any small amount
of skill ive earned from making it will transfer into my future endeavors in software.