Um projeto JavaScript focado em como manipular dados usando Fetch API. Esse repositório consome a API gratuita The Cocktail DB (v1) - que suporta as solicitações de método GET - por meio da Fetch API e cria algumas telas de busca interativas onde o usuário é capaz de filtrar, pesquisar por termos e ver os detalhes das bebidas resultantes, como também listar bebidas alcoólicas ou não alcoólicas, ou pesquisar bebidas pela primeira letra de seu nome.
Confira os recursos do projeto:
- Listar Drinks por categoria (coquetel, shot, refrigerantes...)
- Listar Drinks por tipo de copo (jarra, copo de cerveja, copo de shot ...)
- Listar Drinks por tipo de bebida alcoólica (alcoólica, não alcoólica ou opcional)
- Pesquisar Drinks por Nome ou Termo (Gin, Caipirinha, Whisky ...)
- Pesquisar Drinks pela primeira letra (A, G, T ...)
- Obter detalhes do drink navegando
- Obter detalhes de um Drink Aleatório
As tags select> option , usadas no controle da interface do usuário, são solicitadas e recebidas através da própria API, portanto, elas sempre estarão atualizadas.
Basicamente, quando a janela é carregada e o script é lido, as categorias, tipos de copo e opções alcoólicas são carregadas e anexadas ao HTML.
Algumas funções auxiliares simples foram construídas para nos ajudar a atingir nossos objetivos. Elas podem ser úteis em outros projetos, uma vez que são genéricas e podem ser amplamente utilizadas.
O objetivo do projeto é estudar JavaScript (puro), portanto não há uso de quaisquer bibliotecas de terceiros, como o Axios (com exceção do Bootstrap - e suas dependências Popper e JQuery). Este repositório é focado no Fetch API especificamente. Portanto, as linguagens e recursos tecnológicos utilizados no projeto são:
- HTML
- JavaScript
- JSON
- Bootstrap (+Popper, JQuery)
- MarkDown
- README.md: 'como colaborar' e 'changelog' adicionados
- index.html: HTML inicial estruturado
- README.md: versão inicial
Você pode fazer um fork do repositório e propor melhorias abrindo Pull Requests (PRs). Nos seus comentários (da PR), devem constar - pelo menos - essas informações (em .md - formato markdown):
Nome da Branch Objetivo Numa sentença curta, descreva o objetivo da sua branch/feature. Solução Como você solucionou o problema? Como funciona sua proposta? Dependências É necessário instalar alguma biblioteca, pacote ou usar algum CDN? QA Como eu devo testar sua feature? Que cenários de uso você imaginou? Nota importante: quanto mais específico você for, mais chances da sua PR ser aprovada.
Dica: você pode testar e visualizar seu arquivo markdown no site Dillinger.io.
Vamos nos conectar? Se quiser trocar idéias, experiências e figurinhas, entre em contato comigo!
Marcelo Diament | Desenvolvedor Front End Pleno e Instrutor Github | LinkedIn
English version
A JavaScript project focused on how to manipulate data using the Fetch API. This repository consumes the free API The Cocktail DB (v1) - which supports GET method requests - through the Fetch API and creates some interactive search screens where the user is able to filter, search for terms and see the details of the resulting drinks, as well as list alcoholic or non-alcoholic drinks, or search for drinks by the first letter of their name.
Check out the project resources:
- List Drinks by category (cocktail, shot, soft drinks ...)
- List Drinks by type of glass (pitcher, a glass of beer, a shot glass ...)
- List Drinks by type of alcoholic drink (alcoholic, non-alcoholic, or optional)
- Search for Drinks by Name or Term (Gin, Caipirinha, Whiskey ...)
- Search for Drinks by the first letter (A, G, T ...)
- Get drink details by browsing
- Get details of a Random Drink
The select> option tags, used on the user interface control, are requested and received through the API itself, so they will always be updated.
Basically, when the window is loaded and the script is read, the categories, types of glass, and alcoholic options are loaded and attached to HTML.
Some simple auxiliary functions were built to help us achieve our goals. They can be useful in other projects since they are generic and can be widely used.
The aim of the project is to study (pure) JavaScript, so there is no use of any _ third party libs_, such as Axios. This repository is focused on the Fetch API specifically. Therefore, the languages and technological resources used in the project are:
- HTML
- JavaScript
- JSON
- Bootstrap (+Popper, JQuery)
- MarkDown
- README.md: 'how to collaborate' and 'changelog' added
- index.html: initial HTML structured
- README.md: initial version
You can fork this repository and then propose improvements by opening Pull Requests (PRs). It's body must contain - at least - those information (in .md - markdown format):
Branch Name Goal In a short sentence, describe what is the branchs aim. Solution How did you solved the problem? How does your proposal works? Dependencies Is it necessary to install any package or to use any CDN? QA How should I test your feature? Which sceneries have you imagined? Important note: the more specific you get, better the chances of your PR to be approved.
Tip: you can preview your markdown files in the Dillinger.io website.
Shall we connect? If you want to exchange ideas, experiences and stickers, contact me!
Marcelo Diament | Full Front End Developer and Instructor Github | LinkedIn