11let myLibrary = [ ] ;
22
3- window . addEventListener ( "load" , function ( e ) {
3+ window . addEventListener ( "load" , function ( ) {
44 populateStorage ( ) ;
55 render ( ) ;
66} ) ;
77
88function populateStorage ( ) {
9- if ( myLibrary . length == 0 ) {
10- let book1 = new Book ( "Robison Crusoe" , "Daniel Defoe" , "252" , true ) ;
9+ if ( myLibrary . length === 0 ) {
10+ let book1 = new Book ( "Robinson Crusoe" , "Daniel Defoe" , "252" , true ) ;
1111 let book2 = new Book (
1212 "The Old Man and the Sea" ,
1313 "Ernest Hemingway" ,
1414 "127" ,
1515 true
1616 ) ;
17- myLibrary . push ( book1 ) ;
18- myLibrary . push ( book2 ) ;
19- render ( ) ;
17+ myLibrary . push ( book1 , book2 ) ;
2018 }
2119}
2220
21+ // FORM INPUTS
2322const title = document . getElementById ( "title" ) ;
2423const author = document . getElementById ( "author" ) ;
2524const pages = document . getElementById ( "pages" ) ;
2625const check = document . getElementById ( "check" ) ;
2726
28- //check the right input from forms and if its ok -> add the new book (object in array)
29- //via Book function and start render function
27+ // ADD BOOK
3028function submit ( ) {
3129 if (
32- title . value == null ||
33- title . value == "" ||
34- pages . value == null ||
35- pages . value == ""
30+ title . value === "" ||
31+ author . value === "" ||
32+ pages . value === ""
3633 ) {
3734 alert ( "Please fill all fields!" ) ;
38- return false ;
39- } else {
40- let book = new Book ( title . value , title . value , pages . value , check . checked ) ;
41- library . push ( book ) ;
42- render ( ) ;
35+ return ;
4336 }
37+
38+ let book = new Book (
39+ title . value ,
40+ author . value , // ✅ FIXED (was using title twice)
41+ pages . value ,
42+ check . checked // ✅ FIXED (correct checkbox value)
43+ ) ;
44+
45+ myLibrary . push ( book ) ; // ✅ FIXED (was "library")
46+ render ( ) ;
4447}
4548
49+ // BOOK OBJECT
4650function Book ( title , author , pages , check ) {
4751 this . title = title ;
4852 this . author = author ;
4953 this . pages = pages ;
5054 this . check = check ;
5155}
5256
57+ // RENDER TABLE
5358function render ( ) {
5459 let table = document . getElementById ( "display" ) ;
60+
61+ // CLEAR OLD ROWS
5562 let rowsNumber = table . rows . length ;
56- //delete old table
57- for ( let n = rowsNumber - 1 ; n > 0 ; n -- {
63+ for ( let n = rowsNumber - 1 ; n > 0 ; n -- ) { // ✅ FIXED SYNTAX
5864 table . deleteRow ( n ) ;
5965 }
60- //insert updated row and cells
61- let length = myLibrary . length ;
62- for ( let i = 0 ; i < length ; i ++ ) {
66+
67+ // ADD ROWS
68+ for ( let i = 0 ; i < myLibrary . length ; i ++ ) {
6369 let row = table . insertRow ( 1 ) ;
70+
6471 let titleCell = row . insertCell ( 0 ) ;
6572 let authorCell = row . insertCell ( 1 ) ;
6673 let pagesCell = row . insertCell ( 2 ) ;
6774 let wasReadCell = row . insertCell ( 3 ) ;
6875 let deleteCell = row . insertCell ( 4 ) ;
76+
6977 titleCell . innerHTML = myLibrary [ i ] . title ;
7078 authorCell . innerHTML = myLibrary [ i ] . author ;
7179 pagesCell . innerHTML = myLibrary [ i ] . pages ;
7280
73- //add and wait for action for read/unread button
81+ // READ BUTTON
7482 let changeBut = document . createElement ( "button" ) ;
75- changeBut . id = i ;
7683 changeBut . className = "btn btn-success" ;
77- wasReadCell . appendChild ( changeBut ) ;
78- let readStatus = "" ;
79- if ( myLibrary [ i ] . check == false ) {
80- readStatus = "Yes" ;
81- } else {
82- readStatus = "No" ;
83- }
84+
85+ let readStatus = myLibrary [ i ] . check ? "Yes" : "No" ; // ✅ FIXED
8486 changeBut . innerText = readStatus ;
8587
8688 changeBut . addEventListener ( "click" , function ( ) {
8789 myLibrary [ i ] . check = ! myLibrary [ i ] . check ;
8890 render ( ) ;
8991 } ) ;
9092
91- //add delete button to every row and render again
92- let delButton = document . createElement ( "button" ) ;
93- delBut . id = i + 5 ;
94- deleteCell . appendChild ( delBut ) ;
93+ wasReadCell . appendChild ( changeBut ) ;
94+
95+ // DELETE BUTTON
96+ let delBut = document . createElement ( "button" ) ; // ✅ FIXED NAME
9597 delBut . className = "btn btn-warning" ;
9698 delBut . innerHTML = "Delete" ;
97- delBut . addEventListener ( "clicks" , function ( ) {
98- alert ( `You've deleted title: ${ myLibrary [ i ] . title } ) ;
99+
100+ delBut . addEventListener ( "click" , function ( ) { // ✅ FIXED EVENT
101+ alert ( `You've deleted: ${ myLibrary [ i ] . title } ) ;
99102 myLibrary . splice ( i , 1 ) ;
100103 render ( ) ;
101104 } ) ;
105+
106+ deleteCell . appendChild ( delBut ) ;
102107 }
103- }
108+ }
0 commit comments