t3rndesenvolvimento · devthomaseduardo · Sep 16, 2024 · Sep 16, 2024 · Sep 16, 2024
diff --git a/image/readme/1726530422194.png b/image/readme/1726530422194.png
diff --git a/index.html b/index.html
@@ -1,102 +1,98 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt-BR">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Paginação usando HTML CSS e JavaScript</title>
+    <title>Fundamentos do JavaScript</title>
     <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=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">
     <link rel="stylesheet" href="./src/styles.css">
     <link rel="icon" type="image/png" href="./src/img/icons8-javascript-96.png">
-
 </head>
 
 <body>
-    <header>
-        <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>
+  <header>
+        <h1>Sintaxe JavaScript</h1>
     </header>
 
     <main class="data-container">
         <div class="card-container">
             <div class="card">
-                <img src="./src/img/Literais.png" alt="Literais - Imagem 1">
+                <img src="./src/img/Literais.png" alt="Literais - Imagem 1" class="card-image">
                 <h3>Literais</h3>
                 <p class="short-description">Valores fixos para representar dados primários, como números, strings, booleanos, arrays, objetos e expressões regulares.</p>
                 <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>
-                <button class="btn-more">Ver Mais</button>
+
             </div>
-            
+
             <div class="card">
-                <img src="./src/img/variáveis_2.png" alt="Variáveis - Imagem 2">
+                <img src="./src/img/variáveis_2.png" alt="Variáveis - Imagem 2" class="card-image">
                 <h3>Variáveis</h3>
                 <p class="short-description">Usadas para armazenar dados; declaradas com var, let ou const, podendo ser modificadas.</p>
                 <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>
-                <button class="btn-more">Ver Mais</button>
+
             </div>
-            
+
             <div class="card">
-                <img src="./src/img/operadores_3.png" alt="Operadores - Imagem 3">
+                <img src="./src/img/operadores_3.png" alt="Operadores - Imagem 3" class="card-image">
                 <h3>Operadores</h3>
                 <p class="short-description">Realizam operações em operandos, incluindo aritméticos, de comparação e lógicos.</p>
                 <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>
-                <button class="btn-more">Ver Mais</button>
+
             </div>
-            
+
             <div class="card">
-                <img src="./src/img/expressões_4 (1).png" alt="Expressões - Imagem 4">
+                <img src="./src/img/expressões_4 (1).png" alt="Expressões - Imagem 4" class="card-image">
                 <h3>Expressões</h3>
                 <p class="short-description">Combinações de valores, variáveis e operadores avaliáveis para produzir um valor.</p>
                 <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>
-                <button class="btn-more">Ver Mais</button>
+
             </div>
-            
+
             <div class="card">
-                <img src="./src/img/palavraschave_5.png" alt="Palavras-chave - Imagem 5">
+                <img src="./src/img/palavraschave_5.png" alt="Palavras-chave - Imagem 5" class="card-image">
                 <h3>Palavras-chave</h3>
                 <p class="short-description">Definem a estrutura e lógica do código, como if, else, for, function, entre outras.</p>
                 <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>
-                <button class="btn-more">Ver Mais</button>
+
             </div>
-            
+
             <div class="card">
-                <img src="./src/img/comentários_6.png" alt="Comentários - Imagem 6">
+                <img src="./src/img/comentários_6.png" alt="Comentários - Imagem 6" class="card-image">
                 <h3>Comentários</h3>
                 <p class="short-description">Trechos ignorados pelo interpretador; úteis para documentar e anotar o código.</p>
                 <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>
-                <button class="btn-more">Ver Mais</button>
+
             </div>
-            
+
             <div class="card">
-                <img src="./src/img/tipos_de_dados_7.png" alt="Tipos de dados - Imagem 7">
+                <img src="./src/img/tipos_de_dados_7.png" alt="Tipos de dados - Imagem 7" class="card-image">
                 <h3>Tipos de dados</h3>
                 <p class="short-description">Números, strings, booleanos, arrays, objetos, funções, null e undefined.</p>
-                <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>
-                <button class="btn-more">Ver Mais</button>
+                <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>
+
             </div>
-            
+
             <div class="card">
-                <img src="./src/img/funções_8.png" alt="Funções - Imagem 8">
+                <img src="./src/img/funções_8.png" alt="Funções - Imagem 8" class="card-image">
                 <h3>Funções</h3>
