Skip to content

Commit f456edb

Browse files
author
Thomas Eduardo
committed
melhorias e ajustes feitos
1 parent 9d9394a commit f456edb

File tree

6 files changed

+520
-173
lines changed

6 files changed

+520
-173
lines changed

‎image/readme/1726530422194.png‎

264 KB
Loading

‎index.html‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,98 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="pt-BR">
33

44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Paginação usando HTML CSS e JavaScript</title>
7+
<title>Fundamentos do JavaScript</title>
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
1111
<link rel="stylesheet" href="./src/styles.css">
1212
<link rel="icon" type="image/png" href="./src/img/icons8-javascript-96.png">
13-
1413
</head>
1514

1615
<body>
17-
<header>
18-
<h1 style="text-align: center; padding: 20px 0; font-size: 32px; color: rgb(0, 0, 0); background: linear-gradient(to right, #edf704, #edf704); margin: 0;">Sintaxe JavaScript</h1>
16+
<header>
17+
<h1>Sintaxe JavaScript</h1>
1918
</header>
2019

2120
<main class="data-container">
2221
<div class="card-container">
2322
<div class="card">
24-
<img src="./src/img/Literais.png" alt="Literais - Imagem 1">
23+
<img src="./src/img/Literais.png" alt="Literais - Imagem 1" class="card-image">
2524
<h3>Literais</h3>
2625
<p class="short-description">Valores fixos para representar dados primários, como números, strings, booleanos, arrays, objetos e expressões regulares.</p>
2726
<p class="full-description hidden">Valores fixos para representar dados primários, como números, strings, booleanos, arrays, objetos e expressões regulares. Mais detalhes podem ser encontrados na <a href="#">documentação</a>.</p>
28-
<button class="btn-more">Ver Mais</button>
27+
2928
</div>
30-
29+
3130
<div class="card">
32-
<img src="./src/img/variáveis_2.png" alt="Variáveis - Imagem 2">
31+
<img src="./src/img/variáveis_2.png" alt="Variáveis - Imagem 2" class="card-image">
3332
<h3>Variáveis</h3>
3433
<p class="short-description">Usadas para armazenar dados; declaradas com var, let ou const, podendo ser modificadas.</p>
3534
<p class="full-description hidden">São espaços de armazenamento de dados que podem ser modificados durante a execução do programa. São declaradas com as palavras-chave var, let ou const e podem conter diferentes tipos de dados.</p>
36-
<button class="btn-more">Ver Mais</button>
35+
3736
</div>
38-
37+
3938
<div class="card">
40-
<img src="./src/img/operadores_3.png" alt="Operadores - Imagem 3">
39+
<img src="./src/img/operadores_3.png" alt="Operadores - Imagem 3" class="card-image">
4140
<h3>Operadores</h3>
4241
<p class="short-description">Realizam operações em operandos, incluindo aritméticos, de comparação e lógicos.</p>
4342
<p class="full-description hidden">São símbolos ou palavras reservadas que realizam operações em operandos. Existem operadores aritméticos (como +, -, *, /), de comparação (como ==, !=, <, >) e lógicos (como &&, ||).</p>
44-
<button class="btn-more">Ver Mais</button>
43+
4544
</div>
46-
45+
4746
<div class="card">
48-
<img src="./src/img/expressões_4 (1).png" alt="Expressões - Imagem 4">
47+
<img src="./src/img/expressões_4 (1).png" alt="Expressões - Imagem 4" class="card-image">
4948
<h3>Expressões</h3>
5049
<p class="short-description">Combinações de valores, variáveis e operadores avaliáveis para produzir um valor.</p>
5150
<p class="full-description hidden">São combinações de valores, variáveis e operadores que são avaliadas para produzir um valor. Podem ser simples (como 2 + 2) ou complexas (como (a * b) / (c - d)).</p>
52-
<button class="btn-more">Ver Mais</button>
51+
5352
</div>
54-
53+
5554
<div class="card">
56-
<img src="./src/img/palavraschave_5.png" alt="Palavras-chave - Imagem 5">
55+
<img src="./src/img/palavraschave_5.png" alt="Palavras-chave - Imagem 5" class="card-image">
5756
<h3>Palavras-chave</h3>
5857
<p class="short-description">Definem a estrutura e lógica do código, como if, else, for, function, entre outras.</p>
5958
<p class="full-description hidden">São palavras reservadas que têm significados especiais na linguagem JavaScript. Elas definem a estrutura e a lógica do código, como if, else, for, function, entre outras.</p>
60-
<button class="btn-more">Ver Mais</button>
59+
6160
</div>
62-
61+
6362
<div class="card">
64-
<img src="./src/img/comentários_6.png" alt="Comentários - Imagem 6">
63+
<img src="./src/img/comentários_6.png" alt="Comentários - Imagem 6" class="card-image">
6564
<h3>Comentários</h3>
6665
<p class="short-description">Trechos ignorados pelo interpretador; úteis para documentar e anotar o código.</p>
6766
<p class="full-description hidden">São trechos de texto que são ignorados pelo interpretador JavaScript. São úteis para documentar o código, fazer anotações e explicar partes específicas do programa.</p>
68-
<button class="btn-more">Ver Mais</button>
67+
6968
</div>
70-
69+
7170
<div class="card">
72-
<img src="./src/img/tipos_de_dados_7.png" alt="Tipos de dados - Imagem 7">
71+
<img src="./src/img/tipos_de_dados_7.png" alt="Tipos de dados - Imagem 7" class="card-image">
7372
<h3>Tipos de dados</h3>
7473
<p class="short-description">Números, strings, booleanos, arrays, objetos, funções, null e undefined.</p>
75-
<p class="full-description hidden"> São as diferentes categorias de valores que podem ser manipulados em JavaScript. Incluem números, strings, booleanos, arrays, objetos, funções, null e undefined.</p>
76-
<button class="btn-more">Ver Mais</button>
74+
<p class="full-description hidden">São as diferentes categorias de valores que podem ser manipulados em JavaScript. Incluem números, strings, booleanos, arrays, objetos, funções, null e undefined.</p>
75+
7776
</div>
78-
77+
7978
<div class="card">
80-
<img src="./src/img/funções_8.png" alt="Funções - Imagem 8">
79+
<img src="./src/img/funções_8.png" alt="Funções - Imagem 8" class="card-image">
8180
<h3>Funções</h3>
82-
<p class="short-description">Blocos de código reutilizáveis que executam tarefas específicas, definidos com functio</p>
81+
<p class="short-description">Blocos de código reutilizáveis que executam tarefas específicas.</p>
8382
<p class="full-description hidden">São blocos de código reutilizáveis que executam tarefas específicas. São definidas com a palavra-chave function e podem receber parâmetros e retornar valores.</p>
84-
<button class="btn-more">Ver Mais</button>
83+
8584
</div>
86-
87-
<div class="card">
88-
<div class="overlay" id="overlay">
8985

