bookShelf/script.js at master · Ahmed-aed/bookShelf · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
var bookShelf = document.querySelector('.bookShelf')
var books = [
    {
        title: " My Conversations with Chimpanzees",
        author: " Roger Fouts",
        image: "./book1.jpg"
    },
    {
        title: "Dance with Dragons",
        author: " George R.R. Martin",
        image: "./book2.jpg"
    }, {
        title: "Harry Potter and the Goblet of Fire",
        author: " J.K. Rowling Doe",
        image: "./book3.jpg"
    }, {
        title: "City of Girls",
        author: "Elizabeth Gilbert",
        image: "./book4.jpg"
    },
]

for(var i=0; i < books.length; i++) {
    var bookDiv = document.createElement('div')
    bookDiv.classList.add('book')

    var title = document.createElement('h3')
    var author = document.createElement('h4')
    var image = document.createElement('img')

    title.textContent = books[i].title
    author.textContent = books[i].author
    image.src = books[i].image

    bookDiv.appendChild(image)
    bookDiv.appendChild(title)
    bookDiv.appendChild(author)
    bookShelf.appendChild(bookDiv)
}
var newBook = {
    title: "",
    author: "",
    image: ""
}
var newBookBtn = document.querySelector('.newBookBtn')
var form = document.querySelector('#form')

newBookBtn.addEventListener('click', function (e) {
    form.classList.remove('hideForm')
})

var addBtn = document.querySelector('.addBtn')
var title = document.querySelector('#title')
var author = document.querySelector('#author')
var image = document.querySelector('#image')

title.addEventListener('keyup', function (e) {
    newBook.title = e.target.value
})

author.addEventListener('keyup', function (e) {
    newBook.author = e.target.value
})

image.addEventListener('keyup', function (e) {
    newBook.image = e.target.value
})

addBtn.addEventListener('click', function (e) {
    e.preventDefault()
    books.push(newBook)
    bookShelf.textContent = ""
    for(var i=0; i < books.length; i++) {
        var bookDiv = document.createElement('div')
        bookDiv.classList.add('book')

        var title = document.createElement('h3')
        var author = document.createElement('h4')
        var image = document.createElement('img')

        title.textContent = books[i].title
        author.textContent = books[i].author
        image.src = books[i].image

        bookDiv.appendChild(image)
        bookDiv.appendChild(title)
        bookDiv.appendChild(author)
        bookShelf.appendChild(bookDiv)
    }
})