diff --git a/app.js b/app.js index 03d080c..5e2cda5 100644 --- a/app.js +++ b/app.js @@ -1,3 +1,4 @@ +// Book Class: Represents a Book class Book { constructor(title, author, isbn) { this.title = title; @@ -19,22 +20,37 @@ class UI { const row = document.createElement("tr"); - row.innerHTML = ` - ${book.title} - ${book.author} - ${book.isbn} - Remove - `; + for (let key of Object.keys(book)) { + if (key === "isbn") { + const clear = document.createElement("button"); + clear.classList.add("clear"); + clear.innerHTML = `delete`; + clear.addEventListener("click", function () { + const correspondingRow = this.parentElement.parentElement; + correspondingRow.classList.add("fall"); + correspondingRow.addEventListener("animationend", function () { + setTimeout(function () { + correspondingRow.remove(); + }, 100); + }); + }); + const span = document.createElement("span"); + span.textContent = book[key]; + const td = document.createElement("td"); + td.appendChild(clear); + td.insertBefore(span, clear); + row.appendChild(td); + } else { + row.appendChild( + document + .createElement("td") + .appendChild(document.createTextNode(book[key])).parentElement + ); + } + } list.appendChild(row); } - - static deleteBook(el) { - if(el.classList.contains('delete')) { - el.parentElement.parentElement.remove(); - } - } - static showAlert(message, className) { const div = document.createElement("div"); @@ -43,14 +59,10 @@ class UI { div.textContent = message; main.appendChild(div); // Vanish in 3 seconds - - setTimeout(() => document.querySelector(".alert").remove(), 3000); -======= // setTimeout(() => document.querySelector(".success").remove(), 2000); div.addEventListener("animationend", function () { this.remove(); }); - } static clearFields() { @@ -58,17 +70,7 @@ class UI { document.querySelector("#author").value = ""; document.querySelector("#isbn").value = ""; } - static removeBook(isbn) { - const books = Store.getBooks(); - - books.forEach((book, index) => { - if(book.isbn === isbn) { - books.splice(index, 1); - } - }); - } } - // Event: Display Books document.addEventListener("DOMContentLoaded", function () { @@ -84,6 +86,7 @@ document.addEventListener("DOMContentLoaded", function () { }, 400); document.querySelector("header").classList.add("open"); document.querySelector("main").classList.add("open"); + document.querySelector("footer").classList.add("open"); }); // theme switcher and change logo document @@ -107,6 +110,35 @@ document.addEventListener("DOMContentLoaded", function () { document.querySelector(".modal-container").classList.remove("open"); UI.clearFields(); }); + // search + document.querySelector(".search img").addEventListener("click", function () { + this.parentElement.classList.add("open"); + this.nextElementSibling.focus(); + }); + document.getElementById("search").addEventListener("blur", function () { + this.parentElement.classList.remove("open"); + }); + document.getElementById("search").addEventListener("input", function () { + const that = this; + const rows = document.querySelectorAll("tbody tr"); + if (rows) { + rows.forEach(function (row) { + const childNodes = row.childNodes; + for (let i = 0; i < childNodes.length; i++) { + if ( + childNodes[i].textContent + .toLowerCase() + .indexOf(that.value.trim().toLowerCase()) == -1 + ) { + row.classList.add("none"); + } else { + row.classList.remove("none"); + break; + } + } + }); + } + }); // dislay books UI.displayBooks(); }); @@ -132,46 +164,9 @@ document.querySelector("#book-form").addEventListener("submit", (e) => { // Add Book to UI UI.addBookToList(book); - // Show success message - UI.showAlert('Book Added', 'success'); -======= UI.showAlert("Book added to list successfully", "success"); - // Clear fields UI.clearFields(); } }); - -function search(){ - let title=document.getElementById('input').value.toUpperCase(); - let table=document.getElementById('book-list'); - let tr=table.getElementsByTagName('tr'); - for(var i=0;i-1){ - tr[i].style.display = ''; - } - else{ - tr[i].style.display='none'; - } - } - } -} -======= - -// Event: Remove a Book from -document.querySelector('#book-list').addEventListener('click', (e) => { - - UI.showAlert('Book Removed Successfully', 'success'); - - // Remove book from UI - UI.deleteBook(e.target); - - // Remove book from book store - Store.removeBook(e.target.parentElement.previousElementSibling.innerHTML); - -}); - diff --git a/icon-search.svg b/icon-search.svg new file mode 100644 index 0000000..f4c6ba6 --- /dev/null +++ b/icon-search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 19b973e..a52ddf1 100644 --- a/index.html +++ b/index.html @@ -1,107 +1,5 @@ - - - - - - - - - - - - - - - - - - BookList App - - - -
- - - - - -
-

-  StoreBook -

- -

Add some Books

-
-
-
- - -
-
- - -
-
- - -
- -
-
- - - - - - - - - -
TitleAuthorISBN#
-
- - - - - - -======= @@ -112,59 +10,6 @@

href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&display=swap" rel="stylesheet" /> - - - - - - - - - BookList App - - -
-
-

-  StoreBook -

Add some Books

-
-
-
- - -======= BookList App @@ -177,10 +22,18 @@

+
+ search + +
change theme -
@@ -246,67 +99,11 @@

- - - -
-
-
- - -
-
-
- - - - - - - - - -
TitleAuthorISBN#
-======= -

- - - - - - - -======= +
+

© 2021 StoreBook

