Skip to content

Commit

Permalink
codigos
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielcbz
danielcbz committed Jun 29, 2024
1 parent a19c6c1 commit 76b80fa
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 47 deletions.
54 changes: 51 additions & 3 deletions codigo/novas-receitas/assets/css/novasReceitas.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,10 @@ header {
}

.centralizar {
display: block;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.dropdown {
position: relative;
Expand Down Expand Up @@ -121,4 +122,51 @@ button:hover {
.centralizar_texto{
text-align: center;
color: white;
}
.telacard {
height: 100%;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
.telacard .card-body {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.telacard .card-title {
font-size: 1.25rem;
margin-bottom: 0;
}
.telacard img {
height: 200px;
object-fit: cover;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.telacard button {
margin-top: auto;
}
.telacard .card {
height: 100%;
border-radius: 5px;
}
.botaovernovasreceitas{
background-color: #5eb4a6;
color: #fff;
padding: 10px 20px;
border: none;
text-decoration: none;
display: inline-block;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
}
.botaovernovasreceitas a {
color: #fff;
text-decoration: none;
}
.botaovernovasreceitas:hover {
background-color: #5eb4a6;
}
49 changes: 34 additions & 15 deletions codigo/novas-receitas/assets/js/criarReceitas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,8 @@ let filtros = []
let instrucoes = []

var nome = document.querySelector(".nome");

var tempo = document.querySelector(".tempo");

var rendimento = document.querySelector(".rendimento");

var dificuldade = document.querySelector(".dificuldade");

function adicionarBarra() {
Expand All @@ -25,22 +22,23 @@ function adicionarBarra() {
ingrediente.value = ""
quantidade.value = ""
}

function addfiltros() {
var filtro = document.querySelector(".filtro");
filtros.push(filtro.value)
filtro.value = ""
}

function addmodo_preparo() {
var instrucao = document.querySelector(".modo_preparo");
instrucoes.push(instrucao.value)
instrucao.value = ""
}
let receitas = []

formNovaReceita.onsubmit = async (e) => {
e.preventDefault()
const update = {
nome : nome.value,
nome: nome.value,
tempo: tempo.value,
rendimento: rendimento.value,
dificuldade: dificuldade.value,
Expand All @@ -55,15 +53,36 @@ formNovaReceita.onsubmit = async (e) => {
},
body: JSON.stringify(update),
};
fetch('https://d2c501fa-4177-4d7b-a69b-81eb77e71b05-00-1wjvhqjrblfl5.kirk.replit.dev/novas_receitas', options)
.then(data => {
if (!data.ok) {
throw Error(data.status);

fetch(urlFetch, options)
.then(response => {
if (!response.ok) {
throw new Error('Erro ao cadastrar receita');
}
return data.json();
}).then(update => {
console.log(update);
}).catch(e => {
console.log(e);
return response.json();
})
.then(data => {
console.log(data); // Aqui você pode exibir a resposta do servidor se precisar
// Mostrar mensagem de sucesso
const mensagem = document.createElement('p');
mensagem.textContent = 'Receita cadastrada!';
mensagem.classList.add('alert', 'alert-success'); // Adicione classes para estilizar a mensagem
formNovaReceita.appendChild(mensagem); // Adiciona a mensagem após o formulário
// Limpar campos do formulário (opcional)
nome.value = '';
tempo.value = '';
rendimento.value = '';
dificuldade.value = '';
ingredientes = [];
filtros = [];
instrucoes = [];
})
.catch(error => {
console.error('Erro ao cadastrar receita:', error);
// Mostrar mensagem de erro (opcional)
const mensagemErro = document.createElement('p');
mensagemErro.textContent = 'Erro ao cadastrar receita. Por favor, tente novamente mais tarde.';
mensagemErro.classList.add('alert', 'alert-danger'); // Adicione classes para estilizar a mensagem de erro
formNovaReceita.appendChild(mensagemErro); // Adiciona a mensagem de erro após o formulário
});
}
};
70 changes: 50 additions & 20 deletions codigo/novas-receitas/assets/js/verNovasReceitas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,60 @@ const urlFetch = "https://d2c501fa-4177-4d7b-a69b-81eb77e71b05-00-1wjvhqjrblfl5.
let receitas = [];

const loadData = async () => {
const response = await fetch(urlFetch);
const data = await response.json();
receitas = data;

renderRecipes();
try {
const response = await fetch(urlFetch);
const data = await response.json();
receitas = data;
renderRecipes();
} catch (error) {
console.error('Erro ao carregar receitas:', error);
alert('Erro ao carregar receitas. Por favor, tente novamente mais tarde.');
}
};

const renderRecipes = () => {
receitasContainer.innerHTML = "";
receitas.forEach(receita => {
receitasContainer.innerHTML += `
<div class="col">
<div class="card">
<img src="${receita.imagem}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${receita.nome}</h5>
<button onclick="deleteRecipe('${receita.id}')">excluir</button>
</div>
</div>
</div>
`
;
const card = createRecipeCard(receita);
receitasContainer.appendChild(card);
});
};

const createRecipeCard = (receita) => {
const cardDiv = document.createElement('div');
cardDiv.classList.add('col');

const card = document.createElement('div');
card.classList.add('card', 'telacard');

const img = document.createElement('img');
img.src = receita.imagem;
img.classList.add('card-img-top');
img.alt = 'Imagem da receita';

const cardBody = document.createElement('div');
cardBody.classList.add('card-body');

const title = document.createElement('h5');
title.classList.add('card-title');
title.textContent = receita.nome;

const deleteButton = document.createElement('button');
deleteButton.textContent = 'Excluir';
deleteButton.classList.add('btn', 'btn-danger');
deleteButton.onclick = () => deleteRecipe(receita.id);

cardBody.appendChild(title);
cardBody.appendChild(deleteButton);

card.appendChild(img);
card.appendChild(cardBody);

cardDiv.appendChild(card);

return cardDiv;
};

const deleteRecipe = async (id) => {
try {
const response = await fetch(`${urlFetch}/${id}`, {
Expand All @@ -36,11 +65,12 @@ const deleteRecipe = async (id) => {
if (!response.ok) {
throw new Error('Erro ao excluir receita');
}
// Update local data after deletion
// Remove the recipe from the local data array
receitas = receitas.filter(receita => receita.id !== id);
renderRecipes(); // Update UI
// Remove the corresponding card from the UI
renderRecipes();
} catch (error) {
alert(error)
alert('Erro ao excluir receita. Por favor, tente novamente mais tarde.');
console.error('Erro:', error);
}
};
Expand Down
2 changes: 1 addition & 1 deletion codigo/novas-receitas/criarReceitas.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<body>
<header><a href="/codigo/pagina-principal/index.html"> <img src="assets/imgs/_Logo.png" alt="dawdaw" class="centralizar" width="200" height="100">
</a>
<button><a href="verNovasReceitas.html">pagina novas receitas</a></button>
<button class="botaovernovasreceitas"><a href="verNovasReceitas.html">pagina novas receitas</a></button>
</header>

<div class="row row-cols-1 row-cols-md-2 g-4 receitas"></div>
Expand Down
13 changes: 5 additions & 8 deletions codigo/novas-receitas/verNovasReceitas.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,11 @@
<link rel="stylesheet" href="assets/css/novasReceitas.css">
<title>receitas</title>
</head>

<body>
<header><a href="/codigo/pagina-principal/index.html"> <img src="assets/imgs/_Logo.png" alt="dawdaw" class="centralizar" width="200" height="100">
</a>
<button><a href="./criarReceitas.html">criar mais receitas</a></button>
<div class="row row-cols-1 row-cols-md-2 g-4 receitas">

</div>
<button><a href="./criarReceitas.html">criar mais receitas</a></button>
<script src="assets/js/verNovasReceitas.js"></script>
</body>
</header>
</header>
<body>
<div class="row row-cols-1 row-cols-md-2 g-4 receitas"></div>
</body>

0 comments on commit 76b80fa

Please sign in to comment.