1.3.0 - feat: streaks

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.3.0
+
+feat: Streaks - track and display the number of consecutive days a habit has been completed
+
 ## 1.2.1
 
 fix: daysToShow is converted to a number if the user passes it as a string

manifest.json

@@ -1,10 +1,10 @@
 {
 	"id": "habit-tracker-21",
 	"name": "Habit Tracker 21",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"minAppVersion": "1.1.0",
 	"description": "Your 21-day journey to habit formation, simplified",
 	"author": "Zoreet",
 	"authorUrl": "https://github.com/zoreet",
 	"isDesktopOnly": false
-}
+}

src/HabitTracker.ts

@@ -266,10 +266,30 @@ export default class HabitTracker {
 
 			habitCell.setAttribute('date', dateString)
 			habitCell.setAttribute('habit', path)
+
+			habitCell.setAttribute('streak', this.findStreak(entries, currentDate))
+
 			currentDate.setDate(currentDate.getDate() + 1)
 		}
 	}
 
+	// get streak
+	// based on an array of dates, get the current streak for the given date
+	findStreak(entries, date) {
+		let currentDate = new Date(date);
+		let streak = 0
+
+		// console.log('entries', entries)
+		// console.log('date', date)
+
+		while (entries.includes(this.getDateId(currentDate))) {
+			streak++
+			currentDate.setDate(currentDate.getDate() - 1)
+		}
+
+		return streak.toString();
+	}
+
 	async toggleHabit(el) {
 		const habit = el.getAttribute('habit')
 		const date = el.getAttribute('date')

src/styles.css

@@ -71,7 +71,7 @@
 }
 
 .habit-tick--true:before {
-	background: var(--checkbox-color);
+  background: var(--checkbox-color);
 	border-radius: 10px;
 	content: '';
 	display: inline-block;
@@ -80,6 +80,7 @@
 	transition: all 0.3s ease;
 }
 
+
 .habit-tick--true + .habit-tick--true {
 	text-align: left;
 }
@@ -111,3 +112,12 @@
 		display: table-cell;
 	}
 }
+
+/* streaks */
+/* for every 2+ day streaks, show a counter on the most recent date */
+.habit-tick--true + .habit-tick--true:has(+ .habit-tick--false):before,
+.habit-tick--true + .habit-tick--true:last-child:before {
+	text-align: center;
+  content: attr(streak);
+  line-height: 15px;
+}

versions.json

@@ -10,5 +10,6 @@
 	"1.1.4": "1.1.0",
 	"1.1.5": "1.1.0",
 	"1.2.0": "1.1.0",
-	"1.2.1": "1.1.0"
-}
+	"1.2.1": "1.1.0",
+	"1.3.0": "1.1.0"
+}