11let myLibrary = [ ] ;
22
3- window . addEventListener ( "load" , function ( ) {
4- populateStorage ( ) ;
5- render ( ) ;
3+ const titleInput = document . getElementById ( "titleInput" ) ;
4+ const authorInput = document . getElementById ( "authorInput" ) ;
5+ const pagesInput = document . getElementById ( "pagesInput" ) ;
6+ const readInput = document . getElementById ( "readInput" ) ;
7+ const errorBox = document . getElementById ( "errorMessage" ) ;
8+ const tableBody = document . querySelector ( "#display tbody" ) ;
9+
10+ window . addEventListener ( "load" , ( ) => {
11+ populateInitialBooks ( ) ;
12+ render ( ) ;
613} ) ;
714
8- function populateStorage ( ) {
9- if ( myLibrary . length === 0 ) {
10- let book1 = new Book ( "Robison Crusoe" , "Daniel Defoe" , "252" , true ) ;
11- let book2 = new Book (
12- "The Old Man and the Sea" ,
13- "Ernest Hemingway" ,
14- "127" ,
15- true
16- ) ;
17- myLibrary . push ( book1 ) ;
18- myLibrary . push ( book2 ) ;
19- render ( ) ;
20- }
15+ function Book ( title , author , pages , read ) {
16+ this . title = title ;
17+ this . author = author ;
18+ this . pages = pages ; // number
19+ this . read = read ; // boolean
2120}
2221
23- const title = document . getElementById ( "title" ) ;
24- const author = document . getElementById ( "author" ) ;
25- const pages = document . getElementById ( "pages" ) ;
26- const check = document . getElementById ( "check" ) ;
22+ function populateInitialBooks ( ) {
23+ if ( myLibrary . length > 0 ) return ;
24+
25+ myLibrary . push (
26+ new Book ( "Robinson Crusoe" , "Daniel Defoe" , 252 , true ) ,
27+ new Book ( "The Old Man and the Sea" , "Ernest Hemingway" , 127 , true )
28+ ) ;
29+ }
2730
28- // Check the input from forms and, if valid, add the new book (object in array)
29- // via Book constructor and start render function
3031function addBook ( ) {
31- if (
32- title . value == null ||
33- title . value === "" ||
34- pages . value == null ||
35- pages . value === ""
36- ) {
37- showError ( "Please fill all fields!" ) ;
38- return false ;
39- }
40-
41- if ( myLibrary . some ( b => b . title === title . value && b . author === author . value ) ) {
42- showError ( "This book already exists!" ) ;
43- return ;
44- }
45-
46- if ( ! isNaN ( title . value . trim ( ) ) || ! isNaN ( author . value . trim ( ) ) ) {
47- showError ( "Title and Author must be text!" ) ;
48- return ;
49- }
50-
51- let book = new Book ( title . value , author . value , Number ( pages . value ) , check . checked ) ;
52- myLibrary . push ( book ) ;
53- render ( ) ;
32+ const title = titleInput . value . trim ( ) ;
33+ const author = authorInput . value . trim ( ) ;
34+ const pages = pagesInput . value . trim ( ) ;
35+ const read = readInput . checked ;
36+
37+ if ( ! title || ! author || ! pages ) {
38+ showError ( "Please fill all fields!" ) ;
39+ return ;
40+ }
41+
42+ if ( isNaN ( Number ( pages ) ) || Number ( pages ) <= 0 ) {
43+ showError ( "Pages must be a positive number." ) ;
44+ return ;
45+ }
46+
47+ if ( myLibrary . some ( b => b . title === title && b . author === author ) ) {
48+ showError ( "This book already exists!" ) ;
49+ return ;
50+ }
51+
52+ const book = new Book ( title , author , Number ( pages ) , read ) ;
53+ myLibrary . push ( book ) ;
54+ clearForm ( ) ;
55+ render ( ) ;
5456}
5557
56- // Clear any previous error messages
57- document . getElementById ( "errorMessage" ) . style . display = "none" ;
58+ document . getElementById ( "submitBtn" ) . addEventListener ( "click" , addBook ) ;
5859
59- function Book ( title , author , pages , read ) {
60- this . title = title ;
61- this . author = author ;
62- this . pages = pages ;
63- this . read = read ;
60+ function clearForm ( ) {
61+ titleInput . value = "" ;
62+ authorInput . value = "" ;
63+ pagesInput . value = "" ;
64+ readInput . checked = false ;
6465}
6566
66-
6767function render ( ) {
68- let table = document . getElementById ( "display" ) ;
69- let rowsNumber = table . rows . length ;
70-
71- // Delete old table rows
72- for ( let n = rowsNumber - 1 ; n > 0 ; n -- ) {
73- table . deleteRow ( n ) ;
74- }
75-
76- // Insert updated rows and cells
77- let length = myLibrary . length ;
78- for ( let i = 0 ; i < length ; i ++ ) {
79- let row = table . insertRow ( 1 ) ;
80- let titleCell = row . insertCell ( 0 ) ;
81- let authorCell = row . insertCell ( 1 ) ;
82- let pagesCell = row . insertCell ( 2 ) ;
83- let wasReadCell = row . insertCell ( 3 ) ;
84- let deleteCell = row . insertCell ( 4 ) ;
85-
86- titleCell . innerHTML = myLibrary [ i ] . title ;
87- authorCell . innerHTML = myLibrary [ i ] . author ;
88- pagesCell . innerHTML = myLibrary [ i ] . pages ;
89-
90- // Add and configure read/unread button
91- let changeBut = document . createElement ( "button" ) ;
92- changeBut . id = i ;
93- changeBut . className = "btn btn-primary" ;
94- wasReadCell . appendChild ( changeBut ) ;
95-
96- let readStatus = myLibrary [ i ] . check ? "Yes" : "No" ;
97- changeBut . innerHTML = readStatus ;
98-
99- if ( myLibrary [ i ] . check ) {
100- changeBut . className = "btn btn-success" ;
101- }
102-
103- changeBut . addEventListener ( "click" , function ( ) {
104- myLibrary [ i ] . check = ! myLibrary [ i ] . check ;
105- render ( ) ;
106- } ) ;
107-
108- // Add delete button to each row
109- let delBut = document . createElement ( "button" ) ;
110- delBut . id = i + 5 ;
111- delBut . className = "btn btn-warning" ;
112- delBut . innerHTML = "Delete" ;
113- deleteCell . appendChild ( delBut ) ;
114-
115- delBut . setAttribute ( "data-index" , i ) ;
116- delBut . addEventListener ( "click" , function ( ) {
117- let index = this . getAttribute ( "data-index" ) ;
118- showError ( `You've deleted title: ${ myLibrary [ index ] . title } ) ;
119- myLibrary . splice ( index , 1 ) ;
120- render ( ) ;
121- } ) ;
122- }
68+ tableBody . innerHTML = "" ;
69+
70+ myLibrary . forEach ( ( book , index ) => {
71+ const row = tableBody . insertRow ( ) ;
72+
73+ const titleCell = row . insertCell ( ) ;
74+ const authorCell = row . insertCell ( ) ;
75+ const pagesCell = row . insertCell ( ) ;
76+ const readCell = row . insertCell ( ) ;
77+ const deleteCell = row . insertCell ( ) ;
78+
79+ titleCell . textContent = book . title ;
80+ authorCell . textContent = book . author ;
81+ pagesCell . textContent = book . pages ;
82+
83+ const toggleBtn = document . createElement ( "button" ) ;
84+ toggleBtn . className = book . read ? "btn btn-success" : "btn btn-primary" ;
85+ toggleBtn . textContent = book . read ? "Yes" : "No" ;
86+ toggleBtn . addEventListener ( "click" , ( ) => {
87+ book . read = ! book . read ;
88+ render ( ) ;
89+ } ) ;
90+ readCell . appendChild ( toggleBtn ) ;
91+
92+ const delBtn = document . createElement ( "button" ) ;
93+ delBtn . className = "btn btn-warning" ;
94+ delBtn . textContent = "Delete" ;
95+ delBtn . addEventListener ( "click" , ( ) => {
96+ myLibrary . splice ( index , 1 ) ;
97+ render ( ) ;
98+ showError ( `Deleted: ${ book . title } ) ;
99+ } ) ;
100+ deleteCell . appendChild ( delBtn ) ;
101+ } ) ;
123102}
124103
125- // Handle error messages
126104function showError ( message ) {
127- let errorMessCont = document . getElementById ( "errorMessage" ) ;
128- errorMessCont . textContent = message ;
129- errorMessCont . classList . add ( "show" ) ;
130-
131- setTimeout ( ( ) => {
132- errorMessCont . classList . remove ( "show" ) ;
133- } , 3000 ) ;
134- }
105+ errorBox . textContent = message ;
106+ errorBox . classList . add ( "show" ) ;
107+ setTimeout ( ( ) => errorBox . classList . remove ( "show" ) , 3000 ) ;
108+ }
0 commit comments