Added Sign in and Sign up functionality

Readme.md

@@ -1,10 +1,11 @@
-
 # QuickNotes
 
 QuickNotes is a web application that allows users to create, view, edit, delete, and organize notes into different sections such as **To do**, **Doing**, and **Done**. Notes are stored in localStorage to persist across sessions. The app includes a drag-and-drop feature for moving notes between sections and color-coding based on priority.
 
 ## Features
 
+- **Sign Up**: Users can create an account by providing a unique username and password. The app will store user credentials in localStorage, allowing them to sign in from any session.
+- **Sign In**: Registered users can log in with their username and password. After signing in, the app will load the notes specific to that user.
 - **Create Notes**: Users can create new notes with content, priority, and timestamp.
 - **Drag and Drop**: Notes can be dragged between **To do**, **Doing**, and **Done** sections.
 - **Edit Notes**: Users can edit existing notes and save changes.
@@ -14,22 +15,30 @@ QuickNotes is a web application that allows users to create, view, edit, delete,
 - **Persistent Data**: Notes are stored in localStorage and persist even after page reloads.
 
 
+
 ## Screenshots
 
+1. **Signing Up**
+
+   ![Main Interface](./assets/screenschots/signup.png)
+
+1. **Signing In**
+
+   ![Main Interface](./assets/screenschots/signin.png)
 
-1. **Main Interface**
+3. **Main Interface**
 
    ![Main Interface](./assets/screenschots/main_interface.png)
 
-2. **Board Interface**
+4. **Board Interface**
 
    ![Note Creation](./assets/screenschots/board_interface.png)
 
-3. **Note Creation**
+5. **Note Creation**
 
    ![Note Creation](./assets/screenschots/note_creation.png)
 
-4. **Note Editing**
+6. **Note Editing**
 
    ![Note Editing](./assets/screenschots/note_editing.png)
 
@@ -40,18 +49,28 @@ QuickNotes is a web application that allows users to create, view, edit, delete,
 
 ```bash
 QuickNotes/
-│
 ├── assets/
 │   ├── CSS/
 │   │   └── styles.css
 │   └── Javascript/
 │       ├── board.js
 │       ├── constants.js
+│       ├── signin.js
+│       ├── signup.js
 │       └── index.js
+├── screenshots/
+│   ├── board_interface.png
+│   ├── main_interface.png
+│   ├── note_creation.png
+│   ├── note_editing.png
+│   ├── signin.png
+│   ├── signup.png
+│   └── userImage.webp
 ├── board.html
 ├── index.html
+├── signin.html
+├── signup.html
 └── Readme.md
-
 ```
 
 

assets/CSS/styles.css

@@ -262,10 +262,6 @@
     }
 
 
-    .hidden{
-        display: none;
-    }
-
 
     /* ......................................... view note  ..................................... */
     /* Popup container */
@@ -449,4 +445,211 @@
         .drop-section th{
             width: 100%;
         }
-    }
+    }
+
+.header a{
+    text-decoration: none;
+    color: black;
+    font-size: 1.2em;
+
+}
+.header-navs{
+    display: flex;
+    gap: 20px;
+    align-items: center;
+}
+
+.form-error{
+    color: red;
+}
+
+    /* Signup Page Styling */
+.signup-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 80vh;
+}
+
+.signup-form {
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 40px;
+    width: 350px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.signup-form h2 {
+    font-size: 1.8rem;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.signup-form label {
+    display: block;
+    text-align: left;
+    font-size: 1rem;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.signup-form input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 1rem;
+    outline: none;
+    background-color: #f9f9f9;
+    transition: border-color 0.3s ease;
+}
+
+.signup-form input:focus {
+    border-color: #48CFCB;
+}
+
+.signup-btn,.signin-btn {
+    background-color: #48CFCB;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    width: 100%;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s ease;
+}
+
+.signup-btn:hover {
+    background-color: #45b7b3;
+}
+
+
+.signed-in-header-box > img{
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+}
+.signed-in-header-box{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;
+    position: relative;
+    cursor: pointer;
+}
+.sign-in-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 70vh;
+    background-color: transparent;
+    /* border: 1px solid #ccc; */
+    border-radius: 10px;
+    padding: 40px;
+    text-align: center;
+    grid-column: 1 / -1
+}
+
+.sign-in-container h2 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+}
+
+.sign-in-container p {
+    font-size: 1.2rem;
+    margin-bottom: 30px;
+}
+
+.note-section-sign-in-btn {
+    background-color: #48CFCB;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 1rem;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    text-decoration: none;
+}
+
+.note-section-sign-in-btn:hover {
+    background-color: #45b7b3;
+}
+
+.logout-box {
+    position: absolute;
+    width: 80%;                
+    left: 50%;                 
+    transform: translateX(-50%); 
+    bottom: -80%;             
+    background-color: white;
+    padding: 10px;
+}
+
+.logout-btn{
+    background-color: #48CFCB;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 1rem;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    text-decoration: none;
+    width: 100%;
+
+}
+
+.logout-btn:hover {
+    background-color: #45b7b3;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.hidden{
+    display: none;
+}

