├── scripts
    ├── index.js
    ├── firebase.js
    ├── signin.js
    ├── signup.js
    └── home.js
├── index.html
├── home.html
├── signin.html
└── signup.html


/scripts/index.js:
--------------------------------------------------------------------------------
1 | import { renderBlogs } from "./home.js";
2 | renderBlogs();


--------------------------------------------------------------------------------
/scripts/firebase.js:
--------------------------------------------------------------------------------
 1 | import { initializeApp } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-app.js";
 2 | import { getAuth } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-auth.js";
 3 | import { getFirestore } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-firestore.js";
 4 | 
 5 | // My web app's Firebase configuration
 6 | const firebaseConfig = {
 7 |     apiKey: "AIzaSyAu5yHHFVN6n8qk_mWJioo1btbrDBJl1Nw",
 8 |     authDomain: "blogging-site-c7224.firebaseapp.com",
 9 |     projectId: "blogging-site-c7224",
10 |     storageBucket: "blogging-site-c7224.appspot.com",
11 |     messagingSenderId: "288811689646",
12 |     appId: "1:288811689646:web:e5fa5b9fb51f2760646f3f",
13 |     measurementId: "G-GFZJRRT55C"
14 | };
15 | 
16 | // Initialize Firebase
17 | const app = initializeApp(firebaseConfig);
18 | export const auth = getAuth(app);
19 | export const db = getFirestore(app);


