Como criar um livro de receitas usando HTML, CSS e JavaScript

Este projeto irá ajudá-lo a aprimorar suas habilidades de front-end e ensiná-lo a construir uma interface usando os principais padrões da web.

Os projetos são uma ótima maneira de melhorar suas habilidades em HTML, CSS e JavaScript e reforçar conceitos e técnicas importantes.

Um projeto com o qual você pode começar é um livro de receitas, que pode ser executado em um navegador como o Google Chrome ou o Firefox.

No livro de receitas, o lado esquerdo da página web inclui uma seção onde o usuário pode adicionar novas receitas. À direita da página, o usuário pode visualizar e pesquisar as receitas existentes.

Como pedir ao usuário para adicionar uma nova receita

Adicione o conteúdo inicial aos arquivos HTML, CSS e JavaScript. Se você não estiver familiarizado com os conceitos de desenvolvimento web, há muitos lugares onde você pode aprender desenvolvimento web online.

Você também pode ver o exemplo completo do livro de receitas neste repositório GitHub.

Adicione a estrutura HTML básica em um novo arquivo HTML chamado index.html:

instagram viewer

html>
<html>
<cabeça>
<título>aplicativo de receitatítulo>
cabeça>
<corpo>
<navegação>
<h1>aplicativo de receitah1>
navegação>
<divaula="recipiente">
 Conteúdo aqui 
div>
corpo>
html>

Dentro da classe container, separe a página em uma coluna à esquerda e uma coluna à direita:
```
<divaula="coluna esquerda">div>
<divaula="coluna direita">div>
```

Dentro da coluna da esquerda, adicione um formulário para o usuário adicionar uma nova receita. O usuário pode inserir o nome da receita, lista de ingredientes e método:

<h3>Adicionar receitah3><forma>
<rótulopara="nome da receita">Nome:rótulo>
<entradatipo="texto"eu ia="nome da receita"obrigatório>
<br />
<rótulopara="ingredientes-receita">Ingredientes:rótulo>
<área de textoeu ia="ingredientes-receita"linhas="5"obrigatório>área de texto>
<br />
<rótulopara="método-receita">Método:rótulo>
<área de textoeu ia="método-receita"linhas="5"obrigatório>área de texto>
<br /><botãotipo="enviar">Adicionar receitabotão>
forma>

Na tag head do arquivo HTML, adicione um link para um novo arquivo CSS chamado styles.css. Crie o arquivo na mesma pasta que seu arquivo HTML:
```
<linkrele="folha de estilo"href="estilos.css">
```

Dentro do arquivo CSS, adicione algum estilo para a página geral:

corpo {
família de fontes: sem serifa;
}navegação {
cor de fundo: #333;
posição: fixo;
principal: 0;
largura: 100%;
preenchimento: 20px;
esquerda: 0;
cor: branco;
alinhamento de texto: Centro;
}
.recipiente {
mostrar: flex;
direção flexível: linha;
justificar-conteúdo: espaço entre;
margem: 150px 5%;
}
.coluna esquerda {
largura: 25%;
}.coluna da direita {
largura: 65%;
}

Adicione algum estilo para o Adicionar receitas forma:

forma {
mostrar: flex;
direção flexível: coluna;
}rótulo {
margem inferior: 10px;
}
entrada[tipo="texto"], área de texto {
preenchimento: 10px;
margem inferior: 10px;
raio da borda: 5px;
fronteira: 1pxsólido#ccc;
largura: 100%;
dimensionamento de caixa: caixa de borda;
}botão[tipo="enviar"] {
preenchimento: 10px;
cor de fundo: #3338;
cor: #fff;
fronteira: nenhum;
raio da borda: 5px;
cursor: ponteiro;
}

Na parte inferior da tag body em seu arquivo HTML, adicione um link para um arquivo JavaScript chamado script.js. Crie o arquivo na mesma pasta:
```
<corpo>
 Contente 
<roteiroorigem="script.js">roteiro>
corpo>
```
Dentro do script.js, use o método querySelector para atravessar o DOM e obtenha o elemento de formulário da página.
```
const formulário = documento.querySelector('forma');
```
Crie um novo array para armazenar receitas que o usuário insere no formulário:
```
deixar receitas = [];
```

Em uma nova função, obtenha os campos de nome, ingredientes e método inseridos por meio do formulário. Você também pode implementar validação de formulário do lado do cliente para evitar entradas inválidas ou para verificar se já existe uma receita.

