This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Rest Country Api |
| 🏷️ Tecnologias | HTML, Js, Api, Css |
| 🚀 URL | https://rest-country-api-woad.vercel.app/ |
| 🔥 Desafio | (https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca) |
- HTML5 marcação semantica
- CSS propriedades custom
- Flexbox
- CSS Grid
- Mobile-first fluxo de trabalho
- Api: consumo de api
- Rest Api Country
Meu processo foi criar uma estrutura HTML básica, buscar e adicionar cada dado como cartões HTML em Js. Para cada cartão foi adicionada uma função de clique que obtém as informações do cartão clicado e define essas informações no LocalStorage, então o usuário é levado para a página de detalhes, que é gerada com base nas informações obtidas no LocalStorage. Também tem um botão Switch para alterar o tema, e isso foi feito alterando a propriedade do dataset na tag HTML, que afeta como as variáveis css são lidas.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Api: api consumption
- Rest Api Country
My process was create basic HTML structure, then fetch and add each data as HTML cards in Js. For Each card it was added a click function that get the information from the clicked card, and set that information on LocalStorage, then the user is taken to the details page, that is generated based on the information get on LocalStorage. Also have a Switch button to change theme, and that was made changing dataset property on HTML tag, that affects how css variabel are read.
- My Website - DevDartagnan
- Frontend Mentor - @Leozinsk