Countries of the world

Purpose

This web app was built for the purpose of my second milestone project at Code Institute. I built this Website from scratch using a combination of HTML, CSS and JavaScript. There are also eements of jQuery and Bootstrap prevalent in the code.

I chose to do my project based on an quiz mainly as I have a deep love of quizzes myself and I liked the idea of challenging myself to make a quiz app. I chose to do it based on the countries of the world and in particular the flags of the countries of the world.

Ever since I was young, I have always had a fascination with countries and with geography as a whole.I wanted to take that keen interest I have in quizzes and geography to make a flags quiz as my project.

When I was young I had a globe that when a country was pressed on, it would tell you its name, capital etc. There was some quizzes too that were fun such as find the country and find the capital. I wanted to make my project a fun, easy going site that would appeal to people of al ages and that anyone could use to find out some more information about a country and take there knowledge to another level by taking the quiz.

Introduction
UX
- Project Description
Strategy
- Goals
- User Stories
Scope
- Features
- Future Features
Structure
Skeleton
- Wireframes
Surface
- Colors
- Images
- Fonts
Technologies Used
Testing
Deployment
Credits

UX

Project Description

Strategy

I created this project as a means of showcasing all that I have learnt so far in my journey towards being a full-stack developer at Code Institute. This is my second project and it showcases my knowledge of HTML, CSS and Javascript along with some of the libraries including jQuery and bootstrap. It also showcases knowledge of various methods and functions in the JavaScript language and the dom.

This website should provide some fun light-hearted entertainment in the form of a quiz based on the countries of the world and other geographical data. I set up the website so as to be a "one-stop" shop. What I mean by this is that Users will also be able to find out information about different countries of the world using the search bar or by clicking on the continent button links. They can study for the quiz by using the links and the search bar to find out information on countries.

Goals

To show that I have a deep understanding of HTML, CSS and JavaScript
To create an enjoyable Website/app that Users will love interacting with and want to keep coming back to beat there high score.
To create a Website/app that will make Users tell there friends and family and to grow the user base.
To allow Users to show off there skills and knowledge of the corld in a fun and enjoyable way.
To allow new Users and returning Users to learn about countries of the world andd some information about the countries.
To showcase a game that has differing scenarios based on score in the quiz.

User Stories

"I want to be able to view and use the site at any and all screen sizes"
"I want to understand what the site is about and easily manouver throughout the site."
"I want to be able to search and find whatever country I am looking for"
"I want to be able to start the game when I am fuly ready and I don't want it to start before I say so."
"I want to be able to read the questions and answers easily and to be able to click on any answer I want."
"I want to know wheter or not my answer was correct"
"I want to be able to proceed to the next question at my own pace."
"I want to be able to see my score."
"I want to be able to play the quiz again when I have finished."
"I want to be able to contact the site about any problems or issues I had with the game"

Scope

Features

The website has one main page. This page will contain all the elements of my project except for the 404 page which is separate.

The header will have a bootstrap carousel with 5 images. A different image becomes active every 8 seconds. The header will also contain 2 main CTAs, Take our Quiz and Discover the world, these will be the first things a user sees on the page. The take our quiz button will be slightly brighter in color to the discover the world button as taing the quiz is the reason a user will come to the page and I want to make it slightly more prominent.

The next section on the page will be a search bar and button functionality to allow a user to find out more information about the various countries of the world. This will allow a user to "study" before taking the quiz or if they just want to learn some new information about a country then it will be a one stop shop for them. In the making of the site, I also envisioned young kids in primary scool who are just learning countries and capitals to use the site to expand their curiosity.

The quiz game section is the next section on the page and will encompass calling an api to dislay questions and 4 multiple choice answers, display a score to users and display their progress throughout the quiz with a progress bar and show them what question they are on out of 10. The quiz will display a start the quiz button which a user will click on in order to display the first question and start the quiz. At the end of the quiz a results container will show tell them congrats on finishing the quiz. It will also show them there final score and ask them if they would like to play the quiz again. A play again button will also appear on the results section which a user will click on in order to play the quiz again if they wish too.

