Skip to content

Commit e7c6555

Browse files
simonwsimonw
authored
Add section describing effect on dog
https://gist.github.com/simonw/d680d5f27b50de4efc26ed2a673292fd
1 parent e62d0d3 commit e7c6555

File tree

1 file changed

+124
-40
lines changed

1 file changed

+124
-40
lines changed

‎california-clock-change.html

+124-40
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,32 @@
6565
line-height: 1.6;
6666
color: #c53030;
6767
}
68+
.body-clock {
69+
background: #ebf8ff;
70+
border: 2px solid #4299e1;
71+
border-radius: 8px;
72+
padding: 1.5rem;
73+
margin: 1rem 0;
74+
font-size: 1.2rem;
75+
line-height: 1.6;
76+
}
77+
.past-change {
78+
background: #faf5ff;
79+
border: 2px solid #805ad5;
80+
border-radius: 8px;
81+
padding: 1.5rem;
82+
margin: 1rem 0;
83+
font-size: 1.2rem;
84+
line-height: 1.6;
85+
}
6886
@media (max-width: 480px) {
6987
.container {
7088
padding: 1.5rem;
7189
}
7290
h1 {
7391
font-size: 1.5rem;
7492
}
75-
.info-box {
93+
.info-box, .body-clock, .past-change {
7694
font-size: 1.1rem;
7795
padding: 1rem;
7896
}
@@ -83,7 +101,9 @@
83101
<div class="container">
84102
<h1>California Clock Change</h1>
85103
<div class="subtitle">For Pacific Time (PST/PDT) only</div>
86-
<div id="content">Loading...</div>
104+
<div id="past-change"></div>
105+
<div id="future-change"></div>
106+
<div id="body-clock"></div>
87107
</div>
88108

89109
<script>
@@ -95,31 +115,33 @@ <h1>California Clock Change</h1>
95115
timezone === "PST8PDT";
96116
}
97117

98-
function getNextCaliforniaChange() {
118+
function getClockChanges() {
99119
const now = new Date();
100120
const year = now.getFullYear();
101121

102-
// Second Sunday in March
103-
const springForward = new Date(year, 2, 1 + (14 - new Date(year, 2, 1).getDay()));
104-
// First Sunday in November
105-
const fallBack = new Date(year, 10, 1 + (7 - new Date(year, 10, 1).getDay()));
106-
107-
if (now > fallBack) {
108-
return {
109-
date: new Date(year + 1, 2, 1 + (14 - new Date(year + 1, 2, 1).getDay())),
110-
isSpringForward: true
111-
};
112-
} else if (now > springForward) {
113-
return {
114-
date: fallBack,
115-
isSpringForward: false
116-
};
117-
} else {
118-
return {
119-
date: springForward,
120-
isSpringForward: true
121-
};
122+
// Get changes for current and adjacent years to handle year boundaries
123+
function getYearChanges(y) {
124+
// Second Sunday in March
125+
const springForward = new Date(y, 2, 1 + (14 - new Date(y, 2, 1).getDay()));
126+
// First Sunday in November
127+
const fallBack = new Date(y, 10, 1 + (7 - new Date(y, 10, 1).getDay()));
128+
return [
129+
{ date: springForward, isSpringForward: true },
130+
{ date: fallBack, isSpringForward: false }
131+
];
122132
}
133+
134+
const changes = [
135+
...getYearChanges(year - 1),
136+
...getYearChanges(year),
137+
...getYearChanges(year + 1)
138+
].sort((a, b) => a.date - b.date);
139+
140+
// Find the most recent past change and next future change
141+
const pastChange = changes.filter(change => change.date < now).pop();
142+
const futureChange = changes.find(change => change.date > now);
143+
144+
return { pastChange, futureChange };
123145
}
124146

125147
function formatDate(date) {
@@ -128,41 +150,103 @@ <h1>California Clock Change</h1>
128150
return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
129151
}
130152

131-
function updateInfo() {
132-
const content = document.getElementById('content');
153+
function formatTime(date) {
154+
return date.toLocaleTimeString('en-US', {
155+
hour: 'numeric',
156+
minute: '2-digit',
157+
hour12: true
158+
});
159+
}
160+
161+
function getDaysSince(date) {
162+
const now = new Date();
163+
const diffTime = Math.abs(now - date);
164+
return Math.floor(diffTime / (1000 * 60 * 60 * 24));
165+
}
166+
167+
function updateBodyClockInfo(pastChange) {
168+
const bodyClockDiv = document.getElementById('body-clock');
169+
const daysSince = getDaysSince(pastChange.date);
133170

171+
if (daysSince <= 7) { // Show message for a week after the change
172+
const now = new Date();
173+
const dogClock = new Date(now);
174+
175+
if (pastChange.isSpringForward) {
176+
dogClock.setHours(now.getHours() - 1);
177+
} else {
178+
dogClock.setHours(now.getHours() + 1);
179+
}
180+
181+
bodyClockDiv.className = 'body-clock';
182+
bodyClockDiv.innerHTML = `
183+
<p>🐺 Is your dog confused about meal or walk times?</p>
184+
<p>While your clock says it's <span class="highlight">${formatTime(now)}</span>,
185+
your dog's internal clock thinks it's <span class="highlight">${formatTime(dogClock)}</span>!</p>
186+
<p>Dogs have very reliable internal clocks and don't automatically adjust to Daylight Saving Time.
187+
Don't worry - your pup's schedule should adjust naturally over the next few days.</p>
188+
`;
189+
} else {
190+
bodyClockDiv.innerHTML = '';
191+
}
192+
}
193+
194+
function updateInfo() {
134195
if (!isCaliforniaTimezone()) {
135-
content.className = 'wrong-timezone';
136-
content.innerHTML = 'You appear to be outside of California/Pacific Time.<br>This tool only works for Pacific Time (PST/PDT).';
196+
document.getElementById('future-change').className = 'wrong-timezone';
197+
document.getElementById('future-change').innerHTML = 'You appear to be outside of California/Pacific Time.<br>This tool only works for Pacific Time (PST/PDT).';
137198
return;
138199
}
139200

140-
const change = getNextCaliforniaChange();
141-
const saturday = new Date(change.date);
142-
saturday.setDate(change.date.getDate() - 1);
201+
const { pastChange, futureChange } = getClockChanges();
202+
203+
// Show past change
204+
const pastChangeDiv = document.getElementById('past-change');
205+
const pastSaturday = new Date(pastChange.date);
206+
pastSaturday.setDate(pastChange.date.getDate() - 1);
207+
208+
pastChangeDiv.className = 'past-change';
209+
pastChangeDiv.innerHTML = `
210+
<div>Most recent change:</div>
211+
On <span class="highlight">Sunday, ${formatDate(pastChange.date)}</span>,
212+
clocks ${pastChange.isSpringForward ? 'sprang forward' : 'fell back'}
213+
(${pastChange.isSpringForward ? 'lost' : 'gained'} one hour).
214+
`;
215+
216+
// Show future change
217+
const futureChangeDiv = document.getElementById('future-change');
218+
const futureSaturday = new Date(futureChange.date);
219+
futureSaturday.setDate(futureChange.date.getDate() - 1);
143220

144221
const now = new Date();
145-
const isTonight = now.getDate() === saturday.getDate() &&
146-
now.getMonth() === saturday.getMonth() &&
147-
now.getFullYear() === saturday.getFullYear();
222+
const isTonight = now.getDate() === futureSaturday.getDate() &&
223+
now.getMonth() === futureSaturday.getMonth() &&
224+
now.getFullYear() === futureSaturday.getFullYear();
148225

149-
const sleepEffect = change.isSpringForward ? 'lose an hour of sleep' : 'get an extra hour of sleep';
150-
const clockEffect = change.isSpringForward ?
226+
const sleepEffect = futureChange.isSpringForward ? 'lose an hour of sleep' : 'get an extra hour of sleep';
227+
const clockEffect = futureChange.isSpringForward ?
151228
'clocks spring forward from 2:00 AM to 3:00 AM' :
152229
'clocks fall back from 2:00 AM to 1:00 AM';
153230

154231
const tonightBadge = isTonight ? '<span class="tonight">That\'s tonight!</span>' : '';
155232

156-
content.className = 'info-box';
157-
content.innerHTML = `
158-
When you go to bed on <span class="highlight">Saturday, ${formatDate(saturday)}</span>${tonightBadge},
233+
futureChangeDiv.className = 'info-box';
234+
futureChangeDiv.innerHTML = `
235+
<div>Next change:</div>
236+
When you go to bed on <span class="highlight">Saturday, ${formatDate(futureSaturday)}</span>${tonightBadge},
159237
you will ${sleepEffect}!<br><br>
160238
The ${clockEffect} on
161-
<span class="highlight">Sunday, ${formatDate(change.date)}</span>.
239+
<span class="highlight">Sunday, ${formatDate(futureChange.date)}</span>.
162240
`;
241+
242+
// Update body clock info based on past change
243+
updateBodyClockInfo(pastChange);
163244
}
164245

165246
updateInfo();
247+
248+
// Update the times every minute
249+
setInterval(updateInfo, 60000);
166250
</script>
167251
</body>
168-
</html>
252+
</html>

0 commit comments

Comments
 (0)