Nesse desafio você irá refatorar, ou seja, reescrever algumas partes, do seu código do desafio anterior, o Foodfy. Até esse módulo não conhecíamos sobre back-end, ou seja, todos dados da nossa página ficavam no próprio front-end (arquivos HTML). Agora que conhecemos sobre Node.js vamos tornar a exibição dos dados mais dinâmica 🚀
Para executar, abra o terminal na pasta do repositório e digite o comando:
npm install
Após a intalação, execute o comando:
npm start
Abra o navegador e digite no endereço: localhost:5000
Crie um arquivo data.js na raiz do seu projeto.
Use os dados das receitas contidos no arquivo data.js para a página de listagem de receitas e para a home. Na home, liste as 6 primeiras receitas, não é necessário agora sabermos sobre as receitas mais acessadas. Na listagem, liste todas receitas do arquivo. Obs.: Você precisará converter seu projeto em um projeto Node.js usando Nunjucks para mostrar cada página.
- Ao clicar em uma receita agora o usuário deve ser redirecionado para uma nova página contendo todas informações da receita como ingredientes, modo de preparo e informações adicionais (todas essas informações estão contidas no arquivo data.js).
- Na página de listagem não é mais necessário abrir o modal como tínhamos no desafio anterior do Foodfy.
Dentro da página do detalhe da receita, em cada seção "Ingredientes", "Modo de preparo" e "Informações adicionais" há um botão Mostrar ou Esconder que ao ser clicado deve mostrar ou esconder o texto abaixo do título baseado em seu estado de visibilidade.