The final section is the send a message section which will allow a user to send on their high score, make a general query or comment about the website or allow them to send on any error they have seen on the site or quiz. When they submit there message email.js will send an email to me and a new section will appear in place of the form which will thank the user for their message and assure them that we will get back to them ASAP.

The website will also have a fixed navigation bar at the top of the page with the logo for the site.

There will also be a footer fixed to the bottom of the page displaying social media icons and a trademark icon followed by my name.

Future Features

Due to reasons outside of my control I was unable to add "Easy", "Medium" and "Hard" modes to the quiz in the time frame that was alloted for this project. However, It is something that a future release of the quiz will have, Each quiz will have 10 questions and depending on how they do on a level, the chance to move up and take on a more challenging quiz will be offered to them. I think this would really appeal to people who want to expand there knowledge base and in particular to kids who are just learning about the world and want to continue to push there boundaries.

Structure

The website is split into 4 different sections on one index.html file. Each section has a different role to play in the look and feel of the site to the user.

It is important for the user to understand what the website is about when they land on the page. This is made apparent with the name of the site being countries of the world

Skeleton

Wireframes

Website Wireframe PDF

Surface

There are a lot of changes that were made to the site between inception of the idea and the final project. Initially, I had called it flags of the world and had a much different color theme and typography that the finished project.

In the end I made changes to the color theme and name and eventually decided to call the site countries of the world as I felt it better got the point across and appealed to a wider user base than just showing the different flags of countries.

I also added a custom made 404 page with a basic paragraph of text that informs a user that a page does not exist and informs them to click on a button to return back to the homepage of the site.

I wanted to have a bright colored and easy to read site. Keeping consistency thoughout the project and maintaining consistent coloring on the buttons was important too.

Colors

The main colors for the project were found using coolors.co. I spent time fiddling around with different color schemes but this was the most pleasing on the eye.

#cdcdcd - this is the background color of the page, it is a very light grey and every color seemed to go very well with it.
#261447 - this is thw color of the header and the footer. It is a dark purple color which makes the style of the fonts stand out.
#fcecc9 - this is the font color in most places. It is a bright white/yellow color that is easier to see and read than a full on white color.
#262730 - this is a dark black color. It is used for cont color in the search bar and in the quiz as it looks better and easier to read with a brighter colored background.
#FF3864 - This is a striking red color. This color was used as the background on the country cards that come up when the user searches for a country or clicks on the continent buttons.
#ED691D - This is a bright orange color. It is usd for the take our quiz cta on the header as well as the other buttons on the site. It was chosen as it stands out on the page and makes you notice the buttons. I wanted to have consistency on my site.
rgb(196, 100, 45) - This is a slightly darker less strinking orange. It was used only on the discover the world cta as I wanted it to be less appealing than the take the quiz cta.
#C0BDA5 - This is the grey color that is used on the background og the contact form. I wanted to use light coloring on the page and this grey was light in color but also stood out just enough from the background color set for the entire site.
#CC978E - This is the light red/brown color used for the quiz game. I wanted to have a neutral color for the quiz game that was light in color but stood out from the main background color of the site and I believe that this was achieved.
#008000 - This is the dark green color that comes up on the quiz game answer if the user selects the right answer.
#C21807 - This is the dark red color that somes up on the quiz game answer if the user selects the wrong answer.

Images

The only images used in the making of the website were used in the header in conjunction with the bootstrap carousel. These images were taken from Unsplash.

Fonts

Two fonts were used in the making of the site. The main-heading, logo font used on the site was Poppins and the paragraph, sub-heading text used was Raleway. The default font is sans-serif.

These fonts complement each other very well and have easy readibility which is key for vicitors to my site.

Technologies Used

