index.html

<html>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <head>
        <link rel = 'stylesheet' href='style.css'>
    <title>My Library</title>
    <div id="pageTitleDiv">
    <video autoplay muted loop id ='myVideo'>
        <source src = 'resources/video.mp4' type='video/mp4'>
    </video>
    <h1 id = 'title'>My Library</h1>

    <h2 id = 'following'>Store information about books that you like...</h2>
    
    <button id="addBtn" class = "open-button" onclick='openForm()'>
        +
    </button>
</div>
</head>
<body>
    
<div id='booksPart'>
    <div id='blankFiller'><h1 id='fillerText'>Add your first book here</h1></div>
            <div id ='sampleBookBox'>
                <button id= 'removeBtn' class= 'remBtn'>
                    <img class='wastebucket' src="resources/wastebucket.png"/>
                </button>
                <p id='title'></p> 
                <p id='author'></p>
                <p id='page'></p>
                <div class='buttonContainer'>
                    <button class = 'decreasePage' id='bookBtn' >-</button>
                    <button class ='increasePage' id='bookBtn'>+</button>
                    <button class ="readBtn" id='bookBtn'>Read</button>
                </div>
            </div>

            
    </div>
    <div class='book-input-popup' id='myForm'>
        <form class='form-container'>
            <h1></h1>
            <label for='title'><b>Add a book</b></label>
            <input type="text" placeholder="Book title" id="Name" required>
            <input type="text" placeholder="Author's name" id="Author" required>
            <input type="number" placeholder="Page you're on" id="Page" required>
            <button type='submit' class='btn' onclick='closeForm()'>Submit</button>
            <button type='button' class='btn cancel' onclick="closeForm()">Close</button>
            
        </form>
    </div>
</body>
<script src="script.js">
   
</script>

</html>