https://github.com/anuva312/countryquiz-devchallenges

A quiz on the countries of the world! Developed as a part of devChallenges FrontEnd Developer Challenge.
https://github.com/anuva312/countryquiz-devchallenges

countries-api css devchallenges front-end-development html javascript quiz react

Last synced: about 1 month ago
JSON representation

A quiz on the countries of the world! Developed as a part of devChallenges FrontEnd Developer Challenge.

• Host: GitHub
• URL: https://github.com/anuva312/countryquiz-devchallenges
• Owner: anuva312
• Created: 2021-11-16T16:52:41.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-21T13:25:34.000Z (about 2 years ago)
• Last Synced: 2025-02-09T08:19:17.149Z (about 1 year ago)
• Topics: countries-api, css, devchallenges, front-end-development, html, javascript, quiz, react
• Language: JavaScript
• Homepage: https://quirky-panini-10618a.netlify.app/
• Size: 761 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Country

Solution for the [Country Challenge](https://legacy.devchallenges.io/challenges/Bu3G2irnaXmfwQ8sZkw8) from [Devchallenges.io](https://legacy.devchallenges.io).

## Table of Contents

- [Challenge](#challenge)

- [Solution](#solution)

  - [Demo](#demo)

  - [Built With](#built-with)

- [How to Use](#how-to-use)

- [Acknowledgements](#acknowledgements)

## Challenge

Challenge: Create a country quiz app using an API. Use Front-end libraries like React or Vue.

Fulfill user stories below:

- User story: I can see at least 2 types of questions: a city is the capital of.. or a flag belong to country..

- User story: I can select an answer

- User story: I can see if my answer is correct or incorrect

- User story: When I answer correctly, I can move on to the next question

- User story: When I answer incorrectly, I can see my results and try again

- User story: I can try again

## Solution

### Demo

Find the site in action [here](https://quirky-panini-10618a.netlify.app/)!

#### Quiz Question

![quiz-question](public/assets/images/quiz-question-wide.PNG)

#### With answer

![quiz-with-answer](public/assets/images/quiz-with-answer-wide.PNG)

#### Results Page

![quiz-result-page](public/assets/images/results-wide.PNG)

### Built With

- [React](https://reactjs.org/)

## How To Use

To clone and run this application, you'll need [Git](https://git-scm.com) and [yarn](https://yarnpkg.com/). From your command line:

```bash

# Clone this repository

$ git clone https://github.com/anuva312/CountryQuiz-devChallenges

# Install dependencies

$ yarn install

# Run the app

$ yarn start

```

## Acknowledgements

- [How To Make A Loader](https://www.w3schools.com/howto/howto_css_loader.asp)

- [REST Countries](https://restcountries.com/)