Javascript Tutorial

Website Design | 2019

LIVE WEBSITE

PROJECT OVERVIEW

What

A three page document showing users the fundamentals of javascript. The document includes Javascript, JQuery and a JQuery plugin.

Why

The goal of this project was to showcase my javascript/jQuery skills while also providing a helpful document to help users understand the language of javascript.

Who

The project was designed and coded by myself.

Tool

HTML, CSS, Javascript, JQuery , Codepen

When

March 2020

PROCESS

PHASE ONE

PLANNING

As someone who enjoys playing online games and trivia games , I finally made the decision to make my own. Learning javascript has equipped me with the knowledge and the tools of becoming less of a user and move of a developer. When coming up with the goals of this project I wanted to have a large pool of questions to pull from. I did research online and found that https://opentdb.com/ had a database that lt developers grab questions via an API call to their database. This was a big relief as I didn’t want to necessarily have to generate my own questions/answers. In addition it also allowed me to work with API calls and manipulate the data received.

Javascript project Mind map
Javascript research

PHASE TWO

MOCKUPS

After having a clear understanding of what I wanted to accomplish , I then decided to create some mockups on how I wanted the application to look like . My main priority was optimizing the layout for mobile screens. This lead me to having big buttons and big text.

PHASE THREE

CODE

A lot of DOM manipulation was required in order to achieve the end result. I found myself quickly needing to label all of my ID’s and Classes in a clear and concise way to increase the code readability and to make less mistakes. I decided to use vanilla Javascript because I really enjoy working with the fundamentals and improving my overall understanding of the language. When it came time to making my fetch request, https://opentdb.com/ had a very easy to follow procedure that made the process go a lot faster.

Javascript codepen
Javascript browser testing image

PHASE FOUR

TESTING

Making sure my website reacts the same on multiple browsers is a vital aspect to every website I create. I did testing on browsers like Firefox, safari and chrome and made sure there weren’t any discrepancies in the sites functionality or design.

PHASE FIVE

REFLECTION

Looking back it would have been wiser to have made this project using JQuery. I found myself writing a lot more lines of code through vanilla JS than I would have using JQuery. Using a database like Open TDB is great, however there are some parameters that don’t return anything in the game configuration settings on their website. In the future, I would like to have users submit their own questions so that I myself can have a database of my own.

LIVE WEBSITE