Solucionado
Esse negócio de adicionar os arquivos do HTML e CSS me deixou confuso. E o que está ocorrendo comigo é que o formulário não aparece quando eu clico, a lógica do js não está errada, porém é alguma coisa no HTML ou no CSS que está impedindo, sei lá..
Alguém pode me ajudar o que tem de errado nos códigos? Aqui está o projeto no github: https://github.com/PolimataDigital/Projeto-Fokus
hoje, com a Alura e o Google Gemini
Olá Victor! Com base nos seus arquivos compartilhados, foi necessário adicionar o seu CSS e os arquivos JS para que o projeto funcione. Portanto, basta alterar as seguintes linhas do seu código para:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fokus</title>
<link rel="shortcut icon" href="./imagens/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prata&family=Unbounded:wght@200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="/Fokus-projeto-base/styles.css">
<script src="scriptCrud.js" defer></script> <!---Usando o Defer, que significa atraso, para o navegador ler o js por último-->
<script src="script.js" defer></script> <!--Criando um novo arquivo de js para fazer implementações novas nesse projeto-->
</head>
Nesse caso, é necessário adicionar o arquivo CSS ao HTML usando o link <link rel="stylesheet" href="style.css"> e alterar o endereço do JS para a pasta raiz. No entanto, observei que existem endereços como /Fokus-projeto-base/ArquivosJs/scriptCrud.js no HTML. Verifique se o endereço está correto e faz sentido para a sua organização.
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Eu acho que não é isso que você falou amigo. Vou mandar um repositório novo, vai que não adicionei os arquivos corretamente.
Descobri o meu erro, simplemente eu dupliquei o
no HTML. Só bastou apagar um que funcionou!`<ul class="app__section-task-list"></ul>
<form class="app__form-add-task hidden" aria-hidden="true">
<div class="app__form-field">
<label class="app__form-label">
Adicionando tarefa
</label>
<textarea required rows="4" class="app__form-textarea" placeholder="No que você está trabalhando?"></textarea>
</div>
<footer class="app__form-footer">
<button type="button" class="app__form-footer__button app__form-footer__button--delete">
<img src="imagens/delete.png" alt=""> Deletar
</button>
<div class="splitter"></div>
<button type="button" class="app__form-footer__button app__form-footer__button--cancel">
<img src="imagens/close.png" alt=""> Cancelar
</button>
<button class="app__form-footer__button app__form-footer__button--confirm">
<img src="imagens/save.png" alt=""> Salvar
</button>
</footer>
</form>
<button class="app__button--add-task">
<img src="styles.css" alt=""> Adicionar nova tarefa
</button>
</div>
</section>
</footer>
</form>`
Olá Victor!
Que bom que o erro foi resolvido, minha solução foi com base no primeiro projeto, compartilhado por ti, e que estava diferente do segundo link compartilhado com ti, mas fico imensamente feliz que você conseguiu encontrar sua própria solução, isso é uma evolução e faz parte do dia a dia do programador!
No mais desejo tudo de bom para ti nesse ano e até mais!