funçãomanipularEnviar(evento) {
// Impede o comportamento padrão de envio de formulário
 event.preventDefault();

// Obtém o nome da receita, ingredientes e valores de entrada do método
const nomeEntrada = documento.querySelector('#nome-da-receita');
const ingrInput = documento.querySelector('#ingredientes-receita');
const methodInput = documento.querySelector('#método-receita');
const nome = nomeInput.value.trim();
const ingredientes = ingrInput.value.trim().split(',').mapa(eu => i.trim());
const método = methodInput.value.trim();
}

Se as entradas forem válidas, adicione-as ao array de receitas:

se (nome && ingredientes.comprimento > 0 && método) {
const novaReceita = { nome, ingredientes, método };
 receitas.push (novaReceita);
}

Limpe as entradas no formulário:

nameInput.value = '';
ingrInput.value = '';
methodInput.value = '';

Após a função handleSubmit(), adicione um ouvinte de evento para chamar a função quando o usuário enviar o formulário:
```
form.addEventListener('enviar', manipularEnviar);
```
Abra index.html em um navegador e visualize o formulário à esquerda:

Como exibir receitas adicionadas

Você pode exibir as receitas armazenadas no array de receitas no lado direito da página.

No arquivo HTML, adicione um div para exibir a lista de receitas dentro da coluna da direita. Adicione outro div para exibir uma mensagem se não houver receitas:
```
<divaula="coluna direita">
<diveu ia="lista de receitas">div>
<diveu ia="sem receitas">Você não tem receitas.div>
div>
```

Adicione algum estilo CSS para a lista de receitas:

#lista de receitas {
mostrar: grade;
grade-modelo-colunas: repita(ajuste automático, mínimo máximo(300px, 1fr));
lacuna na grade: 20px;
}#sem-receitas {
mostrar: flex;
cor de fundo: #FFCCCC;
preenchimento: 20px;
raio da borda: 8px;
margem superior: 44px;
}

Na parte superior do arquivo JavaScript, obtenha os elementos HTML usados para exibir a lista de receitas e a mensagem de erro:

const lista de receitas = documento.querySelector('#lista-de-receitas');
const semReceitas = documento.getElementById('sem receitas');

Dentro de uma nova função, percorra cada receita na matriz de receitas. Para cada receita, crie um novo div para exibir essa receita:

funçãoexibirReceitas() {
 receitaList.innerHTML = '';
 receitas.paraCada((receita, índice) => {
const receitaDiv = documento.createElement('div');
 });
}

Adicione algum conteúdo ao div da receita individual para exibir o nome, os ingredientes e o método. O div também incluirá um botão de exclusão. Você adicionará essa funcionalidade em etapas posteriores:

receitaDiv.innerHTML = `
${receita.name}</h3>


<forte>Ingredientes:forte></p>



 ${receita.ingredientes.map(ingr =>`${ingr}