--------------------------------------------------------------------------------
/scripts/signin.js:
--------------------------------------------------------------------------------
 1 | import { signInWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/10.13.0/firebase-auth.js'
 2 | import { auth } from './firebase.js'
 3 | 
 4 | // For Getting User Details From HTML
 5 | const signIn = document.querySelector("#sign-in");
 6 | const email = document.querySelector("#email");
 7 | const password = document.querySelector("#password");
 8 | 
 9 | // Functionality For Login 
10 | signIn.addEventListener("submit", (event) => {
11 |     event.preventDefault();
12 |     // Checking If User Enters a Details Or Not 
13 |     if (email.value && password.value) {
14 |         signInWithEmailAndPassword(auth, email.value, password.value)
15 |             .then((userCredential) => {
16 |                 // For Opening Index Page If Successfull Login
17 |                 window.open("home.html", "_self");
18 |             })
19 |             .catch((error) => {
20 |                 const errorCode = error.code;
21 |                 const errorMessage = error.message;
22 |                 alert(errorCode, errorMessage);
23 |             });
24 | 
25 |         // For Empty Input
26 |         email.value = "";
27 |         password.value = "";
28 |     } else {
29 |         // For User Not Enters Any Details
30 |         my_modal_1.showModal();
31 |     }
32 | })
33 | 
34 | 


--------------------------------------------------------------------------------
/scripts/signup.js:
--------------------------------------------------------------------------------
 1 | import { createUserWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/10.13.0/firebase-auth.js'
 2 | import { auth } from './firebase.js'
 3 | 
 4 | // For Getting User Details From HTML
 5 | const signUpForm = document.querySelector("#signup-form");
 6 | const username = document.querySelector("#name");
 7 | const email = document.querySelector("#email");
 8 | const password = document.querySelector("#password");
 9 | 
10 | // Functionality For Registration
11 | signUpForm.addEventListener("submit", (event) => {
12 |     event.preventDefault();
13 |     // Checking If User Enters a Details Or Not 
14 |     if (email.value && password.value) {
15 |         createUserWithEmailAndPassword(auth, email.value, password.value)
16 |             .then((userCredential) => {
17 |                 const user = userCredential.user;
18 |                 console.log(user.uid);
19 |             })
20 |             .catch((error) => {
21 |                 const errorCode = error.code;
22 |                 const errorMessage = error.message;
23 |                 alert(errorCode, errorMessage);
24 |             });
25 | 
26 |         // For Empty Input
27 |         username.value = "";
28 |         email.value = "";
29 |         password.value = "";
30 | 
31 |         // For Showing Popup Of Successfull Registration
32 |         my_modal_2.showModal();
33 |     } else {
34 |         // For User Not Enters Any Details
35 |         my_modal_1.showModal();
36 |     }
37 | })
38 | 


--------------------------------------------------------------------------------
/scripts/home.js:
--------------------------------------------------------------------------------
 1 | import { signOut, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.22.2/firebase-auth.js';
 2 | import { collection, addDoc, query, orderBy, onSnapshot, deleteDoc, doc } from 'https://www.gstatic.com/firebasejs/10.13.0/firebase-firestore.js';
 3 | import { auth, db } from './firebase.js';
 4 | 
 5 | const blogsContainer = document.getElementById('blogsContainer');
 6 | 
 7 | export function renderBlogs(blogs) {
 8 |     blogsContainer.innerHTML = '';
 9 |     blogs.forEach(blog => {
10 |         const blogDiv = document.createElement('div');
11 |         blogDiv.className = 'bg-gray-50 p-4 rounded-lg shadow-md mb-5';
12 |         blogDiv.innerHTML = `
13 |       <h3 class="text-lg font-semibold">${blog.title}</h3>
14 |       <p class="mt-2">${blog.body}</p>
15 |       <small class="block mt-2 text-gray-500">${blog.date.toDate().toLocaleString()}</small>
16 |       <div class="mt-4 flex space-x-2">
17 |         <button onclick="deleteBlog('${blog.id}')" class="bg-red-600 text-white px-3 py-1 rounded hover:bg-red-700">Delete</button>
18 |       </div>
19 |     `;
20 |         blogsContainer.appendChild(blogDiv);
21 |     });
22 | }
23 | 
24 | onAuthStateChanged(auth, (user) => {
25 |     if (user) {
26 |         const q = query(collection(db, 'blogs'), orderBy('date', 'desc'));
27 |         onSnapshot(q, (querySnapshot) => {
28 |             const blogs = querySnapshot.docs.map(doc => ({
29 |                 id: doc.id,
30 |                 ...doc.data()
31 |             }));
32 |             renderBlogs(blogs);
33 |         });
34 |     } else {
35 |         window.open("signin.html", "_self");
36 |     }
37 | });
38 | 
39 | document.getElementById('newBlogForm').addEventListener('submit', async (event) => {
40 |     event.preventDefault();
41 | 
42 |     const title = document.getElementById('title').value;
43 |     const body = document.getElementById('body').value;
44 | 
45 |     try {
46 |         await addDoc(collection(db, 'blogs'), {
47 |             title,
48 |             body,
49 |             date: new Date(),
50 |             userId: auth.currentUser.uid
51 |         });
52 |         document.getElementById('newBlogForm').reset();
53 |     } catch (error) {
54 |         console.error(error);
55 |     }
56 | });
57 | 
58 | document.deleteBlog = async (id) => {
59 |     try {
60 |         await deleteDoc(doc(db, 'blogs', id));
61 |     } catch (error) {
62 |         console.error(error);
63 |     }
64 | };
65 | 
66 | // For Signing Out User
67 | const signOutUser = document.querySelector("#sign-out");
68 | signOutUser.addEventListener("click", (event) => {
69 |     event.preventDefault();
70 |     signOut(auth).then(() => {
71 |         window.open("signin.html", "_self");
72 |     }).catch((error) => {
73 |         alert(error);
74 |     });
75 | })
76 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" data-theme="light">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Blogging Site</title>
 8 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
 9 | </head>
10 | 
11 | <body>
12 | 
13 |      <!-- Navbar -->
14 |      <div class="navbar bg-primary static top-0 p-0 pr-3">
15 |         <div class="navbar text-primary-content">
16 |             <button class="btn btn-ghost text-2xl text-white">Personal Blogging Site</button>
17 |         </div>
18 |         <div class="w-48">
19 |             <!-- For Logout Button -->
20 |             <div class="w-24">
21 |                 <button class="btn" id="sign-out"><a href="./signin.html">Sign In</a></button>
22 |             </div>
23 |             <!-- For Theme Controller -->
24 |             <div class="dropdown p-1">
25 |                 <div tabindex="0" role="button" class="btn w-24">
26 |                     Theme
27 |                     <svg width="12px" height="12px" class="inline-block h-2 w-2 fill-current opacity-60"
28 |                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
29 |                         <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
30 |                     </svg>
31 |                 </div>
32 |                 <ul tabindex="0" class="dropdown-content bg-base-300 rounded-box z-[1] p-2 shadow-2xl">
33 |                     <li>
34 |                         <input type="radio" name="theme-dropdown"
35 |                             class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Default"
36 |                             value="default" />
37 |                     </li>
38 |                     <li>
39 |                         <input type="radio" name="theme-dropdown"
40 |                             class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Retro"
41 |                             value="retro" />
42 |                     </li>
43 |                     <li>
44 |                         <input type="radio" name="theme-dropdown"
45 |                             class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Cyberpunk"
46 |                             value="cyberpunk" />
47 |                     </li>
48 |                     <li>
49 |                         <input type="radio" name="theme-dropdown"
50 |                             class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Valentine"
51 |                             value="valentine" />
52 |                     </li>
53 |                     <li>
54 |                         <input type="radio" name="theme-dropdown"
55 |                             class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Aqua"
56 |                             value="aqua" />
57 |                     </li>
58 |                 </ul>
59 |             </div>
60 |         </div>
61 |     </div>
62 | 
63 |     <!-- Render All Blogs -->
64 |     <section class="bg-white p-6 rounded-lg shadow-lg">
65 |         <h2 class="text-xl font-bold mb-4">All Blogs</h2>
66 |         <div id="blogsContainer" class="space-y-4"></div>
67 |     </section>
68 | 
69 |     <script type="module" src="./scripts/index.js"></script>
70 |     <script src="https://cdn.tailwindcss.com"></script>
71 | </body>
72 | 
73 | </html>


--------------------------------------------------------------------------------
/home.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" data-theme="light">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Blogging Site</title>
 8 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
 9 | </head>
10 | 
11 | <body class="flex flex-col ">
12 | 
13 |     <!-- Navbar -->
14 |     <div class="navbar bg-primary static top-0 p-0 pr-3">
15 |         <div class="navbar text-primary-content">
16 |             <button class="btn btn-ghost text-2xl text-white">Personal Blogging Site</button>
17 |         </div>
18 |         <div>
19 |             <!-- For Logout Button -->
20 |             <div class="w-24">
21 |                 <button class="btn" id="sign-out">Sign Out</button>
22 |             </div>
23 |             <!-- For Theme Controller -->
24 |             <div class="dropdown p-1">
25 |                 <div tabindex="0" role="button" class="btn w-24">
26 |                     Theme
27 |                     <svg width="12px" height="12px" class="inline-block h-2 w-2 fill-current opacity-60"
28 |                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
29 |                         <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
30 |                     </svg>
31 |                 </div>
32 |                 <ul tabindex="0" class="dropdown-content bg-base-300 rounded-box z-[1] p-2 shadow-2xl">
33 |                     <li>
34 |                         <input type="radio" name="theme-dropdown"
35 |                             class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Default"
36 |                             value="default" />
37 |                     </li>
38 |                     <li>
39 |                         <input type="radio" name="theme-dropdown"
40 |                             class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Retro"
41 |                             value="retro" />
42 |                     </li>
43 |                     <li>
44 |                         <input type="radio" name="theme-dropdown"
45 |                             class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Cyberpunk"
46 |                             value="cyberpunk" />
47 |                     </li>
48 |                     <li>
49 |                         <input type="radio" name="theme-dropdown"
50 |                             class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Valentine"
51 |                             value="valentine" />
52 |                     </li>
53 |                     <li>
54 |                         <input type="radio" name="theme-dropdown"
55 |                             class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Aqua"
56 |                             value="aqua" />
57 |                     </li>
58 |                 </ul>
59 |             </div>
60 |         </div>
61 |     </div>
62 | 
63 |     <main class="p-8">
64 |         <section class="bg-white p-6 rounded-lg shadow-lg mb-6">
65 |             <h2 class="text-xl font-bold mb-4">Post a New Blog</h2>
66 |             <form id="newBlogForm" class="space-y-4">
67 |                 <div class="form-group">
68 |                     <label for="title" class="block text-sm font-medium text-gray-700">Title:</label>
69 |                     <input type="text" id="title" name="title"
70 |                         class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm h-8"
71 |                         required minlength="5" maxlength="50">
72 |                 </div>
73 | 
74 |                 <div class="form-group">
75 |                     <label for="body" class="block text-sm font-medium text-gray-700">Body:</label>
76 |                     <textarea id="body" name="body"
77 |                         class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm"
78 |                         required minlength="100" maxlength="3000"></textarea>
79 |                 </div>
80 | 
81 |                 <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">Post</button>
82 |             </form>
83 |         </section>
84 | 
85 |         <section class="bg-white p-6 rounded-lg shadow-lg">
86 |             <h2 class="text-xl font-bold mb-4">Your Blogs</h2>
87 |             <div id="blogsContainer" class="space-y-4"></div>
88 |         </section>
89 |     </main>
90 | 
91 | 
92 |     <!-- Javascript -->
93 |     <script type="module" src="./scripts/home.js"></script>
94 |     <script src="https://cdn.tailwindcss.com"></script>
95 | 
96 | </body>
97 | 
98 | </html>


--------------------------------------------------------------------------------
/signin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" data-theme="light">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Blogging Site</title>
 8 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
 9 | </head>
10 | 
11 | <body class="flex flex-col items-center justify-center h-screen p-4 overflow-x-hidden">
12 | 
13 |     <!-- Navbar -->
14 |     <div class="navbar bg-primary absolute top-0 p-0 pr-3">
15 |         <div class="navbar text-primary-content">
16 |             <button class="btn btn-ghost text-2xl text-white">Personal Blogging Site</button>
17 |         </div>
18 |         <!-- For Theme Controller -->
19 |         <div class="dropdown p-1">
20 |             <div tabindex="0" role="button" class="btn w-24">
21 |                 Theme
22 |                 <svg width="12px" height="12px" class="inline-block h-2 w-2 fill-current opacity-60"
23 |                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
24 |                     <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
25 |                 </svg>
26 |             </div>
27 |             <ul tabindex="0" class="dropdown-content bg-base-300 rounded-box z-[1] p-2 shadow-2xl">
28 |                 <li>
29 |                     <input type="radio" name="theme-dropdown"
30 |                         class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Default"
31 |                         value="default" />
32 |                 </li>
33 |                 <li>
34 |                     <input type="radio" name="theme-dropdown"
35 |                         class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Retro"
36 |                         value="retro" />
37 |                 </li>
38 |                 <li>
39 |                     <input type="radio" name="theme-dropdown"
40 |                         class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Cyberpunk"
41 |                         value="cyberpunk" />
42 |                 </li>
43 |                 <li>
44 |                     <input type="radio" name="theme-dropdown"
45 |                         class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Valentine"
46 |                         value="valentine" />
47 |                 </li>
48 |                 <li>
49 |                     <input type="radio" name="theme-dropdown"
50 |                         class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Aqua"
51 |                         value="aqua" />
52 |                 </li>
53 |             </ul>
54 |         </div>
55 |     </div>
56 | 
57 |     <!-- Sign In Form -->
58 |     <div class="max-w-sm w-full bg-white shadow-md rounded-lg p-8">
59 |         <h2 class="text-2xl font-semibold text-blue-600 mb-6">Sign In</h2>
60 |         <form id="sign-in">
61 |             <div class="mb-4">
62 |                 <label for="email" class="block text-gray-700">Email</label>
63 |                 <input type="email" id="email" name="email" required
64 |                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
65 |             </div>
66 |             <div class="mb-6">
67 |                 <label for="password" class="block text-gray-700">Password</label>
68 |                 <input type="password" id="password" name="password" required
69 |                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
70 |             </div>
71 |             <button type="submit"
72 |                 class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Sign
73 |                 In</button>
74 |             <p class="mt-4 text-center text-gray-600">Don't have an account? <a href="./signup.html"
75 |                     class="text-blue-600 hover:underline">Sign up</a></p>
76 |         </form>
77 |     </div>
78 | 
79 |     <!-- For Showing Popup If User Not Put Any Details -->
80 |     <dialog id="my_modal_1" class="modal">
81 |         <div class="modal-box">
82 |             <h3 class="text-lg font-bold">Hello!</h3>
83 |             <p class="py-4 bold">Please Enter a Required Information For Registration!</p>
84 |             <div class="modal-action">
85 |                 <form method="dialog">
86 |                     <!-- if there is a button in form, it will close the modal -->
87 |                     <button class="btn hover:bg-black hover:text-white">Close</button>
88 |                 </form>
89 |             </div>
90 |         </div>
91 |     </dialog>
92 | 
93 |     <!-- Javascript -->
94 | 
95 |     <script type="module" src="./scripts/signin.js"></script>
96 |     <script src="https://cdn.tailwindcss.com"></script>
97 | </body>
98 | 
99 | </html>


--------------------------------------------------------------------------------
/signup.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" data-theme="light">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Blogging Site</title>
  8 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
  9 | 
 10 | </head>
 11 | 
 12 | <body class="flex flex-col items-center justify-center h-screen p-4">
 13 | 
 14 |     <!-- Navbar -->
 15 |     <div class="navbar bg-primary absolute top-0 p-0 pr-3">
 16 |         <div class="navbar text-primary-content">
 17 |             <button class="btn btn-ghost text-2xl text-white">Personal Blogging Site</button>
 18 |         </div>
 19 |         <!-- For Theme Controller -->
 20 |         <div class="dropdown p-1">
 21 |             <div tabindex="0" role="button" class="btn w-24">
 22 |                 Theme
 23 |                 <svg width="12px" height="12px" class="inline-block h-2 w-2 fill-current opacity-60"
 24 |                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
 25 |                     <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
 26 |                 </svg>
 27 |             </div>
 28 |             <ul tabindex="0" class="dropdown-content bg-base-300 rounded-box z-[1] p-2 shadow-2xl">
 29 |                 <li>
 30 |                     <input type="radio" name="theme-dropdown"
 31 |                         class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Default"
 32 |                         value="default" />
 33 |                 </li>
 34 |                 <li>
 35 |                     <input type="radio" name="theme-dropdown"
 36 |                         class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Retro"
 37 |                         value="retro" />
 38 |                 </li>
 39 |                 <li>
 40 |                     <input type="radio" name="theme-dropdown"
 41 |                         class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Cyberpunk"
 42 |                         value="cyberpunk" />
 43 |                 </li>
 44 |                 <li>
 45 |                     <input type="radio" name="theme-dropdown"
 46 |                         class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Valentine"
 47 |                         value="valentine" />
 48 |                 </li>
 49 |                 <li>
 50 |                     <input type="radio" name="theme-dropdown"
 51 |                         class="theme-controller btn btn-sm btn-block btn-ghost justify-start" aria-label="Aqua"
 52 |                         value="aqua" />
 53 |                 </li>
 54 |             </ul>
 55 |         </div>
 56 |     </div>
 57 | 
 58 |     <!-- Sign Up Form -->
 59 |     <div class="max-w-sm w-full bg-white shadow-md rounded-lg p-8">
 60 |         <h2 class="text-2xl font-semibold text-blue-600 mb-6">Sign Up</h2>
 61 |         <form id="signup-form">
 62 |             <div class="mb-4">
 63 |                 <label for="name" class="block text-gray-700">Full Name</label>
 64 |                 <input type="text" id="name" name="name"
 65 |                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
 66 |             </div>
 67 |             <div class="mb-4">
 68 |                 <label for="email" class="block text-gray-700">Email</label>
 69 |                 <input type="email" id="email" name="email"
 70 |                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
 71 |             </div>
 72 |             <div class="mb-6">
 73 |                 <label for="password" class="block text-gray-700">Password</label>
 74 |                 <input type="password" id="password" name="password"
 75 |                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
 76 |             </div>
 77 |             <button type="submit"
 78 |                 class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Sign
 79 |                 Up</button>
 80 |             <p class="mt-4 text-center text-gray-600">Already have an account? <a href="./signin.html"
 81 |                     class="text-blue-600 hover:underline">Sign in</a></p>
 82 |         </form>
 83 |     </div>
 84 | 
 85 |     <!-- For Showing Popup If User Not Put Any Details -->
 86 |     <dialog id="my_modal_1" class="modal">
 87 |         <div class="modal-box">
 88 |             <h3 class="text-lg font-bold">Hello!</h3>
 89 |             <p class="py-4 bold">Please Enter a Required Information For Registration!</p>
 90 |             <div class="modal-action">
 91 |                 <form method="dialog">
 92 |                     <!-- if there is a button in form, it will close the modal -->
 93 |                     <button class="btn hover:bg-black hover:text-white">Close</button>
 94 |                 </form>
 95 |             </div>
 96 |         </div>
 97 |     </dialog>
 98 | 
 99 |     <!-- For Giving Registration Success -->
100 |     <dialog id="my_modal_2" class="modal">
101 |         <div class="modal-box">
102 |             <div class="my-8 text-center">
103 |                 <svg xmlns="http://www.w3.org/2000/svg" class="w-14 shrink-0 fill-green-500 inline"
104 |                     viewBox="0 0 512 512">
105 |                     <path
106 |                         d="M383.841 171.838c-7.881-8.31-21.02-8.676-29.343-.775L221.987 296.732l-63.204-64.893c-8.005-8.213-21.13-8.393-29.35-.387-8.213 7.998-8.386 21.137-.388 29.35l77.492 79.561a20.687 20.687 0 0 0 14.869 6.275 20.744 20.744 0 0 0 14.288-5.694l147.373-139.762c8.316-7.888 8.668-21.027.774-29.344z"
107 |                         data-original="#000000" />
108 |                     <path
109 |                         d="M256 0C114.84 0 0 114.84 0 256s114.84 256 256 256 256-114.84 256-256S397.16 0 256 0zm0 470.487c-118.265 0-214.487-96.214-214.487-214.487 0-118.265 96.221-214.487 214.487-214.487 118.272 0 214.487 96.221 214.487 214.487 0 118.272-96.215 214.487-214.487 214.487z"
110 |                         data-original="#000000" />
111 |                 </svg>
112 |                 <h4 class="text-xl text-gray-800 font-semibold mt-4">Successfully accepted!</h4>
113 |             </div>
114 |             <div class="modal-action">
115 |                 <form method="dialog">
116 |                     <!-- if there is a button in form, it will close the modal -->
117 |                     <button class="btn hover:bg-black hover:text-white"><a href="signin.html">Sign In</a></button>
118 | 
119 |                 </form>
120 |             </div>
121 |         </div>
122 |     </dialog>
123 | 
124 |     <!-- Javascript -->
125 |     <script type="module" src="./scripts/signup.js"></script>
126 |     <script src="https://cdn.tailwindcss.com"></script>
127 | </body>
128 | 
129 | </html>


--------------------------------------------------------------------------------