HTML5
- HTML5 was used to make the index.html file for the site.
CSS3
- Css3 was used to sstyle the website.
Javascript
- Javascript was used to add functionality to the site.
jQuery
- Javascript library jQuery was used to help shorten and understand the javascript language. Also, used to add functionality to the site.
Bootstrap
- Bootstrap was used as a framework on the site. It aided the responsiveness of the site and some components are utilised on the site too.
Gitpod
- Gitpod was the IDE used to develop the site
Github
- Github was used to host and store my project site.
Git
- Git was used as version control on the site. Git commands were used to add, commit and push the site aswell as delete.
Figma
- Figma was used in the creation of the wireframes for the site.
Google Fonts
- I used two different fonts in the making of the site, Poppins and Raleway, both fonts were taken from google fonts.
Font Awesome
- Font awesome was used on the site, primarily for the icons in the footer.
W3
- W3 was used throughout the project as a means for troubleshooting issues relating to html, css and javascript.
Favicon
- Favicon was used to make and add a favicon to the site.
TinyPNG
- TinyPNG was used to compress and reduce the size of the images on the site.
Autoprefixer
- Autoprefixer was used to parse my css fie and add vendor prefixes.
Coolors.co
- Coolors was used to come up with a color theme for the site
Jshint
- Jshint was used to test the viability of my Javascript files throughout the project
W3c Validator
- w3c validator was used to test my html files and css files
Email.js
- Emailjs was used in the contact form section to allow for users to send a message
Open Trivia Database
- Open Trivia Database was the api used in the quiz game
Programmable Web
- ProgrammableWeb was the api used in the continent buttons section and the search bar to search for a country.

Testing

Testing of the site was required for my milestone 2 project.

To test for responsiveness of my website. I used Chrome Dev Tools to test the site at the various screen resolutions.

My site was found to be mobile responsive on each screen resolution and is mobile responsive down to a screen resolution of 280px.

Below is a list of all of the screens that my site was tested on.

Galaxy Fold
iPhone5/SE
Galaxy S5
Moto G4
iPhone 6/7/8
Surface Duo
iPhone 6/7/8 Plus
Galaxy S9 + S10e
iPhone X/Xs
Pixel 2 XL
720p + 1080p screens

I also had family members and friends test out the site on their various devices/gagets and it was responsive and acting as it should on each device used.

HTML Validation

W3c Markup Validation tool was used to test the site for HTML Validation. My site passed the HTML Validator test. Below is an image of the HTML validation test of my site:

CSS Validation

Again, W3c Markup Validation tool was used to test the css on my site. My site passed the CSS Validator test. Below is an image of the CSS Validatoion test on my site:

Web Performance

I also ran my site through another test. This test was carried out through Webtest.org. This test was to test the sites peformance on the factors listed on the webtest.org site. Below is an image of my Websites Performance test:

JavaScript Testing

I used jshint.com to test my sites Javascript. My site passed the tests on JsHint

User story testing

