agtarrasa / africaheadsup

Small project of JS Interactiveness in JQuery for CI assignment, based on the idea of creating a easy web game, to help kids and grown ones learn some African less known countries.

AFRICA HEADS UP INTERACTIVE JS PROJECT.

live site

This page is designed for persons of all kinds and ages, that want to learn some more about Africa. The main objective of the web is to provide users a easy approach game, that helps them to learn some rare Afican Flags by playing and having fun.

Wireframes

• Main Page- View ↣

User Experience (UX)

User stories

Visitors Goals:

• As a Visitor, I want to easily understand the main purpose of the page.
• As a Visitor, I want to start playing the game without having to do much as tedious sign-ups,or other any other demanding data form of asking for user details.
• As a Visitor, I want to be able to have fun and learn some African less known countries.

Site Map

The concept of the web is to be a single main full landing game web page.

Where the user has a brief explanation of the web's main purpose as well as the game's instructions.

What user's first eye catch on will be at the cards board which is the main element of the web page, and so on he will start playing.

Once the user has clicked a card, the game will start as he will be quized with 3 choices which he will have to pick from.

When user's picks a wrong choice he will have another choice to pick in that card,if he fails again board will be reset and user will be notified before it flushes.

Responsiveness

Wrote Media queries for screen size 768px and 480px that applies styles for mobile and tablet size devices, makes it responsive for both of the devices.

Features

• Responsive on all device sizes
• Interactive elements
• Easy to Navigate
• Simple
• Randomization
• Fun
• Gameable
• Pedagogical

Technologies Used

Languages Used

• HTML5
• CSS3
• Javascript/JQuery

Frameworks, Libraries & Programs Used

• Git Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
• GitHub: GitHub is used to store the projects code after being pushed from Git.
• JavaScript Javascript was used all trought the project to achieve the web game, and manage the interactivy with the user, and code all the logic behind.
• JQuery Was mainly used as a way of simplify syntax on the script, as well as improve the readibility of it.

Existing Features

• Interactive Board

  • Based on a board, of several card elements, that is fully based on the interactiveness with the user, being modify and set by user actions, such as picking and choosing and answer.

• The info

  • Besides of the board, there's also left-handed info div, with some instructions of how to play.

Features Left to Implement

• Some sort of historical scoreboard, with a timer.

Design

Colour Scheme

The three main colours used are Blue,Red,Black,White

Typography

The SippinOnSunshine font is the main font used throughout the whole website.

Imagery

Imagery is so important. There's have been included, several question marks images for each card, as well as a padding for it. Of course, have to be mentioned aswell the images of the flags under it, all this can be founded on the img folder of the project.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator

• W3C CSS Validator

Further Testing

The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
A large amount of testing was done to ensure that all pages were linking correctly.
Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Known Bugs

I've had to implement web-kit to make sure some css properties run on Safari browser properly.

Deployment GitHub Pages

The project was deployed to GitHub Pages using the following steps...

• Log in to GitHub and locate the GitHub Repository

• At the top of the Repository (not top of page), locate the "Settings" Button on the menu.

• Scroll down the Settings page until you locate the "GitHub Pages" Section.

• Under "Source", click the dropdown called "None" and select "Master Branch".

• The page will automatically refresh.

• Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

Log in to GitHub and locate the GitHub Repository
At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

Log in to GitHub and locate the GitHub Repository
Under the repository name, click "Clone or download".
To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
Open Git Bash
Change the current working directory to the location where you want the cloned directory to be made.
Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/agtarrasa/AfricaHeadsUp

Press Enter. Your local clone will be created.

$ git clone https://github.com/agtarrasa/AfricaHeadsUp

> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

<<<<<<< HEAD

======= Credits https://www.youtube.com/watch?v=ZniVgo8U7ek StackOverFlow Community.

Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

MDN Web Docs : For Pattern Validation code. Code was modified to better fit my needs and to match an Irish phone number layout to ensure correct validation. Tutorial Found Here

Content

All content was written by the developer.

parent of 4bd3d61 (readme updated)