├── README.md
├── Script.js
├── Style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | This is Project: Library from The Odin Project.
 2 | https://www.theodinproject.com/courses/javascript/lessons/library 
 3 | 
 4 | View My Project Live: https://catqueencodes.github.io/Project-Library/ 
 5 | 
 6 | GitHub Code Files: https://github.com/catqueencodes/Project-Library
 7 | 
 8 | 
 9 | This project took me 37 hours, 1.3 hours of that time was CSS the rest was the JavaScript
10 | 
11 | Things I learned:\
12 | -How to properly use `const`\
13 | -Basics of local storage so data is not lost on page refresh\
14 | -You can access DOM elements with a variable refrencing that DOM elements ID. For example: \
15 | let bookId = document.getElementById(`readBtn${myLibrary.indexOf(this)}`); to access an element with the ID `readBtn1`\
16 | -You can add event listeners INSIDE of other functions.\
17 | -`!` NOT will turn truthy values falsey and falsey values truthy. You can change a variable/value using `!`
18 | 


--------------------------------------------------------------------------------
/Script.js:
--------------------------------------------------------------------------------
  1 | //button event listeners for create new book, add new book to page, close popup
  2 | const addBtn = document.querySelector('#addBtn');
  3 | addBtn.addEventListener('click', addBookToLibrary);
  4 | 
  5 | const newBookBtn = document.querySelector('#newBtn');
  6 | newBookBtn.addEventListener('click', () => popUpForm.style.display = 'block');
  7 | 
  8 | const popUpForm = document.getElementById('popUp');
  9 | const closePopUp = document.getElementsByTagName('span')[0];
 10 | closePopUp.addEventListener('click', () => popUpForm.style.display = 'none');
 11 | 
 12 | //Book Constructor
 13 | class Book {
 14 |     constructor(title, author, pages, read) {
 15 |         this.title = form.title.value; 
 16 |         this.author = form.author.value; 
 17 |         this.pages = form.pages.value + 'pg'; 
 18 |         this.read = form.read.checked; 
 19 |     }
 20 | }
 21 | 
 22 | //creates book from Book Constructor, adds to library
 23 | let myLibrary = [];
 24 | let newBook;
 25 | 
 26 | function addBookToLibrary() {
 27 |     event.preventDefault();
 28 |     popUpForm.style.display = 'none';
 29 | 
 30 |     newBook = new Book(title, author, pages,read); 
 31 |     myLibrary.push(newBook); 
 32 |     setData();  //saves updated array in local storage
 33 |     render(); 
 34 |     form.reset();
 35 | }
 36 | 
 37 | //Creates book visual in browser
 38 | function render() {
 39 |     const display = document.getElementById('Library-container');
 40 |     const books = document.querySelectorAll('.book');
 41 |     books.forEach(book => display.removeChild(book));
 42 |    
 43 |     for (let i=0; i<myLibrary.length; i++){
 44 |         createBook(myLibrary[i]);
 45 |     }
 46 | }
 47 | 
 48 | //creats book DOM elements, to use in render();
 49 | function createBook(item) {
 50 |     const library = document.querySelector('#Library-container');
 51 |     const bookDiv = document.createElement('div');
 52 |     const titleDiv = document.createElement('div');
 53 |     const authDiv = document.createElement('div');
 54 |     const pageDiv = document.createElement('div');
 55 |     const removeBtn = document.createElement('button');
 56 |     const readBtn = document.createElement('button');
 57 |     
 58 |     
 59 |     bookDiv.classList.add('book');
 60 |     bookDiv.setAttribute('id', myLibrary.indexOf(item));
 61 | 
 62 |     titleDiv.textContent = item.title;
 63 |     titleDiv.classList.add('title');
 64 |     bookDiv.appendChild(titleDiv);
 65 | 
 66 |     authDiv.textContent = item.author;
 67 |     authDiv.classList.add('author');
 68 |     bookDiv.appendChild(authDiv);
 69 | 
 70 |     pageDiv.textContent = item.pages;
 71 |     pageDiv.classList.add('pages');
 72 |     bookDiv.appendChild(pageDiv);
 73 | 
 74 |     readBtn.classList.add('readBtn')    
 75 |     bookDiv.appendChild(readBtn);
 76 |     if(item.read===false) {
 77 |         readBtn.textContent = 'Not Read';
 78 |         readBtn.style.backgroundColor = '#e04f63';
 79 |     }else {
 80 |         readBtn.textContent = 'Read';
 81 |         readBtn.style.backgroundColor = '#63da63'
 82 |     }
 83 | 
 84 |     removeBtn.textContent = 'Remove'; 
 85 |     removeBtn.setAttribute('id', 'removeBtn');
 86 |     bookDiv.appendChild(removeBtn);
 87 |     
 88 |     library.appendChild(bookDiv);
 89 | 
 90 |     removeBtn.addEventListener('click', () => {
 91 |         myLibrary.splice(myLibrary.indexOf(item),1);
 92 |         setData()
 93 |         render();
 94 |     });
 95 | 
 96 |     //add toggle ability to each book 'read' button on click
 97 |     readBtn.addEventListener('click', () => { 
 98 |         item.read = !item.read; 
 99 |         setData(); 
100 |         render();
101 |     }); 
102 | };
103 | 
104 | // setting Library to be stored in local storage
105 | function setData() {
106 |     localStorage.setItem(`myLibrary`, JSON.stringify(myLibrary));
107 | }
108 | 
109 | //pulls books from local storage when page is refreshed
110 | function restore() {
111 |     if(!localStorage.myLibrary) {
112 |         render();
113 |     }else {
114 |         let objects = localStorage.getItem('myLibrary') // gets information from local storage to use in below loop to create DOM/display
115 |         objects = JSON.parse(objects);
116 |         myLibrary = objects;
117 |         render();
118 |     }
119 | }
120 | 
121 | restore();
122 | 
123 | 


