toolbox/countdown-timer.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free Countdown Timer — Custom Date Countdown</title>
  <meta name="description" content="Create a countdown timer to any date and time. See days, hours, minutes, and seconds remaining. Shareable link included. Free online countdown timer.">
  <link rel="canonical" href="https://www.quicktools.mom/countdown-timer.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/countdown-timer.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":"⏱️ Quick Timer

        Minutes
        Seconds
        ▶ Start

      05:00

    Ad Space — 336×280

          <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Countdown Timer</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Countdown Timer is a free, browser-based tool built for developers, designers, and everyday users. Create a countdown timer to any date and time. See days, hours, minutes, and seconds remaining. Shareable link included. Free online countdown timer. This tool processes everything locally using JavaScript — no data is uploaded to any server, no account is required, and there are no usage limits. Whether you’re working on a quick project or handling sensitive data, your privacy is fully protected. Bookmark this page and use it anytime — it works on desktop, tablet, and mobile devices.</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><strong>Enter your data</strong> — Type, paste, or upload your input in the fields above.</li>
        <li><strong>Configure options</strong> — Adjust any settings or parameters to match your requirements.</li>
        <li><strong>Get instant results</strong> — Output updates automatically in real-time as you type.</li>
        <li><strong>Copy or download</strong> — Use the Copy button to grab results, or download if available.</li>
      </ol>
    </div>
    Frequently Asked Questions
      Does the countdown work in the background?","acceptedAnswer":{"@type":"Answer","text":"Yes, the countdown calculates the remaining time based on the target date, so it stays accurate even if you switch tabs or close the browser. Just revisit the page to see the updated countdown."}}]}</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 — 728×90</div>
    <div class="tool-header">
      <div class="tool-badge">⏳ Productivity</div>
      <h1>Countdown Timer</h1>
      <p>Count down to any date, event, or deadline. Live updating countdown with shareable link.</p>
    </div>
    <div class="tool-card" style="text-align:center;">
      <div class="controls-row" style="justify-content:center;">
        <div class="control-group"><label>Event Name</label><input type="text" id="eventName" value="Product Launch" oninput="updateTitle()"></div>
        <div class="control-group"><label>Target Date</label><input type="datetime-local" id="targetDate"></div>
      </div>
      <div id="countdown" style="display:flex;justify-content:center;gap:1rem;margin:2.5rem 0;flex-wrap:wrap;"></div>
      <div id="eventTitle" style="font-size:1.2rem;font-weight:600;margin-bottom:1rem;color:var(--accent-hover);"></div>
      <div id="totalInfo" class="text-muted" style="font-size:0.85rem;margin-bottom:1.5rem;"></div>
      <div class="btn-group" style="justify-content:center;">
        <button class="btn btn-secondary" onclick="setQuick(1,'hour')">1 Hour</button>
        <button class="btn btn-secondary" onclick="setQuick(1,'day')">Tomorrow</button>
        <button class="btn btn-secondary" onclick="setQuick(7,'day')">1 Week</button>
        <button class="btn btn-secondary" onclick="setQuick(30,'day')">30 Days</button>
        <button class="btn btn-secondary" onclick="setNewYear()">New Year</button>
      </div>
      <style>
        .cd-unit{text-align:center;min-width:80px;}
        .cd-value{font-size:3.5rem;font-weight:700;font-family:monospace;line-height:1;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem;display:block;}
        .cd-label{font-size:0.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:0.5rem;display:block;}
        @media(max-width:640px){.cd-value{font-size:2rem;padding:0.75rem;}.cd-unit{min-width:60px;}}
      </style>
    </div>
    <div class="tool-card">
      <h3 style="font-size:0.95rem;margin-bottom:0.75rem;">⏱️ Quick Timer</h3>
      <div class="controls-row">
        <div class="control-group"><label>Minutes</label><input type="number" id="timerMin" value="5" min="0"></div>
        <div class="control-group"><label>Seconds</label><input type="number" id="timerSec" value="0" min="0" max="59"></div>
        <button class="btn btn-primary" id="timerBtn" onclick="toggleQuickTimer()" style="align-self:end;">▶ Start</button>
      </div>
      <div id="quickTimerDisplay" style="font-size:3rem;font-weight:700;font-family:monospace;text-align:center;padding:1rem;color:var(--text-primary);">05:00</div>
    </div>
    <div class="ad-zone">Ad Space — 336×280</div>
    <div class="faq-section">
      <h2>Frequently Asked Questions</h2>
      <div class="faq-item"><h3>Does the countdown work in the background?</h3><p>Yes, the countdown calculates the remaining time based on the target date, so it stays accurate even if you switch tabs or close the browser. Just revisit the page to see the updated countdown.</p></div>
    </div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid">
      <a href="pomodoro-timer.html"><span class="tool-icon">⏱️</span> Pomodoro Timer</a>
      <a href="timestamp-converter.html"><span class="tool-icon">🕐</span> Timestamp Converter</a>
      <a href="cron-parser.html"><span class="tool-icon">⏰</span> Cron Parser</a>
      <a href="random-generator.html"><span class="tool-icon">🎲</span> Random Generator</a>
    </div></div>
    <div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
  </div>
  <script>
    // Default to 7 days from now
    const def=new Date();def.setDate(def.getDate()+7);
    document.getElementById('targetDate').value=def.toISOString().slice(0,16);

    function updateCountdown(){
      const target=new Date(document.getElementById('targetDate').value);
      const now=new Date();const diff=target-now;
      if(diff<=0){document.getElementById('countdown').innerHTML='<span style="font-size:2rem;font-weight:700;color:var(--success);">🎉 Event reached!</span>';return;}
      const d=Math.floor(diff/86400000),h=Math.floor((diff%86400000)/3600000),m=Math.floor((diff%3600000)/60000),s=Math.floor((diff%60000)/1000);
      document.getElementById('countdown').innerHTML=[
        {v:d,l:'Days'},{v:h,l:'Hours'},{v:m,l:'Minutes'},{v:s,l:'Seconds'}
      ].map(u=>`<div class="cd-unit"><span class="cd-value">${String(u.v).padStart(2,'0')}</span><span class="cd-label">${u.l}</span></div>`).join('');
      const totalH=Math.floor(diff/3600000),totalM=Math.floor(diff/60000),totalS=Math.floor(diff/1000);
      document.getElementById('totalInfo').textContent=`${totalH.toLocaleString()} hours · ${totalM.toLocaleString()} minutes · ${totalS.toLocaleString()} seconds`;
    }
    function updateTitle(){document.getElementById('eventTitle').textContent=document.getElementById('eventName').value;}
    function setQuick(n,unit){const d=new Date();if(unit==='hour')d.setHours(d.getHours()+n);else d.setDate(d.getDate()+n);document.getElementById('targetDate').value=d.toISOString().slice(0,16);}
    function setNewYear(){const y=new Date().getFullYear()+1;document.getElementById('targetDate').value=y+'-01-01T00:00';document.getElementById('eventName').value='New Year '+y;updateTitle();}

    let quickInterval=null,quickRemaining=0;
    function toggleQuickTimer(){
      if(quickInterval){clearInterval(quickInterval);quickInterval=null;document.getElementById('timerBtn').textContent='▶ Start';return;}
      quickRemaining=(+document.getElementById('timerMin').value*60)+ +document.getElementById('timerSec').value;
      document.getElementById('timerBtn').textContent='⏸ Pause';
      quickInterval=setInterval(()=>{
        quickRemaining--;if(quickRemaining<=0){clearInterval(quickInterval);quickInterval=null;document.getElementById('timerBtn').textContent='▶ Start';
          document.getElementById('quickTimerDisplay').innerHTML='<span style="color:var(--success);">⏰ Time\'s up!</span>';
          try{const ctx=new AudioContext(),o=ctx.createOscillator(),g=ctx.createGain();o.connect(g);g.connect(ctx.destination);o.frequency.value=800;g.gain.value=0.2;o.start();setTimeout(()=>o.stop(),500);}catch(e){}return;}
        const m=Math.floor(quickRemaining/60),s=quickRemaining%60;
        document.getElementById('quickTimerDisplay').textContent=String(m).padStart(2,'0')+':'+String(s).padStart(2,'0');
      },1000);
    }

    updateTitle();updateCountdown();setInterval(updateCountdown,1000);
  </script>
<script src="ads.js"></script>
</body>
</html>