Programação Web

1 UNIRIO Universidade Federal do Estado do Rio de Janeiro Bacharelado em Sistemas de Informação Projeto Integrador I 012025 Prof Jobson Massollar Trabalho 4 LEIA ATENTAMENTE AS REGRAS E OS ENUNCIADOS R E G R A S Leia todas as regras descritas no enunciado para implementar o trabalho corretamente O trabalho deverá ser realizado individualmente ou em dupla O trabalho deverá ser enviado exclusivamente para o Google classroom em formato ZIP até o dia 20072025 domingo Os arquivos HTML CSS e JS deverão ser compactados em um único arquivo zipado Não envie a pasta com as imagens das bandeiras nem o arquivo countriesjs O nome do arquivo zipado deverá ser obrigatoriamente T4 nomedoalunozip ou T4 nomedoaluno1 e nomedoaluno2zip Não serão aceitos trabalhos enviados por email nem impressos Trabalhos com estruturas eou organizações semelhantes plágio serão penalizados 2 Crie os arquivos paiseshtml paisescss e paisesjs para implementar a consulta de uma lista de países com seus dados e bandeiras A lista de países está sendo enviada no arquivo countriesjs que contém um vetor de objetos chamado countries que armazenam as informações dos países Também está sendo enviada uma pasta chamada flags que contém as bandeiras de todos os países Os nomes das bandeiras são formados pelo código do paíspng 1 O layout deve estar de acordo com o seguinte padrão a Fonte Arial b Tamanho das fontes i título principal 32pt ii título secundário usar h2 iii botão 105rem e iv input e select 105rem e v todas as demais fontes são normais default do navegador c Cores i fundo do cabeçalho 143e93 ii fundo da lateral direita c4d6ff iii fundo central d7e8fa iv fundo das informações do país c4d6ff v título principal e label do botão white vi todas as demais letras bordas e linhas 143e93 d input select e button devem ter os cantos arredondados com padding de 5px e Os labels dos filtros total de países e paginação devem estar em negrito mas as informações dos países ficam em fonte normal f Use uma margem de 3px para separar os blocos com os dados dos países g Tudo deve ser estilizado via CSS usando obrigatoriamente o CSS Grid Layout h A grid deve ocupar toda a altura da página sem apresentar o scroll e deve ter um gap de 3px i A área lateral deve ter largura de 15 com mínimo de 180px j Não pode haver código CSS na página HTML 2 As informações a serem apresentadas são nome do país código do país capital região símbolo da moeda nome da moeda código da moeda idioma e código do idioma A informação de flag do vetor não deve ser usada As imagens das bandeiras estão na pasta flags 3 A lista de seleção deve conter Todas América do Norte América do Sul Europa África Ásia Oceania e Outros 4 Ao selecionar uma região devem ser apresentados somente os países daquela região 5 Ao digitar uma string no input nome do país devem ser apresentados somente os países que possuem essa string no nome 6 Os filtros de região e nome do país devem funcionar juntos 7 A lista deve aparecer paginada e o usuário pode escolher a quantidade de elementos em uma página valor inicial é 10 e valores 0 8 Deve ser apresentado o total de países encontrados a página atual e o total de páginas 9 Ao filtrar por região ou nome ou quando muda o tamanho da página deve voltar para a página 1 10 Ao clicar em a lista de países deve ser apresentada em formato de lista com cada país ocupando toda a extensão da área dica use displayblock na DIV 3 11 Ao clica em a lista de países deve aparecer como blocos lado a lado dica cada DIV com width22 e displayinlineblock 12 Ao alterar a apresentação com ou a página e os países listados devem permanecer os mesmos Altere somente o estilo das DIVs 4 Dicas i No vetor countries as regiões são definidas como NA SA EU AS AF e OC Entretanto existem alguns poucos países que não estão com esse padrão Por isso a seleção de região possui a opção Outros ii Para o grid ocupar toda a altura da página use height100vh e limpe as margens do BODY iii Quando a apresentação estiver em formato de lista use width128px nas bandeiras Quando estiver em bloco use width64px iv Para separar os dados textuais do país da sua bandeira coloque os textos em uma DIV e a bandeira em outra DIV A primeira DIV ocupa 70 da largura e a segunda ocupa 25 aproximadamente Ambas devem ter displayinlineblock para ficarem lado a lado e a segunda DIV deve ter floatright para alinhar à direita v Para que os dados textuais dos países não estourem a área da DIV coloqueos dentro de parágrafos e use whitespacenowrap e overflowhidden nesses parágrafos Organização dos diretórios paises flags bandeiras ficam aqui countriesjs paisescss paiseshtml paisesjs Arquivo paiseshtml DOCTYPE html html meta charsetUTF8 head link relstylesheet hrefpaisescss typetextcss script srccountriesjsscript script srcpaisesjsscript head body body html