-                <p class="short-description">Blocos de código reutilizáveis que executam tarefas específicas, definidos com functio</p>
+                <p class="short-description">Blocos de código reutilizáveis que executam tarefas específicas.</p>
                 <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>
-                <button class="btn-more">Ver Mais</button>
+
             </div>
-
-            <div class="card">
-                <div class="overlay" id="overlay">
 
-                <img src="./src/img/identificadores_8.png" alt="Identificadores - Imagem 9">
+            <div class="card">
+                <img src="./src/img/identificadores_8.png" alt="Identificadores - Imagem 9" class="card-image">
                 <h3>Identificadores</h3>
                 <p class="short-description">Nomes para variáveis, funções, etc., começam com letra, sublinhado ou cifrão.</p>
                 <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>
-                <button class="btn-more">Ver Mais</button>
+
             </div>
-
-
         </div>
     </main>
+
     <div class="pagination" id="pagination">
         <a href="#" id="prev">Anterior</a>
         <div class="page-numbers">
@@ -108,8 +104,15 @@ <h3>Identificadores</h3>
         <a href="#" id="next">Próximo</a>
     </div>
 
+   <!-- Modal -->
+<div id="modal" class="modal">
+    <button id="close" class="close-btn">&times;</button>
+    <img id="modal-img" src="" alt="Modal Image">
+</div>
+
+
     <script src="./src/script.js"></script>
-    <script src="src/expand.js"></script>
+    <script src="./src/expand.js"></script>
 </body>
 
 </html>
diff --git a/readme.md b/readme.md
@@ -1,38 +1,94 @@
-# Paginação usando HTML, CSS e JavaScript
+# 📚 Paginação e Modal com HTML, CSS e JavaScript
 
-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. 
 
