Skip to content

Commit 3925bc1

Browse files
LCSOGthbLCSOGthb
authored
Added clock, countdown and timestamp tools
1 parent 16a905b commit 3925bc1

9 files changed

Lines changed: 520 additions & 0 deletions

File tree

‎tools/clock.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
background: #f8f9fa;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
header {
10+
background: #0077cc;
11+
color: white;
12+
padding: 1rem;
13+
}
14+
15+
.clock-container {
16+
margin-top: 3rem;
17+
}
18+
19+
.clock-display {
20+
font-size: 3rem;
21+
font-weight: bold;
22+
color: #222;
23+
margin-bottom: 1rem;
24+
}
25+
26+
.date-display {
27+
font-size: 1.5rem;
28+
color: #555;
29+
}
30+
31+
footer {
32+
margin-top: 3rem;
33+
padding: 1rem;
34+
background: #f1f1f1;
35+
}

‎tools/clock.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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>Live Clock</title>
7+
<link rel="stylesheet" href="clock.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>🕒 Live Clock</h1>
12+
<p>See the current date and time in real time.</p>
13+
</header>
14+
15+
<main class="clock-container">
16+
<div id="clock" class="clock-display">--:--:--</div>
17+
<div id="date" class="date-display">Loading date...</div>
18+
</main>
19+
20+
<footer>
21+
<p><a href="../index.html">⬅ Back to Tools</a></p>
22+
</footer>
23+
24+
<script src="clock.js"></script>
25+
</body>
26+
</html>

‎tools/clock.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
function updateClock() {
2+
const now = new Date();
3+
4+
// Format time as HH:MM:SS
5+
const hours = String(now.getHours()).padStart(2, '0');
6+
const minutes = String(now.getMinutes()).padStart(2, '0');
7+
const seconds = String(now.getSeconds()).padStart(2, '0');
8+
document.getElementById("clock").textContent = `${hours}:${minutes}:${seconds}`;
9+
10+
// Format date as Day, Month Date, Year
11+
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
12+
document.getElementById("date").textContent = now.toLocaleDateString(undefined, options);
13+
}
14+
15+
// Update every second
16+
setInterval(updateClock, 1000);
17+
updateClock(); // Initial call

‎tools/countdown.css‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
/* Matches the simple look of other tools */
2+
body {
3+
font-family: Arial, sans-serif;
4+
margin: 0;
5+
background: #f8f9fa;
6+
color: #222;
7+
text-align: center;
8+
}
9+
10+
header {
11+
background: #ff8c00;
12+
color: white;
13+
padding: 1rem;
14+
}
15+
16+
.countdown-container {
17+
max-width: 720px;
18+
margin: 2rem auto;
19+
padding: 1rem;
20+
}
21+
22+
.controls {
23+
background: white;
24+
padding: 1rem;
25+
border-radius: 10px;
26+
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
27+
margin-bottom: 1rem;
28+
}
29+
30+
.controls label {
31+
display: block;
32+
margin-bottom: 0.5rem;
33+
font-weight: bold;
34+
}
35+
36+
.controls input[type="datetime-local"] {
37+
width: 100%;
38+
max-width: 360px;
39+
padding: 0.5rem;
40+
border-radius: 6px;
41+
border: 1px solid #ccc;
42+
margin-bottom: 0.75rem;
43+
}
44+
45+
.buttons {
46+
display: flex;
47+
gap: 0.5rem;
48+
justify-content: center;
49+
flex-wrap: wrap;
50+
margin-bottom: 0.5rem;
51+
}
52+
53+
.btn {
54+
padding: 0.5rem 0.9rem;
55+
border: none;
56+
background: #ff8c00;
57+
color: white;
58+
border-radius: 6px;
59+
cursor: pointer;
60+
font-size: 0.95rem;
61+
}
62+
63+
.btn[disabled] {
64+
background: #ccc;
65+
cursor: not-allowed;
66+
}
67+
68+
.presets {
69+
margin-top: 0.5rem;
70+
}
71+
72+
.preset {
73+
background: #eee;
74+
border: none;
75+
padding: 0.35rem 0.6rem;
76+
margin: 0 0.25rem;
77+
border-radius: 6px;
78+
cursor: pointer;
79+
}
80+
81+
.display {
82+
display: flex;
83+
justify-content: center;
84+
gap: 1rem;
85+
margin-top: 1rem;
86+
flex-wrap: wrap;
87+
}
88+
89+
.time-part {
90+
background: white;
91+
padding: 1rem 1.25rem;
92+
border-radius: 10px;
93+
width: 120px;
94+
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
95+
}
96+
97+
.time-part span {
98+
display: block;
99+
font-size: 2rem;
100+
font-weight: bold;
101+
}
102+
103+
.time-part small {
104+
display: block;
105+
margin-top: 0.25rem;
106+
color: #666;
107+
}
108+
109+
.message {
110+
margin-top: 1rem;
111+
font-weight: bold;
112+
color: #333;
113+
}
114+
115+
footer {
116+
margin-top: 2rem;
117+
padding: 1rem;
118+
background: #f1f1f1;
119+
}

‎tools/countdown.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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" />
6+
<title>Countdown Timer</title>
7+
<link rel="stylesheet" href="countdown.css" />
8+
</head>
9+
<body>
10+
<header>
11+
<h1>⏱ Countdown Timer</h1>
12+
<p>Set a target date/time and watch the live countdown.</p>
13+
</header>
14+
15+
<main class="countdown-container">
16+
<div class="controls">
17+
<label for="targetInput">Target date & time</label>
18+
<input type="datetime-local" id="targetInput" />
19+
20+
<div class="buttons">
21+
<button id="startBtn" class="btn">Start</button>
22+
<button id="pauseBtn" class="btn" disabled>Pause</button>
23+
<button id="resetBtn" class="btn" disabled>Reset</button>
24+
</div>
25+
26+
<div class="presets">
27+
<button class="preset" data-days="1">+1 day</button>
28+
<button class="preset" data-days="7">+7 days</button>
29+
<button class="preset" data-minutes="5">+5 minutes</button>
30+
</div>
31+
</div>
32+
33+
<div class="display" id="display">
34+
<div class="time-part">
35+
<span id="days">--</span>
36+
<small>Days</small>
37+
</div>
38+
<div class="time-part">
39+
<span id="hours">--</span>
40+
<small>Hours</small>
41+
</div>
42+
<div class="time-part">
43+
<span id="minutes">--</span>
44+
<small>Minutes</small>
45+
</div>
46+
<div class="time-part">
47+
<span id="seconds">--</span>
48+
<small>Seconds</small>
49+
</div>
50+
</div>
51+
52+
<div class="message" id="message">No countdown running</div>
53+
</main>
54+
55+
<footer>
56+
<p><a href="../index.html">⬅ Back to Tools</a></p>
57+
</footer>
58+
59+
<script src="countdown.js"></script>
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)