'JavaScript Explorer' is a brief introduction to today's most popular programming language.

Created by Justinas Valutis

Live website here

"JavaScript Explorer" highlites some of the features that we can achieve with the help of "JavaScript" language.

Table of content

Target Audience:

Anyone, who is intersted or studying "JavaScript".

Website owners expectations:

1. To introduce viewer to the concept of "JavaScript".

2. To demonstrate some of its abilities.

3. Let user try it for him/herself.

User Expectations:

1. To find out what JavaScript is.

2. Expect some visual confirmation of the concept.

3. Expect to try it for him/herself.

User Stories:

1. I want to know what JavaScript is.

2. I want to see easy navigation.

3. I want to see examples.

4. I want to try them.

Returning user stories:

5. I want to introduce JavaScript to others.

6. I want to demonstrate to others what JavaScript can add to a website.

As a website owner:

7. I seek to introduce JavaScript concept to general public.

8. I want them to easy navigate to other parts of a website.

9. I want them to see how JavaScript can add 'movement' to a website.

Structure of a Website

"JavaScript Explorer" consists of three pages.

Home page:

with a brief introduction of JavaScript and a simple question,

that also displays 'pop up' messages.

Counter Page:

with a form where different parameters, when changed, affects other parameters as well.

Game or Questionnaire Page:

where user can answer questions and submit them to see a message.

Wireframes of the Pages

Home page

Counter page

Game page

Color Theme:

Dark background and smoke-white font was chosen for sufficient contrast.

Images:

There were only two images used in this work, for the background and favicon.

Both images were taken from pexels .

Features

Logo and the Navigation links

Navigation links are easy to use. They spread across all three pages.

Besides two internal conectors, there are links to

social media accounts.

- User Stories: 2, 8 covered.

Home page question

This part provides a brief description of what JavaScript is,

as well as it offers user to answer a question which generates a pop up message.

- User Stories: 1, 3, 4, 6 covered.

'Pop up' messages

'pop up' messages are set to appear once user answers question in a main page.

'pop up' appears regardles if answer was correct or not, they cave different content.

- User stories: 3, 4, 6, 7, 9 covered.

'Counter'

This feature allows us to demonstrate a potential that JavaScript has.

With the help of it, it is possible to operate multiple calculations efficiently.

User stories: 3, 4, 6 covered.

'Game'

This feature also demonstrates the potential of JavaScript.

We can clearly see that it can be adapted not only to make calculations,

but it can be employed in other areas, such as games too.

User stories: 3, 4, 5, 6, 9 covered.

Game controls

Game controll buttons makes it easy to play the game by calling to action.

They provide an option to the question, as well as opportunity to jump

to previous or next question, restart the game and finaly to submit.

User stories: 2, 8, 9 covered.

Submit message and score counter

Score counter shows how many questions were answered correctly out of total.

While message, which appears after pressing submit, indicates that the game is complete.

User stories: 3, 6, 9 covered.

Footer

Footer aids in navigation. It has a link that brings user to the top, where main menu is

located.

It also indicates name of the author and an email link to contact him.

User stories: 2, 8 covered.

Responsiveness

In order to make the page small screen 'friendly', the so called 'break point' was applied at

720px.

Testing

During development phase, project and its features performance were constantly checked

using 'Developer Tools'.

'Developer Tools' and its 'Box Model' together with 'Different Device Emulation'

were very useful in configurating project responsiveness to smaller screen sizes.

Besides Developer Tools, kinetic tests were carried out in order to make sure that every link regardless of its location is responding.

Hardware and virtual 'test beds'

Apart from testing website reactions to different screen sizes on 'DevTools' and

'am I responsive website, responsiveness was also ###crosschecked on physical devices such as HP PAVILION laptop, Samsung Z Flip and Motorola G9 Play mobile phones.

No issues were found and everything worked as intended.

W3C CSS Validation

Checking CSS code proved that it has no errors.

HTML Validation

Checking HTML also showed zero errors.

Index.html

Counter.html

Game.html

JavaScript validation

Java.js

Counter.js

Game.js

Lighthouse report

Home page

Counter page

Game page

User story tests

User stories 1., 7. and 5. I want to know and show to others what JavaScript is.

User stories 2. and 8. I want to see/provide easy navigation.

User stories 3. and 9. I want to see/to show examples.

User story 4. I want to try them.

User story 6. I want to demonstrate to others what JavaScript can add to a website.

Accessibility report

Home page

Counter page

Game page

Technologies Used:

Also testing tools:

Deployment

Project was developed using GitPod as a building platform.

The website was deployed using GitHub Pages by following these steps:

Problems Encountered

During the stage of development I made a mistake and did not check my buttons contrast.

I calibrated their background color initially as rgb(168, 123, 50) with smoke white text.

I was drawn into a sin, thinking that the contrast will be sufficient, however, during readme.md

writing process I found out to my horror that it was a mistake with very little time to correct it within readme file, hence different colors on buttons in some screenshots.

Conclusion: Lesson learned the hard way. Will make sure in the future to check contrasts beforehand.

Acknowledgement

This project would not have been achieved without the help and guidance of

my mentor Mr. Mohammad Shami, and also without helpful hand of:

Slack Community

Code Institute tutors

And various online recources, such as: W3C

and: Developer Mozilla

But the person who deserves a particular recognition is my wife, who demonstrated an immense patience and support.

Footnote

Dear Assessor,