"I want to be able to view and use the site at any and all screen sizes"
- The site was tested on all browser engines and it is fully responsive on all browsers.
- The site was tested on various screen sizes and was found to be responsive at every screen resolution down to 280px.
- I gave permission to friends and family members to pay around with the site on various devices. No known issues were found in this testing.
"I want to understand what the site is about and easily manouver throughout the site."
- When a user lands on the site, There are two CTA's on the header that allow the user to interact with the site and manouver throughout the site.
- The logo for the site appears in the top left which tells the user what the page is about.
- By clicking on the logo, The user always stays on the index.html page.
- When a user clicks on the Discover the world button they are taken to the country search section of the webpage which will allow the user to search for a country or click on a continent button to find out more information about the countries of that particular continent.
- When a user clicks on the take our quiz button the user is taken to the quiz section of the website where they can start a new quiz by clicking the start the quiz button.
- The user is able to close the section of the website relating to the country search and continent buttons by clicking on the close button placed at the top right of the country cards.
- The user will click on the return to the top of the page arrow button at the bottom right of the page to easilt return to the top of the page whenever they scroll more than 50px from the top of the page.
"I want to be able to search and find whatever country I am looking for"
- The user can click on the search bar and type in the name of the country they want to search for. The search bar reacts to the input values being typed into the search bar and returns the relevant county that the user has searched for. Once the user has finished they may click the close button at the top right of the country card and it will disappear allowing them to make another search for a different country.
- The country that the user has ssearched for will appear just below the search bar. If the user has spelled a country wrong a message will appear telling them that no country matches their search and that they need to watch their spelling.
- If a user doesn't want to search for a particular country they can click on any of the continent buttons which will show the user the countries in tht particular continent. If the user doesn't want to see those countries anymore then they may click on the close button at the top right to close the display of the countries and then click on the return t top arrow at the bottom right of the page which will bring them back to the top of the page where they can better navigate the site again.
"I want to be able to start the game when I am fully ready and I don't want it to start before I say so."
- The quiz will not start until the user clicks on the start the quiz button, once clicked the quiz will begin and be displayed on the page.
- The quiz has no timer so a user may start a game go away and come back later to coplete the quiz.
"I want to be able to read the questions and answers easily and to be able to click on any answer I want."
- The questions appear very clearly in the quiz container, the writing is large enough and weighted enough to be able to read the questions easily. The answers display in grid format. When a user moves there mouse over an answer it increases its brightness by 20% which is a clear indicator to the user over which answer they are choosing.
- there is no timer so there is no rush in reading the questions or answers
"I want to know whether or not my answer was correct"
- When a user selects an answer there is a timeout action set for 1 second after the question has been answered, then the answer will either turn red or green. The answer choice will turn green if the user has selected the correct answer to the question and the answer choice will turn red if the user has chosen the wrong answer. This makes it very clear to the user if there answer was right or wrong.
"I want to be able to proceed to the next question automatically"
- When the user selects an answer to a question there i a very brief wait until the question either turns red or green indicating either a right or wrong answer. Once it is known the game automatically proceeds to the next question.
- The user does not need to do anything after they click n an answer the game will proceed to the next question. Again, there is no time limit so there is no stress over getting answers on time.
"I want to be able to see my score."
- At the top right of the quiz container, there is a score, for each correct answer the score goes up by 10. for each wrong answer the score stays as it is.
- At the end of the quiz the user will get a final score. As the user progresses through the quiz the score will remain at the top left making it easy for the user to know there score and how well they are doing throughout the quiz.
- Each right answer the score improves by 10 and each wrong answer the score will stay the same.
"I want to be able to play the quiz again when I have finished."
- When the user finishes the quiz a results container will be displayed where the quiz container once stood. The results container will contain a heading congratulating the user on completing the quiz, it will also show them their score and will ask them if they wish to play again. There will be a play again button displayed below that and when the user clicks on t, it will allow them to take the quiz again.
"I want to be able to contact the site about any problems or issues I had with the game"
- At the bottom of the page there will be a send us a message container which will display a form that the user can fill out in order to air any concerns or grievances they have about the site. They can also use this to tell us about how much they love the site and send us their high scores.
- All of the fields are required so the user will have to input data into each field before the form can be sent.
- When the user submits the form a message will then appear to the user telling them that we will get back to them asap.

Features Testing

