improve library project

in this project I added the **animation** to the modal of adding a book

JavaScript-exercises/Library/index.html

@@ -61,7 +61,7 @@ <h2>Add New book</h2>
 
             <div class="btns">
                 <button class="btn" type="submit" data-add>Add</button>
-                <button class="btn" data-cancel>Cancel</button>
+                <button class="btn" type="button" data-cancel>Cancel</button>
             </div>
 
         </form>

JavaScript-exercises/Library/script.js

@@ -23,6 +23,8 @@ const bookLists = document.querySelector(".book-lists");
 const lastChild = document.querySelector(".add-book");
 
 
+
+
 // This array is for storing the books
 let itemArr = [];
 
@@ -31,29 +33,37 @@ openModal.addEventListener('click', () => {
     title.value = "";
     author.value = "";
     pages.value = "";
+    modal.style.animationName = 'showModal'
     modal.showModal();
 
 });
 
 addbtn.addEventListener("click", () => {
     if (title.value !== "" && author.value !== "" && pages.value !== "") {
+
         const state = getSelectedRadioValue();
         const book = new Book(title.value, author.value, pages.value, state === '1' ? true : false);
+
         itemArr.push(createItem(book.title, book.author, book.pages, book.state ? "Read" : "Unread"));
 
-
         /* This is iterating over each item in the `itemArr` array and inserting each item
         into the `bookLists` element before the `lastChild` element. This means that for each item in
         the `itemArr`, it is being added to the list of books displayed on the webpage before the
         "Add Book" button. */
+
         itemArr.forEach(item => {
             bookLists.insertBefore(item, lastChild);
         })
+
     }
 })
 
 cancel.addEventListener('click', () => {
-    modal.close();
+
+    modal.style.animationName = 'closeModal'
+       setTimeout(() => {
+        modal.close()
+       }, 690);
 
 });
 

JavaScript-exercises/Library/style.css

@@ -183,8 +183,43 @@ body {
 }
 
 .modal {
-
     border: none;
+
+}
+
+
+.modal.animate{
+    transform: translateY(-100%);
+    opacity: 0;
+    animation: apear 0.7s ease-in-out forwards;
+}
+
+.modal{
+    animation-duration: 0.7s;
+
+}
+
+
+@keyframes showModal {
+    from{
+        opacity: 0; 
+        transform: translateY(-300px);
+    } 
+    to{
+        opacity: 1;
+        transform: translateY(0);
+    }               
+}
+
+@keyframes closeModal {
+    from{
+        opacity: 1;
+        transform: translateY(0);
+    } to{
+        opacity: 0;
+        transform: translateY(-300px);
+    }
+
 }
 
 .modal::backdrop {