├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |Harry is an orphan living with his abusive aunt and uncle, Vernon and Petunia Dursley and their bullying son, Dudley. On his eleventh birthday, Harry discovers he is a wizard when Rubeus Hagrid delivers him an acceptance letter to Hogwarts School of Witchcraft and Wizardry.
21 |${bookdescriptioninput.value}
27 | ` 28 | container.append(div) 29 | popupoverlay.style.display="none" 30 | popupbox.style.display="none" 31 | }) 32 | 33 | function deletebook(event){ 34 | event.target.parentElement.remove() 35 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding: 0%; 4 | } 5 | body{ 6 | font-family: 'Popins',sans-serif; 7 | } 8 | .navbar{ 9 | background-color: #FD6569; 10 | padding: 10px; 11 | } 12 | .container{ 13 | padding: 40px; 14 | } 15 | .book-container{ 16 | padding: 15px; 17 | width: 25%; 18 | background-color: black; 19 | color: white; 20 | border-radius: 10px; 21 | margin: 30px; 22 | display: inline-block; 23 | vertical-align: top; 24 | } 25 | .book-container h1{ 26 | color: #FD6569; 27 | } 28 | .book-container h2{ 29 | margin-top: 10px;; 30 | } 31 | .book-container button{ 32 | background-color: #FD6569; 33 | color: black; 34 | border-radius: 10px; 35 | padding-top: 8px; 36 | padding-bottom: 5px; 37 | padding-left: 10px; 38 | padding-right: 10px; 39 | border: none; 40 | margin-top: 10px; 41 | } 42 | .add-button{ 43 | background-color: #FD6569; 44 | color: black; 45 | border-radius: 100%; 46 | padding-top: 20px; 47 | padding-bottom: 20px; 48 | padding-left: 30px; 49 | padding-right: 30px; 50 | font-size: 40px; 51 | border: none; 52 | position: fixed; 53 | bottom: 30px; 54 | right: 30px; 55 | } 56 | .popupoverlay{ 57 | background-color: black; 58 | opacity: 0.8; 59 | position: absolute; 60 | width: 100%; 61 | height: 100%; 62 | top: 0; 63 | left:0; 64 | z-index:1; 65 | display: none; 66 | } 67 | .popupbox{ 68 | background-color: #FD6569; 69 | width: 40%; 70 | padding: 40px; 71 | border-radius: 10px; 72 | position: absolute; 73 | top: 20%; 74 | left: 30%; 75 | z-index:2; 76 | display: none; 77 | } 78 | .popupbox input{ 79 | background:transparent; 80 | border: none; 81 | width:100%; 82 | margin: 5px; 83 | padding: 5px; 84 | font-size: 20px; 85 | border-bottom: solid black 2px; 86 | } 87 | .popupbox textarea{ 88 | background:transparent; 89 | width:100%; 90 | margin: 5px; 91 | padding: 5px; 92 | font-size: 20px; 93 | border: solid black 2px; 94 | } 95 | .popupbox input::placeholder{ 96 | color: black; 97 | } 98 | .popupbox textarea::placeholder{ 99 | color: black; 100 | } 101 | .popupbox button{ 102 | background-color: black; 103 | padding-left: 20px; 104 | padding-right: 20px; 105 | border:none; 106 | padding-top: 10px; 107 | padding-bottom: 10px; 108 | color: white; 109 | margin: 5px; 110 | } 111 | .popupbox input:focus{ 112 | outline: none; 113 | } 114 | .popupbox textarea:focus{ 115 | outline: none; 116 | } --------------------------------------------------------------------------------