Nav Bar
- The nav bar at the top of the page is responsive. The burger menu icon comes into place as the screen resolution decreases.
- The nav bar is visible as the user scrolls down the page or if the user lands on the 404 error page, the header remains visible at the top of the page
- The logo appears in the top left corner of the site and is responsive to changes in screen resolution, the logo responds to the width of its container and whitespace.
- When the links in the nav bar are hovered over there brightness increases by 20%
- Click on the links in the searchbar to go to the relevant sections on the page.
- Verify that the burger icon works and that the collapsed menu works correctly.
- Ensure the nav bar is functional and all links remain functional on different sized screens and different physical devices.
Header
- Ensure that the carousel is functioning sufficiently.
- Ensure that the carousel rotates between 5 different images.
- Ensure that the CTA's are clear and present.
- Verify that the CTA's link to the correct sections of the page.
- The header carousel images are mobile responsive and respond to changes in the screen resolution.
Header CTAs
- Ensure both Cta's link to the correct section of the page.
- Ensure that they respond correctly to changes in the screen size and on different devices.
- ensure that on mobile screens the two buttons are displayed over one another
- Ensure that when clicked the buttons move slightly down the Y axis giving the impression of actually pressing a button.
Country search section
- Ensure that the user can search for a country on any device size.
- Ensure that if a spelling of a country is in correct or does not exist then a message will display on the dom below the search bar informing the user that they hav made an error, or to watch their spelling.
- Ensure that The search bar and the continent buttons are mobile responsive and respond to changes in screen sizes sufficiently.
- Ensure that when clicked on the continent buttons will display the countries in that continent and no other.
- Ensure that when the close button is clicked in the top right that all countries will be removed and that section of the dom will close. Ensure this works on all device sizes.
- Ensure that the return to top arrow is well positioned and clear of its aim that the user can return to the top of the page and the main navigation through the site when clicked on.
- Ensure that a close button appears at the top right of the country card when it is searchd using the search bar, also ensure that when clicked the country card disappears and the dom returns to normal.
- Ensure that when clicked the continent buttons move slightly down the Y axis giving the impression of actually clicking a button.
Quiz game
- Ensure that the start the quiz button appears on the dom at all screen sizes and is responsive to cicks at all screen sizes.
- Ensure the quiz game appears at all screen sizes and is responsive to changes in the screen size.
- Ensure the answers grid responds to changes in the screen size.
- Ensure that when hovered over the quiz answers brightness increases by 20%.
- Ensure that the questions and the answers are easy to read and understand at all screen sizes.
- Ensure that any answer can be clicked on.
- Ensure that if an answer selected by the user is wrong then the dark red incorrect class is passed to the answer and the answer turns red indicating to the user they have selected a wrong answer.
- Ensure that if a user selects the correct answer that the users choice turns green indicating a correct answer.
- Ensure that the color of the text on the users selected answer changes to a whiter color when selected.
- Ensure that the progress bar is easy to see and understand.
- Ensure that the score is easy to find, read and understand
- Ensure that the questions remaining is easy to see, read and understand. Ensure that the progress ba, score and questions remaining respond to changes in screen size and respond to the questions and answer selected by the user.
- Ensure the score only increases if the user selects the correct answer.
- Ensure the progress bar and questions remaining increase for every new question that appears.
- Ensure the quiz only allows for 10 questions.
- Ensure that the results container appears when the user finishes the quiz.
- Ensure that the score results appear in the results container showing the user there final score.
- Ensure that the play again button appears in the results container allowing the user to play the quiz again.
- Ensure that when clicked on the play again button allows the user to retake the quiz.
Contact Us section
- Ensure that the user can send a message at every screen size
- Ensure that the contact form responds to screen size changes
- Ensure that the text is easy to read and understand.
- Ensure that the placeholder text is easy to read aand understand
- Ensure that the fields in the form are required and a user must enter data before the form can be sent.
- Ensure that the user must select one of the three options in the drop down list.
- Ensure that when a user sends the form, A confirmation message appears when they click submit.
Footer
- Ensure it responds to changes in screen sizes and is mobile responsive at all screen sizes.
- Ensure that the links in the footer respond to user clicks and link to the correct pages.
- Ensure that when hovered over, the social media links change colors to their own brand colors.
- Ensure that the social links grow in size when hovered.
Return to top of page arrow
- Ensure that it is mobile responsive and reacts to changes in screen size.
- Ensure that when clicked the browser scrolls back to the top of the page.

Deployment

The project was developed using the Gitpod IDE, it was committed to git and pushed to github using the built-in function within Gitpod.

