https://github.com/raizertechdev/galeriadinamica-projetostackx
Desenvolvi uma Galeria Dinâmica onde os usuários podem adicionar e remover imagens facilmente. Usando das técnicas avançadas de manipulação do DOM, aproveitando as principais tecnologias web: HTML, CSS e JavaScript, para oferecer uma experiência interativa e envolvente!!!
https://github.com/raizertechdev/galeriadinamica-projetostackx
css3 html5 javascript
Last synced: about 1 month ago
JSON representation
Desenvolvi uma Galeria Dinâmica onde os usuários podem adicionar e remover imagens facilmente. Usando das técnicas avançadas de manipulação do DOM, aproveitando as principais tecnologias web: HTML, CSS e JavaScript, para oferecer uma experiência interativa e envolvente!!!
- Host: GitHub
- URL: https://github.com/raizertechdev/galeriadinamica-projetostackx
- Owner: RaizerTechDev
- License: mit
- Created: 2024-04-11T21:41:05.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T00:51:42.000Z (over 1 year ago)
- Last Synced: 2025-01-11T08:12:12.491Z (over 1 year ago)
- Topics: css3, html5, javascript
- Language: CSS
- Homepage: https://raizertechdev-dynamicgallery.netlify.app/
- Size: 11 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# DynamicGallery-StackXProject!!!
[ ( Clique aqui e venha interagir com o Projeto `Dynamic-Gallery!!!`) ](https://raizertechdev-dynamicgallery.netlify.app/)
[Demonstração-Dynamic-Gallery!] 
---
### Conceitos Essenciais:
📌 Manipulação do DOM: Usar métodos como document.createElement , appendChild , removeChild , document.getElementById , para adicionar e remover imagens dinamicamente.
📌Local Storage: Armazenar informações sobre as imagens adicionadas/removidas para que o estado da galeria seja persistido entre
as sessões de navegação.
### Desenvolvimento Passo a Passo:
#### 1. Estrutura HTML:
- Criar uma estrutura básica com um input para carregar imagens, um botão para adicionar e um container onde as imagens serão exibidas.
#### 2. Adicionar Imagens:
- Capturar o evento de clique no botão de adicionar.
- Ler a imagem do input e criar um elemento img no DOM para exibi-la na
galeria.
- Armazenar informações da imagem adicionada no localStorage .
#### 3. Remover Imagens:
- Associar um evento de clique a cada imagem para remoção.
- Remover a imagem do DOM e atualizar o localStorage para refletir essa
mudança.
### 4. Persistência com Local Storage:
- Ao carregar a página, verificar o localStorage para qualquer imagem previamente adicionada e exibi-las automaticamente.
### Dicas:
📌 Utilize identificadores únicos para cada imagem para facilitar a remoção e gerenciamento no localStorage .
📌 Considere o limite de armazenamento do localStorage e implemente medidas para tratá-lo, como compressão de imagem ou limitação do número de imagens.
---
## Tecnologias
Tecnologias utilizadas no projeto:
- HTML5 (Linguagem de marcação utilizada para a construção das páginas web).
- CSS3 (Mecanismo para adicionar estilos a uma página web).
- JavaScript (Linguagem de programação de alto nível, que pode ser interpretada ou compilada just-in-time (JIT) para execução em um ambiente específico).
- Git (Sistema de controle de versões).
- Github (Plataforma para hospedagem de código-fonte).
- Visual Studio Code (Editor de código-fonte).
- Navegador web (Interação com documentos HTML).
---
Ferramenta utilizada no projeto:
- [VsCode](https://code.visualstudio.com/download) (v1.80.1)
---
## Licença
- Esse projeto está sob a licença MIT.
---
Autor
   RafaRaizer-Dev
   Whatsapp | LinkedIn | GitHub| Tableau| Portfólio