90-
<img src="./src/img/identificadores_8.png" alt="Identificadores - Imagem 9">
86+
<div class="card">
87+
<img src="./src/img/identificadores_8.png" alt="Identificadores - Imagem 9" class="card-image">
9188
<h3>Identificadores</h3>
9289
<p class="short-description">Nomes para variáveis, funções, etc., começam com letra, sublinhado ou cifrão.</p>
9390
<p class="full-description hidden">São nomes dados a variáveis, funções, objetos, etc. Eles devem começar com uma letra, sublinhado (_) ou cifrão ($), seguido de letras, números, sublinhados ou cifrões. São utilizados para identificar e acessar diferentes elementos no código JavaScript.</p>
94-
<button class="btn-more">Ver Mais</button>
91+
9592
</div>
96-
97-
9893
</div>
9994
</main>
95+
10096
<div class="pagination" id="pagination">
10197
<a href="#" id="prev">Anterior</a>
10298
<div class="page-numbers">
@@ -108,8 +104,15 @@ <h3>Identificadores</h3>
108104
<a href="#" id="next">Próximo</a>
109105
</div>
110106

107+
<!-- Modal -->
108+
<div id="modal" class="modal">
109+
<button id="close" class="close-btn">&times;</button>
110+
<img id="modal-img" src="" alt="Modal Image">
111+
</div>
112+
113+
111114
<script src="./src/script.js"></script>
112-
<script src="src/expand.js"></script>
115+
<script src="./src/expand.js"></script>
113116
</body>
114117

115118
</html>

‎readme.md‎

Lines changed: 76 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,94 @@
1-
# Paginação usando HTML, CSS e JavaScript
1+
# 📚 Paginação e Modal com HTML, CSS e JavaScript
22

3-
Este projeto consiste em uma implementação simples de paginação desenvolvida com HTML, CSS e JavaScript. Ele demonstra como criar uma interface de usuário para exibir uma lista de itens divididos em várias páginas, permitindo ao usuário navegar facilmente entre elas.
43

