Merge pull request #9 from Deepanshu902/feature/layout-fix

Add the checkbox at Event and fix layout of Tasks

Author: thedipankarroy

dashboard.html

@@ -9,7 +9,7 @@
     <title>Ubercodes - Personal Dashboard</title>
     <link
       rel="stylesheet"
-      href="/styles/dashboard.css"
+      href="styles/dashboard.css"
     />
     <!-- favicon -->
     <link
@@ -49,7 +49,7 @@
           <div>
             <h1>
               Welcome Back,
-              <span id="userName">User</span>!
+              <span id="userName">{User}</span>!
             </h1>
             <p>
               Track your GSOC 2025 preparation
@@ -127,27 +127,27 @@ <h2>Events</h2>
         </div>
         <div id="tasks" class="tab-content">
           <h2>Tasks</h2>
-          <ul>
+          <ul style="list-style-type: none; margin: 20px;">
             <li>
-              <input
-                type="checkbox"
-                class="task-checkbox"
-              />
-              Task 1
+               <input 
+                  type="checkbox" 
+                  class="task-checkbox"
+                />
+                <h3 style="display: inline;">Task 1</h3>
             </li>
             <li>
               <input
                 type="checkbox"
                 class="task-checkbox"
               />
-              Task 2
+              <h3 style="display: inline;">Task 2</h3>
             </li>
             <li>
               <input
                 type="checkbox"
                 class="task-checkbox"
               />
-              Task 3
+              <h3 style="display: inline;">Task 3</h3>
             </li>
           </ul>
         </div>

index.html

@@ -19,7 +19,7 @@
     />
     <link
       rel="stylesheet"
-      href="/styles/landing-page.css"
+      href="styles/landing-page.css"
     />
     <script
       src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
@@ -42,7 +42,7 @@
           >Community</a
         >
         <a href="#timeline">Timeline</a>
-        <a href="/sign-up-page.html">Sign Up</a>
+        <a href="sign-up-page.html">Sign Up</a>
       </div>
     </nav>
 

script/dashboard.js

@@ -47,6 +47,8 @@ const initialEvents = [
   },
 ];
 
+
+
 document.addEventListener(
   "DOMContentLoaded",
   () => {
@@ -239,11 +241,19 @@ document.addEventListener(
       const eventDiv =
         document.createElement("div");
       eventDiv.className = "event-item";
+      // check Box is created
+      const checkbox = document.createElement("input");
+       checkbox.type = "checkbox";
+       checkbox.className = "event-checkbox";
+       checkbox.style.marginRight = "10px";
       eventDiv.innerHTML = `
             <h3>${event.title}</h3>
             <p class="date">${event.date}</p>
         `;
+      // calling prepend on h3 so checkbox placed before event title  
+      eventDiv.querySelector("h3").prepend(checkbox); 
       eventsList.appendChild(eventDiv);
+      
     });
 
     // Tab functionality

sign-up-page.html

@@ -31,7 +31,7 @@
     <title>UberCoders</title>
     <link
       rel="stylesheet"
-      href="/styles/style.css"
+      href="styles/style.css"
     />
     <script src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/9.16.0/firebase-auth.js"></script>

styles/dashboard.css

@@ -150,6 +150,10 @@ body {
   margin-right: 10px;
 }
 
+.task-checkbox{
+  margin-right: 10px;
+}
+
 @media (max-width: 768px) {
   .stats-grid {
     grid-template-columns: 1fr;