diff --git a/habittracker/blueback.jpeg b/habittracker/blueback.jpeg
new file mode 100644
index 000000000..014c43a48
Binary files /dev/null and b/habittracker/blueback.jpeg differ
diff --git a/habittracker/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjEwMTMtZS0wMDI2LWtzaThid2hkLmpwZw.webp b/habittracker/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjEwMTMtZS0wMDI2LWtzaThid2hkLmpwZw.webp
new file mode 100644
index 000000000..d6c543c6a
Binary files /dev/null and b/habittracker/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjEwMTMtZS0wMDI2LWtzaThid2hkLmpwZw.webp differ
diff --git a/habittracker/habiticon.png b/habittracker/habiticon.png
new file mode 100644
index 000000000..06113a89e
Binary files /dev/null and b/habittracker/habiticon.png differ
diff --git a/habittracker/habittracker.html b/habittracker/habittracker.html
new file mode 100644
index 000000000..7236492c6
--- /dev/null
+++ b/habittracker/habittracker.html
@@ -0,0 +1,95 @@
+
+
+
+
+
+ Habit Tracker
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Year
+
Month
+
Monthly Habit Tracker
+
+
+
+
+
+
my new habit! <3
+
+
0/31
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/habittracker/loadinggifback.gif b/habittracker/loadinggifback.gif
new file mode 100644
index 000000000..ab2429f4c
Binary files /dev/null and b/habittracker/loadinggifback.gif differ
diff --git a/habittracker/readme.md b/habittracker/readme.md
new file mode 100644
index 000000000..90ff2c22a
--- /dev/null
+++ b/habittracker/readme.md
@@ -0,0 +1,33 @@
+# 🌸 Habit Tracker
+
+A **simple and elegant Habit Tracker Web App** built using **HTML, CSS, and JavaScript**.
+It allows users to set a monthly habit, track daily progress, and visualize completion status through an interactive calendar.
+Progress is stored locally in your browser using **LocalStorage**, so your data persists even after refreshing or closing the tab.
+
+---
+
+## Features
+
+- **Dynamic Calendar:** Automatically highlights the current day and displays all days of the current month.
+- **Custom Habit Title:** Click on the title to set or update your habit anytime.
+- **Local Storage Support:** Saves your daily progress persistently across sessions.
+- **Progress Tracker:** Shows completed days count (e.g. `10/30`).
+- **Reset Option:** Easily reset the calendar and start a new habit cycle.
+- **Responsive and Aesthetic UI:** Uses custom fonts and soft color palettes for a pleasant experience.
+
+---
+
+## How It Works
+
+1. The script fetches the **current date, month, and year** using JavaScript’s `Date()` object.
+2. It dynamically fills the calendar grid with the days of the current month.
+3. You can **click each day** to mark it as “completed” — turns **pink** when selected.
+4. Progress (`true/false` for each date) is stored using `localStorage` with keys like `MM-DD-YYYY`.
+5. The total days completed are displayed and updated in real-time.
+6. The **Reset** button clears all progress for the current month.
+
+---
+
+Build by [zienna](https://github.com/ziennaa)
+
+
diff --git a/habittracker/ribbonback.jpg b/habittracker/ribbonback.jpg
new file mode 100644
index 000000000..f48f57c3b
Binary files /dev/null and b/habittracker/ribbonback.jpg differ
diff --git a/habittracker/script.js b/habittracker/script.js
new file mode 100644
index 000000000..1e75c8163
--- /dev/null
+++ b/habittracker/script.js
@@ -0,0 +1,133 @@
+var date = new Date(); // creates a js date obj for current date n time
+console.log(date); // shows full date time in console
+// extract current date info
+var currentYear = date.getFullYear();
+var curretMonth = date.getMonth();
+var currentDay = date.getDay();
+var currentDate = date.getDate();
+console.log(currentYear);
+console.log(curretMonth);
+console.log(currentDay);
+console.log(currentDate);
+// imp date info
+var months = [ // this array maps month index 0 to 11
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December'
+];
+// setting year and month
+var yeart = document.getElementById("title");
+yeart.innerHTML = currentYear;
+var title = document.getElementById("titletwo");
+title.innerHTML = months[curretMonth];
+//update calender information
+var habitTitle = document.getElementById("habitTitle");
+habitTitle.onclick = function(){
+ let habits = prompt("what's your habit?", habitTitle.innerHTML);
+ if(habits.length==0){
+ habitTitle.innerHTML = "click to set your habit";
+ }else{
+ habitTitle.innerHTML = habits;
+ }
+}
+var daysinmonth = [31,28,31,30,31,30,31,31,30,31,30,31];
+var daysinthismonth = daysinmonth[curretMonth];
+var dayscompleted = 0;
+var totaldays = document.getElementById("totaldays");
+totaldays.innerHTML = "0/"+daysinthismonth;
+// set the calender days
+var daycount = 0;
+var rowcount = 0;
+var days = document.getElementsByClassName("days");
+for(var i=0; i