-![11](https://github.com/thmedu/Pagination-using-HTML-CSS-and-JavaScript/assets/141462806/e58c68ae-620a-4d61-9135-1498a17b95fb)
+![1726530422194](image/readme/1726530422194.png)
 
+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.
 
-## 🌟 Funcionalidades
+## 🚀 Recursos
 
-- **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.
+- **Paginação Dinâmica**: Navegue facilmente entre diferentes páginas de itens com botões de navegação.
+- **Modal Interativo**: Amplie e visualize imagens em um modal com efeito de zoom.
+- **Expansão de Texto**: Expanda ou contraia descrições adicionais dos itens com um clique.
+- **Design Responsivo**: Layout otimizado para diferentes tamanhos de tela.
 
-- **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.
+## 🎨 Layout e Estilo
 
-- **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.
+- **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.
+- **Animações Elegantes**: Transições suaves para interações como clique, hover e visualização de modais.
 
-- **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.
+## 📦 Instalação
 
-## 🚀 Como Usar
+Para executar este projeto localmente, siga estas etapas:
 
-1. **Clone ou Baixe o Repositório:** Clone o repositório para o seu computador local usando o seguinte comando no terminal:
+1. **Clone o Repositório**
 
    ```bash
-   git clone https://github.com/seu-usuario/pagination-using-html-css-js.git
+   git clone https://github.com/usuario/repositorio.git
    ```
+2. **Acesse o Diretório do Projeto**
 
-2. **Abra o Arquivo `index.html`:** Abra o arquivo `index.html` em um navegador da web para iniciar o aplicativo de paginação.
+   ```bash
+   cd repositorio
+   ```
+3. **Abra o Arquivo HTML no Navegador**
+
+   Simplesmente abra o arquivo `index.html` em seu navegador preferido.
+
+## 🛠️ Estrutura do Projeto
+
+- **index.html**: O arquivo principal que contém a estrutura HTML.
+- **styles.css**: Arquivo de estilos para o design e layout.
+- **script.js**: Contém a lógica para a navegação, modais e interações.
+- **expand.js**: Funções adicionais para expansão de texto e outros comportamentos.
+
+## 🖼️ Como Funciona
+
+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".
+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.
+3. **Expansão de Texto**: Clique no botão "Ver Mais" para expandir ou contrair a descrição dos itens.
+
+## 💻 Tecnologia
+
+- **HTML5**: Estrutura e conteúdo da página.
+- **CSS3**: Estilos e animações.
+- **JavaScript**: Interatividade e lógica dinâmica.
+
+## 📱 Responsividade
+
+O projeto é responsivo e otimizado para dispositivos móveis. Os cartões e botões se ajustam automaticamente a diferentes tamanhos de tela.
+
+## 🤝 Contribuição
+
+Se você deseja contribuir para este projeto, siga as etapas abaixo:
+
+1. **Faça um Fork do Repositório**
+2. **Crie uma Branch para suas Alterações**
+
+   ```bash
+   git checkout -b minha-nova-feature
+   ```
+3. **Faça as Alterações Necessárias e Commit**
+
+   ```bash
+   git commit -am 'Adicionei uma nova feature'
+   ```
+4. **Envie para o Repositório Remoto**
+
+   ```bash
+   git push origin minha-nova-feature
+   ```
+5. **Abra um Pull Request**
+
+   Descreva suas alterações e envie para revisão.
+
+## 📜 Licença
 
-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.
+Este projeto está licenciado sob a [MIT License](LICENSE). Veja o arquivo LICENSE para mais detalhes.
 
-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.
+## 📧 Contato
 
-5. **Expandir Imagens:** Clique em uma imagem dentro de um cartão para visualizá-la em tamanho maior, facilitando a visualização de detalhes.
+Para perguntas ou comentários, sinta-se à vontade para entrar em contato:
 
-## Autor ✍️
-
-Este projeto foi desenvolvido por [Thomas Nascimento].
-
-
+- **Email**: developer.thomas@outlook.com.br
+- **GitHub**: devthm
diff --git a/src/expand.js b/src/expand.js
@@ -1,21 +1,83 @@
-const cards = document.querySelectorAll('.card');
+document.addEventListener('DOMContentLoaded', () => {
+    const cards = document.querySelectorAll('.card');
+    const btnMore = document.querySelectorAll('.btn-more');
+    const modal = document.getElementById('modal');
+    const modalImg = document.getElementById('modal-img');
+    const modalClose = document.getElementById('close');
+    const pageLinks = document.querySelectorAll('.page-link');
+    const prevButton = document.getElementById('prev');
+    const nextButton = document.getElementById('next');
+    const itemsPerPage = 3;
+    let currentPage = 1;
 
-cards.forEach((card) => {
-    const img = card.querySelector('img');
-    img.addEventListener('click', () => {
-        expandImage(img);
+    // Expande ou contrai o texto do card
+    btnMore.forEach(button => {
+        button.addEventListener('click', () => {
+            const card = button.closest('.card');
+            card.classList.toggle('expanded');
+        });
     });
-});
 
-function expandImage(img) {
-    img.classList.toggle('expanded'); // Adiciona ou remove a classe de expansão
-
-    // Centraliza a imagem quando expandida
-    if (img.classList.contains('expanded')) {
-        // Adiciona uma classe ao body para permitir o overflow hidden
-        document.body.classList.add('modal-open');
-    } else {
-        // Remove a classe do body quando a imagem é recolhida
-        document.body.classList.remove('modal-open');
-    }
-}
+    // Abre o modal com a imagem
+    document.querySelectorAll('.card-image').forEach(image => {
+        image.addEventListener('click', () => {
+            modalImg.src = image.src;
+            modal.classList.add('show');
+        });
+    });
+
+    // Fecha o modal
+    modalClose.addEventListener('click', () => {
+        modal.classList.remove('show');
+    });
+
+    // Função para exibir a página selecionada
+    const showPage = (page) => {
+        cards.forEach((card, index) => {
+            const start = (page - 1) * itemsPerPage;
+            const end = page * itemsPerPage;
+            card.style.display = (index >= start && index < end) ? 'block' : 'none';
+        });
+        updatePagination();
+    };
+
+    // Função para atualizar a navegação de paginação
+    const updatePagination = () => {
+        pageLinks.forEach(link => {
+            link.classList.remove('active');
+            if (parseInt(link.dataset.page) === currentPage) {
+                link.classList.add('active');
+            }
+        });
+        prevButton.style.display = currentPage === 1 ? 'none' : 'inline';
+        nextButton.style.display = currentPage === pageLinks.length ? 'none' : 'inline';
+    };
+
+    // Eventos de navegação
+    pageLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            currentPage = parseInt(link.dataset.page);
+            showPage(currentPage);
+        });
+    });
+
+    prevButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (currentPage > 1) {
+            currentPage--;
+            showPage(currentPage);
+        }
+    });
+
+    nextButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (currentPage < pageLinks.length) {
+            currentPage++;
+            showPage(currentPage);
+        }
+    });
+
+    // Mostrar a primeira página ao carregar
+    showPage(currentPage);
+});