toolbox/habit-tracker.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free Habit Tracker Online — Build Daily Habits | QuickTools</title>
  <meta name="description" content="Track daily habits with a visual grid. Streak counter. Saved locally. Free online habit tracker.">
  <link rel="canonical" href="https://www.quicktools.mom/habit-tracker.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/habit-tracker.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is Habit Tracker free to use?","acceptedAnswer":{"@type":"Answer","text":"Yes! Habit Tracker is completely free with no signup required. It runs entirely in your browser — your data never leaves your device."}},{"@type":"Question","name":"How do I use Habit Tracker?","acceptedAnswer":{"@type":"Answer","text":"Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output."}},{"@type":"Question","name":"Is my data safe with Habit Tracker?","acceptedAnswer":{"@type":"Answer","text":"Absolutely. Habit Tracker runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space</div>
    <div class="tool-header"><div class="tool-badge">✨ Productivity</div><h1>Habit Tracker</h1><p>Build better daily habits. Visual 7-day grid with streak tracking.</p></div>
    <div class="tool-card">
      <div style="display:flex;gap:0.5rem;margin-bottom:1rem;"><input type="text" id="newHabit" placeholder="Add a habit..." style="flex:1;" onkeypress="if(event.key==='Enter')addH()"><button class="btn btn-primary" onclick="addH()">+ Add</button></div>
      <div id="grid"></div>
    </div>
    <div class="tool-card"><div class="stats-bar">
      <div class="stat-item"><span class="stat-value" id="s1">0</span><span class="stat-label">Habits</span></div>
      <div class="stat-item"><span class="stat-value" id="s2">0</span><span class="stat-label">Done Today</span></div>
      <div class="stat-item"><span class="stat-value" id="s3">0</span><span class="stat-label">Best Streak</span></div>
    </div></div>
    <div class="ad-zone">Ad Space</div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="pomodoro.html"><span class="tool-icon">🍅</span> Pomodoro</a><a href="checklist.html"><span class="tool-icon">✅</span> Checklist</a><a href="event-countdown.html"><span class="tool-icon">📅</span> Countdown</a><a href="note-pad.html"><span class="tool-icon">📝</span> Notepad</a></div></div>

        <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Habit Tracker</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Habit Tracker is a free, browser-based tool designed for students, professionals, and productivity enthusiasts. Track daily habits with a visual grid. Streak counter. Saved locally. Free online habit tracker. Everything runs locally in your browser using JavaScript — no data is ever sent to a server, making it completely private and secure. The tool is designed to be intuitive and beginner-friendly while still offering advanced features for power users. It loads instantly with no installation required and works offline once loaded. Use it as often as you need — there are no daily limits, no watermarks, and no hidden fees.</p>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;"><strong>Who is this for?</strong> Habit Tracker is ideal for professionals, students, freelancers, and hobbyists who want quick, reliable results without installing software or creating accounts. Whether you are on a laptop, tablet, or phone, it works seamlessly in any modern browser.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li>Enter or paste your data in the input area above.</li>
        <li>Adjust settings and options to match your needs.</li>
        <li>View the results instantly — they update in real-time.</li>
        <li>Copy, download, or share your output with one click.</li>
      </ol>
    </div>
    <div class="tool-card faq-section">
      <h2 style="font-size:1.1rem;margin-bottom:1rem;">❓ Frequently Asked Questions</h2>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is Habit Tracker free to use?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Yes! Habit Tracker is completely free with no signup required. It runs entirely in your browser — your data never leaves your device.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">How do I use Habit Tracker?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is my data safe with Habit Tracker?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Absolutely. Habit Tracker runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed.</p></details>
    </div>
    <div class="ad-zone ad-zone-bottom">Ad Space</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a></div></footer>
  </div>
  <script>
    let D=JSON.parse(localStorage.getItem('qk_habits2')||'null')||{h:[{n:'💪 Exercise',c:{}},{n:'📖 Read',c:{}},{n:'🧘 Meditate',c:{}},{n:'💧 Water',c:{}}]};
    const sv=()=>localStorage.setItem('qk_habits2',JSON.stringify(D));
    const tk=()=>new Date().toISOString().split('T')[0];
    const days=()=>{const a=[];for(let i=6;i>=0;i--){const d=new Date();d.setDate(d.getDate()-i);a.push(d.toISOString().split('T')[0]);}return a;};
    const streak=h=>{let s=0,d=new Date();while(h.c[d.toISOString().split('T')[0]]){s++;d.setDate(d.getDate()-1);}return s;};
    function addH(){const n=document.getElementById('newHabit').value.trim();if(!n)return;D.h.push({n,c:{}});document.getElementById('newHabit').value='';sv();render();}
    function tog(i,d){D.h[i].c[d]=!D.h[i].c[d];sv();render();}
    function render(){const ds=days(),t=tk();
      let h=`<div style="display:grid;grid-template-columns:1fr repeat(7,34px) 40px 26px;gap:2px;align-items:center;font-size:0.7rem;">`;
      h+=`<div></div>${ds.map(d=>`<div style="text-align:center;font-size:0.6rem;font-weight:600;color:${d===t?'var(--accent)':'var(--text-muted)'};">${new Date(d+'T12:00:00').toLocaleDateString('en',{weekday:'narrow'})}<br>${new Date(d+'T12:00:00').getDate()}</div>`).join('')}<div style="text-align:center;font-size:0.55rem;">🔥</div><div></div>`;
      D.h.forEach((r,i)=>{h+=`<div style="font-weight:600;font-size:0.8rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${r.n}</div>`;
        ds.forEach(d=>{const on=r.c[d];h+=`<div onclick="tog(${i},'${d}')" style="width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;${on?'background:var(--success);color:#fff;':'background:var(--bg-secondary);'}${d===t?'box-shadow:0 0 0 2px var(--accent);':''}font-size:0.85rem;">${on?'✓':''}</div>`;});
        h+=`<div style="text-align:center;font-weight:700;color:var(--accent);">${streak(r)}</div><button onclick="if(confirm('Remove?')){D.h.splice(${i},1);sv();render()}" style="background:none;border:none;color:var(--danger);cursor:pointer;">×</button>`;});
      h+='</div>';document.getElementById('grid').innerHTML=h;
      document.getElementById('s1').textContent=D.h.length;document.getElementById('s2').textContent=D.h.filter(r=>r.c[t]).length;document.getElementById('s3').textContent=Math.max(0,...D.h.map(streak));}
    render();
  </script>
<script src="ads.js"></script>
</body>
</html>