`).juntar('')}
 </ul>
<forte>Método:forte></p>

${receita.método}</p>

Adicione uma classe para estilizar o div:
```
receitaDiv.classList.add('receita');
```
Anexe o novo div ao elemento HTML RecipeList:
```
receitaList.appendChild (receitaDiv);
```

Adicione o estilo para a classe no arquivo CSS:

.receita {
fronteira: 1pxsólido#ccc;
preenchimento: 10px;
raio da borda: 5px;
Sombra da caixa: 0 2px 4pxrgba(0,0,0,.2);
}.receitah3 {
margem superior: 0;
margem inferior: 10px;
}
.receitaul {
margem: 0;
preenchimento: 0;
estilo de lista: nenhum;
}.receitaulli {
margem inferior: 5px;
}

Verifique se há mais de uma receita. Em caso afirmativo, oculte a mensagem de erro:
```
noRecipes.style.display = receitas.comprimento > 0? 'nenhum': 'flexível';
```
Chame a nova função dentro da função handleSubmit(), depois de adicionar a nova receita no array receitas:
```
exibirReceitas();
```
Abra index.html em um navegador:
Adicione receitas à lista e veja-as aparecer no lado direito:

Como excluir receitas

Você pode excluir receitas clicando no botão Excluir botão abaixo das instruções de uma receita.

Adicione algum estilo CSS para o botão delete:

.delete-button {
cor de fundo: #dc3545;
cor: #fff;
fronteira: nenhum;
raio da borda: 5px;
preenchimento: 5px 10px;
cursor: ponteiro;
}.delete-button:flutuar {
cor de fundo: #c82333;
}

No arquivo JavaScript, adicione uma nova função para excluir uma receita:
```
funçãoidentificadorExcluir(evento) {}
```

Usando o evento JavaScript, encontre o índice da receita que o usuário clicou:

se (event.target.classList.contains('botão deletar')) {
const index = event.target.dataset.index;
}

Use o índice para deletar a receita selecionada do array de receitas:
```
receitas.splice (índice, 1);
```
Atualize a lista de receitas exibidas na página:
```
exibirReceitas();
```
Adicione um ouvinte de evento para chamar a função handleDelete() quando o usuário clicar no botão excluir:
```
receitaList.addEventListener('clique', handleDelete);
```
Abra index.html em um navegador. Adicione uma receita para visualizar o botão excluir:

Como pesquisar receitas

Você pode pesquisar receitas usando a barra de pesquisa para verificar se existe uma determinada receita.

Dentro da coluna da direita, adicione uma barra de pesquisa antes da lista de receitas:

<diveu ia="seção de pesquisa">
<h3>Lista de receitash3>
<rótulopara="caixa de pesquisa">Procurar:rótulo>
<entradatipo="texto"eu ia="caixa de pesquisa">
div>

Adicione estilo CSS para o rótulo da barra de pesquisa:

rótulo[para="caixa de pesquisa"] {
mostrar: bloquear;
margem inferior: 10px;
}

Em script.js, obtenha o elemento HTML da caixa de pesquisa:

const caixa de pesquisa = documento.getElementById('caixa de pesquisa');

Dentro de uma nova função, crie uma nova matriz que contenha receitas cujo nome corresponda à entrada de pesquisa:

funçãoprocurar(consulta) {
const receitasfiltradas = receitas.filtro(receita => {
retornar receita.nome.toLowerCase().includes (query.toLowerCase());
 });
}

Limpe a lista de receitas atualmente exibidas na tela:
```
receitaList.innerHTML = '';
```
Percorra cada receita filtrada que corresponda ao resultado da pesquisa e crie um novo elemento div:
```
filtradasRecipes.forEach(receita => {
const receitaEl = documento.createElement('div'); 
});
```

Adicione o conteúdo HTML da receita filtrada ao div:

receitaEl.innerHTML = `
${receita.name}</h3>


<forte>Ingredientes:forte></p>



 ${receita.ingredientes.map(ingr =>`${ingr}
`).juntar('')}
 </ul>
<forte>Método:forte></p>

${receita.método}</p>

Adicione a mesma classe de receita para um estilo consistente. Adicione o novo div à lista exibida na página:
```
receitaEl.classList.add('receita');
receitaList.appendChild (receitaEl);
```
Adicione um ouvinte de evento para chamar a função search() quando o usuário digitar na barra de pesquisa:
```
searchBox.addEventListener('entrada', evento => pesquisa (evento.destino.valor));
```
Dentro da função handleDelete(), limpe a caixa de pesquisa se o usuário excluir um item, para atualizar a lista:
```
searchBox.value = '';
```
Abra index.html em um navegador da Web para visualizar a nova barra de pesquisa e adicione algumas receitas:
Adicione um nome de receita na barra de pesquisa para filtrar a lista de receitas:

Fazendo projetos com HTML, CSS e JavaScript

Este projeto demonstra como construir uma interface front-end para um livro de receitas simples. Observe que não há servidor de back-end e o aplicativo não mantém os dados; se você atualizar a página, perderá suas alterações. Uma possível extensão na qual você pode trabalhar é um mecanismo para salvar e carregar dados usando localStorage.

Para melhorar suas habilidades de desenvolvimento web, continue explorando outros projetos divertidos que você pode criar em seu próprio computador.

About Technology - denizatm.com

Como criar um livro de receitas usando HTML, CSS e JavaScript

Como pedir ao usuário para adicionar uma nova receita

Como exibir receitas adicionadas

${receita.name}</h3>

Como excluir receitas

Como pesquisar receitas

${receita.name}</h3>

Fazendo projetos com HTML, CSS e JavaScript

Categorias

Recent Post

Você pode me recomendar um editor de áudio freeware para salvar no formato MP3 ou iPod?

Qual é o melhor leitor de PDF de terceiros?

Este mecanismo de pesquisa acompanha todos os programas e filmes nos serviços de streaming