Giter VIP home page Giter VIP logo

the-ultimate-gamers-quiz's Introduction

CI logo

Welcome to the Ultimate Gaming Quiz.

This Project is a bacic quiz with a question area, a heading and some side links. There is also a score section counting the score of the project. This website is purely a fun exercise and provides a basic general knowledge quiz around gaming. The website is designed as a fun exercise for young Gamers. There are also links to the code institute showing them where to go if they would like to learn how to code and gaming news. There is also a link to the Global Gamers Club which encourages young Gamers to join so they can play together in a safe environment.

Responsive Website

Features


The features at the top of the quiz game page are the Logo and Heading. The Logo was designed in Canva and the heading is in a Flex Box designed in CSS.

Logo and Heading

The Game Area

  • The Game area has a start button and a score section below it that keeps track of the score while playing.

Start Quiz

  • Once started the quiz runs through a random sequence of questions that the player should answer. If the answer is correct the background colour turns green. If the background goes red the background colour goes red.

Correct Example

  • This is an example of an incorrect answer.

Incorrect Answer

External Links

There are some external links for quiz players to explore, they are the type of website that may be of interest to a gamer taking the quiz.

External Links

Testing


The Ultimate Gaming Quiz Website has been tested on the W3C html Validator and came back with good results. HTML Valitdator

Tests for the CSS were also done on W3C CSS Validator

CSS Validator

JSHint Validator

The JS Hint Validator came back with some warnings. This project is was work done from a tutorial as a result the syntax hase som warnings.

Lighthouse

The website performed well in the Lighthouse checks for desktop devices.

Lighthouse Desktop

The Website was slightly weaker on mobile devices. Lighthouse Mobile

Unfixed Bugs:

At time of Deployment the counting score function does not work correctly. This is a work in progress.

Deployment:

This project was Deployed to Github fromo the source section. It was the master branch.

Credits:

I would like to thank the Code Institute for the opportunity once again. In my previous project I focussed mainly on Love Running as and example. This time I decided to focus on a tutorial that was not part of the course in order to give me more exposure to JavaScript.

I followed this tutorial and all credit goes to this developer Kyle Cook and the Code Institute.

https://www.youtube.com/watch?v=riDzcEQbX6k&t=397s

Content:

The Logo was created with Canva. The Favicon was also created with Canva.

https://www.canva.com/

The questions are questions that I came up with. My sons are avid gamers and the games mentioned are within their age bracket.

I kept the colours similar to the previous project. If possible I will aim to keep the same theme throughout the projects for cosistency.

Media:

The only image used in this project is the logo. There are however media queries created to make sure all flex boxes and the gaming area are totally responsive.

Technologies Used

Languages used in project: HTML, CSS, Javascript

Programs or Websites used:

  • Canva : For the Logo Design

  • Gitpod: This was used for building the project

  • Github: Github is used as the primary file library or host.

  • Paint.net: I used Paint.net to rework the logo design and resize the favicon.

  • Python Tutor: This was used for running and checking functions

the-ultimate-gamers-quiz's People

Contributors

brendancooney avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.