├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bookfolio 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Bookfolio

15 |
16 |
17 |
18 |

HARRY POTTER

19 |

J.K.Rowling

20 |

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 |
22 | 23 |
24 |
25 |
26 |

Add Book

27 |
28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var popupoverlay=document.querySelector(".popupoverlay") 2 | var popupbox=document.querySelector(".popupbox") 3 | var addpopupbutton=document.getElementById("add-popup-button") 4 | 5 | addpopupbutton.addEventListener("click",function(){ 6 | popupoverlay.style.display="block" 7 | popupbox.style.display="block" 8 | }) 9 | var cancelpopup=document.getElementById("cancel-popup") 10 | cancelpopup.addEventListener("click",function(){ 11 | event.preventDefault() 12 | popupoverlay.style.display="none" 13 | popupbox.style.display="none" 14 | }) 15 | var container=document.querySelector(".container") 16 | var addbook=document.getElementById("add-book") 17 | var booktitleinput=document.getElementById("book-title-input") 18 | var bookauthorinput=document.getElementById("book-author-input") 19 | var bookdescriptioninput=document.getElementById("book-description-input") 20 | addbook.addEventListener("click",function(){ 21 | event.preventDefault() 22 | var div=document.createElement("div") 23 | div.setAttribute("class","book-container") 24 | div.innerHTML=`

${booktitleinput.value}

25 |

${bookauthorinput.value}

26 |

${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 | } --------------------------------------------------------------------------------