├── .vscode └── settings.json ├── index.html ├── css └── style.css └── js └── app.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | Country API 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | 8 | body { 9 | background: linear-gradient(45deg, #3d64e6, #1f41b1); 10 | min-height: 100vh; 11 | margin: auto 1em; 12 | } 13 | 14 | .container { 15 | background-color: #fff; 16 | width: 100%; 17 | max-width: 1000px; 18 | margin: 1em auto; 19 | padding: 3em 2.5em; 20 | border-radius: 0.63em; 21 | box-shadow: 0 1.25em 1.8em rgba(8, 21, 65, .25); 22 | 23 | } 24 | 25 | .search-wrapper { 26 | display: flex; 27 | justify-content: space-between; 28 | } 29 | 30 | .search-wrapper button { 31 | font-size: 1em; 32 | background-color: #3d64e6; 33 | color: #fff; 34 | padding: 0.8em 2em; 35 | border: none; 36 | border-radius: 1.5em; 37 | } 38 | 39 | .search-wrapper button:hover { 40 | background-color: #1f41b1; 41 | } 42 | 43 | .search-wrapper button:active { 44 | background-color: #1f41b1af; 45 | } 46 | 47 | .search-wrapper input { 48 | width: 100%; 49 | font-size: 1em; 50 | padding: 0 0.63em; 51 | border: none; 52 | border-bottom: 2px solid #3d64e6; 53 | outline: none; 54 | color: #222a43; 55 | } 56 | 57 | #result { 58 | margin-top: 1.25em; 59 | } 60 | 61 | .container .flag-img { 62 | display: block; 63 | width: 45%; 64 | min-width: 7.5em; 65 | margin: 1.8em auto 1.2em auto; 66 | } 67 | 68 | .container h2 { 69 | font-weight: 600; 70 | color: #222a43; 71 | text-align: center; 72 | text-transform: uppercase; 73 | letter-spacing: 2px; 74 | margin-bottom: 1.8em; 75 | } 76 | 77 | .data-wrapper { 78 | margin-bottom: 1em; 79 | letter-spacing: .3px; 80 | } 81 | 82 | .container h4 { 83 | display: inline; 84 | font-weight: 500; 85 | color: #222a43; 86 | } 87 | 88 | .container span { 89 | color: #5d6274; 90 | } 91 | 92 | .container h3 { 93 | text-align: center; 94 | font-size: 1.2em; 95 | font-weight: 400; 96 | color: #ff465a; 97 | } 98 | 99 | @media only screen and (max-width: 576px) { 100 | .search-wrapper { 101 | flex-direction: column; 102 | gap: 2em; 103 | } 104 | } -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | let searchBtn = document.getElementById("search-btn") 2 | let countryInp = document.getElementById("country-inp") 3 | 4 | const showInformation = () => { 5 | let countryName = countryInp.value.trim() 6 | let finalURL = `https://restcountries.com/v3.1/name/${countryName}?fullText=true` 7 | console.log(finalURL) 8 | fetch(finalURL).then((response) => response.json()).then((data) => { 9 | result.innerHTML = ` 10 | 11 |

${data[0].name.common}

12 |
13 |
14 |

Capital:

15 | ${data[0].capital[0]} 16 |
17 |
18 |
19 |
20 |

Continent:

21 | ${data[0].continents[0]} 22 |
23 |
24 |
25 |
26 |

Population:

27 | ${data[0].population} 28 |
29 |
30 |
31 |
32 |

Currency:

33 | ${data[0].currencies[Object.keys(data[0].currencies)].name} - ${Object.keys(data[0].currencies)[0]} 34 |
35 |
36 |
37 |
38 |

Common Languages:

39 | ${Object.values(data[0].languages).toString().split(", ").join(", ")} 40 |
41 |
42 | ` 43 | }) 44 | .catch(() => { 45 | if (countryName.lenght == 0) { 46 | result.innerHTML = `

The input field cannot be empty

` 47 | } else { 48 | result.innerHTML = `

Please enter a valid country name.

` 49 | } 50 | }) 51 | } 52 | 53 | searchBtn.addEventListener("click", () => { 54 | showInformation() 55 | }) 56 | 57 | document.addEventListener('keydown', (e) => { 58 | if (e.key == "Enter") { 59 | showInformation() 60 | } 61 | }) --------------------------------------------------------------------------------