From 9c851f711aafc3feddfa6a73509a6eb8ac3a1475 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Wed, 8 Dec 2021 12:18:51 -0300 Subject: [PATCH] project done --- ..map | 1 + index.html | 46 ++++++++++++ script.js | 109 +++++++++++++++++++++++++++ style.css | 138 ++++++++++++++++++++++++++++++++++ style.css.map | 1 + style.scss | 199 ++++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 494 insertions(+) create mode 100644 ..map create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css create mode 100644 style.css.map create mode 100644 style.scss diff --git a/..map b/..map new file mode 100644 index 0000000..520cc20 --- /dev/null +++ b/..map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"./"} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..88a9774 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + + My Library + + + +
+

My Library

+
+ +
+ +
+ +
+ +
+

Add a new book

+
+ + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..758c43c --- /dev/null +++ b/script.js @@ -0,0 +1,109 @@ +const library = [] + +function Book(name, pages, author, readed, index) { + + this.name = name + this.pages = pages + this.author = author + this.readed = readed + + this.index = index + + this.deleteBook = function() { + + const book = library.find(o => o.index === index) + const indexInLibrary = library.indexOf(book) + + library.splice(indexInLibrary, 1) + applyLibraryToDOM() + } + + this.alternateReadedValue = function() { + + const book = library.find(o => o.index === index) + const indexInLibrary = library.indexOf(book) + + if (library[indexInLibrary]) { + + library[indexInLibrary].readed = !library[indexInLibrary].readed + + applyLibraryToDOM() + } + } +} + +function addBookToLibrary(event) { + + event.preventDefault() + + const data = { + + name: document.getElementById('input-name').value.trim(), + pages: document.getElementById('input-pages').value.trim(), + author: document.getElementById('input-author').value.trim() + } + + library.push(new Book(data.name, data.pages, data.author, false, library.length)) + + applyLibraryToDOM() + + document.getElementById('input-name').value = '' + document.getElementById('input-pages').value = '' + document.getElementById('input-author').value = '' +} + +function applyLibraryToDOM() { + + localStorage.setItem('lastLibrary', JSON.stringify(library)) + + const fragment = document.createDocumentFragment() + + library.forEach(book => { + + const container = document.createElement('div') + container.className = 'book' + + let title = document.createElement('h3') + title.innerText = book.name + container.appendChild(title) + + let pages = document.createElement('h5') + pages.innerText = `${book.pages} pages` + container.appendChild(pages) + + let author = document.createElement('h4') + author.innerText = book.author + container.appendChild(author) + + let deleteButton = document.createElement('button') + deleteButton.innerText = 'Delete book' + deleteButton.classList.add('delete') + deleteButton.onclick = function() {book.deleteBook()} + container.appendChild(deleteButton) + + let readedButton = document.createElement('button') + + if (book.readed) { + readedButton.innerText = 'Readed' + readedButton.classList.add('readed') + + } else { + readedButton.innerText = 'Not readed' + readedButton.classList.add('not-readed') + } + + readedButton.onclick = function() {book.alternateReadedValue()} + container.appendChild(readedButton) + + + fragment.appendChild(container) + }); + + const libraryDOM = document.getElementById('library') + + libraryDOM.innerHTML = '' + libraryDOM.appendChild(fragment) +} + +const form = document.getElementById('add-new-book-form') +form.addEventListener('submit', () => addBookToLibrary(event)) diff --git a/style.css b/style.css new file mode 100644 index 0000000..6378391 --- /dev/null +++ b/style.css @@ -0,0 +1,138 @@ +body { + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + min-width: 300px; +} + +header { + margin: 0; + padding: 0; +} +header h1 { + background-color: #0099ff; + margin: 0; + padding-top: 3vh; + padding-bottom: 3vh; + color: #fff; + text-align: center; + user-select: none; +} + +#root { + display: flex; + flex-direction: column; + align-items: center; +} +#root #library { + min-height: 50vh; + width: 100%; + max-width: calc(250px * 4); + padding: 5vh 5vw; + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} +#root #library .book { + background-color: #E3FDFD; + font-family: "Times New Roman", Times, serif; + width: 236px; + padding: 123px 0vw; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 5vh; +} +#root #library .book h3 { + margin: 0; + text-align: center; +} +#root #library .book h5 { + margin: 0; + text-align: center; + margin-bottom: 2vh; +} +#root #library .book h4 { + margin: 0; + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + margin-bottom: 1vh; +} +#root #library .book button { + height: 3vh; + width: 80%; + max-width: 126px; + margin-top: 0.5vh; + user-select: none; +} +#root #library .book button.delete { + background-color: #F38181; + border: none; + border: 1px solid #ff7575; + border-radius: 2px; +} +#root #library .book button.not-readed { + background-color: #FCE38A; + border: none; + border: 1px solid #ffe587; + border-radius: 2px; +} +#root #library .book button.readed { + background-color: #95E1D3; + border: none; + border: 1px solid #77ffe6; + border-radius: 2px; +} +#root .add-new-book { + display: flex; + flex-direction: column; + align-items: center; +} +#root .add-new-book h2 { + width: 70%; + padding-bottom: 1vh; + text-align: center; + border-bottom: 1px solid #393E46; + user-select: none; +} +#root .add-new-book form { + display: flex; + flex-direction: column; +} +#root .add-new-book form input { + width: 40vw; + height: 4vh; + margin-bottom: 1vh; + box-sizing: content-box; + outline: none; + padding: 0; + color: #fff; +} +#root .add-new-book form input::placeholder { + color: #c9c9c9; + user-select: none; +} +#root .add-new-book form input[type=text] { + background-color: #222831; + border: none; + border: 1px solid #002153; + border-radius: 2px; +} +#root .add-new-book form input[type=number] { + background-color: #393E46; + border: none; + border: 1px solid #00317f; + border-radius: 2px; +} +#root .add-new-book form input[type=submit] { + background-color: #00ADB5; + border: none; + border: 1px solid #00adb5; + border-radius: 2px; +} + +footer { + padding: 5vh 0vw 2vh 2vw; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map new file mode 100644 index 0000000..cf1dcb9 --- /dev/null +++ b/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AASA;EAEI;EACA;EAEA;EAEA;;;AAGJ;EAEI;EACA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;EACA;EAEA;;;AAKR;EAEI;EACA;EAEA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EAEI;EAEA;EAEA;EACA;EAEA;EACA;EAEA;EAEA;;AAQA;EAJI;EACA;;AAQJ;EATI;EACA;EAYA;;AAGJ;EAhBI;EACA;EAmBA;EAEA;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;;AAEA;EA/GZ,kBAiH0C;EAhH1C;EAEA;EACA;;AAgHY;EApHZ,kBAsH0C;EArH1C;EAEA;EACA;;AAqHY;EAzHZ,kBA2H0C;EA1H1C;EAEA;EACA;;AA6HA;EAEI;EACA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;EAEA;;AAIJ;EAEI;EACA;;AAEA;EAEI;EACA;EAEA;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EACA;;AAIR;EA/KR,kBAiLsC;EAhLtC;EAEA;EACA;;AAgLQ;EApLR,kBAsLsC;EArLtC;EAEA;EACA;;AAqLQ;EAzLR,kBA2LsC;EA1LtC;EAEA;EACA;;;AA6LJ;EAEI","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..3c9a58c --- /dev/null +++ b/style.scss @@ -0,0 +1,199 @@ +@mixin applyInputStyles($backgroundColor) { + + background-color: $backgroundColor; + border: none; + + border: 1px solid adjust-color($color: $backgroundColor, $saturation: 100%); + border-radius: 2px; +} + +body { + + margin: 0; + padding: 0; + + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + + min-width: 300px; +} + +header { + + margin: 0; + padding: 0; + + h1 { + + background-color: #0099ff; + + margin: 0; + padding-top: 3vh; + padding-bottom: 3vh; + + color: #fff; + text-align: center; + + user-select: none; + + } +} + +#root { + + display: flex; + flex-direction: column; + + align-items: center; + + #library { + + min-height: 50vh; + + width: 100%; + max-width: calc(250px * 4); + padding: 5vh 5vw; + + display: flex; + justify-content: space-around; + + flex-wrap: wrap; + + .book { + + background-color: #E3FDFD; + + font-family: 'Times New Roman', Times, serif; + + width: 236px; + padding: 123px 0vw; + + display: flex; + flex-direction: column; + + align-items: center; + + margin-bottom: 5vh; + + @mixin hxStyles() { + + margin: 0; + text-align: center; + } + + h3 { + + @include hxStyles() + } + + h5 { + + @include hxStyles(); + + margin-bottom: 2vh; + } + + h4 { + + @include hxStyles(); + + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + + margin-bottom: 1vh; + } + + button { + + height: 3vh; + width: 80%; + + max-width: 126px; + + margin-top: 0.5vh; + user-select: none; + + &.delete { + + @include applyInputStyles(#F38181) + } + + &.not-readed { + + @include applyInputStyles(#FCE38A) + } + + &.readed { + + @include applyInputStyles(#95E1D3) + } + } + } + } + + .add-new-book { + + display: flex; + flex-direction: column; + + align-items: center; + + h2 { + + width: 70%; + + padding-bottom: 1vh; + text-align: center; + + border-bottom: 1px solid #393E46; + + user-select: none; + } + + + form { + + display: flex; + flex-direction: column; + + input { + + width: 40vw; + height: 4vh; + + margin-bottom: 1vh; + + box-sizing: content-box; + outline: none; + + padding: 0; + + color: #fff; + + &::placeholder { + + color: rgb(201, 201, 201); + user-select: none; + } + } + + input[type="text"] { + + @include applyInputStyles(#222831) + } + + input[type="number"] { + + @include applyInputStyles(#393E46) + } + + input[type="submit"] { + + @include applyInputStyles(#00ADB5) + } + } + } +} + +footer { + + padding: 5vh 0vw 2vh 2vw; +} \ No newline at end of file