BookListAPI_JS/index.html at main · wahabkame/BookListAPI_JS · 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


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BookList</title>
  <link rel="shortcut icon" href="res/favicon.ico">
  <link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma:400,600">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header class="header-section fixed-width">
    <h1>BookList</h1>
    <p>
      With this app you can create a list of books. Click "New book" to create a new book, then fill the form with
      book's information (title, author, year, ISBN and category). The new book will be displayed on the list. If
      you want to know more information about a book, just click the circle icon on the right side. To remove a book,
      just click the red cross.
    </p>
  </header>
  <section class="form-section fixed-width">
    <button id="new-book-btn" class="generic-button">New book</button>
    <form id="new-book-form">
      <p>
        <input id="new-book-title" class="user-input" type="text" placeholder="Title">
      </p>
      <p>
        <input id="new-book-author" class="user-input" type="text" placeholder="Author">
      </p>
      <p>
        <input id="new-book-year" class="user-input" type="text" placeholder="Year">
      </p>
      <p>
        <input id="new-book-isbn" class="user-input" type="text" placeholder="ISBN-10 or ISBN-13">
      </p>
      <p>
        <select id="new-book-category" class="user-input">
          <option value="" disabled selected>Select a category</option>
          <option value="arts-and-music">Arts &amp; Music</option>
          <option value="biography">Biography</option>
          <option value="business">Business</option>
          <option value="cooking">Cooking</option>
          <option value="educational">Educational</option>
          <option value="entertainment">Entertainment</option>
          <option value="health-and-fitness">Health &amp; Fitness</option>
          <option value="history">History</option>
          <option value="horror">Horror</option>
          <option value="kids">Kids</option>
          <option value="literature">Literature</option>
          <option value="medical">Medical</option>
          <option value="mysteries">Mysteries</option>
          <option value="political-affairs">Political affairs</option>
          <option value="religion">Religion</option>
          <option value="romance">Romance</option>
          <option value="science-and-math">Science &amp; Math</option>
          <option value="social-sciences">Social Sciences</option>
          <option value="sports">Sports</option>
          <option value="technolgy">Technology</option>
        </select>
      </p>
      <button id="add-book-btn" type="submit" class="generic-button">Add book</button>
      <div id="error-message" class="error-message"></div>
    </form>
  </section>
  <section class="book-list-section fixed-width">
    <ul id="book-list"></ul>
  </section>
  <script src="script.js"></script>
</body>

</html>