finalprojectapi/index.html at master · jonathanleibovici/finalprojectapi · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
  <link rel="stylesheet" href="css/style.css" />

  <title>Book List</title>
</head>

<body onload='typeWriter()'>

  <p class="font-weight-bolder text-center text-success" id='demo'></p>

  <div class="container py-5">

    <div id="loader">
      <h4>Loading the Page progress bar here...</h4>
    </div>
    <div id="your-page" style="display:none;">
      <!-- jumbotron-->

      <div class="jumbotron">
        <div class="container text-center">
          <h1 class="display-2">My Books Collection</h1>

        </div>
      </div>
    </div>
      <div id="target" class="row">

        <div id="book-list-loader" class="loader"></div>
        <div class="col">
          <ul id="book-list" class="list-group"></ul>
        </div>

        <div id="card-container" class="card" style="display:none;">
          <div id="cover">
            <div id="book-meta-loader" class="loader"></div>
          </div>

          <ul class="list-group list-group-flush">

            <li class="list-group-item ">
              <h5 id="title" class="card-title"></h5>
            </li>

            <li class="list-group-item">
              <p id="author" class="card-text"></p>
            </li>

            <li id="pages" class="list-group-item"></li>

            <li id="year" class="list-group-item"></li>

            <li id="country" class="list-group-item"></li>

            <li id="language" class="list-group-item"></li>

            <li id="id" class="list-group-item"></li>
          </ul>

          <div class="card-body">
            <a id="link" href="#" class="card-link"></a>

          </div>
        </div>

      </div>
    </div>
    <!-- <div class="hiddenform container col-12 py-3  " id="something">
        <form method="get" action="yourpage/" id="customForm">

            <div class="row text-center ">
              <div class="formDivInputs justify-content-center">
                <input class=" text-center" type="text" name="input1" placeholder="First Name" />
                <input class=" text-center" type="text" name="input2" placeholder="Last Name " />
              </div>
              <textarea class="col  justify-content-center text-center" placeholder="tell me what book your like and or what book you like from my collection!"></textarea>
            </div>


        </form>
        <button id="submit">SubmitForm</button>

      </div> -->
      <form class="hiddenform container" action="yourpage" id="something">
        <div class="row mt-2">
          <div class="col">
            <input type="text" class="form-control" id="first-name-input" placeholder="First Name">
          </div>
          <div class="col">
            <input type="text" class="form-control" id="last-name-input" placeholder="Last Name">
          </div>
        </div>
        <div class="row mt-2">
          <div class="col">
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>
        </div>
        <div class="row mt-2">
          <div class="col">
            <button id="submit" type="submit" class="w-100 btn btn-primary">Submit</button>
          </div>
        </div>
      </form>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/script.js"></script>

</body>

</html>