Library_App/index.html at main · gitmprasanth/Library_App · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Library APP</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">
        @layer components{
            .input{
                @apply px-4 py-2 rounded bg-gray-100 outline-none w-full

            }
        }

    </style>

</head>
<body class="bg-indigo-800 p-10">
    <div class="bg-white p-5 rounded max-w-xl mx-auto">
        <h4 class="font-semibold text-xl">Book Library</h4>
        <form class="space-y-3 mt-3" name="BookForm">
            <input type="text" id="bookTitle" placeholder="Book Title" class="input" required>
            <input type="text" id="bookAuthor" placeholder="Book Author" class="input" required>
            <button type="submit" class="px-3 py-1 bg-orange-500 text-white text-sm uppercase rounded font-semibold">Save</button>
        </form>

    </div>
  <!-- added book section -->
    <section class="bg-white p-5 rounded max-w-xl mx-auto mt-5">
        <h4 class="font-semibold text-xl">Added books(<span id="bookCount">0</span>)</h4>
        <ul class="mt-3 space-y-2" id="renderedLibrary">

        </ul>

    </section>
    <script src="./assets/js/book.js"></script>
    <script src="./assets/js/library.js"></script>
    <script src="./assets/js/main.js"></script>
</body>
</html>