5-
![11](https://github.com/thmedu/Pagination-using-HTML-CSS-and-JavaScript/assets/141462806/e58c68ae-620a-4d61-9135-1498a17b95fb)
4+
![1726530422194](image/readme/1726530422194.png)
65

6+
O projeto de **paginação** e **modal** interativo, desenvolvido com **HTML**, **CSS** e **JavaScript**. Este projeto demonstra como implementar uma interface de usuário elegante e funcional para visualizar e navegar por uma lista de itens com capacidade de expansão de texto e visualização de imagens em modal.
77

8-
## 🌟 Funcionalidades
8+
## 🚀 Recursos
99

10-
- **Exibição de Cartões:** Cada cartão exibe informações sobre sintaxe JavaScript, cobrindo tópicos como literais, variáveis, operadores, expressões, palavras-chave, comentários, tipos de dados, funções e identificadores.
10+
- **Paginação Dinâmica**: Navegue facilmente entre diferentes páginas de itens com botões de navegação.
11+
- **Modal Interativo**: Amplie e visualize imagens em um modal com efeito de zoom.
12+
- **Expansão de Texto**: Expanda ou contraia descrições adicionais dos itens com um clique.
13+
- **Design Responsivo**: Layout otimizado para diferentes tamanhos de tela.
1114

12-
- **Paginação Interativa:** Os cartões são exibidos em páginas, permitindo ao usuário navegar utilizando botões "Anterior" e "Próximo", além de links numéricos para acessar páginas específicas.
15+
## 🎨 Layout e Estilo
1316

14-
- **Descrições Completas:** Ao clicar no botão "Ver Mais" em cada cartão, é exibida a descrição completa do tópico, proporcionando mais informações sobre o conceito abordado.
17+
- **Design Limpo e Moderno**: Usamos uma paleta de cores sóbria e moderna com uma fonte legível para uma ótima experiência de usuário.
18+
- **Animações Elegantes**: Transições suaves para interações como clique, hover e visualização de modais.
1519

16-
- **Expansão de Imagens:** Ao clicar em uma imagem dentro de um cartão, ela é expandida para uma visualização maior, facilitando a observação de detalhes.
20+
## 📦 Instalação
1721

18-
## 🚀 Como Usar
22+
Para executar este projeto localmente, siga estas etapas:
1923

20-
1. **Clone ou Baixe o Repositório:** Clone o repositório para o seu computador local usando o seguinte comando no terminal:
24+
1. **Clone o Repositório**
2125

2226
```bash
23-
git clone https://github.com/seu-usuario/pagination-using-html-css-js.git
27+
git clone https://github.com/usuario/repositorio.git
2428
```
29+
2. **Acesse o Diretório do Projeto**
2530

26-
2. **Abra o Arquivo `index.html`:** Abra o arquivo `index.html` em um navegador da web para iniciar o aplicativo de paginação.
31+
```bash
32+
cd repositorio
33+
```
34+
3. **Abra o Arquivo HTML no Navegador**
35+
36+
Simplesmente abra o arquivo `index.html` em seu navegador preferido.
37+
38+
## 🛠️ Estrutura do Projeto
39+
40+
- **index.html**: O arquivo principal que contém a estrutura HTML.
41+
- **styles.css**: Arquivo de estilos para o design e layout.
42+
- **script.js**: Contém a lógica para a navegação, modais e interações.
43+
- **expand.js**: Funções adicionais para expansão de texto e outros comportamentos.
44+
45+
## 🖼️ Como Funciona
46+
47+
1. **Paginação**: Os itens são divididos em páginas. Você pode navegar entre páginas usando os botões "Anterior" e "Próximo".
48+
2. **Modal**: Clique em uma imagem para abrir o modal com um efeito de zoom. Clique no botão de fechar (X) para fechar o modal.
49+
3. **Expansão de Texto**: Clique no botão "Ver Mais" para expandir ou contrair a descrição dos itens.
50+
51+
## 💻 Tecnologia
52+
53+
- **HTML5**: Estrutura e conteúdo da página.
54+
- **CSS3**: Estilos e animações.
55+
- **JavaScript**: Interatividade e lógica dinâmica.
56+
57+
## 📱 Responsividade
58+
59+
O projeto é responsivo e otimizado para dispositivos móveis. Os cartões e botões se ajustam automaticamente a diferentes tamanhos de tela.
60+
61+
## 🤝 Contribuição
62+
63+
Se você deseja contribuir para este projeto, siga as etapas abaixo:
64+
65+
1. **Faça um Fork do Repositório**
66+
2. **Crie uma Branch para suas Alterações**
67+
68+
```bash
69+
git checkout -b minha-nova-feature
70+
```
71+
3. **Faça as Alterações Necessárias e Commit**
72+
73+
```bash
74+
git commit -am 'Adicionei uma nova feature'
75+
```
76+
4. **Envie para o Repositório Remoto**
77+
78+
```bash
79+
git push origin minha-nova-feature
80+
```
81+
5. **Abra um Pull Request**
82+
83+
Descreva suas alterações e envie para revisão.
84+
85+
## 📜 Licença
2786

28-
3. **Navegue pelos Cartões:** Utilize os botões "Anterior" e "Próximo" ou clique nos links numéricos para navegar pelas diferentes páginas de cartões.
87+
Este projeto está licenciado sob a [MIT License](LICENSE). Veja o arquivo LICENSE para mais detalhes.
2988

30-
4. **Veja Descrições Completas:** Clique no botão "Ver Mais" em qualquer cartão para expandir e ver a descrição completa do respectivo tópico.
89+
## 📧 Contato
3190

32-
5. **Expandir Imagens:** Clique em uma imagem dentro de um cartão para visualizá-la em tamanho maior, facilitando a visualização de detalhes.
91+
Para perguntas ou comentários, sinta-se à vontade para entrar em contato:
3392

34-
## Autor ✍️
35-
36-
Este projeto foi desenvolvido por [Thomas Nascimento].
37-
38-
93+
- **Email**: developer.thomas@outlook.com.br
94+
- **GitHub**: devthm

‎src/expand.js‎

Lines changed: 80 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,83 @@
1-
const cards = document.querySelectorAll('.card');
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const cards = document.querySelectorAll('.card');
3+
const btnMore = document.querySelectorAll('.btn-more');
4+
const modal = document.getElementById('modal');
5+
const modalImg = document.getElementById('modal-img');
6+
const modalClose = document.getElementById('close');
7+
const pageLinks = document.querySelectorAll('.page-link');
8+
const prevButton = document.getElementById('prev');
9+
const nextButton = document.getElementById('next');
10+
const itemsPerPage = 3;
11+
let currentPage = 1;
212

3-
cards.forEach((card) => {
4-
const img = card.querySelector('img');
5-
img.addEventListener('click', () => {
6-
expandImage(img);
13+
// Expande ou contrai o texto do card
14+
btnMore.forEach(button => {
15+
button.addEventListener('click', () => {
16+
const card = button.closest('.card');
17+
card.classList.toggle('expanded');
18+
});
719
});
8-
});
920

10-
function expandImage(img) {
11-
img.classList.toggle('expanded'); // Adiciona ou remove a classe de expansão
12-
13-
// Centraliza a imagem quando expandida
14-
if (img.classList.contains('expanded')) {
15-
// Adiciona uma classe ao body para permitir o overflow hidden
16-
document.body.classList.add('modal-open');
17-
} else {
18-
// Remove a classe do body quando a imagem é recolhida
19-
document.body.classList.remove('modal-open');
20-
}
21-
}
21+
// Abre o modal com a imagem
22+
document.querySelectorAll('.card-image').forEach(image => {
23+
image.addEventListener('click', () => {
24+
modalImg.src = image.src;
25+
modal.classList.add('show');
26+
});
27+
});
28+
29+
// Fecha o modal
30+
modalClose.addEventListener('click', () => {
31+
modal.classList.remove('show');
32+
});
33+
34+
// Função para exibir a página selecionada
35+
const showPage = (page) => {
36+
cards.forEach((card, index) => {
37+
const start = (page - 1) * itemsPerPage;
38+
const end = page * itemsPerPage;
39+
card.style.display = (index >= start && index < end) ? 'block' : 'none';
40+
});
41+
updatePagination();
42+
};
43+
44+
// Função para atualizar a navegação de paginação
45+
const updatePagination = () => {
46+
pageLinks.forEach(link => {
47+
link.classList.remove('active');
48+
if (parseInt(link.dataset.page) === currentPage) {
49+
link.classList.add('active');
50+
}
51+
});
52+
prevButton.style.display = currentPage === 1 ? 'none' : 'inline';
53+
nextButton.style.display = currentPage === pageLinks.length ? 'none' : 'inline';
54+
};
55+
56+
// Eventos de navegação
57+
pageLinks.forEach(link => {
58+
link.addEventListener('click', (e) => {
59+
e.preventDefault();
60+
currentPage = parseInt(link.dataset.page);
61+
showPage(currentPage);
62+
});
63+
});
64+
65+
prevButton.addEventListener('click', (e) => {
66+
e.preventDefault();
67+
if (currentPage > 1) {
68+
currentPage--;
69+
showPage(currentPage);
70+
}
71+
});
72+
73+
nextButton.addEventListener('click', (e) => {
74+
e.preventDefault();
75+
if (currentPage < pageLinks.length) {
76+
currentPage++;
77+
showPage(currentPage);
78+
}
79+
});
80+
81+
// Mostrar a primeira página ao carregar
82+
showPage(currentPage);
83+
});

0 commit comments

Comments
 (0)