├── design
    ├── desktop-preview.jpg
    ├── mobile-design-home-dark.jpg
    ├── desktop-design-home-dark.jpg
    ├── desktop-design-home-light.jpg
    ├── mobile-design-detail-dark.jpg
    ├── mobile-design-home-light.jpg
    ├── desktop-design-detail-dark.jpg
    ├── desktop-design-detail-light.jpg
    └── mobile-design-detail-light.jpg
├── src
    ├── todos.txt
    ├── index.js
    ├── App.js
    ├── components
    │   ├── Header.js
    │   ├── Filter.js
    │   ├── Country.js
    │   └── Countries.js
    ├── country.css
    └── index.css
├── public
    ├── manifest.json
    └── index.html
├── .gitignore
├── package.json
├── style-guide.md
└── README.md


/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SankThomas/rest-countries-api/HEAD/design/desktop-preview.jpg


--------------------------------------------------------------------------------
/design/mobile-design-home-dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SankThomas/rest-countries-api/HEAD/design/mobile-design-home-dark.jpg


--------------------------------------------------------------------------------
/design/desktop-design-home-dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SankThomas/rest-countries-api/HEAD/design/desktop-design-home-dark.jpg


--------------------------------------------------------------------------------
/design/desktop-design-home-light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SankThomas/rest-countries-api/HEAD/design/desktop-design-home-light.jpg


--------------------------------------------------------------------------------
/design/mobile-design-detail-dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SankThomas/rest-countries-api/HEAD/design/mobile-design-detail-dark.jpg


--------------------------------------------------------------------------------
/design/mobile-design-home-light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SankThomas/rest-countries-api/HEAD/design/mobile-design-home-light.jpg


--------------------------------------------------------------------------------
/design/desktop-design-detail-dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SankThomas/rest-countries-api/HEAD/design/desktop-design-detail-dark.jpg


--------------------------------------------------------------------------------
/design/desktop-design-detail-light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SankThomas/rest-countries-api/HEAD/design/desktop-design-detail-light.jpg


--------------------------------------------------------------------------------
/design/mobile-design-detail-light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SankThomas/rest-countries-api/HEAD/design/mobile-design-detail-light.jpg


