Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicolasgabriiel/countries
Um site que oferece informações detalhadas sobre diversos países, com uma página individual para cada país. Utiliza a API Rest Countries para fornecer dados precisos e atualizados sobre geografia, demografia e cultura de cada nação.
https://github.com/nicolasgabriiel/countries
api css html javascript
Last synced: about 2 months ago
JSON representation
Um site que oferece informações detalhadas sobre diversos países, com uma página individual para cada país. Utiliza a API Rest Countries para fornecer dados precisos e atualizados sobre geografia, demografia e cultura de cada nação.
- Host: GitHub
- URL: https://github.com/nicolasgabriiel/countries
- Owner: nicolasgabriiel
- Created: 2022-12-03T19:27:07.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-17T22:17:48.000Z (almost 2 years ago)
- Last Synced: 2024-05-28T18:47:24.164Z (8 months ago)
- Topics: api, css, html, javascript
- Language: JavaScript
- Homepage: https://nicolasgabriiel.github.io/Countries/
- Size: 6.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Rest Countries API
Esta é uma solução para o desafio [REST Countries API with color theme switcher](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca) do site [Front End Mentor](https://www.frontendmentor.io/challenges), onde você escontra diversos desafios que vão te ajudar a melhorar o seu conhecimento no Front-End.
## Sumário
- [Resumo](#Resumo)
- [Desafio](#Desafio)
- [Screenshot](#screenshot)
- [Link](#link)
- [Processo](#Processo)
- [Construido com](#construido-com)
- [O que eu aprendi](#o-que-eu-aprendi)
- [Autor](#autor)
## Resumo
O desafio é construir o projeto e deixá-lo o mais próximo possível do design oferecido. Podendo usar qualquer ferramenta para ajudar a concluir o desafio. Nesse desafio em específico é necessário fazer o uso de uma API externa chamada [Rest Countrie API](https://restcountries.com), onde você faz o requerimento dos dados dos países necessários
### Desafio
O objetivo desse site é que o usuário possa acessar informações de diversos países, tendo em vista o design mais fiel possível ao layout original e algumas funcionalidades como:
-Botão para trocar o tema de tela
-Botão para filtragem
-Barra de pesquisa
-Design Responsivo
### Screenshots
Página inicial em White mode
------
Página inicial em Dark mode
------
Página Individual em White mode
------
Página Individual em Dark mode
------
Responsivo Página inicial
------
Responsivo Página Individual
------
Gif animado do site em funcionamento
### Link: https://nicolasgabriiel.github.io/Countries/
## Processo
### Construido com
-HTML5
-CSS3
-JavaScript
[-Rest Countrie API:](https://restcountries.com)
### Principais coisas que aprendi
Mais funcionalidades do display Flex, como:
```css
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
align-items: stretch;
```
Utilizar o JS para barra de pesquisa:
```js
filtroName.forEach( elemento => {
if (!elemento.textContent.includes(inputValido)) {
elemento.parentNode.classList.add('desativado')
} else {
elemento.parentNode.classList.remove('desativado')
}
})
```
## Autor
- Site pessoal - [Nicolas Gabriel](https://www.linkedin.com/in/nicolasgabriiel/)
## NOVO OBJETIVO
TRAZER ESSE PROJETO PRO VUE 3 E RESOLVER PROBLEMAS DE PERFORMANCE E DESEMPENHO