javascript-library/index.html at master · juanbrk/javascript-library · 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
<html>
    <head>
        <title>Javascript library</title>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="./style.css">
        <link rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css", integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z", crossorigin="anonymous">
        <script src="bundle.js"></script>
    </head>
</html>
<body>
    <section class="jumbotron text-center">
        <div class="container">
            <h1>Javascript Library</h1>
            <p class="lead text-muted">
                Let’s extend the ‘Book’ example from the previous lesson and turn it into a small Library app.
            </p>
            <p>
                <a href="#book-form" class="btn btn-primary my-2" id="newBook">+ Add a book</a>
                <a href="#main" class="btn btn-secondary my-2">See all books</a>
            </p>
        </div>
    </section>
    <main id="main">
        <div class="album py-5 bg-light">
            <div class="container">
                <div class="row" id="albumRow">

                </div>
            </div>
        </div>
    </main>
    <section id="book-form">
        <div class="container">
            <h1 class="modal-title">Add Book</h1>
            <form id="new-book-form">
                <div class="form-group">
                  <label for="book-title">Title</label>
                  <input type="text" class="form-control" id="book-title" required>
                </div>
                <div class="form-group">
                  <label for="book-author">Author</label>
                  <input type="text" class="form-control" id="book-author" required>
                </div>
                <div class="form-group">
                  <label for="book-pages">Number of pages</label>
                  <input type="text" class="form-control" id="book-pages" required>
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="read-book-check">
                    <label class="form-check-label" for="read-book-check">I've read the book</label>
                  </div>
                <div class="form-group text-center">
                    <button type="button" id="cancel-btn" class="btn btn-secondary">Cancel</button>
                    <button type="button" id="submit-btn" class="btn btn-primary">Add book</button>
                </div>
              </form>
        </div>
    </section>
    <script src="index.js">
    </script>
</body>