--------------------------------------------------------------------------------
/src/todos.txt:
--------------------------------------------------------------------------------
1 | 1. Dark theme toggle
2 | 2. Search input and select
3 | 3. Country component
4 |   // Grab url from API
5 | 4. Style country component


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import ReactDOM from "react-dom"
 3 | import "./index.css"
 4 | import App from "./App"
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById("root")
11 | )
12 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Rest Countries API Application",
 3 |   "short_name": "Search Countries App",
 4 |   "icons": [
 5 |     {
 6 |       "src": "img/logo.png",
 7 |       "sizes": "92x92",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "/",
12 |   "display": "standalone",
13 |   "orientation": "portrait",
14 |   "background_color": "#202c37",
15 |   "theme_color": "#202c37"
16 | }
17 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { BrowserRouter as Router, Route } from 'react-router-dom'
 3 | import Header from './components/Header'
 4 | import Countries from './components/Countries'
 5 | import Country from './components/Country'
 6 | 
 7 | function App() {
 8 |   return (
 9 |     <Router>
10 |       <>
11 |         <Header />
12 |         <Route exact path="/">
13 |           <Countries />
14 |         </Route>
15 |         <Route path="/countries/:name" children={<Country />}></Route>
16 |       </>
17 |     </Router>
18 |   )
19 | }
20 | 
21 | export default App
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="hsl(207, 26%, 17%)" />
 8 |     <meta
 9 |       name="description"
10 |       content="Rest Countries API with Country Theme Switcher"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <link
14 |       rel="stylesheet"
15 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
16 |     />
17 |     <link rel="manifest" href="manifest.json" />
18 |     <title>Rest Countries API Challenge</title>
19 |   </head>
20 |   <body>
21 |     <noscript>You need to enable JavaScript to run this app.</noscript>
22 |     <div id="root"></div>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Header = () => {
 4 |   const changeTheme = () => {
 5 |     const header = document.querySelector(".header")
 6 |     const details = document.querySelectorAll('.details')
 7 |     const uls = document.querySelectorAll("ul")
 8 |     
 9 |     details.forEach((detail) => {
10 |       detail.classList.toggle("light-theme")
11 |     })
12 |     header.classList.toggle("light-theme")
13 |     uls.forEach((ul) => {
14 |       ul.classList.toggle("light-theme")
15 |     })
16 |     document.body.classList.toggle("light-theme")
17 |   }
18 | 
19 |   return (
20 |     <>
21 |       <header className="header">
22 |         <div>
23 |           <h1>Where in the world?</h1>
24 |         </div>
25 | 
26 |         <div>
27 |           <button className="btn-moon" onClick={() => changeTheme()}>
28 |             <i className="fas fa-moon"></i>
29 |           </button>
30 |         </div>
31 |       </header>
32 |     </>
33 |   )
34 | }
35 | 
36 | export default Header
37 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .eslintcache
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # production
13 | /build
14 | 
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # Avoid accidental Sketch file upload 
27 | ###############################################
28 | ## Please do not remove line 29 - thanks! 🙂 ##
29 | ###############################################
30 | *.sketch
31 | 
32 | # Avoid accidental XD or Figma upload if you convert the design file
33 | #######################################################
34 | ## Please do not remove lines 35 and 36 - thanks! 🙂 ##
35 | #######################################################
36 | *.xd
37 | *.fig
38 | 
39 | # Avoid your project being littered with annoying .DS_Store files!
40 | .DS_Store
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rest-countries-api-challenge",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.6",
 7 |     "@testing-library/react": "^11.2.2",
 8 |     "@testing-library/user-event": "^12.6.0",
 9 |     "react": "^17.0.1",
10 |     "react-dom": "^17.0.1",
11 |     "react-router-dom": "^5.2.0",
12 |     "react-scripts": "4.0.1",
13 |     "web-vitals": "^0.2.4"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Front-end Style Guide
 2 | 
 3 | ## Layout
 4 | 
 5 | The designs were created to the following widths:
 6 | 
 7 | - Mobile: 375px
 8 | - Desktop: 1440px
 9 | 
10 | ## Colors
11 | 
12 | ### Neutral
13 | 
14 | - Dark Blue (Dark Mode Elements): hsl(209, 23%, 22%)
15 | - Very Dark Blue (Dark Mode Background): hsl(207, 26%, 17%)
16 | - Very Dark Blue (Light Mode Text): hsl(200, 15%, 8%)
17 | - Dark Gray (Light Mode Input): hsl(0, 0%, 52%)
18 | - Very Light Gray (Light Mode Background): hsl(0, 0%, 98%)
19 | - White (Dark Mode Text & Light Mode Elements): hsl(0, 0%, 100%)
20 | 
21 | ## Typography
22 | 
23 | ### Body Copy
24 | 
25 | - Homepage Items: 14px
26 | - Detail Page: 16px 
27 | 
28 | ### Fonts
29 | 
30 | - Family: [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans)
31 | - Weights: 300, 600, 800
32 | 
33 | ## Icons
34 | 
35 | For the icons, you can use a font icon library. Don't worry if the icons that you choose don't look exactly like they do on the design.
36 | 
37 | Some suggestions can be found below:
38 | 
39 | - [Font Awesome](https://fontawesome.com)
40 | - [IcoMoon](https://icomoon.io)
41 | - [Ionicons](https://ionicons.com)


--------------------------------------------------------------------------------
/src/country.css:
--------------------------------------------------------------------------------
 1 | .country {
 2 |   padding: 50px;
 3 | }
 4 | 
 5 | .btn-light {
 6 |   margin-bottom: 30px;
 7 |   display: inline-block;
 8 | }
 9 | 
10 | .country article .country-details div {
11 |   margin: 30px 0;
12 | }
13 | 
14 | .country article .country-details div h2 {
15 |   font-size: 30px;
16 |   letter-spacing: 1px;
17 | }
18 | 
19 | .country article .country-details div h5 {
20 |   font-weight: 600;
21 |   font-size: 18px;
22 |   margin: 10px 0;
23 | }
24 | 
25 | .country article .country-details div h5 span {
26 |   font-weight: 300;
27 | }
28 | 
29 | .country article h3 {
30 |   font-weight: 600;
31 | }
32 | 
33 | .country article .borders {
34 |   display: flex;
35 |   flex-wrap: wrap;
36 | }
37 | 
38 | .country article .borders ul {
39 |   margin: 10px;
40 |   background-color: var(--article-color);
41 |   padding: 3px 20px;
42 |   border-radius: 3px;
43 |   box-shadow: 0 5px 20px hsla(200, 15%, 8%, 0.5);
44 | }
45 | 
46 | .country article .borders ul.light-theme {
47 |   background-color: var(--light-mode-background);
48 | }
49 | 
50 | @media (min-width: 992px) {
51 |   .country article .country-inner {
52 |     display: grid;
53 |     grid-template-columns: repeat(2, 1fr);
54 |     gap: 40px;
55 |   }
56 | 
57 |   .country .country-details {
58 |     display: grid;
59 |     grid-template-columns: repeat(2, 1fr);
60 |     gap: 20px;
61 |   }
62 | }
63 | 
64 | @media (min-width: 1200px) {
65 |   .country {
66 |     max-width: 1100px;
67 |     margin: auto;
68 |   }
69 | }
70 | 
71 | @media (min-width: 1366px) {
72 |   .country {
73 |     max-width: 1200px;
74 |   }
75 | }
76 | 
77 | @media (min-width: 1440px) {
78 |   .country {
79 |     max-width: 1400px;
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/src/components/Filter.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect } from "react"
  2 | 
  3 | const Filter = ({
  4 |   searchInput,
  5 |   setSearchInput,
  6 |   setFiltered,
  7 |   setCountries,
  8 |   countries,
  9 | }) => {
 10 |   const regions = [
 11 |     {
 12 |       name: "Filter by region",
 13 |       desc: "All",
 14 |     },
 15 |     {
 16 |       name: "Africa",
 17 |       desc: "Africa",
 18 |     },
 19 |     {
 20 |       name: "Americas",
 21 |       desc: "Americas",
 22 |     },
 23 |     {
 24 |       name: "Asia",
 25 |       desc: "Asia",
 26 |     },
 27 |     {
 28 |       name: "Europe",
 29 |       desc: "Europe",
 30 |     },
 31 |     {
 32 |       name: "Oceania",
 33 |       desc: "Oceania",
 34 |     },
 35 |   ]
 36 | 
 37 |   // Prevent page reload when submitting the form
 38 |   const handleSubmit = (e) => {
 39 |     e.preventDefault()
 40 |   }
 41 | 
 42 |   // Search countries
 43 |   const searchCountries = (searchValue) => {
 44 |     setSearchInput(searchValue)
 45 | 
 46 |     if (searchInput) {
 47 |       const filteredCountries = countries.filter((country) =>
 48 |         Object.values(country)
 49 |           .join("")
 50 |           .toLowerCase()
 51 |           .includes(searchValue.toLowerCase())
 52 |       )
 53 |       setFiltered(filteredCountries)
 54 |     } else {
 55 |       setFiltered(countries)
 56 |     }
 57 |   }
 58 | 
 59 |   // Filter by region
 60 | 
 61 |   const filterRegions = async (region) => {
 62 |     const url = `https://restcountries.eu/rest/v2/region/${region}`
 63 |     const res = await fetch(url)
 64 |     const data = await res.json()
 65 |     setCountries(data)
 66 |   }
 67 | 
 68 |   useEffect(() => {
 69 |     filterRegions()
 70 |     // eslint-disable-next-line
 71 |   }, [])
 72 | 
 73 |   return (
 74 |     <>
 75 |       <form className="form" id="form" onSubmit={handleSubmit}>
 76 |         <input
 77 |           type="search"
 78 |           name="search"
 79 |           id="search"
 80 |           autoComplete="off"
 81 |           placeholder="Search Country"
 82 |           onChange={(e) => searchCountries(e.target.value)}
 83 |         />
 84 | 
 85 |         <div className="select">
 86 |           <select
 87 |             name="select"
 88 |             id="select"
 89 |             onChange={(e) => filterRegions(e.target.value)}
 90 |             value={regions.name}
 91 |           >
 92 |             <option value="Africa">Africa</option>
 93 |             <option value="Asia">Asia</option>
 94 |             <option value="Europe">Europe</option>
 95 |             <option value="Americas">Americas</option>
 96 |             <option value="Oceania">Oceania</option>
 97 |           </select>
 98 |         </div>
 99 |       </form>
100 |     </>
101 |   )
102 | }
103 | 
104 | export default Filter
105 | 


--------------------------------------------------------------------------------
/src/components/Country.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react"
  2 | import { Link, useParams } from "react-router-dom"
  3 | import "../country.css"
  4 | 
  5 | const Country = () => {
  6 |   const [country, setCountry] = useState([])
  7 |   const { name } = useParams()
  8 | 
  9 |   useEffect(() => {
 10 |     const fetchCountryData = async () => {
 11 |       const response = await fetch(
 12 |         `https://restcountries.eu/rest/v2/name/${name}`
 13 |       )
 14 |       const country = await response.json()
 15 |       setCountry(country)
 16 |     }
 17 | 
 18 |     fetchCountryData()
 19 |   }, [name])
 20 | 
 21 |   return (
 22 |     <>
 23 |       <section className="country">
 24 |         <Link to="/" className="btn btn-light">
 25 |           <i className="fas fa-arrow-left"></i> Back Home
 26 |         </Link>
 27 |         {country.map((c) => {
 28 |           const {
 29 |             numericCode,
 30 |             flag,
 31 |             name,
 32 |             nativeName,
 33 |             population,
 34 |             region,
 35 |             subregion,
 36 |             capital,
 37 |             topLevelDomain,
 38 |             currencies,
 39 |             languages,
 40 |             borders,
 41 |           } = c
 42 | 
 43 |           return (
 44 |             <article key={numericCode}>
 45 |               <div className="country-inner">
 46 |                 <div className="flag">
 47 |                   <img src={flag} alt={name} />
 48 |                 </div>
 49 | 
 50 |                 <div className="country-details">
 51 |                   <div>
 52 |                     <h2>{name}</h2>
 53 |                     <h5>
 54 |                       Native Name: <span>{nativeName}</span>
 55 |                     </h5>
 56 |                     <h5>
 57 |                       Population: <span>{population.toLocaleString()}</span>
 58 |                     </h5>
 59 |                     <h5>
 60 |                       Region: <span>{region}</span>
 61 |                     </h5>
 62 |                     <h5>
 63 |                       Sub Region: <span>{subregion}</span>
 64 |                     </h5>
 65 |                     <h5>
 66 |                       Capital: <span>{capital}</span>{" "}
 67 |                     </h5>
 68 |                   </div>
 69 | 
 70 |                   <div>
 71 |                     <h5>
 72 |                       Top Level Domain: <span>{topLevelDomain}</span>
 73 |                     </h5>
 74 |                     <h5>
 75 |                       Currencies: <span>{currencies[0].name}</span>
 76 |                     </h5>
 77 |                     <h5>
 78 |                       Languages: <span>{languages[0].name}</span>
 79 |                     </h5>
 80 |                   </div>
 81 |                 </div>
 82 |               </div>
 83 | 
 84 |               <div>
 85 |                 <h3>Border Countries: </h3>
 86 |                 <div className="borders">
 87 |                   {borders.map((border) => {
 88 |                     return (
 89 |                       <ul key={border}>
 90 |                         <li>{border}</li>
 91 |                       </ul>
 92 |                     )
 93 |                   })}
 94 |                 </div>
 95 |               </div>
 96 |             </article>
 97 |           )
 98 |         })}
 99 |       </section>
100 |     </>
101 |   )
102 | }
103 | 
104 | export default Country
105 | 


--------------------------------------------------------------------------------
/src/components/Countries.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react"
  2 | import { Link } from "react-router-dom"
  3 | import Filter from "./Filter"
  4 | 
  5 | const url = "https://restcountries.eu/rest/v2/all"
  6 | 
  7 | const Countries = () => {
  8 |   const [countries, setCountries] = useState([])
  9 |   const [filtered, setFiltered] = useState([])
 10 |   const [searchInput, setSearchInput] = useState("")
 11 |   const [isLoading, setIsLoading] = useState(true)
 12 | 
 13 |   useEffect(() => {
 14 |     const fetchCountries = async () => {
 15 |       const response = await fetch(url)
 16 |       const countries = await response.json()
 17 |       setCountries(countries)
 18 |       setIsLoading(false)
 19 |     }
 20 | 
 21 |     fetchCountries()
 22 |   }, [])
 23 | 
 24 |   // const removeCountry = (numericCode) => {
 25 |   //   const newCountry = countries.filter(
 26 |   //     (country) => country.numericCode !== numericCode
 27 |   //   )
 28 |   //   setCountries(newCountry)
 29 |   // }
 30 | 
 31 |   return (
 32 |     <>
 33 |       <Filter
 34 |         searchInput={searchInput}
 35 |         setSearchInput={setSearchInput}
 36 |         setFiltered={setFiltered}
 37 |         setCountries={setCountries}
 38 |         countries={countries}
 39 |       />
 40 |       {isLoading ? (
 41 |         <h1 className="loading">Loading...</h1>
 42 |       ) : searchInput.length > 1 ? (
 43 |         <section className="countries">
 44 |           {filtered.map((country) => {
 45 |             const { numericCode, name, flag, population, region, capital } =
 46 |               country
 47 | 
 48 |             return (
 49 |               <Link to={`/countries/${name}`} key={numericCode}>
 50 |                 <article>
 51 |                   <div className="flag">
 52 |                     <img src={flag} alt={name} />
 53 |                   </div>
 54 |                   <div className="details">
 55 |                     <h4 className="country-name">
 56 |                       Name: <span>{name}</span>
 57 |                     </h4>
 58 |                     <h4>
 59 |                       Population: <span>{population.toLocaleString()}</span>
 60 |                     </h4>
 61 |                     <h4>
 62 |                       Region: <span>{region}</span>
 63 |                     </h4>
 64 |                     <h4>
 65 |                       Capital: <span>{capital}</span>
 66 |                     </h4>
 67 |                   </div>
 68 |                 </article>
 69 |               </Link>
 70 |             )
 71 |           })}
 72 |         </section>
 73 |       ) : (
 74 |         <section className="countries">
 75 |           {countries.map((country) => {
 76 |             const { numericCode, name, flag, population, region, capital } =
 77 |               country
 78 | 
 79 |             return (
 80 |               <Link to={`/countries/${name}`} key={numericCode}>
 81 |                 <article>
 82 |                   <div className="flag">
 83 |                     <img src={flag} alt={name} />
 84 |                   </div>
 85 |                   <div className="details">
 86 |                     <h4 className="country-name">
 87 |                       Name: <span>{name}</span>
 88 |                     </h4>
 89 |                     <h4>
 90 |                       Population: <span>{population.toLocaleString()}</span>
 91 |                     </h4>
 92 |                     <h4>
 93 |                       Region: <span>{region}</span>
 94 |                     </h4>
 95 |                     <h4>
 96 |                       Capital: <span>{capital}</span>
 97 |                     </h4>
 98 |                   </div>
 99 |                 </article>
100 |               </Link>
101 |             )
102 |           })}
103 |         </section>
104 |       )}
105 |     </>
106 |   )
107 | }
108 | 
109 | export default Countries
110 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;600;800&display=swap");
  2 | 
  3 | :root {
  4 |   --dark-bg-color: hsl(207, 26%, 17%);
  5 |   --article-color: hsl(209, 23%, 22%);
  6 |   --text-color: hsl(0, 0%, 100%);
  7 |   --light-mode-text: hsl(200, 15%, 8%);
  8 |   --light-mode-input: hsl(0, 0%, 52%);
  9 |   --light-mode-background: hsl(0, 0%, 98%);
 10 | }
 11 | 
 12 | * {
 13 |   margin: 0;
 14 |   padding: 0;
 15 |   box-sizing: border-box;
 16 | }
 17 | 
 18 | img {
 19 |   max-width: 100%;
 20 | }
 21 | 
 22 | ul {
 23 |   list-style-type: none;
 24 | }
 25 | 
 26 | a {
 27 |   text-decoration: none;
 28 | }
 29 | 
 30 | .buttons {
 31 |   display: flex;
 32 |   align-items: center;
 33 |   justify-content: space-between;
 34 | }
 35 | 
 36 | .btn {
 37 |   background-color: var(--dark-bg-color);
 38 |   padding: 5px;
 39 |   cursor: pointer;
 40 |   text-decoration: none;
 41 |   color: #fff;
 42 |   border: 2px solid var(--dark-bg-color);
 43 |   border-radius: 4px;
 44 |   transition: background-color 0.2s;
 45 | }
 46 | 
 47 | .btn:hover {
 48 |   background-color: #fff;
 49 |   color: var(--dark-bg-color);
 50 | }
 51 | 
 52 | .btn-light {
 53 |   background-color: var(--article-color);
 54 |   border: 2px solid var(--article-color);
 55 | }
 56 | 
 57 | body {
 58 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 59 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 60 |     sans-serif;
 61 |   background-color: var(--dark-bg-color);
 62 |   color: var(--text-color);
 63 |   transition: background-color 0.4s;
 64 | }
 65 | 
 66 | body.light-theme {
 67 |   background-color: #dfdfdf;
 68 |   color: var(--light-mode-text);
 69 | }
 70 | 
 71 | /* Overvall padding */
 72 | .header,
 73 | .form,
 74 | .countries {
 75 |   padding: 10px 50px;
 76 | }
 77 | 
 78 | /* Loading */
 79 | .loading {
 80 |   display: flex;
 81 |   align-items: center;
 82 |   justify-content: center;
 83 |   text-align: center;
 84 |   margin-top: 5rem;
 85 | }
 86 | 
 87 | /* Header component */
 88 | .header {
 89 |   display: flex;
 90 |   flex-wrap: wrap;
 91 |   align-items: center;
 92 |   justify-content: space-between;
 93 |   color: var(--text-color);
 94 |   background-color: hsl(209, 23%, 22%);
 95 |   box-shadow: 0 5px 10px hsla(200, 15%, 8%, 0.1);
 96 | }
 97 | 
 98 | header.light-theme {
 99 |   background-color: var(--light-mode-background);
100 |   color: var(--light-mode-text);
101 | }
102 | 
103 | .header i {
104 |   cursor: pointer;
105 | }
106 | 
107 | /* Form component */
108 | .form {
109 |   display: flex;
110 |   flex-wrap: wrap;
111 |   align-items: center;
112 |   justify-content: space-between;
113 |   padding: 40px 50px;
114 | }
115 | 
116 | .form input,
117 | .form select {
118 |   background-color: var(--article-color);
119 |   padding: 12px;
120 |   font-family: inherit;
121 |   border: none;
122 |   border-radius: 5px;
123 |   color: var(--text-color);
124 | }
125 | 
126 | .form input::placeholder {
127 |   color: var(--text-color);
128 | }
129 | 
130 | .form input.light-theme,
131 | .form select.light-theme {
132 |   background-color: var(--light-mode-input);
133 | }
134 | 
135 | /* Countries component */
136 | .countries {
137 |   padding: 0 50px 50px;
138 | }
139 | 
140 | .countries article {
141 |   transition: background-color 0.4s;
142 | }
143 | 
144 | .countries .flag img {
145 |   border-radius: 5px 5px 0 0;
146 | }
147 | 
148 | .countries .details {
149 |   border-radius: 0 0 5px 5px;
150 |   background-color: var(--article-color);
151 |   margin: -10px 0 30px;
152 |   padding: 20px;
153 |   color: var(--text-color);
154 |   transition: background-color 0.4s;
155 | }
156 | 
157 | .countries .details.light-theme {
158 |   background-color: var(--light-mode-background);
159 |   color: var(--light-mode-text);
160 | }
161 | 
162 | .countries .details h4 {
163 |   margin: 10px 0;
164 | }
165 | 
166 | .countries .details h4 span {
167 |   font-weight: 300;
168 | }
169 | 
170 | /* Media queries */
171 | @media (min-width: 640px) {
172 |   .countries {
173 |     display: grid;
174 |     grid-template-columns: repeat(2, 1fr);
175 |     gap: 40px;
176 |   }
177 | 
178 |   .countries .details {
179 |     margin: -10px 0 0;
180 |   }
181 | }
182 | 
183 | @media (min-width: 992px) {
184 |   .countries {
185 |     grid-template-columns: repeat(3, 1fr);
186 |   }
187 | }
188 | 
189 | @media (min-width: 1366px) {
190 |   .countries {
191 |     grid-template-columns: repeat(4, 1fr);
192 |   }
193 | }
194 | 
195 | @media (max-width: 500px) {
196 |   .header h1 {
197 |     font-size: 20px;
198 |     padding: 20px 0;
199 |   }
200 | 
201 |   .form input {
202 |     width: 90vw;
203 |     margin-bottom: 20px;
204 |   }
205 | 
206 |   .form .select select {
207 |     width: 50vw;
208 |   }
209 | }
210 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Important Update!
 2 | 
 3 | Restcountries.eu is now called countrylayer API. They've updated their terms of use and introduced a subscription based service - with a free tier of course, limited to 100 requests per day. You need an access key in order to query data from the API.
 4 | 
 5 | Therefore, the code in this repository won't work (as far as I've tested). Check [this](https://github.com/SankThomas/country-layer-api-demo) repository for the demo on the new API. I will be releasing a YouTube video soon as the one I made for the previous API has been rendered obsolete. Thank you.
 6 | 
 7 | ## Frontend Mentor - REST Countries API with color theme switcher
 8 | 
 9 | ![Design preview for the REST Countries API with color theme switcher coding challenge](./design/desktop-preview.jpg)
10 | 
11 | ## Welcome! 👋
12 | 
13 | Thanks for checking out this front-end coding challenge.
14 | 
15 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow.
16 | 
17 | **To do this challenge, you need a good understanding of JavaScript.**
18 | 
19 | ## The challenge
20 | 
21 | Your challenge is to integrate with the [REST Countries API](https://restcountries.eu) to pull country data and display it like in the designs.
22 | 
23 | You can use any JavaScript framework/library on the front-end such as [React](https://reactjs.org) or [Vue](https://vuejs.org). You also have complete control over which packages you use to do things like make HTTP requests or style your project.
24 | 
25 | Your users should be able to:
26 | 
27 | - See all countries from the API on the homepage
28 | - Search for a country using an `input` field
29 | - Filter countries by region
30 | - Click on a country to see more detailed information on a separate page
31 | - Click through to the border countries on the detail page
32 | - Toggle the color scheme between light and dark mode _(optional)_
33 | 
34 | Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
35 | 
36 | ## Where to find everything
37 | 
38 | Your task is to build out the project to the designs inside the `/design` folder.
39 | 
40 | In this challenge, you will find mobile and desktop designs in light and dark mode color schemes for both pages.
41 | 
42 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes.
43 | 
44 | If you would like the Sketch file in order to inspect the design in more detail you can [subscribe as a PRO member](https://www.frontendmentor.io/pro).
45 | 
46 | There are no assets for this challenge, as the country flags will be pulled from the [REST Countries API](https://restcountries.eu) and you can use an icon font library for the icons.
47 | 
48 | There is a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts.
49 | 
50 | ## Building your project
51 | 
52 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
53 | 
54 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/).
55 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel below.
56 | 3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
57 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
58 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
59 | 6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
60 | 
61 | ## Deploying your project
62 | 
63 | As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started:
64 | 
65 | 1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration.
66 | 2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy.
67 | 3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL.
68 | 
69 | ## Sharing your solution
70 | 
71 | There are multiple places you can share your solution:
72 | 
73 | 1. Submit it on the platform so that other users will see your solution on the site. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that.
74 | 2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack).
75 | 3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
76 | 
77 | ## Giving feedback
78 | 
79 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io.
80 | 
81 | This challenge is completely free. Please share it with anyone who will find it useful for practice.
82 | 
83 | **Have fun building!** 🚀
84 | 
85 | ## Community Sponsors
86 | 
87 | A massive thank you to our community sponsors!
88 | 
89 | - [Zero to Mastery](https://bit.ly/fem-ztm) is an incredible learning resource for all things web development. Led by Andrei Neagoie, the courses are really high-quality content and cover a wide range of in-demand skills.
90 | - [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into!
91 | - [Triplebyte](http://bit.ly/fem-triplebyte) is a really nice offering if you're looking for a new role. It's a free service that lets you take a confidential quiz. Based on your results companies will pitch you for their vacant roles!
92 | 


--------------------------------------------------------------------------------