diff --git a/css/styles.css b/css/styles.css index 3281fb7..27071b6 100644 --- 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 index 0813bb7..703ab84 100644 --- 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" } ] } \ No newline at end of file diff --git a/index.html b/index.html index 80c53b0..540f617 100644 --- a/index.html +++ b/index.html @@ -24,8 +24,11 @@

Activities

- - + +
diff --git a/ts/main.js b/ts/main.js index 82404f9..780551c 100644 --- 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);