--------------------------------------------------------------------------------
/Style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | body{
  3 |   background-color: #6a9fa5;
  4 | }
  5 | h1 {
  6 |   display: flex;
  7 |   justify-content: center;
  8 |   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  9 |   font-size: 55px;
 10 | }
 11 | 
 12 | #newBtn-Container {
 13 |   display: flex;
 14 |   justify-content: center;
 15 |   align-items: center;
 16 |   margin-bottom: 30px;
 17 | }
 18 | 
 19 | #newBtn {
 20 |   display: flex;
 21 |   justify-content: center;
 22 |   align-items: center;
 23 |   width: 200px;
 24 |   height: 50px;
 25 |   font-size: 25px;
 26 |   border-radius: 10px;
 27 |   border: solid 3px black;
 28 | }
 29 | 
 30 | #Library-container {
 31 |   display: flex;
 32 |   flex-direction: row;
 33 |   flex-wrap: wrap;
 34 | }
 35 | 
 36 | 
 37 | 
 38 | /* Book and its contents */ 
 39 | .book {
 40 |   display: flex;
 41 |   flex-direction: column;
 42 |   align-items: center;
 43 |   border: 5px solid black;
 44 |   border-radius: 25px;
 45 |   height: 300px;
 46 |   width: 250px;
 47 |   padding: 15px;
 48 |   margin: 20px;
 49 |   background-color: #fbd082;
 50 | }
 51 | 
 52 | .title {
 53 |   font-size: 30px;
 54 |   font-weight: bold;
 55 |   margin-bottom: 20px;
 56 | }
 57 | 
 58 | .author {
 59 |   font-size: 30px;
 60 |   margin-bottom: 20px;
 61 | }
 62 | 
 63 | .pages {
 64 |   font-size: 25px;
 65 |   margin-bottom: 20px;
 66 | }
 67 | 
 68 | button:focus {outline:0;}
 69 | 
 70 | .readBtn { 
 71 |   font-size: 20px;
 72 |   height: 35px;
 73 |   width: 110px;
 74 |   margin-bottom: 20px;
 75 |   border-radius: 10px;
 76 |   border: solid 3px black;
 77 | }
 78 | 
 79 | #removeBtn {
 80 |   font-size: 20px;
 81 |   height: 35px;
 82 |   width: 110px;
 83 |   border-radius: 10px;
 84 |   border: solid 3px black;
 85 |   background-color: #d7d9da;
 86 | }
 87 | 
 88 | #addBtn {
 89 |   font-size: 20px;
 90 |   height: 35px;
 91 |   width: 110px;
 92 |   margin-bottom: 20px;
 93 |   border-radius: 10px;
 94 |   border: solid 3px black;
 95 | }
 96 | 
 97 | /* Modal popup box  https://www.w3schools.com/howto/howto_css_modals.asp */
 98 | 
 99 | /* The Modal (background) */
