feat: modal base styling complete

library/css/style.css

@@ -1,5 +1,18 @@
 :root {
     --background-color: #000000; 
+    --spacing-sm: 16px;
+    --spacing-md: 20px;
+}
+
+body, html {
+    font-size: 16px;
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+}
+
+button {
+    font-size: 1.3rem;
 }
 
 .container {
@@ -52,22 +65,51 @@
 .modal {
     display: flex;
     flex-direction: column;
-    min-height: 50vh;
+    min-height: 43vh;
     min-width: 20vw;
     border: none;
+    padding: 20px 40px;
 }
 
 .form {
     display: flex;
     flex-direction: column;
+    gap: 10px;
+}
+
+.form input {
+    min-height: 2.2rem;
+    font-size: 1.2rem;
 }
 
 .form-header {
+    margin-top: 10px;
     display: flex;
     justify-content: space-around;
 }
 
+.form-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+.form-item input {
+    transform: scale(1.5);
+}
+
+.form-item label {
+    font-weight: 500;
+    font-size: 1.3rem;
+}
+
+
 .close-btn {
     height: 30px;
     align-self: center;
 }
+
+.btn {
+    padding: var(--spacing-sm) var(--spacing-md);
+}

library/index.html

@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" 
         href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <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=Roboto:ital,wght@0,500;0,700;0,900;1,500;1,700;1,900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/style.css">
     <title>Anonymous Library</title>
 </head>
@@ -27,14 +30,16 @@
     </div>
         <dialog class="modal">
                 <div class="form-header">
-                    <h1 class="form-header">Add Book</h1>
+                    <h1 class="form-header">Add New Book</h1>
-                    <button class="btn close-btn">
+                    <button class="close-btn">
                         <span class="material-symbols-outlined">close</span>                
                     </button>
                 </div>
-                <form action="" class="form">
+                <form action="dialog" class="form">
-                    <input type="text" name="title" id="title">
+                    <input type="text" name="title" id="title" placeholder="Book title"
-                    <input type="text" name="author" id="author">
+                    required>
+                    <input type="text" name="author" id="author" placeholder="Author"
+                    required>
                     <div class="form-item">
                         <label for="checkbox">Have you read the book?</label>
                         <input type="checkbox" id="read-button">

library/js/script.js

@@ -88,6 +88,10 @@ submitButton.addEventListener('click', event => {
   const readBtn = document.querySelector('#read-button').value;
   const bookIsRead = readBtn === 'on' ? true : false;
 
+  if (author === "" || title === "") {
+    return
+  }
+
   // create book object
   const newBook = new Book(title, author, bookIsRead);