Bem-vindo ao projeto de demonstração desenvolvido para ensinar HTML, CSS e JavaScript. Este projeto inclui várias páginas interativas que demonstram como criar interfaces modernas e funcionais. Siga as instruções abaixo para entender cada parte do projeto e como você pode explorá-lo e estudá-lo.

project/
├── index.html
├── login.html
├── recuperar.html
├── person_form.html
├── person_list.html
├── css/
│   └── styles.css
├── js/
│   ├── main.js
│   ├── recuperar.js
│   ├── cadastro.js
│   └── person_list.js
└── images/
    └── background.jpg

• index.html: Página inicial que dá as boas-vindas aos usuários e contém links para outras páginas do site. Inclui um dashboard explicativo.
• login.html: Página de login para usuários se autenticarem.
• recuperar.html: Página para recuperação de senha.
• person_form.html: Formulário para cadastro de novos usuários.
• person_list.html: Lista de pessoas cadastradas, incluindo gráficos e dados externos.
• css/styles.css: Arquivo de estilos CSS que aplica uma aparência moderna e responsiva ao site.
• js/main.js: Código JavaScript para a página de login e interação com elementos.
• js/recuperar.js: Código JavaScript para a página de recuperação de senha.
• js/cadastro.js: Código JavaScript para a página de cadastro de novos usuários.
• js/person_list.js: Código JavaScript para a página de listagem de pessoas, incluindo geração de gráficos e integração com dados externos.
• images/background.jpg: Imagem de fundo utilizada nas páginas.

A página inicial contém:

• Botões grandes e estilizados para navegação.
• Um dashboard que explica a estrutura e o propósito do projeto.
• Animações para interações mais dinâmicas.

A página de login permite que os usuários se autentiquem:

• Campos para inserir nome de usuário e senha.
• Validação básica para garantir que todos os campos estejam preenchidos.
• Redirecionamento para a página inicial após um login bem-sucedido.

A página de recuperação de senha permite que os usuários recuperem suas senhas:

• Campo para inserir o e-mail.
• Validação para garantir que o campo de e-mail esteja preenchido.

A página de cadastro permite que novos usuários sejam registrados:

• Campos para inserir nome, idade, e-mail, senha e link para foto de perfil.
• Validação para garantir que todos os campos obrigatórios estejam preenchidos.
• Exibição da foto de perfil inserida pelo usuário.

A página de listagem de pessoas exibe uma tabela com os dados dos usuários cadastrados:

• Tabela com colunas para nome e idade.
• Gráfico que mostra a distribuição de idades.
• Integração com uma API externa para exibir dados de temperatura.

1. Clone este repositório para o seu computador.
2. Abra o arquivo index.html em seu navegador para começar a explorar o projeto.
3. Navegue pelas diferentes páginas para ver como elas interagem entre si e como os dados são manipulados.

• HTML5: Para a estrutura do conteúdo.
• CSS3: Para a estilização e layout das páginas.
• JavaScript: Para adicionar interatividade e dinâmicas às páginas.
• Chart.js: Para a geração de gráficos na página de listagem de pessoas.
• OpenWeatherMap API: Para buscar dados de temperatura e exibi-los na página de listagem de pessoas.

Este projeto foi desenvolvido para fornecer uma base prática e interativa para os alunos aprenderem HTML, CSS e JavaScript. Através deste projeto, você aprenderá a:

• Criar e estilizar páginas web.
• Implementar validação de formulários.
• Manipular o DOM com JavaScript.
• Integrar dados externos usando APIs.
• Gerar gráficos dinâmicos para visualização de dados.

Explore o código, experimente fazer modificações e veja como cada alteração afeta o comportamento do site. Use este projeto como base para seus próprios projetos e continue aprimorando suas habilidades de desenvolvimento web.

Bom aprendizado!

Autor: Ederson Almeida Data: 26 de maio de 2024