-
Notifications
You must be signed in to change notification settings - Fork 0
/
Google Calendar API in homepage improved by ChatGPT but don't deploy yet.html
274 lines (222 loc) · 12.8 KB
/
Google Calendar API in homepage improved by ChatGPT but don't deploy yet.html
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<style type="text/css">a:link {
color: blue;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: DarkBlue;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
<p></p>
<h3><u>Next Meeting: <b id="date"> . </b></u></h3>
<p><strong>Venue: <href id="location"> </href> </strong></p>
<p><strong>Meeting ID: <b id="ID"> </b></strong></p>
<p><strong>Passcode: <b id="passcode"> </b> </strong></p>
<p><strong>Join Zoom Meeting: <span id="zoom"> </span> </strong></p>
<p dir="ltr">Check your local time <strong><href id="dateLink"> </href></strong></p>
<script>
(async () => {
// the end nth like 1st, 2nd, 3rd, 4th, ...
const nth = (d) => {
if (d > 3 && d < 21) return 'th';
switch (d % 10) {
case 1:
return "st";
case 2:
return "nd";
case 3:
return "rd";
default:
return "th";
}
}
const formatAMPM = (date) => {
let hours = date.getHours();
let minutes = date.getMinutes();
const ampm = hours >= 12 ? 'pm' : 'am';
hours %= 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
const strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
const numberWithSpaces = (x) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
const createLink = (text, href, target) => {
const link = document.createElement('a');
link.textContent = text;
link.href = href;
link.target = target;
return link;
}
const linkToZoom = (zoomLink) => {
const link = createLink(zoomLink, zoomLink, '_blank');
document.getElementById('zoom').appendChild(link);
}
const linkToGoogleMap = (venue) => {
const link = createLink(venue, `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(venue)}`, '_blank');
document.getElementById('location').appendChild(link);
}
const linkToDate = (timeLink) => {
const link = createLink('here', timeLink, '_blank');
document.getElementById('dateLink').appendChild(link);
}
// Start of Async function
const dateNow = new Date().toISOString();
const url = `https://www.googleapis.com/calendar/v3/calendars/p75em956e3b5r49tdpivg9ag2c%40group.calendar.google.com/events?orderBy=startTime&singleEvents=true&timeMin=${dateNow}&key=AIzaSyDZ5nJ17oqEUSI2fw7AXohYB5rHlKAzfYU`;
const response = await fetch(url);
const repositories = await response.json();
const {
items
} = repositories;
const dateResult = [];
for (let i = 0; i < items.length; i++) {
const {
start,
end,
description,
location
} = items[i];
const startDate = new Date(start.dateTime);
const endDate = new Date(end.dateTime);
const startTime = startDate.toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric'
});
const endTime = endDate.toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric'
});
const sky = (() => {
const hours = startDate.getHours();
if (hours < 12) return "morning";
if (hours < 16) return "afternoon";
if (hours < 19) return "evening";
return "night";
})();
const isHybrid = location.includes("Sigma") ? " (Hybrid) " : " (Online-only) ";
const zoomLinkMatch = description.match(/https?:\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/);
const zoomLink = zoomLinkMatch ? zoomLinkMatch[0] : "";
const zoomIDMatch = description.match(/Meeting ID: (\d{3} \d{4} \d{4})/);
const zoomID = zoomIDMatch ? zoomIDMatch[1] : "";
const passcodeMatch = description.match(/Passcode: (\d+)/);
const passcode = passcodeMatch ? passcodeMatch[1] : "";
const day = startDate.toLocaleDateString('en-US', {
weekday: 'long'
});
const month = startDate.toLocaleDateString('en-US', {
month: 'long'
});
const date = startDate.getDate();
const year = startDate.getFullYear();
const formattedDate = `${day} ${sky}, ${date}${nth(date)} ${month} ${year}, ${formatAMPM(startDate)} - ${formatAMPM(endDate)}${isHybrid}`;
console.log(items[i]);
console.log("dateResult: " + formattedDate);
console.log(""); // Space
if (i === 0) {
const timeLink = `https://www.timeanddate.com/worldclock/fixedtime.html?msg=Cyberjaya+Community+Toastmasters+Club+Meeting&iso=${year}${('0' + month).slice(-2)}${('0' + date).slice(-2)}T${startTime.replace(':', '')}&p1=122&ah=2&am=15`;
document.getElementById("date").innerHTML = formattedDate;
linkToGoogleMap(location);
document.getElementById("ID").innerHTML = zoomID;
document.getElementById("passcode").innerHTML = passcode;
linkToZoom(zoomLink);
linkToDate(timeLink);
}
dateResult.push(formattedDate);
}
console.log(url);
})();
</script>
<p dir="ltr">Get the Meeting Agenda and meeting resources here, <a href="https://linktr.ee/cctmc" target="_blank"><span style="color:#0000ff;">https://linktr.ee/cctmc</span></a></p>
<p dir="ltr">Visit <a href="https://cyberjaya.toastmastersclubs.org/directions.html" target="_blank"><span style="color:#0000ff;">Meeting Info/Directions page</span></a> to see a list of the club's Future Meetings</p>
<!-- Facebook Pixel Code --><script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '481726686228284');
fbq('track', 'PageView');
</script><noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=481726686228284&ev=PageView&noscript=1"
/></noscript><!-- End Facebook Pixel Code -->
<h2 style="text-align: justify;"><span style="color:#ff0000;">Due to the COVID-19 pandemic, our meetings will be held online using Zoom. Join us online every 1st and 3rd Wednesday of the month from 8 pm - 10 pm. Go to the </span><a href="https://cyberjaya.toastmastersclubs.org/directions.html" target="_blank"><span style="color:#0000ff;">Meeting Info</span></a><span style="color:#ff0000;"> page for our next meeting. Ready to change your life? </span><a href="http://cyberjaya.toastmastersclubs.org/Become_a_Member.html" target="_blank"><span style="color:#0000ff;">Become a Member Now!</span></a></h2>
<hr />
<h1>Welcome to Cyberjaya Community Toastmasters Club</h1>
<p><img alt="" src="/imageuploads/5257608/cctmc_profile_pic.jpg" style="width: 119%;" /></p>
<p style="text-align: justify;">Cyberjaya Community Toasmasters Club is a Public Speaking club with a vision to grow the Cyberjaya community and nearby city to benefit from the training of Toastmasters to become better public speakers. The club had achieved continuous achievement of <strong>President's Distinguished Club </strong>(the highest level of recognition available) since the club was chartered in 2016! Our meeting is on Wednesday, 1st & 3rd week of every month. You are most welcome to join our meetings for free as many times as you wish! Please go to the <a href="https://cyberjaya.toastmastersclubs.org/directions.html" target="_blank"><span style="color:#0000ff;">Meeting Info</span></a> page for our upcoming meetings.</p>
<hr />
<h1><u>How Toastmasters Works</u></h1>
<p style="text-align: justify;">At Toastmasters, members learn by speaking to groups and working with others in a supportive environment. A typical Toastmasters club is made up of 20 to 30 people who meet twice a month for approximately two hours. Each meeting gives members several opportunities:</p>
<p style="text-align: justify;">► Conduct meetings. Members learn how to plan and conduct meetings.</p>
<p style="text-align: justify;">► Give impromptu speeches. Members present one- to two minutes, impromptu speeches about assigned topics.</p>
<p style="text-align: justify;">► Present prepared speeches. Members present speeches based on projects from Toastmasters’ communication and leadership program. Projects cover topics such as speech organization, vocal variety, language, gestures, and persuasion.</p>
<p style="text-align: justify;">► Offer constructive evaluation. Every speaker is assigned an evaluator who points out speech strengths and offers suggestions for improvement.</p>
<h2><a href="http://cyberjaya.toastmastersclubs.org/Become_a_Member.html" target="_blank"><span style="color:#0000ff;">Join Toastmasters Now!</span></a></h2>
<hr />
<h1><u>Why should you join Toastmasters?</u></h1>
<p><img alt="Icon of a person practicing their public speaking behind a podium" src="https://toastmasterscdn.azureedge.net/medias/images/prospectivememberpage/toastmasters-public-speaking-icon.svg?h=16&thn=1&w=16" /> Improve your public speaking skills</p>
<p><br />
<br />
<img alt="Icon of a person running up a line graph" src="https://toastmasterscdn.azureedge.net/medias/images/prospectivememberpage/toastmasters-leadership-skills-icon.svg?h=16&thn=1&w=16" /> Build leadership skills</p>
<p><br />
<br />
<img alt="Icon of a person standing on a podium with confetti falling around them" src="https://toastmasterscdn.azureedge.net/medias/images/prospectivememberpage/toastmasters-potential-icon.svg?h=16&thn=1&w=16" /> Maximize your potential</p>
<p><br />
<br />
<img alt="Icon of a person building a pyramid" src="https://toastmasterscdn.azureedge.net/medias/images/prospectivememberpage/toastmasters-personal-growth-icon.svg?h=16&thn=1&w=16" /> Enjoy unlimited personal growth</p>
<p><br />
<br />
<img alt="Icon of a person with three small headshots next to them" src="https://toastmasterscdn.azureedge.net/medias/images/prospectivememberpage/toastmasters-networking-icon.svg?h=16&thn=1&w=16" /> Work on networking in a small and supportive environment</p>
<p><br />
<br />
<img alt="Icon of a speech resting on a podium" src="https://toastmasterscdn.azureedge.net/medias/images/prospectivememberpage/toastmasters-presenting-icon.svg?h=16&thn=1&w=16" /> Practice writing speeches and presenting in a group setting</p>
<p><br />
<br />
<img alt="Icon of a person holding up a positive sloping graph" src="https://toastmasterscdn.azureedge.net/medias/images/prospectivememberpage/toastmasters-workplace-icon.svg?h=16&thn=1&w=16" />Gain a competitive advantage in the workplace</p>
<p><br />
<br />
<img alt="Icon of a magnifying glass next to a person" src="https://toastmasterscdn.azureedge.net/medias/images/prospectivememberpage/toastmasters-confidence-icon.svg?h=16&thn=1&w=16" /> Build self-confidence and self-awareness</p>
<h2><a href="https://cyberjaya.toastmastersclubs.org/Become_a_Member.html" target="_blank"><span style="color:#0000ff;"><strong>Become our Member Now by clicking here!</strong></span></a></h2>
<hr />
<h1><u>How to join the meeting as a guest?</u></h1>
<p>You can send an email to us via <a href="https://cyberjaya.toastmastersclubs.org?contactus"><span style="color:#0000ff;">Contact Us</span></a> page or send a Facebook messenger to us via the chat button at the bottom of the website. Alternatively, you can enter your email in the form below.</p>
<div class="video-container"><iframe frameborder="0" height="650" marginheight="0" marginwidth="0" src="https://docs.google.com/forms/d/e/1FAIpQLScz1NMTNOi2jnxtopem1SFHsDaX_ojZl3fEU27Aro_KbJ12-w/viewform?embedded=true" width="600">Loading&hellip;</iframe></div>
<!-- Messenger Chat plugin Code -->
<div id="fb-root"></div>
<!-- Your Chat plugin code -->
<div class="fb-customerchat" id="fb-customer-chat"></div>
<script>
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute("page_id", "793705704105803");
chatbox.setAttribute("attribution", "biz_inbox");
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v11.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>