In order to deploy this site to Github pages from its Github Repository, the following steps were taken.

Log into Github
From the list of available repositories, select Brianconn71/ms2-countries-of-the-world.
From the menu items near the top of the page, select Settings.
Scroll down to the GitHub Pages section.
Under Source, click the drop-down menu labelled None and select Master.
On selecting Master Branch the page is automatically refreshed, the website is then automatically deployed.
Scroll back down towards GitHub Pages section and retrieve the link to the deployed website.

How to run the project locally

To clone this project into gitpod you will need:

A GitHub account. Create one here
Use the Chrome Browser.

Then follow the below steps:

Install the Gitpod Browser Extension for Chrome.
After Installation, restart the browser.
Log into Gitpod with your gitpod account.
Navigate to the Project Repository on GitHub.
Click on the green Gitpod button in the top right corner of the repository.
This will trigger a new Gitpod workspace to be created from the code in GitHub where you can work locally.

To work on this project within a local IDE such as VSCode, Pycharm etc:

Follow this link to the Project GitHub Repository.
Under the Repository name, click "Clone or Download".
In the Clone with HTTPs section, copy the clone URL for the repository.
In your local IDE, Open the Terminal.
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/USERNAME/REPOSITORY

Press Enter. Your local clone will then be created.

Further reading and troubleshooting on cloning a repository from GitHub can be found here

Credits

Content

The ideaa for my project came from an old globe game i remeembered having as a child. I wanted tto make a basic site that would appeal to people of all ages to help them to learn more about the countries of the world and then to test there knowledge in the quiz.
Bootstrap was used throughout the project. The header carousel comes from the bootstrap carousel. Bootstrap cards are used to display the country information.
W3 Schools was used as a source of troubleshooting.
There was a lot of struggle involved with the quiz game. I spent a lot of time trying to get the questions and answers to appear on the dom from the api. The following two youtube videos were my main source of inspiration and guidance throughout the process. Web Dev Simplified was a very good source for helping me with styling, event listeners etc. while james-quick-youtube-series has a playlist on creating a quiz app with Javascript which was my main source of guidance throughout the coding of the quiz game on my site.

Media

Carousel images on header
- An image of the earth from space taken by Nasa
- An image of the map of the world taken by Yuri_B
- An aerial image of America taken by Nasa
- An image of the world painted taken by Brett Zeck
- An image of Europe taken by USGS

Code Snippets

I wanted to create a return to the top of the page button so that when a user is reading information about a country that they can press the button to return back to the top, took code example from w3 schools here
I had some trouble figuring out how to link to different sections of the page when clicking on the cta so I found a solution here
I didn't like the way the buttons were jumping to the different sections so I found a solution to the scrolling problem here
james-quick-youtube-series & web-dev-simplified were great sources of inspiration, guidance, and help as I completed the quiz section of the site.
Had an issue with jQuery initially, a solution was found here
Again, had some issues with the search bar using jQuery, various solutions were found here, here, and here
Some help and guidance on the search bar was found here Brad Traversy
Got help and guidance on using the fetch method from here
I had an issue with accessing dtat returned from the api, I found the solution here
got some guidance in placing my close button in the top right corner here
I found out how to add a smooth-scroll option to my site here
Got some help on adding a fade-in animation here
resolved some issues with button placement here
help on centering my submit button here
got advice and and guidance on creating a 404 page here

Acknowledgements

I would like to give a huge thanks to my mentor Adegbenga Adeye for his help throughout this project and throughout the course so far.

I would also like to say a huge thanks to the slack community, I wouldn't be where I am today without them.

I used this Udemy from Brad Traversy and Florin Pop for some help, guidance and inspiration for my own project. I used it as a source of inspiration for my own project and at times to troubleshoot problems I had.

code-institute-submissions / ms2-countries-of-the-world Goto Github PK

ms2-countries-of-the-world's Introduction