my-books-ES6/index.html at dev · Alejandroq12/my-books-ES6 · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Awesome Books with JavaScript, CSS, and HTML">
  <meta name="keywords" content="JavaScript, Good practices, CSS, HTML, ES6, Objects, Arrays">
  <meta name="author" content="Julio Quezada">
  <link rel="stylesheet" href="./assets/css/index.css">
  <title>My Books</title>
</head>

<body>
  <header>
    <h1 class="logo">My Books</h1>
    <nav>
      <ul>
      <li id="navBooks" class="navButton" tabindex="0">Books</li>
      <li id="navAddBook" class="navButton" tabindex="0">Add Book</li>
      <li id="navContact" class="navButton" tabindex="0">Contact</li>
    </ul>
    </nav>
  </header>
  <div class="date">
  <div class="live-date"></div>
</div>
  <main>
    <section id="booksSection" class="contentSection">
      <div class="container title">
        <h1 class="books-section__h1" tabindex="0">My Books</h1>
      </div>
      <div class="booksContainer" id="bookList">
      </div>
      <template id="bookInfoTemplate">
        <div class="book">
          <div class="bookTitleAuthor">
            <h4 tabindex="0"></h4>
            <span>by</span>
            <p tabindex="0"></p>
          </div>
          <button type="submit" aria-label="Remove books" class="removeButton" tabindex="0">Remove</button>
        </div>
      </template>
    </section>
    <section id="addBookSection" class="contentSection hidden">
      <div class="container addBookForm">
        <h2 class="add-books__h2" tabindex="0">Add A New Book</h2>
        <form>
          <input type="text" id="bookTitle" placeholder="Book Title" tabindex="0"><br />
          <input type="text" id="bookAuthor" placeholder="Author Name" tabindex="0"><br />
          <div id="success-message" class="success-message"></div>
          <button type="submit" aria-label="Add books" id="addBookButton" tabindex="0">Add Book</button>
          <div id="error-message" class="error-message"></div>
        </form>
      </div>
    </section>
    <section id="contactSection" class="contentSection hidden">
      <div class="container">
        <h2 class="contact-section__h2" tabindex="0">Contact Us</h2>
        <p class="contact-section__p" tabindex="0">Email: example@example.com</p>
        <p class="contact-section__p" tabindex="0">Phone: +1 234  8900</p>
        <p class="contact-section__p" tabindex="0">Address: 1234 Book Street</p>
      </div>
    </section>
  </main>
  <footer>
    <p tabindex="0"> Julio Quezada - Full Stack Web Developer &copy; 2023</p>
  </footer>
  <script type="module" src="./index.js"></script>
</body>

</html>