O projeto é sobre um site para um restaurante fictício, com um layout visualmente agradável, que permite o usuário visualizar o catálogo e realizar uma compra.
Neste projeto, fui além e incluí algumas animações usando apenas CSS, além de explorar mais recursos do JavaScript. Algumas das novidades incluem:
- Carrossel de Imagens: Possibilitando avançar ou retroceder nas imagens clicando nas setas. Se o usuário estiver na última imagem e clicar para avançar, será levado de volta à primeira imagem. Da mesma forma, se estiver na primeira imagem e desejar voltar, também é possível com um simples clique.
- Catálogo Dinâmico: Ao clicar em ícones específicos, o catálogo exibirá itens relacionados. Por exemplo, selecionar o ícone do hambúrguer mostrará o catálogo de hambúrgueres, enquanto o ícone da pizza exibirá o catálogo de pizzas, e assim por diante.
- Validação de Formulário: Introduzi validações para garantir que o usuário forneça informações corretas. O nome não pode estar vazio, e os campos de número do cartão, CVV, mês e ano têm requisitos específicos de digitação. Se o formulário não atender a esses critérios, não será validado. E quando tudo estiver correto, uma confirmação animada será exibida.
The project is about a website for a fictional restaurant, with a visually pleasing layout, which allows the user to view the catalog and make a purchase.
In this project, I went further and included some animations using just CSS, in addition to exploring more JavaScript features. Some of the new features include:
- Image Carousel: allows moving the images forward or backward through the images by clicking on the arrows. If the user is on the last image and clicks to advance, they will be taken back to the first image. Likewise, if you are on the first image and want to go back to the last image, that's also possible with a simple click.
- Dynamic Catalog: Clicking specific icons, the catalog will display related items. For example, selecting the hamburger icon will show the burger catalog, the pizza icon will show the pizza catalog, and so on.
- Form Validation: I introduced validations to ensure the user provides correct information. The name cannot be empty, and the card number, CVV, month, and year fields have specific typing requirements. In case the form does not meet these criteria, it will not be validated. And when everything is correct, an animated confirmation will be displayed.
- HTML;
- CSS;
- JavaScript.