100 | input#title {
101 |   height: 30px;
102 |   width: 200px;
103 |   font-size: 20px;
104 |   border: solid 3px black;
105 | }
106 | input#author {
107 |   height: 30px;
108 |   width: 200px;
109 |   font-size: 20px;
110 |   border: solid 3px black;
111 | }
112 | input#pages {
113 |   height: 30px;
114 |   width: 200px;
115 |   font-size: 20px;
116 |   border: solid 3px black;
117 | }
118 | 
119 | input[type=checkbox] {
120 |   
121 |   transform: scale(2);
122 | }
123 | #popUp {
124 | 
125 |   display: none; /* Hidden by default */
126 |   position: fixed; /* Stay in place */
127 |   z-index: 1; /* Sit on top */
128 |   left: 0;
129 |   top: 0;
130 |   width: 100%; /* Full width */
131 |   height: 100%; /* Full height */
132 |   overflow: auto; /* Enable scroll if needed */
133 |   background-color: rgb(0,0,0); /* Fallback color */
134 |   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
135 |   font-size: 30px;
136 |   }
137 |   
138 |   /* Modal Content/Box */
139 | #form {
140 |   background-color: #fefefe;
141 |   margin: 15% auto; /* 15% from the top and centered */
142 |   padding: 20px;
143 |   border: 1px solid #888;
144 |   width: 20%; /* Could be more or less, depending on screen size */
145 |   }
146 |   
147 |   /* The Close Button */
148 | .close {
149 |   color: #aaa;
150 |   float: right;
151 |   font-size: 28px;
152 |   font-weight: bold;
153 | }
154 |   
155 | .close:hover,
156 | .close:focus {
157 |   color: black;
158 |   text-decoration: none;
159 |   cursor: pointer;
160 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!Doctype html>
 2 | <head>
 3 |     <meta charset="utf-8">
 4 |     <link rel="stylesheet" href="Style.css">
 5 |     <title>Library</title>
 6 | </head>
 7 | <body>
 8 | <h1>Library Project</h1>
 9 |     <div id='newBtn-Container'>
10 |         <button id='newBtn'>+ New Book</button>
11 |     </div>
12 |      <div id="popUp">
13 |         <form id='form' action='/Script.js'>
14 |             <span class="close">&times;</span>
15 |             <ledgend>New Book</ledgend>
16 |             <div id='textInput'> 
17 |                 <p><input type='text' id='title' name='title' placeholder='Title'></p>
18 |                 <p><input type='text' id='author' name='author' placeholder='Author'></p>
19 |                 <p><input type='text' id='pages' name='pages' placeholder='Pages'></p>
20 |             </div>
21 |             <div id='checkBox'>
22 |                 <p><label >Read: </label><input type='checkbox' id='read' name='read' value='yes'></p>
23 |             </div>
24 |             <button type='submit' form='form' id='addBtn'>Add</button>
25 |         </form>
26 |     </div>
27 |     <div id='Library-container'></div>
28 | 
29 |     <script src="Script.js"></script>
30 | </body>
31 | 
32 | </html>
33 | 
34 | 
35 | 


--------------------------------------------------------------------------------