Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Awesome books: refactor to use JavaScript classes #2

Merged
merged 5 commits into from
Jan 5, 2022
Merged

Awesome books: refactor to use JavaScript classes #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
49f8705
Add Books Class
Bondok6 Jan 5, 2022
edcf251
Add CSS styles to the application
Bondok6 Jan 5, 2022
d64a5ff
Clear inputs when user Click on Add button || Update README.md: add t…
Bondok6 Jan 5, 2022
147df8f
Fix eslint errors
Bondok6 Jan 5, 2022
255f429
Update README.md
Bondok6 Jan 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

> ### In this project, I built a basic website that allows users to add/remove books from a list.

<img src="images/mobile-preview.PNG" width="30%" /><img src="images/desktop-preview.PNG" width="70%" />
<img src="mobile-screenshot.PNG" width="30%" /><img src="desktop-screenshot.PNG" width="70%" />

## Built With

Expand Down
Binary file added desktop-screenshot.PNG
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<body>
<main>
<h1>Awasome Books</h1>
<h1>All awasome books</h1>

<section class="books-section">

Expand All @@ -24,7 +24,9 @@ <h1>Awasome Books</h1>

<section class="data-entry-section">

<form>
<h2>Add a new book</h2>

<form class="form">
<input type="text" placeholder="Title" class="title-input" required>
<input type="text" placeholder="Author" class="author-input" required>
<button type="submit" class="add-btn">Add</button>
Expand Down
148 changes: 146 additions & 2 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,167 @@ html {

body {
font-size: 20px;
font-family: "Comic Sans MS", "Comic Sans", sans-serif;
}

a {
text-decoration: none;
}

h1,
h2 {
text-align: center;
transition: 0.2s;
margin-block: 2rem;
font-size: 4rem;
margin-bottom: 2rem;
}

h1:hover,
h2:hover {
transform: skewY(2deg) skewX(15deg) scale(1.1);
text-shadow: 0.5rem 1rem 2rem #000;
}

/************** Start Books Section ************/
.books-section {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
}

.books-container {
width: 100rem;
height: 45rem;
border: 3px solid #222;
padding-block: 1rem;
overflow-y: scroll;
}

.books-container::-webkit-scrollbar {
width: 1.7rem;
}

.books-container::-webkit-scrollbar-track {
background-color: #5555;
}

.books-container::-webkit-scrollbar-thumb {
background-color: #777;
border-radius: 2rem;
}

.books-container::-webkit-scrollbar-track:hover {
background-color: #555;
}

.books-container::-webkit-scrollbar-thumb:hover {
background-color: #777;
}

li {
list-style: none;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}

li::after {
li:not(:last-child)::after {
content: "";
display: block;
border-bottom: 1px solid #333;
margin-block: 2rem;
width: 100%;
margin: 1.5rem 0;
}

.book-details {
margin-left: 2rem;
font-size: 2rem;
font-weight: 600;
}

.remove-btn {
padding: 0.4rem 1rem;
margin-right: 2rem;
cursor: pointer;
font-family: inherit;
font-size: 1.6rem;
background: none;
outline: none;
border: 2px solid #222;
box-shadow: 0.5rem 0.5rem 1rem #333;
transform: scale(1.1);
transition: 0.4s;
}

/************** Start Books Section ************/

/************** Start Data entry Section ************/
.data-entry-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
}

.form {
width: 50rem;
display: flex;
flex-direction: column;
gap: 2rem;
}

input {
display: block;
height: 4rem;
padding: 1rem;
font-family: inherit;
font-size: 2rem;
outline: none;
border: 2px solid #333;
border-radius: 5px;
}

.add-btn {
width: 7rem;
height: 4rem;
align-self: flex-end;
font-family: inherit;
cursor: pointer;
font-size: 2rem;
background: none;
outline: none;
border: 2px solid #222;
box-shadow: 1.5rem 1rem 1rem #333;
transform: scale(1.1);
transition: 0.4s;
}

.add-btn:hover,
.remove-btn:focus,
.remove-btn:hover {
transform: scale(1);
background-color: #333;
color: #fff;
}

/************** End Data entry Section ************/

@media screen and (max-width: 600px) {
li {
flex-direction: column;
gap: 2rem;
}

input {
width: 70%;
margin: 0 auto;
}

.add-btn {
align-self: center;
}
}
97 changes: 48 additions & 49 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,79 @@
let books = [];
let id = 0;

const Books = function (title, author, id) {
this.title = title;
this.author = author;
this.id = id;
};

// Select the Elements
const container = document.querySelector('.books-container');
const addBtn = document.querySelector('form');

const titleInput = document.querySelector('.title-input');
const authorInput = document.querySelector('.author-input');

// Data Storage
const storage = function (books) {
localStorage.setItem('books', JSON.stringify(books));
};
// Class of Books
class Books {
static books = [];

// Add Book
const addBook = function (title, author, id) {
const newBook = new Books(title, author, id);
books.push(newBook);
storage(books);
};
constructor(id, title, author) {
this.id = id;
this.title = title;
this.author = author;
}

// Remove Book
const removeBook = function (id) {
books = books.filter((book) => book.id !== +id);
storage(books);
};
// Data Storage
static storage(books) {
localStorage.setItem('books', JSON.stringify(books));
}

// Display Book
const displayBook = function () {
if (!JSON.parse(localStorage.getItem('books'))) {
books = [];
} else {
books = JSON.parse(localStorage.getItem('books'));
addBook() {
Books.books.push(this);
Books.storage(Books.books);
}

let itemHtml = '';
books.forEach((book) => {
itemHtml += `
// Display Book
static displayBook() {
if (!JSON.parse(localStorage.getItem('books'))) {
Books.books = [];
} else {
Books.books = JSON.parse(localStorage.getItem('books'));
}

let itemHtml = '';
Books.books.forEach((book) => {
itemHtml += `
<li class="book" id="${book.id}">
<div class="title">${book.title}</div>
<div class="author">${book.author}</div>
<div class="book-details">${book.title} by ${book.author}</div>
<button type="button" class="remove-btn">Remove</button>
</li>
`;
});
});

container.innerHTML = itemHtml;
container.innerHTML = itemHtml;

// Remove: when I click on Remove button
document.querySelectorAll('.remove-btn').forEach((btn) => {
btn.addEventListener('click', (e) => {
const targetId = e.target.parentElement.id;
removeBook(targetId);
e.target.parentElement.remove();
// Remove: when I click on Remove button
document.querySelectorAll('.remove-btn').forEach((btn) => {
btn.addEventListener('click', (e) => {
const targetId = e.target.parentElement.id;
Books.books = Books.books.filter((book) => book.id !== +targetId);
Books.storage(Books.books);
e.target.parentElement.remove();
});
});
});
};
}
}

let id = 0;

// Add: when I click on Add button
addBtn.addEventListener('submit', (e) => {
e.preventDefault();
const title = titleInput.value;
const author = authorInput.value;

addBook(title, author, id);
displayBook();
const newBook = new Books(id, title, author);
newBook.addBook();
Books.displayBook();
id += 1;

titleInput.value = '';
authorInput.value = '';
});

// Display Data: when reload the page
window.onload = () => {
displayBook();
Books.displayBook();
};
Binary file added mobile-screenshot.PNG
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.