Skip to content

Commit 74389a0

Browse files
Sherysherlyshindal
Shery
authored and
sherlyshindal
committed
Added HabitLoopVisualizer project
1 parent ad4b23e commit 74389a0

File tree

5 files changed

+1028
-0
lines changed

5 files changed

+1028
-0
lines changed

‎HabitLoopVisualizer/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Habit Loop Visualizer
2+
3+
A simple JavaScript mini project that visualizes the **Habit Loop** cycle:
4+
**Cue → Routine → Reward**
5+
6+
This project demonstrates how habits are formed and maintained using an interactive visualization.
7+
8+
---
9+
10+
## 🚀 Features
11+
- Interactive UI to show the habit loop stages
12+
- Visual transitions between **Cue → Routine → Reward**
13+
- Clean design using HTML, CSS, and JavaScript
14+
- Easy to extend for additional customization
15+
16+
---
17+
18+
## 📂 Project Structure
19+
HabitLoopVisualizer/
20+
│── index.html # Main HTML file
21+
│── style.css # Styling for the visualizer
22+
│── script.js # JavaScript logic
23+
│── README.md # Project documentation
24+
25+
26+
27+
## 🛠️ How to Run
28+
1. Clone or download this repository.
29+
2. Navigate to the `HabitLoopVisualizer` folder.
30+
3. Open `index.html` in your browser.
31+
32+
That’s it — no additional setup required! 🎉
33+
34+
---
35+
36+
## 🎯 Preview
37+
Here’s how the Habit Loop Visualizer looks in action:
38+
![preview](image.png)
39+
40+
## 🤝 Contribution
41+
Feel free to fork this project and enhance it — add animations, more loops, or a dashboard for tracking multiple habits.

‎HabitLoopVisualizer/image.png

76.4 KB
Loading

‎HabitLoopVisualizer/index.html

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Cue → Routine → Reward App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="app-container">
11+
<h1>✨ Cue → Routine → Reward ✨</h1>
12+
13+
<!-- Navigation Tabs -->
14+
<div class="tabs">
15+
<button class="tab-btn active" data-tab="main">Habit Loop</button>
16+
<button class="tab-btn" data-tab="calendar">Calendar</button>
17+
<button class="tab-btn" data-tab="stats">Statistics</button>
18+
</div>
19+
20+
<!-- Main Tab Content -->
21+
<div class="tab-content active" id="main-tab">
22+
<!-- Cue Input -->
23+
<div class="cue-section">
24+
<input type="text" id="cueInput" placeholder="Enter your current mood/cue (e.g., sad, stressed)">
25+
<button id="cueBtn">Find Routines</button>
26+
</div>
27+
28+
<!-- Routine Options -->
29+
<div class="routine-section" id="routineSection"></div>
30+
31+
<!-- Timer Section -->
32+
<div class="timer-section" id="timerSection" style="display: none;">
33+
<h3>Routine Timer</h3>
34+
<div class="timer-display" id="timerDisplay">00:00</div>
35+
<div class="timer-controls">
36+
<button id="startTimer">Start</button>
37+
<button id="pauseTimer" disabled>Pause</button>
38+
<button id="resetTimer" disabled>Reset</button>
39+
<button id="completeRoutine">Complete</button>
40+
</div>
41+
</div>
42+
43+
<!-- Motivation -->
44+
<div class="motivation" id="motivation"></div>
45+
46+
<!-- Reward -->
47+
<div class="reward" id="reward"></div>
48+
49+
<!-- Checklist -->
50+
<div class="checklist" id="checklist"></div>
51+
52+
<!-- Streak + Quote -->
53+
<div class="extras">
54+
<p id="quote"></p>
55+
<p>🔥 Streak: <span id="streak">0</span> days</p>
56+
</div>
57+
</div>
58+
59+
<!-- Calendar Tab Content -->
60+
<div class="tab-content" id="calendar-tab">
61+
<h2>Consistency Calendar</h2>
62+
<div class="calendar-header">
63+
<button id="prevMonth">&lt;</button>
64+
<h3 id="currentMonth">January 2023</h3>
65+
<button id="nextMonth">&gt;</button>
66+
</div>
67+
<div class="calendar" id="calendar"></div>
68+
<div class="calendar-legend">
69+
<div class="legend-item">
70+
<span class="legend-color completed"></span>
71+
<span>Completed</span>
72+
</div>
73+
<div class="legend-item">
74+
<span class="legend-color partial"></span>
75+
<span>Partial</span>
76+
</div>
77+
<div class="legend-item">
78+
<span class="legend-color missed"></span>
79+
<span>Missed</span>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<!-- Statistics Tab Content -->
85+
<div class="tab-content" id="stats-tab">
86+
<h2>Your Habit Statistics</h2>
87+
88+
<div class="stats-grid">
89+
<div class="stat-card">
90+
<h3>Most Common Cues</h3>
91+
<div id="cuesChart" class="chart-container"></div>
92+
</div>
93+
94+
<div class="stat-card">
95+
<h3>Most Completed Routines</h3>
96+
<div id="routinesChart" class="chart-container"></div>
97+
</div>
98+
99+
<div class="stat-card">
100+
<h3>Average Routine Time</h3>
101+
<div class="big-number" id="avgTime">0 min</div>
102+
</div>
103+
104+
<div class="stat-card">
105+
<h3>Completion Rate</h3>
106+
<div class="big-number" id="completionRate">0%</div>
107+
</div>
108+
</div>
109+
110+
<div class="recent-activities">
111+
<h3>Recent Activities</h3>
112+
<div id="recentActivities" class="activities-list"></div>
113+
</div>
114+
</div>
115+
</div>
116+
117+
<script src="script.js"></script>
118+
</body>
119+
</html>

0 commit comments

Comments
 (0)