assets/Javascript/board.js

@@ -12,7 +12,7 @@ let notes = JSON.parse(localStorage.getItem("notes")) || [];
 const todoSection = document.querySelector(".todo-section");
 const doingSection = document.querySelector(".doing-section");
 const doneSection = document.querySelector(".done-section");
-
+const signInContainer = document.querySelector('.sign-in-container');
 todoSection.addEventListener("dragover", (e) => e.preventDefault());
 doingSection.addEventListener("dragover", (e) => e.preventDefault());
 doneSection.addEventListener("dragover", (e) => e.preventDefault());
@@ -52,9 +52,42 @@ doneSection.addEventListener("drop", (e) => {
 const sections = [todoSection, doingSection, doneSection];
 let viewNoteId;
 
+const userLoggedIn = JSON.parse(localStorage.getItem("userLoggedIn")) || null;
+const loggedInUserBox = document.querySelector('.user-name');
+const headerNavs = document.querySelector(".header-navs");
+const signedInHeaderBox = document.querySelector(".signed-in-header-box");
+const logoutBtn = document.querySelector('.logout-btn');
+const logoutBox = document.querySelector('.logout-box');
+
+
+
+signedInHeaderBox.addEventListener('click',() => logoutBox.classList.toggle('hidden'));
+
+logoutBtn.addEventListener('click',(e)=>{
+  e.preventDefault();
+  localStorage.removeItem('userLoggedIn');
+  window.location.reload();
+
+
+})
+
+
+
+window.addEventListener('load',() => {
+  console.log(headerNavs);
+
+  if (userLoggedIn) {
+    headerNavs.classList.add("hidden");
+    signedInHeaderBox.classList.remove("hidden");
+    loggedInUserBox.textContent = userLoggedIn.name;
+
+    signInContainer.classList.add('hidden');
+
+  }
+});
+
 // Render notes
-notes.forEach(renderNote);
-console.log(notes);
+notes.filter(note => note.user_id == userLoggedIn.id).forEach(renderNote);
 
 const createNoteSection = document.querySelector(".create-note");
 const createNoteBtn = document.querySelector(".create-btn");
@@ -80,8 +113,12 @@ viewSectionSaveBtn.addEventListener("click", saveNote);
 viewSectionEditBtn.addEventListener("click", editNote);
 
 function renderNote(note) {
+  signInContainer.classList.add('hidden');
+  todoSection.classList.remove('hidden');
+  doingSection.classList.remove('hidden');
+  doneSection.classList.remove('hidden');
   const html = `
-    <td class="note" note_id="${note.note_id}" draggable="true">
+    <td class="note" note_id="${note.note_id}" draggable="true" user_id="${note.user_id}>
       <h3 class="note-title">
         ${note.content}
       </h3>
@@ -198,6 +235,7 @@ function createNote(e) {
   const note_id = newDate.getTime();
 
   notes.push({
+    user_id: userLoggedIn.id,
     note_id,
     timestamp: `Created on ${timestamp}`,
     content: createNoteTextarea.value,