A digital library built as part of The Odin Project curriculum / Uma biblioteca digital construída como parte do currículo do The Odin Project.
A digital library built as part of The Odin Project curriculum.
This project allows users to create bookshelves with custom capacities, add books, view book information, track reading status, and remove books dynamically using JavaScript DOM manipulation.
- Create bookshelves with custom capacities
- Add books with:
- Title
- Author
- Number of pages
- Read / Not Read status
- Open books to view their information
- Delete books using right-click
- Hover over books to see reading status
- Unique ID generation for every book
- HTML5
- CSS3
- JavaScript (ES6)
- DOM Manipulation
- Event Listeners
- Object Constructors
- Arrays and Object Storage
- Dynamic Element Creation
- Form Validation
- UUID Generation with
crypto.randomUUID() - Custom Data Attached to DOM Elements
During this project I practiced:
- Structuring JavaScript into reusable functions
- Connecting data objects with DOM elements
- Managing dynamic UI updates
- Handling multiple event types
- Implementing CRUD-like functionality
- Working with object references inside the DOM
- Local Storage persistence
- Edit book information
- Automatic shelf selection when one becomes full
- Custom context menu instead of browser confirmation dialogs
- Search and filter books
- Book cover customization
- Responsive mobile layout
Rayssa Roberta
in the following link you can see my creation of the layout in figma, including future parts that might be add
https://www.figma.com/design/kfQfAnbDQ7rrUrEC9YEWA7/Library?t=c4XtVPgaikrmIuhY-1
I'd love to hear your ideas for this project.
Whether it's a creative new feature, a UI improvement, a better implementation, or even a small suggestion, all feedback is appreciated.
Feel free to:
- Fork the project and open a Pull Request
- Contact me through LinkedIn
- Add commits or commentaries in english
Every contribution helps make the project better.
Uma biblioteca digital construída como parte do currículo do The Odin Project.
Este projeto permite que os usuários criem estantes com capacidades personalizadas, adicionem livros, visualizem informações dos livros, acompanhem o status de leitura e removam livros dinamicamente usando manipulação de DOM em JavaScript.
- Criar estantes com capacidades personalizadas
- Adicionar livros com:
- Título
- Autor
- Número de páginas
- Status Lido / Não Lido
- Abrir livros para ver suas informações
- Excluir livros usando clique com o botão direito
- Passar o mouse sobre os livros para ver o status de leitura
- Geração de ID único para cada livro
- HTML5
- CSS3
- JavaScript (ES6)
- Manipulação de DOM
- Event Listeners
- Construtores de Objetos
- Arrays e Armazenamento de Objetos
- Criação Dinâmica de Elementos
- Validação de Formulários
- Geração de UUID com
crypto.randomUUID() - Dados Personalizados Anexados a Elementos do DOM
Durante este projeto eu pratiquei:
- Estruturar JavaScript em funções reutilizáveis
- Conectar objetos de dados a elementos do DOM
- Gerenciar atualizações dinâmicas de UI
- Lidar com múltiplos tipos de eventos
- Implementar funcionalidades do tipo CRUD
- Trabalhar com referências de objetos dentro do DOM
- Persistência com Local Storage
- Editar informações dos livros
- Seleção automática de estante quando uma delas ficar cheia
- Menu de contexto personalizado em vez dos diálogos de confirmação do navegador
- Busca e filtro de livros
- Personalização da capa dos livros
- Layout responsivo para mobile
Rayssa Roberta
no link a seguir você pode ver a criação do meu layout no figma, incluindo partes futuras que podem ser adicionadas
https://www.figma.com/design/kfQfAnbDQ7rrUrEC9YEWA7/Library?t=c4XtVPgaikrmIuhY-1
Eu adoraria ouvir suas ideias para este projeto.
Seja uma nova funcionalidade criativa, uma melhoria de UI, uma implementação melhor, ou até uma pequena sugestão, todo feedback é bem-vindo.
Fique à vontade para:
- Fazer um fork do projeto e abrir um Pull Request
- Entrar em contato comigo pelo LinkedIn
- Adicionar commits ou comentários em inglês
Toda contribuição ajuda a tornar o projeto melhor.