Trivia Night Fridays

Website Design | 2020

LIVE WEBSITE
VIEW ON GITHUB

PROJECT OVERVIEW

What

A trivia game where users can answer popular everyday questions.

Why

In order to get comfortable with calling API’s and compare user input

Who

The project was designed and coded by myself.

Tool

HTML, CSS, Javascript, API, JSON

When

Febuary 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.

Trivia game research website
Trivia game Adobe XD mockup

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.

Trivia code snippet

PHASE FOUR

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 PROJECT