O Old School Cookbook é um caderno de receitas com aquele aspecto old-school dos cadernos de antigamente, enfeitado com recortes, decorado à mão... só que aqui, você tem um caderno de receitas virtual com armazenamento local no browser, ou seja, você acessa do navegador do seu celular (ou computador), salva suas receitas e pode acessá-las do mesmo navegador sempre que quiser.
IndexedDB implementado através da biblioteca:
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Old-School Cookbook |
| 🏷️ Tecnologias | HTML, CSS, JavaScript, IndexedDb |
| 🚀 URL | https://oldschool-cookbook.vercel.app. Veja detalhes de uso no item ⚙️ Como usar |
| 🔥 Desafio | Não se aplica (projeto pessoal) |
Ao acessar o Old School Cookbook, você verá a tela inicial acima, bem direta, com dois botões de ação: Criar receita e Ver receita.
Ao clicar em Criar receita, você pode cadastrar uma receita em seu caderno através de um formulário. Insira o nome da receita, os ingredientes (separados por vírgula), o passo-a-passo e o link da URL (endereço Web) da imagem que ilustra a sua receita (pode ser em formato .jpg, .jpeg ou .png). Você também pode adicionar tags para identificar melhor sua receita. Depois é só clicar no botão Salvar receita e pronto! Você poderá ver seus dados salvos na página do Caderno.
Para isso, você pode acessar através do menu no cabeçalho (ou através da página inicial) o seu caderno de receitas. Lá você vai ver todas as suas receitas salvas em formato de cards com um aspecto bem bacana de fotos Polaroid™. Basta clicar sobre qualquer card e uma nova página abrirá, onde você vai ter acesso a todas os detalhes que você salvou lá na página de cadastro. Caso não esteja feliz com sua receita, você pode simplesmente apagá-la de seu caderno clicando no botão Excluir receita.
Simples, não?
- O sistema de busca não está totalmente funcional em dispositivos Android, parece haver algum problema com o reconhecimento do evento
keydown.
English version
The Old School Cookbook app is a recipe book with that old school looks from your grandma's days, trimmed with clippings, hand-made decorations... but here you have a virtual recipe book with local storage of your data in the browser (via IndexedDB), that is, you open the application via borwser on your mobile (or PC), save your recipes and can access them later from the same browser whenever you want!
When opening the Old School Cookbook app, you will see the main page above, very clear and direct, with two action buttons: Create a recipe (in pink) and View recipes (in green).
By clicking Create a recipe ("Criar receita"), you can register a new recipe in your book by filling the form. Type your recipe's name, the ingredients (separated by comma), the directions and an image URL link (.jpg, .jpeg ou .png) to illustrate your recipe. You can also add tags to better identify it. Then you just click the Save recipe ("Salvar receita") button and that's it! You can view your data saved in the Book page.
In order to do so, you may access the Book (Caderno) page through the header of the page (or hitting the green button on the Home page). There you can see all your recipes save as cards with a nice Polaroid™ look. You just need to click any card and a new window will load with all the details you saved when creating your recipe. If you are not happy with it, you can just delete the recipe by clicking the Delete recipe ("Excluir receita") button.
Simple, isn't it?
- The search bar is not working properly on Android devices, it seems there is a problem with the
keydownevent.
Developed with 🧡 by @sucodelarangela