Atividade Avaliativa 1 Programacao Web HTML CSS DOM e JavaScript

INSTITUTO FEDERAL FLUMINENSE IFF Campus Itaperuna Prof Leandro Fernandes dos Santos leandrofsantosiffedubr Disciplina Programação para Web Atividade Avaliativa 1 Assuntos HTML CSS DOM Web Storage API e JavaScript Turma Sistemas de Informação 5º Período Observações e regras de entrega Esta atividade poderá ser realizada em dupla Terá o valor de 3 pontos na composição da nota da A1 distribuídos da seguinte forma 05 pontos Estruturação correta do HTML 075 pontos Estruturação correta do CSS 1 ponto Manipulação correta do DOM 075 pontos Persistência local usando Web Storage API A solução definitiva deverá ser enviada via Moodle por meio da página da disciplina até as 23h59min do dia 23052023 O arquivo com a solução deverá ser compactado rar ou zip com o seguinte padrão de nomenclatura Atividade1PWNome1Sobrenome1Nome2Sobrenome2rar Pontos importantes a serem seguidos HTML e CSS com sintaxe clara e concisa Códigos bem estruturados e bem indentados Todos os arquivos de CSS e JavaScript deverão ser vinculados de modo externo O não atendimento dos requisitos especificados neste documento acarretará em perda de pontos Instituto Federal FluminenseIFF Campus Itaperuna Requisitos gerais 1 Para a realizacao desta atividade vocˆe devera seguir a estrutura de diretorios disponibi lizada na pagina do Moodle da disciplina 2 Vocˆe devera construir um site utilizando HTML CSS e JavaScript de acordo com o resultado esperado mostrado no vıdeo httpsbitly3V5nd5e 3 Caso deseje vocˆe podera utilizar algum framework CSS tal como o bootstrap alguma biblioteca de JavaScript tal como o jQuery 4 Para a realizacao da correcao somente o browser juntamente com algum servidor de paginas sera utilizado Portanto nao devem haver recursos que dependam de instalacoes externas para o trabalho funcionar corretamente Requisitos especıficos O site como pode ser visto no link diz respeito a um ambiente onde e possıvel criar e arquivar tarefas 1 Na tela principal ao clicar no menu A fazer o usuario podera utilizar a opcao de Adicionar Tarefa Na criacao devera ser possıvel digitar uma descricao escolher uma cor clicando em uma das opcoes disponıveis e depois adicionala por meio do botao Adicionar 2 Vocˆe devera realizar as validacoes necessarias para que nao seja possıvel adicionar uma tarefa se o campo de descricao nao estiver preenchido ou uma cor nao tiver sido escolhida 3 Ao criar uma tarefa esta deve possuir um cabecalho com a mensagem Nao concluıda e com a opcao desmarcada 4 Ao marcar a tarefa como concluıda esta devera mudar a formatacao do cabecalho de acordo com o vıdeo e sua descricao devera possuir o efeito de riscado como mostrado 5 Cada card de tarefa possui um ıcone no canto inferior direito que e mostrado dependendo do status da tarefa Caso a tarefa esteja criada mas nao concluıda entao o ıcone de arquivamento devera estar desabilitado Ao concluıla entao o ıcone estara ativo e uma vez clicado realizara o arquivamento da tarefa Para as tarefas arquivadas o ıcone de exclusao deve permitir que esta seja removida 6 Uma tarefa so podera ser arquivada se a mesma estiver marcada como concluıda 7 Ao realizar o arquivamento de uma tarefa esta devera ser movida para a pagina de Arquivadas 8 Uma tarefa so podera ser excluıda se a mesma estiver sido concluıda e arquivada 9 As tarefas deverao ser adicionadas utilizando JavaScript por meio da manipulacao de elementos via DOM 2 Instituto Federal FluminenseIFF Campus Itaperuna 10 Todas as tarefas deverao ser armazenadas utilizando recurso windowlocalStorage Este recurso evitara a perda das tarefas apos o fechamento da janela do browser e servira como persistˆencia Vocˆe devera seguir as seguintes especificacoes de formatacao CABECALHO Altura do cabecalho 100px Fonte do Menu Principal Montserrat Regular 24px AREA DA ADIC AO DE TAREFAS Altura total 100px Labels Fonte Montserrat Medium 18px Cor 000000 Botao Adicionar Fonte Roboto Medium 25px Cor da fonte ffffff Largura 145px Altura 40px Cor Background 50b6cf Input Adicionar Largura 490px Altura 40px Cord Borda 50b6cf Border Radius 7px Cores disponıveis ao adicionar tarefa Largura 20px Altura 20px Azul daf5fa Verde d1fecb Rosa f6d0f6 Roxo dcd0f3 Amarelo fcfccb 3 Instituto Federal FluminenseIFF Campus Itaperuna Laranja fbd4b4 Branco ffffff CARTOES DE TAREFAS Largura 200px Altura 200px Box Shadow 2px 4px 5px e rgba com valores iguais a 0 0 0 025 Cores de background Azul daf5fa Verde d1fecb Rosa f6d0f6 Roxo dcd0f3 Amarelo fcfccb Laranja fbd4b4 Branco ffffff Cores do background do cabecalho do cartao Nao concluıda ffa4a3 Concluıda b8ff99 Formatacao do cabecalho dos Cartoes Fonte Roboto Regular 10px Cor da fonte concluıda 2b5a07 Cor da fonte nao concluıda e42c28 Corpo dos cartoes das tarefas Fonte da descricao Open Sans SemiBold 20px Cor do texto no corpo dos cartoes Card com fundo Azul 19b5dc Card com fundo Verde 58a51d Card com fundo Rosa cb65cb Card com fundo Roxo 9763f9 Card com fundo Amarelo 8f8f69 Card com fundo Laranja ec842e 4 Instituto Federal FluminenseIFF Campus Itaperuna Card com fundo Branco 727272 Os valores de espacamentos margin padding etc nao serao aqui especificados Sera parte da avaliacao a especificacao destas propriedades pelo aluno de forma a se parecer ao maximo com o resultado visto no vıdeo Materiais de apoio Alem dos Slides e exemplos desenvolvidos durante as aulas semanalmente abaixo encontramse outras referˆencias que irao auxiliar no desenvolvimento da atividade MDN Web Docs HTML httpsdevelopermozillaorgptBRdocsWebHTML CSS httpsdevelopermozillaorgptBRdocsWebCSS JavaScript httpsdevelopermozillaorgptBRdocsWebJavaScript W3Schools HTML httpswwww3schoolscomhtmldefaultasp CSS httpswwww3schoolscomcssdefaultasp JavaScript httpswwww3schoolscomjsdefaultasp 5