+
- diff --git a/style.css b/style.css index acc07db..ed6dde7 100644 --- a/style.css +++ b/style.css @@ -1,128 +1,3 @@ - -/* NAVIGATION BAR STYLING STARTS */ -#navbar { - position: relative; - max-width: 1200px; - margin: 20px auto; - padding: 7.5px; - background: rgb(1 47 87 / 80%); - color: #fff; - box-sizing: border-box; - border-radius: 4px; - box-shadow: 0 3px 5px rgb(221, 220, 220); -} - -.logo { - display: flex; - align-items: center; - font-size: 1.8rem; - box-sizing: border-box; - float: left; -} - -.s{ - font-family: 'Poppins', sans-serif; - font-size: 26px; - text-align: center; - box-sizing: border-box; - margin-top: 11px; - color: #000000; -} -.b{ - font-family: 'Poppins', sans-serif; - font-size: 26px; - text-align: center; - box-sizing: border-box; - margin-top: 11px; - color: rgb(255 187 0); -} - -.logo img { - width: 35px; - height: 40px; - margin-top: 4px; -} - -nav { - float: right; -} - -nav ul { - margin: 0; - padding: 0; - display: flex; -} - -nav ul li { - list-style: none; -} - -nav ul li a { - display: block; - margin: 10px 0; - padding: 10px 20px; - text-decoration: none; - color: rgb(255, 255, 255); - text-transform: uppercase; -} - -nav ul li a:hover { - text-decoration: none; - background: rgb(255 187 0); - color: #000000; - transition: 0.5s; - border-radius: 2.5px; -} - -@media (max-width: 768px) { - .menutoggle { - display: block; - width: 30px; - height: 30px; - margin: 10px; - background: rgb(211, 211, 211); - float: right; - cursor: pointer; - text-align: center; - font-size: 20px; - color: #000000; - } - .menutoggle:before { - content: '\f0c9'; - font-family: fontAwesome; - line-height: 30px; - } - .menutoggle.active:before { - content: '\f00d'; - } - nav { - display: none; - transition: 0.3s; - } - nav.active { - display: block; - width:100%; - } - nav.active ul{ - display: block; - } -} -.fixed { - clear: both; -} -/* NAVIGATION BAR STYLING ENDS */ - - -@import url("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"); -:root { - --color-white: #ffffff; - --color-darkred: #590219; - --color-darkgreen: rgb(1 47 87 / 80%); - --color-green: #37af65; -} - -*, *::before, *::after { -======= :root { --ff-sans: "Josefin Sans", sans-serif; --fw-normal: 400; @@ -172,7 +47,6 @@ body.light { *::before { margin: 0; padding: 0; - box-sizing: border-box; } @@ -185,18 +59,6 @@ body { min-height: 100%; } - -/* mobile friendly alternative to using background-attachment: fixed */ - -body::before { - content: ""; - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 100%; - z-index: -1; -======= img { user-select: none; } @@ -227,15 +89,9 @@ button { cursor: pointer; } - -h1, p { - margin-top: 0; - margin-bottom: 0.5rem; -======= input:focus, button:focus { outline: 0; - } button:active { @@ -257,12 +113,6 @@ button:active { transition: opacity 0.4s ease; } -input, button, select { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; -======= /* svg container */ .svg { @@ -271,7 +121,6 @@ input, button, select { display: flex; transform: scale(0.6); transition: transform 0.6s ease; - } .svg.load { @@ -330,12 +179,45 @@ input, button, select { header { display: flex; justify-content: space-between; + align-items: center; } header img { width: 16rem; } +.search { + width: 50rem; + position: relative; + /* transform: scaleX(0.5); */ +} + +.search img { + width: 2rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.search input { + transform: scaleX(0); + width: 100%; + padding: 1.2rem; + border: 0.01rem solid var(--clr-border); + border-radius: 1.8rem; + color: var(--clr-text-2); + transition: transform 0.4s ease; +} + +.search.open img { + display: none; +} + +.search.open input { + transform: scaleX(1); +} + /* theme-switcher */ .theme-switcher { @@ -373,13 +255,6 @@ body.light .theme-switcher .switch { transform: translateX(0); } - -input[type="radio"], input[type="checkbox"] { - display: inline-block; - margin-right: 0.625rem; - min-height: 1.25rem; - min-width: 1.25rem; -======= /* main margin */ main { @@ -415,6 +290,23 @@ main .list table th { border: 0.01rem solid var(--clr-border); } +main .list tbody tr td:nth-child(3) { + position: relative; +} + +main .list tbody tr td:nth-child(3) .clear { + position: absolute; + right: 1.7rem; + bottom: 1.7rem; + opacity: 0; + pointer-events: none; +} + +main .list tbody tr td:nth-child(3):hover .clear { + opacity: 1; + pointer-events: all; +} + /* add button (plus button) */ .add-button { @@ -451,11 +343,6 @@ main .list table th { color: var(--clr-text-2); } - -.table { - color: rgb(255, 255, 255); -} -======= /* modal inside modal-container */ .modal-container .modal { @@ -533,12 +420,20 @@ form .form-group input { color: var(--clr-white); } +/* footer */ + +footer { + color: var(--clr-text-2); + text-align: center; +} + /* hide/show using javascript */ /* hide at start */ header, main, +footer, .modal-container { opacity: 0; pointer-events: none; @@ -549,7 +444,8 @@ main, .modal-container.open, header.open, -main.open { +main.open, +footer.open { opacity: 1; pointer-events: all; } @@ -578,6 +474,14 @@ main.open { background-color: var(--clr-alert); } +.fall { + animation: fall 0.4s forwards ease; +} + +.none { + display: none; +} + /* Animation for message */ @keyframes message { @@ -592,6 +496,13 @@ main.open { } } +@keyframes fall { + 100% { + opacity: 0; + pointer-events: none; + } +} + /* Media queries */ @media (max-height: 498px) { @@ -607,4 +518,3 @@ main.open { width: 13rem; } } -