├── README.md
├── index.html
├── biblioteca.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 📚 Biblioteca Virtual
3 |
4 |
5 |
6 | ## :rocket: Sobre o projeto
7 |
8 | Praticando alguns conceitos de Javascript que estudei eu desenvolvi esse projetinho pessoal que funciona como uma biblioteca virtual.
9 | Nele é possível cadastrar os seguintes dados sobre os livros:
10 | - Nome do livro;
11 | - Autor;
12 | - Editora;
13 | - Quantidade de páginas;
14 | - Link da imagem da capa do livro;
15 | - Sinopse.
16 |
17 | Após o usuário clicar em "Cadastrar" o livro vai para a categoria de "Todos os Livros" onde são exibidos cards com cada livro já cadastrado. Nessa categoria é possível visualizar as informações cadastradas sobre cada livro, clicando em "Sinopse" é exibido na tela um modal contendo a sinopse referente àquele livro. Para excluir um dos livros cadastrados é só clicar em "Remover" que o site apresenta uma caixa de mensagem informando que o livro foi removido com sucesso.
18 |
19 | Na categoria de "Busca" o usuário digita o nome do livro que deseja buscar, caso seja encontrado um livro com esse nome ele é exibido em um card na categoria de "Busca", se não existir nenhum livro com o nome buscado é apresentado um modal na tela informando que não foi encontrado.
20 |
21 |
22 |
23 | ## :computer: Tecnologias usadas:
24 |
25 | - `Javascript`
26 | - `HTML`
27 | - `CSS`
28 |
29 |
30 | ## :bulb: Telas
31 |
32 | 
33 |
34 | 
35 |
36 | 
37 |
38 | 
39 |
40 | 
41 |
42 | 
43 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Biblioteca
13 |
14 |
15 |
16 |
17 |
18 |
34 |
35 |
42 |
43 |
44 |
Busque um livro
45 |
Digite o livro que deseja procurar:
46 |
47 |
Buscar
48 |
49 |
52 |
Todos os Livros
53 |
54 |
Nenhum livro cadastrado
55 |
56 |
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/biblioteca.js:
--------------------------------------------------------------------------------
1 | let allBooks = []
2 | const emptyBookList = document.querySelector("#emptyBookList")
3 | const fields = document.querySelectorAll("input")
4 | const modal = document.querySelector("#myModal")
5 | const modalTitle = document.querySelector("#modalTitle")
6 | const synopsis = document.querySelector("#synopsis")
7 | const txtSynopsis = document.querySelector("#txtSynopsis")
8 | const btnRegister = document.querySelector("#btnRegister")
9 | const btnSearch = document.querySelector("#btnSearch")
10 |
11 | function findBook() {
12 | return allBooks.findIndex((elem) => elem.bookName === (event.target.parentNode.className))
13 | }
14 |
15 | function showSynopsis(event) {
16 | if (event.target.id === "btnSinopsys") {
17 | modalTitle.innerHTML = `Sinopse do livro "${allBooks[findBook()].bookName}"`
18 | txtSynopsis.innerHTML = allBooks[findBook()].synopsis
19 | modal.style.display = "block"
20 | }
21 | }
22 |
23 | function showError(bookName) {
24 | const contentModel = document.querySelector("#contentModel")
25 | modalTitle.innerHTML = `Livro "${bookName}" não encontrado!`
26 | txtSynopsis.innerHTML = ""
27 | contentModel.style.width = "50%"
28 | modal.style.display = "block"
29 | }
30 |
31 | function closeModal(event) {
32 | modal.style.display = "none"
33 | }
34 |
35 | function closeModalWindow(event) {
36 | if (event.target === modal) {
37 | modal.style.display = "none";
38 | }
39 | }
40 |
41 | function clearFields() {
42 | fields.forEach(function (elem) {
43 | elem.value = ""
44 | })
45 | synopsis.value = ""
46 | }
47 |
48 | function createCard(bookCard, bookName, bookAuthor, bookPublisher, numberOfPages, bookCover) {
49 | bookCard.className = bookName
50 | bookCard.innerHTML = `
51 | ${bookName}
52 | Sinopse
57 | Remover
58 | `
59 | }
60 |
61 | function appendElements(divSelect, bookCard) {
62 | const btnCloseModal = document.querySelector("#btnCloseModal")
63 | divSelect.append(bookCard)
64 | divSelect.addEventListener("click", showSynopsis)
65 | btnCloseModal.addEventListener("click", closeModal)
66 | window.addEventListener("click", closeModalWindow)
67 | }
68 |
69 | function removeCard(parentDiv) {
70 | return function remove(event) {
71 | if (event.target.id === "btnRemove") {
72 | parentDiv.removeChild(event.target.parentNode)
73 | if (allBooks.splice(findBook(), 1)) {
74 | alert(`Livro "${event.target.parentNode.className}" removido com sucesso!`)
75 | }
76 | }
77 | }
78 | }
79 |
80 | function registerBook() {
81 | const listOfAllBooks = document.querySelector("#listOfAllBooks")
82 | const bookName = document.querySelector("#bookName").value
83 | const bookAuthor = document.querySelector("#bookAuthor").value
84 | const bookPublisher = document.querySelector("#bookPublisher").value
85 | const numberOfPages = Number(document.querySelector("#numberOfPages").value)
86 | const bookCover = document.querySelector("#bookCover").value
87 |
88 | event.preventDefault()
89 |
90 | allBooks.push(
91 | {
92 | bookName,
93 | bookAuthor,
94 | bookPublisher,
95 | numberOfPages,
96 | bookCover,
97 | synopsis: synopsis.value
98 | })
99 |
100 | emptyBookList.remove()
101 | const bookCard = document.createElement("div")
102 |
103 | createCard(bookCard, bookName, bookAuthor, bookPublisher, numberOfPages, bookCover)
104 | appendElements(listOfAllBooks, bookCard)
105 |
106 | const remove = removeCard(listOfAllBooks)
107 | listOfAllBooks.addEventListener("click", remove)
108 |
109 | clearFields()
110 | }
111 |
112 | function searchBook() {
113 | const bookNameSearch = document.querySelector("#bookNameSearch").value
114 | const listOfBooksSearch = document.querySelector("#listOfBooksSearch")
115 | const foundBooks = document.querySelector("#foundBooks")
116 | const bookCard = document.createElement("div")
117 |
118 | foundBooks.innerHTML = ""
119 | listOfBooksSearch.append(foundBooks)
120 |
121 | const findBook = allBooks.filter(elem => elem.bookName === bookNameSearch)
122 |
123 | if (findBook.length !== 0) {
124 | findBook.forEach(elem => {
125 | createCard(bookCard, elem.bookName, elem.bookAuthor, elem.bookPublisher, elem.numberOfPages, elem.bookCover)
126 | appendElements(foundBooks, bookCard)
127 | })
128 | } else {
129 | showError(bookNameSearch)
130 | }
131 |
132 | const remove = removeCard(foundBooks)
133 | listOfBooksSearch.addEventListener("click", remove)
134 |
135 | clearFields()
136 | }
137 |
138 | btnRegister.addEventListener("click", registerBook)
139 | btnSearch.addEventListener("click", searchBook)
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: rgb(0, 114, 114);
3 | font-family: 'Roboto', sans-serif;
4 | }
5 |
6 | header {
7 | font-size: 60px;
8 | font-weight: bold;
9 | text-align: center;
10 | margin: 20px;
11 | color: white;
12 | font-family: 'Lora', serif;
13 | }
14 |
15 | section {
16 | background-color: rgb(226, 226, 226);
17 | border-radius: 8px;
18 | width: 790px;
19 | max-width: 1000px;
20 | margin: auto;
21 | padding: 10px;
22 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.493);
23 | }
24 |
25 | h3 {
26 | text-align: center;
27 | margin-bottom: 10px;
28 | font-size: 25px;
29 | }
30 |
31 | h3#titleAllBooks {
32 | margin-bottom: 30px;
33 | }
34 |
35 | form#register {
36 | display: flex;
37 | flex-direction: column;
38 | align-items: center;
39 | margin-bottom: 40px;
40 | }
41 |
42 | form#register input+label {
43 | margin-top: 10px;
44 | }
45 |
46 | label {
47 | font-size: 16px;
48 | }
49 |
50 | input {
51 | margin-top: 2px;
52 | border-radius: 4px;
53 | border: 2px solid transparent;
54 | padding: 4px;
55 | font-size: 16px;
56 | background-color: rgb(255, 255, 255);
57 | width: 300px;
58 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.493);
59 | outline: none;
60 | }
61 |
62 | input[type=number]::-webkit-inner-spin-button {
63 | -webkit-appearance: none;
64 | }
65 |
66 | input[type=number] {
67 | -moz-appearance: textfield;
68 | appearance: textfield;
69 | }
70 |
71 | textarea {
72 | margin-top: 2px;
73 | font-size: 15px;
74 | border-radius: 4px;
75 | border: 2px solid transparent;
76 | background-color: rgb(255, 255, 255);
77 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.493);
78 | resize: none;
79 | outline: none;
80 | }
81 |
82 | input:focus, textarea:focus {
83 | border: 2px solid rgb(0, 114, 114);
84 | }
85 |
86 | button {
87 | margin-top: 10px;
88 | border-radius: 4px;
89 | border: none;
90 | background-color: rgb(32, 126, 126);
91 | color: white;
92 | padding: 8px;
93 | font-weight: bold;
94 | font-size: 16px;
95 | outline: none;
96 | }
97 |
98 | button:hover {
99 | background-color: rgb(29, 153, 153);
100 | cursor: pointer;
101 | }
102 |
103 | div#listOfBooksSearch {
104 | margin-bottom: 40px;
105 | display: flex;
106 | flex-direction: column;
107 | align-items: center;
108 | }
109 |
110 | div#listOfAllBooks p#emptyBookList {
111 | display: block;
112 | text-align: center;
113 | grid-column: 1 / 5;
114 | }
115 |
116 | div#foundBooks, div#listOfAllBooks {
117 | display: grid;
118 | grid-template-columns: 1fr 1fr 1fr;
119 | grid-gap: 15px;
120 | margin: 10px;
121 | }
122 |
123 | div#foundBooks div, div#listOfAllBooks div {
124 | display: flex;
125 | flex-direction: column;
126 | background-color: rgb(255, 255, 255);
127 | font-size: 15px;
128 | padding: 10px;
129 | text-align: center;
130 | border-radius: 8px;
131 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.493);
132 | color: rgb(85, 85, 85);
133 | font-family: 'Lora', serif;
134 | font-weight: 600;
135 | }
136 |
137 | p#bookTitle {
138 | font-weight: bold;
139 | font-size: 20px;
140 | margin: 0;
141 | }
142 |
143 | div#foundBooks img, div#listOfAllBooks img {
144 | height: 130px;
145 | width: 90px;
146 | padding: 10px;
147 | margin: 10px auto;
148 | }
149 |
150 | button#btnSearch::before{
151 | content: '\f002';
152 | color: white;
153 | position: relative;
154 | font-family: FontAwesome;
155 | font-size: 15px;
156 | right: 3px;
157 | }
158 |
159 | button#btnSinopsys {
160 | background-color: rgb(2, 87, 136);
161 | }
162 |
163 | button#btnSinopsys:hover {
164 | background-color: rgb(0, 118, 187);
165 | }
166 |
167 | button#btnSinopsys::before {
168 | content: '\f02d';
169 | color: white;
170 | position: relative;
171 | font-family: FontAwesome;
172 | font-size: 16px;
173 | right: 5px;
174 | }
175 |
176 | button#btnRemove {
177 | background-color: rgb(160, 2, 2);
178 | }
179 |
180 | button#btnRemove:hover {
181 | background-color: rgb(199, 1, 1);
182 | }
183 |
184 | button#btnRemove::before {
185 | content: '\f1f8';
186 | color: white;
187 | position: relative;
188 | font-family: FontAwesome;
189 | font-size: 16px;
190 | right: 5px;
191 | }
192 |
193 | .modal {
194 | display: none;
195 | position: fixed;
196 | z-index: 1;
197 | left: 0;
198 | top: 0;
199 | width: 100%;
200 | height: 100%;
201 | overflow: auto;
202 | background-color: rgb(0, 0, 0);
203 | background-color: rgba(0, 0, 0, 0.4);
204 | }
205 |
206 | .modal-content {
207 | background-color: #fefefe;
208 | margin: 15% auto;
209 | padding: 20px;
210 | border: 1px solid #888;
211 | width: 61%;
212 | border-radius: 8px;
213 | font-family: 'Lora', serif;
214 | }
215 |
216 | #btnCloseModal {
217 | color: #aaa;
218 | float: right;
219 | font-size: 28px;
220 | font-weight: bold;
221 | }
222 |
223 | #btnCloseModal:hover, #btnCloseModal:focus {
224 | color: black;
225 | text-decoration: none;
226 | cursor: pointer;
227 | }
--------------------------------------------------------------------------------