+ complete core functionalities: What I have not done, I will learn a…

…nd do
Teach-2-Give · May 24, 2024 · 5612457 · 5612457
1 parent c989914
commit 5612457
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 16 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -97,6 +97,7 @@ body {
     padding: 10px 20px;
     border-radius: 8px;
     cursor: pointer;
+    margin-left: 250px
 }
 
 .edit-activity {
@@ -117,14 +118,21 @@ body {
     color: white;
 }
 
+.create-icon {
+    height: 20px;
+    width: 20px;
+    vertical-align: middle;
+    filter: invert(1) grayscale(1) brightness(9);
+}
+
 .activity-card {
     background-color: #f0f0f0;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 50vh;
+    left: 50vw;
     transform: translate(-50%, -50%);
     display: none;
     opacity: 0; 
@@ -179,6 +187,8 @@ input {
     border-radius: 8px;
 }
 
+
+
 /* Media queries for responsiveness */
 @keyframes slideIn {
     0% {
@@ -250,6 +260,9 @@ input {
     .welcome-text h1 {
         font-size: 24px;
     }
+    .create-activity {
+        margin-left: 5px;
+    }
 }
 
 @media (max-width: 480px) {
@@ -277,4 +290,13 @@ input {
         color: white;
         transform: rotate(360deg);
     }
+    .create-activity {
+        margin-left: 5px;
+    }
+    .activity-card {
+        width: 200px;
+        padding: 10px;
+        margin-left: 0px;
+    }
+
 }
diff --git a/db.json b/db.json
@@ -1,19 +1,9 @@
 {
   "habits": [
-    {
-      "id": "49dd",
-      "name": "Swimming",
-      "startDate": "2024-05-31"
-    },
     {
       "id": "eab9",
       "name": "Stop-Eating",
       "startDate": "2024-05-24"
-    },
-    {
-      "id": "d658",
-      "name": "Double",
-      "startDate": "2024-05-29"
     }
   ]
 }
diff --git a/index.html b/index.html
@@ -24,8 +24,11 @@ <h2>Activities</h2>
         </div>
     </div>
     <div class="activity-buttons">
-        <button class="create-activity">Create Activity</button>
-        <button class="edit-activity">Edit Activity</button>
+        <button class="create-activity">
+            <img src="https://cdn-icons-png.flaticon.com/512/570/570216.png" alt="Create Icon"class="create-icon">
+            Create
+        </button>
+        <button class="edit-activity">Edit Streak</button>
     </div>
     <div class="activity-form" id="activityForm">
         <form class="activity-card">

diff --git a/ts/main.js b/ts/main.js
@@ -35,14 +35,27 @@ function fetchAndDisplayActivities() {
             var currentDate = new Date();
             var startDateObj = new Date(activity.startDate);
             var diffTime = Math.abs(currentDate - startDateObj);
-            var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
+            var diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); 
+
+
+            if (activity.name === 'Stop-Eating') {
+                diffDays = 0;
+            }
+
             pCounter.textContent = diffDays;
             pCounter.style.fontSize = '70px';
             pCounter.style.fontWeight = 'bold';
             activityDiv.appendChild(pCounter);
 
             var pStartDate = document.createElement('p');
-            pStartDate.textContent = activity.startDate;
+
+
+            if (activity.name === 'Stop-Eating') {
+                pStartDate.textContent = "I am yet to start";
+            } else {
+                pStartDate.textContent = activity.startDate;
+            }
+
             pStartDate.style.fontWeight = 'bold';
             activityDiv.appendChild(pStartDate);