page_2.html

<!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">
    <title>Library App</title>
    <meta name="author" content="Harmeet Matharoo">
    <link rel="icon" sizes="32x32" href="images/book-icon.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    
    <link href="styles_page_2.css" rel="stylesheet" id="light-theme-link">
    <!-- <link rel="stylesheet" id="light-theme-link" href="styles-light.css"> -->
</head>
<body>

    <div class="container-div">

        <div class="page-2">
            <div class="heading-div">
                <div class="logo">
                    <a href="https://github.com/hmjatt">
                        <img src="images/id-logo.png" alt="github-logo">
                    </a>
                </div>
                <div class="greetings">
                    <h1>Hi Harmeet</h1>
                </div>
                <div class="search">
                    <div class="input-div">
                        <input type="text" id="search-item" class="input-ele" placeholder="Search Title" oninput="search()">
                
                        
                    </div>
                    
                </div>
                <div class="dark-mode">
                    <button id="theme-toggle"></button>
                </div>
            </div>
    

            <div class="filter-div">
                <div class="all-filter-div">
                    <a href="#" id="all-link"><h4>&nbsp; &nbsp; All &nbsp; &nbsp;</h4></a>
                </div>
                <div class="favorite-filter-div">
                    <a href="#" id="favorite-link"><h4>Favorite</h4></a>
                </div>
            </div>
    
            <div class="books-div" id="books-div-id">
                <div class="book notFav">
                    <div class="image-div">

                        <div id="remove-book">
                            <button id="remove-book-btn" class="remove-book-class" onclick="removeBookFxnContent()" type="button"><img src="images/cancel.png" alt="cancel"></button>
                        </div>

                        <h2>The Pragmatic Programmer</h2>
                        <h3>David Thomas, Andrew Hunt</h3>
                        <img class="book-cover" src="images/Prag-prog.jpg" alt="Prag-prog">

                        <div class="read-div">
                            <label class="read-container">Read
                                <input type="checkbox">
                                <span class="checkmark"></span>
                            </label>
                        </div>

                        <div class="notes-div">
                            <button class="notes-btn" onclick="addNotesFxnContent()">Take Notes</button>
                            <input type="text" name="popup"  class="hide note-input">
                            <button onclick="showNotesFxnContent()" class="hide add-notes-btn">Add</button>
                            <p class="note-para"></p>
                        </div>
                    
                        <div class="pages-div">
                            <p>Pages: 352</p>
                        </div>
            
                        <div class="fav-svg-div">
                            <button class="fav-btn" onclick="addBookToFavContent()">
                                <img class="fav-svg" src="images/svgs/star-svg.svg" alt="add-favorite">
                            </button>
                        </div>
                        
                    </div>

                </div>

                <div class="book notFav">
                    <div class="image-div">

                        <div id="remove-book">
                            <button id="remove-book-btn" class="remove-book-class" onclick="removeBookFxnContent()" type="button"><img src="images/cancel.png" alt="cancel"></button>
                        </div>

                        <h2>Data Structures and Algorithms Made Easy</h2>
                        <h3>Narasimha Karumanchi</h3>
                        <img class="book-cover" src="images/data-structures.jpg" alt="data-structures">
                        
                        <div class="read-div">
                            <label class="read-container">Read
                                <input type="checkbox">
                                <span class="checkmark"></span>
                            </label>
                        </div>

                        <div class="notes-div">
                            <button class="notes-btn" onclick="addNotesFxnContent()">Take Notes</button>
                            <input type="text" name="popup"  class="hide note-input">
                            <button class="hide add-notes-btn" onclick="showNotesFxnContent()">Add</button>
                            <p class="note-para"></p>
                        </div>

                        <div class="pages-div">
                            <p>Pages: 415</p>
                        </div>

                        <div class="fav-svg-div">
                            <button class="fav-btn" onclick="addBookToFavContent()">
                                <img class="fav-svg" src="images/svgs/star-svg.svg" alt="add-favorite">
                            </button>
                        </div>

                    </div>
     
                </div>


                <div class="book notFav">
                    <div class="image-div">

                        <div id="remove-book">
                            <button id="remove-book-btn" class="remove-book-class" onclick="removeBookFxnContent()" type="button"><img src="images/cancel.png" alt="cancel"></button>
                        </div>

                        <h2>Cracking the Coding Interview</h2>
                        <h3>Gayle Laakmann McDowell</h3>
                        <img class="book-cover" src="images/cracking-interview.jpg" alt="cracking-coding-interview">
                        
                        <div class="read-div">
                            <label class="read-container">Read
                                <input type="checkbox">
                                <span class="checkmark"></span>
                            </label>
                        </div>

                        <div class="notes-div">
                            <button class="notes-btn" onclick="addNotesFxnContent()">Take Notes</button>
                            <input type="text" name="popup"  class="hide note-input">
                            <button class="hide add-notes-btn" onclick="showNotesFxnContent()">Add</button>
                            <p class="note-para"></p>
                        </div>

                        <div class="pages-div">
                            <p>Pages: 706</p>
                        </div>

                        <div class="fav-svg-div">
                            <button class="fav-btn" onclick="addBookToFavContent()">
                                <img class="fav-svg" src="images/svgs/star-svg.svg" alt="add-favorite">
                            </button>
                        </div>

                    </div>
                </div>
            
                
            </div>
         
        </div> 

        <div class="add-book-div">
            <button id="add-book"><img src="images/svgs/add-svg.svg" alt="add-book"></button>
            <div id="form-div" class="hide">
                <form id="form-ele" action="#" method="get">
                        
                    <div class="form-bg">

                        <div id="remove-form">
                            <button id="remove-form-btn" type="button"><img src="images/cancel.png" alt="cancel"></button>
                        </div>

                            <div class="spacing">
                                <div class="label-div"><label for="title">Title</label></div>
                                <div><input type="text" name="title" id="title-input" required></div>
                            </div>

                            <div class="spacing">
                                <div class="label-div"><label for="author">Author</label></div>
                                <div><input type="text" name="author" id="author-input" required></div>
                            </div>

                            <div class="spacing">
                                <div class="label-div"><label for="pages">Pages</label></div>
                                <div><input type="number" id="pages-input" name="pages" min="1" required></div>
                            </div>

                            <div class="spacing">
                                <div class="label-div"><label for="url">Book Cover URL</label></div>
                                <div>
                                    <input type="text" name="url" id="url-input"  value="images/Mandala-min.png" >
                                </div>
                            </div>


                        </div>
                    
                        <div class="form-sbmt">
                            <button id="add-book-btn" type="submit">Add Book</button>
                        </div>

                    </div>
    
                    
                </form>
            </div>
        </div>

    </div>
    

    <script src="script.js"></script>
</body>
</html>