Hugging Face's logo

Spaces:
LauraMDB
/
mongodb-mastery-hub
Running

App Files Community
LauraMDB commited on
Commit
44e1e80
路
verified 路
1 Parent(s): 7d6fdce

Before upcoming courses, create a flow with the following information:

Browse files

fundational courses: MDB100, MDB200, MDB300
Then add some role-focused courses
- Developer and Data Architect: DEV400, DEV500, DS120
- Developer Advanced: DA610, DA620, DA630, DA640, DA650
- AI Developer: DS110, DA660, DA670
- Atlas Admin / DevOps: OFA400, OFS400, OA610, OA620, OA640
- Database Admin / DevOps: OFS400, OFS500, OA610, OA620, OA630
- Security - CSFLE: DS130

Then display a calendar view based on this table:
Course Confirmed? Start Date End Date Time Zone Time Region Language Instructor Event ID
OFA400: Atlas Admin Yes 25-Nov-25 25-Nov-25 MX CST All Day (9:00 AM - 5:00 PM) LATAM Spanish Virgilio De la Cruz Jard贸n MX CST | 2025 Nov 25 | Spanish (OFA400) c0caf703-35d5-4a9d-a561-5db9cb7d40ee
OFA500: Atlas API Yes 26-Nov-25 26-Nov-25 MX CST All Day (9:00 AM - 5:00 PM) LATAM Spanish Virgilio De la Cruz Jard贸n MX CST | 2025 Nov 26 | Spanish (OFA500) 4e805e95-4818-4b11-8dcb-7d77a9bfb016
DEV400: MongoDB Developer Extension Yes 27-Nov-25 27-Nov-25 MX CST All Day (9:00 AM - 5:00 PM) LATAM Spanish Virgilio De la Cruz Jard贸n MX CST | 2025 Nov 27 | Spanish (DEV400) f9a7be49-8f08-48c6-8b17-227ac788fd68
OA620: Ops Manager Sizing Installation and Configuration (1-day) Yes 1-Dec-25 1-Dec-25 FR CET All Day (9:00 AM - 5:00 PM) EMEA French Elie Yaacoub FR CET | 2025 Dec 01 | French (OA620) b400dc3c-65ed-4e37-89b4-de67b66f13f0
OA630: Self-Hosted Security Yes 01-Dec-25 01-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) NEUR English Joe Nyirenda UK GMT | 2025 Dec 01 | English (OA630) c5eb9db7-8715-40ad-8615-b76b0785b2be
OFS400: Ops Manager Admin Yes 2-Dec-25 2-Dec-25 FR CET All Day (9:00 AM - 5:00 PM) EMEA French Elie Yaacoub FR CET | 2025 Dec 02 | French (OFS400) a107c610-fbdc-404e-b95b-497556b3e295
MDB100: MongoDB Database and Security Pending 8-Dec-25 8-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2025 Dec 08 | English (MDB100) ca5d29d0-1924-44b2-bf0d-ee6eb2ed631f
MDB100: MongoDB Database and Security Pending 8-Dec-25 8-Dec-25 SG SGT All Day (9:00 AM - 5:00 PM) APAC English Jirachai Chansivanon SG SGT | 2025 Dec 08 | English (MDB100) 56f03773-aa3f-4246-bc38-e0e50d9b67ec
MDB100: MongoDB Database and Security Pending 8-Dec-25 8-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2025 Dec 08 | English (MDB100) 915b651a-fd73-4b6c-8b20-f8a815c85006
MDB200: MongoDB Optimization and Performance Pending 9-Dec-25 9-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2025 Dec 09 | English (MDB200) 1d098b3b-229c-47c3-a22c-68dfd5f1ad2b
MDB200: MongoDB Optimization and Performance Pending 9-Dec-25 9-Dec-25 SG SGT All Day (9:00 AM - 5:00 PM) APAC English Jirachai Chansivanon SG SGT | 2025 Dec 09 | English (MDB200) 1df5cf37-e329-434f-a955-cd7866d40fbe
MDB200: MongoDB Optimization and Performance Pending 9-Dec-25 9-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2025 Dec 09 | English (MDB200) 87d323f0-d3cc-4e20-966d-f27deea2e0c6
MDB300: MongoDB Production Readiness Pending 10-Dec-25 10-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2025 Dec 10 | English (MDB300) 08ad6f17-7a2c-409f-ae45-6b850a2d3e53
MDB300: MongoDB Production Readiness Pending 10-Dec-25 10-Dec-25 SG SGT All Day (9:00 AM - 5:00 PM) APAC English Jirachai Chansivanon SG SGT | 2025 Dec 10 | English (MDB300) bdc00053-9c45-4d0f-b932-60dfbd42dd86
MDB300: MongoDB Production Readiness Pending 10-Dec-25 10-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2025 Dec 10 | English (MDB300) 0280090c-3643-450d-a2a0-e72198edb9ed
DA630: Distributed Systems and Transactions (1-day) Yes 10-Dec-25 10-Dec-25 MX CST All Day (9:00 AM - 5:00 PM) AMER Spanish Virgilio De la Cruz Jard贸n MX CST | 2025 Dec 10 | Spanish (DA630) 8acc6ecf-86f8-40e2-816e-abc3b2bd11ee
DEV400: MongoDB Developer Extension Pending 11-Dec-25 11-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2025 Dec 11 | English (DEV400) 21a4a4e3-6415-4c54-8257-8139347e2bb0
DEV400: MongoDB Developer Extension Pending 11-Dec-25 11-Dec-25 SG SGT All Day (9:00 AM - 5:00 PM) APAC English Jirachai Chansivanon SG SGT | 2025 Dec 11 | English (DEV400) af733e7c-8c45-49c9-a543-98539207cf8a
DEV400: MongoDB Developer Extension Pending 11-Dec-25 11-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2025 Dec 11 | English (DEV400) 1e40ed5b-a77c-49bd-9545-af956930d4fb
OA640: Atlas Security Yes 11-Dec-25 11-Dec-25 MX CST All Day (9:00 AM - 5:00 PM) AMER Spanish Virgilio De la Cruz Jard贸n MX CST | 2025 Dec 11 | Spanish (OA640) a0eb02fe-bb35-4be8-b1fe-86a1db14c3f9
OFA400: Atlas Admin Pending 12-Dec-25 12-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2025 Dec 12 | English (OFA400) b318921e-9991-4423-942f-16883397221d
OFA400: Atlas Admin Pending 12-Dec-25 12-Dec-25 SG SGT All Day (9:00 AM - 5:00 PM) APAC English Jirachai Chansivanon SG SGT | 2025 Dec 12 | English (OFA400) 566c2101-a91f-43db-9496-bfa671458d6e
OFA400: Atlas Admin Pending 12-Dec-25 12-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2025 Dec 12 | English (OFA400) 8cb8d36f-918c-45bb-830a-097e8c44c0b8
OA610: Benchmarking and Capacity Planning (1-day) Pending 15-Dec-25 15-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2025 Dec 15 | English (OA610) c8c13309-2a64-4d30-bcb3-5d60db4b53ca
OA610: Benchmarking and Capacity Planning (1-day) Pending 15-Dec-25 15-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2025 Dec 15 | English (OA610) 46b01377-682e-4a47-b568-97c0ef4ca3a1
DS120: MongoDB Atlas Data Lake (1-day) Pending 15-Dec-25 15-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Virgilio De la Cruz Jard贸n US CST | 2025 Dec 15 | English (DS120) 7e4fc143-4a2d-4f1d-b35d-0194041dc961
OA620: Ops Manager Sizing Installation and Configuration (1-day) Pending 16-Dec-25 16-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2025 Dec 16 | English (OA620) 00ce83fe-9b7c-45b6-bf9e-92b7e615786b
OA620: Ops Manager Sizing Installation and Configuration (1-day) Pending 16-Dec-25 16-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2025 Dec 16 | English (OA620) e2a23752-e878-417f-a80b-e2462574180e
OA640: Atlas Security Pending 17-Dec-25 17-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2025 Dec 17 | English (OA640) 78275d99-b820-4338-a9a8-d0a362c7a8fc
OA640: Atlas Security Pending 17-Dec-25 17-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2025 Dec 17 | English (OA640) 26baf882-56c6-4339-9087-ab130eb72346
DA630: Distributed Systems and Transactions (1-day) Pending 18-Dec-25 18-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2025 Dec 18 | English (DA630) 14aec117-3580-4b70-bd06-25676cc55dcb
DA630: Distributed Systems and Transactions (1-day) Pending 18-Dec-25 18-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2025 Dec 18 | English (DA630) 03bed907-f6a1-42ea-bfcf-297ed2da5dc8
DEV500: Data Modeling and Schema Design Pending 19-Dec-25 19-Dec-25 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2025 Dec 19 | English (DEV500) 784673aa-bcfe-4a0f-92b5-dada1e9eaea5
DEV500: Data Modeling and Schema Design Pending 19-Dec-25 19-Dec-25 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2025 Dec 19 | English (DEV500) 464c4f3f-fb24-4d62-b15f-cc4e93b2b470
OFS400: Ops Manager Admin Pending 16-Jan-26 16-Jan-26 US CST All Day (9:00 AM - 5:00 PM) AMER English Camden Kirkland US CST | 2026 Jan 16 | English (OFS400) 181923ee-6d79-4062-815a-c8d9b7f7255d
OFS400: Ops Manager Admin Pending 16-Jan-26 16-Jan-26 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2026 Jan 16 | English (OFS400) 9d27222f-4af4-40b7-ae7f-c39b63248d73
DA610: MongoDB Adv. Queries (1-day) Pending 19-Jan-26 19-Jan-26 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2026 Jan 19 | English (DA610) 87a3bcdb-e8ec-4ed8-bf42-b1ebe783d17c
MDB100: MongoDB Database and Security Pending 19-Jan-26 19-Jan-26 AU AEDT All Day (9:00 AM - 5:00 PM) APAC English Daniel Parrott AU AEDT | 2026 Jan 19 | English (MDB100) 9c78446c-c623-443e-a0ff-71bf3ba9a57b
DA610: MongoDB Adv. Queries (1-day) Pending 19-Jan-26 19-Jan-26 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2026 Jan 19 | English (DA610) b630ee7e-d281-4647-84f9-37ea6c81052e
MDB100: MongoDB Database and Security Pending 19-Jan-26 19-Jan-26 MX CST All Day (9:00 AM - 5:00 PM) AMER Spanish Virgilio De la Cruz Jard贸n MX CST | 2026 Jan 19 | Spanish (MDB100) 6e3326a3-0ed9-482b-a5de-567cfdb3135d
DA620: Languages Drivers Web Services (1-day) Pending 20-Jan-26 20-Jan-26 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2026 Jan 20 | English (DA620) 556c3920-f223-4a9f-8208-3ee04579462c
MDB200: MongoDB Optimization and Performance Pending 20-Jan-26 20-Jan-26 AU AEDT All Day (9:00 AM - 5:00 PM) APAC English Daniel Parrott AU AEDT | 2026 Jan 20 | English (MDB200) e34f8497-0f8c-46ee-a19b-a1aeeb0a2e28
DA620: Languages Drivers Web Services (1-day) Pending 20-Jan-26 20-Jan-26 UK GMT All Day (9:00 AM - 5:00 PM) EMEA English Joe Nyirenda UK GMT | 2026 Jan 20 | English (DA620) b8dcb173-8269-41c0-a921-db91e7567a37
MDB200: MongoDB Optimization and Performance Pending 20-Jan-26 20-Jan-26 MX CST All Day (9:00 AM - 5:00 PM) AMER Spanish Virgilio De la Cruz Jard贸n MX CST | 2026 Jan 20 | Spanish (MDB200) 9b5497d5-6eaa-40d6-ba73-bfb687ee322e
DA640: MongoDB Application Optimization (1-day) Pending 21-Jan-26 21-Jan-26 US CST All Day (9:00 AM - 5:00 PM) AMER English Ann Duong US CST | 2026 Jan 21 | English (DA640) bf56a0d0-38c4-4e4b-8738-578292725ae8
MDB300: MongoDB Production Readiness Pending 21-Jan-26 21-Jan-26 AU AEDT All Day (9:00 AM - 5:00 PM) APAC English Daniel Parrott AU AEDT | 2026 Jan 21 | English (MDB

Files changed (3) hide show
  1. index.html +180 -2
  2. script.js +64 -1
  3. style.css +18 -0
index.html CHANGED
@@ -33,9 +33,187 @@
33
  </a>
34
  </div>
35
  </section>
36
- <!-- Courses Section -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  <section id="upcoming-courses" class="mb-20">
38
- <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Upcoming Courses</h2>
39
 
40
  <!-- Month Selector -->
41
  <div class="flex justify-center mb-8">
 
33
  </a>
34
  </div>
35
  </section>
36
+ <!-- Course Paths Section -->
37
+ <section class="mb-20">
38
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Choose Your Learning Path</h2>
39
+
40
+ <div class="mb-12">
41
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Foundational Courses</h3>
42
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
43
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
44
+ <h4 class="font-medium text-green-600">MDB100</h4>
45
+ <p class="text-gray-600">MongoDB Database and Security</p>
46
+ </div>
47
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
48
+ <h4 class="font-medium text-green-600">MDB200</h4>
49
+ <p class="text-gray-600">MongoDB Optimization and Performance</p>
50
+ </div>
51
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
52
+ <h4 class="font-medium text-green-600">MDB300</h4>
53
+ <p class="text-gray-600">MongoDB Production Readiness</p>
54
+ </div>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="mb-12">
59
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Role-Focused Courses</h3>
60
+
61
+ <div class="mb-6">
62
+ <h4 class="font-medium text-gray-700 mb-2">Developer and Data Architect</h4>
63
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
64
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
65
+ <h4 class="font-medium text-blue-600">DEV400</h4>
66
+ <p class="text-gray-600">MongoDB Developer Extension</p>
67
+ </div>
68
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
69
+ <h4 class="font-medium text-blue-600">DEV500</h4>
70
+ <p class="text-gray-600">Data Modeling and Schema Design</p>
71
+ </div>
72
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
73
+ <h4 class="font-medium text-blue-600">DS120</h4>
74
+ <p class="text-gray-600">MongoDB Atlas Data Lake</p>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="mb-6">
80
+ <h4 class="font-medium text-gray-700 mb-2">Developer Advanced</h4>
81
+ <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
82
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
83
+ <h4 class="font-medium text-purple-600">DA610</h4>
84
+ <p class="text-gray-600">MongoDB Adv. Queries</p>
85
+ </div>
86
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
87
+ <h4 class="font-medium text-purple-600">DA620</h4>
88
+ <p class="text-gray-600">Languages Drivers Web Services</p>
89
+ </div>
90
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
91
+ <h4 class="font-medium text-purple-600">DA630</h4>
92
+ <p class="text-gray-600">Distributed Systems and Transactions</p>
93
+ </div>
94
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
95
+ <h4 class="font-medium text-purple-600">DA640</h4>
96
+ <p class="text-gray-600">MongoDB Application Optimization</p>
97
+ </div>
98
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
99
+ <h4 class="font-medium text-purple-600">DA650</h4>
100
+ <p class="text-gray-600">Advanced Aggregation</p>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <div class="mb-6">
106
+ <h4 class="font-medium text-gray-700 mb-2">AI Developer</h4>
107
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
108
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
109
+ <h4 class="font-medium text-indigo-600">DS110</h4>
110
+ <p class="text-gray-600">MongoDB Atlas Search & Vector Search</p>
111
+ </div>
112
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
113
+ <h4 class="font-medium text-indigo-600">DA660</h4>
114
+ <p class="text-gray-600">AI Integration Patterns</p>
115
+ </div>
116
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
117
+ <h4 class="font-medium text-indigo-600">DA670</h4>
118
+ <p class="text-gray-600">Vector Search Implementation</p>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="mb-6">
124
+ <h4 class="font-medium text-gray-700 mb-2">Atlas Admin / DevOps</h4>
125
+ <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
126
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
127
+ <h4 class="font-medium text-red-600">OFA400</h4>
128
+ <p class="text-gray-600">Atlas Admin</p>
129
+ </div>
130
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
131
+ <h4 class="font-medium text-red-600">OFS400</h4>
132
+ <p class="text-gray-600">Ops Manager Admin</p>
133
+ </div>
134
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
135
+ <h4 class="font-medium text-red-600">OA610</h4>
136
+ <p class="text-gray-600">Benchmarking and Capacity Planning</p>
137
+ </div>
138
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
139
+ <h4 class="font-medium text-red-600">OA620</h4>
140
+ <p class="text-gray-600">Ops Manager Sizing Installation</p>
141
+ </div>
142
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
143
+ <h4 class="font-medium text-red-600">OA640</h4>
144
+ <p class="text-gray-600">Atlas Security</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <div class="mb-6">
150
+ <h4 class="font-medium text-gray-700 mb-2">Database Admin / DevOps</h4>
151
+ <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
152
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
153
+ <h4 class="font-medium text-orange-600">OFS400</h4>
154
+ <p class="text-gray-600">Ops Manager Admin</p>
155
+ </div>
156
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
157
+ <h4 class="font-medium text-orange-600">OFS500</h4>
158
+ <p class="text-gray-600">Ops Manager API</p>
159
+ </div>
160
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
161
+ <h4 class="font-medium text-orange-600">OA610</h4>
162
+ <p class="text-gray-600">Benchmarking and Capacity Planning</p>
163
+ </div>
164
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
165
+ <h4 class="font-medium text-orange-600">OA620</h4>
166
+ <p class="text-gray-600">Ops Manager Sizing Installation</p>
167
+ </div>
168
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
169
+ <h4 class="font-medium text-orange-600">OA630</h4>
170
+ <p class="text-gray-600">Self-Hosted Security</p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <div>
176
+ <h4 class="font-medium text-gray-700 mb-2">Security - CSFLE</h4>
177
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
178
+ <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
179
+ <h4 class="font-medium text-teal-600">DS130</h4>
180
+ <p class="text-gray-600">Client-Side Field Level Encryption</p>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </section>
186
+
187
+ <!-- Calendar View Section -->
188
+ <section class="mb-20">
189
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Course Calendar</h2>
190
+ <div class="bg-white rounded-lg shadow overflow-hidden">
191
+ <div class="overflow-x-auto">
192
+ <table class="min-w-full divide-y divide-gray-200">
193
+ <thead class="bg-gray-50">
194
+ <tr>
195
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course</th>
196
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Confirmed?</th>
197
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
198
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
199
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time Zone</th>
200
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
201
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>
202
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Language</th>
203
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Instructor</th>
204
+ </tr>
205
+ </thead>
206
+ <tbody class="bg-white divide-y divide-gray-200" id="course-calendar">
207
+ <!-- Courses will be loaded dynamically -->
208
+ </tbody>
209
+ </table>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Upcoming Courses Section -->
215
  <section id="upcoming-courses" class="mb-20">
216
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Upcoming Courses</h2>
217
 
218
  <!-- Month Selector -->
219
  <div class="flex justify-center mb-8">
script.js CHANGED
@@ -1,8 +1,71 @@
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  // Main JavaScript functionality
3
  document.addEventListener('DOMContentLoaded', async () => {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  // Fetch courses from MongoDB API
5
- async function fetchCourses() {
6
  try {
7
  const response = await fetch('https://learn.mongodb.com/api/v1/instructor-led-training-schedule');
8
  const data = await response.json();
 
1
 
2
+ // Course data
3
+ const coursesData = [
4
+ // November 2025
5
+ {
6
+ course: "OFA400: Atlas Admin",
7
+ confirmed: "Yes",
8
+ startDate: "25-Nov-25",
9
+ endDate: "25-Nov-25",
10
+ timeZone: "MX CST",
11
+ time: "All Day (9:00 AM - 5:00 PM)",
12
+ region: "LATAM",
13
+ language: "Spanish",
14
+ instructor: "Virgilio De la Cruz Jard贸n",
15
+ event: "MX CST | 2025 Nov 25 | Spanish (OFA400)",
16
+ id: "c0caf703-35d5-4a9d-a561-5db9cb7d40ee"
17
+ },
18
+ // Add all other courses from the table here...
19
+ // December 2025
20
+ {
21
+ course: "OFA500: Atlas API",
22
+ confirmed: "Yes",
23
+ startDate: "26-Nov-25",
24
+ endDate: "26-Nov-25",
25
+ timeZone: "MX CST",
26
+ time: "All Day (9:00 AM - 5:00 PM)",
27
+ region: "LATAM",
28
+ language: "Spanish",
29
+ instructor: "Virgilio De la Cruz Jard贸n",
30
+ event: "MX CST | 2025 Nov 26 | Spanish (OFA500)",
31
+ id: "4e805e95-4818-4b11-8dcb-7d77a9bfb016"
32
+ },
33
+ // Add remaining courses...
34
+ ];
35
+
36
  // Main JavaScript functionality
37
  document.addEventListener('DOMContentLoaded', async () => {
38
+ // Render course calendar
39
+ function renderCourseCalendar() {
40
+ const calendarBody = document.getElementById('course-calendar');
41
+ calendarBody.innerHTML = '';
42
+
43
+ coursesData.forEach(course => {
44
+ const row = document.createElement('tr');
45
+ row.className = 'hover:bg-gray-50';
46
+ row.innerHTML = `
47
+ <td class="px-6 py-4 whitespace-nowrap">
48
+ <div class="text-sm font-medium text-gray-900">${course.course}</div>
49
+ </td>
50
+ <td class="px-6 py-4 whitespace-nowrap">
51
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${course.confirmed === 'Yes' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}">
52
+ ${course.confirmed}
53
+ </span>
54
+ </td>
55
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.startDate}</td>
56
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.endDate}</td>
57
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.timeZone}</td>
58
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.time}</td>
59
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.region}</td>
60
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.language}</td>
61
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.instructor}</td>
62
+ `;
63
+ calendarBody.appendChild(row);
64
+ });
65
+ }
66
+
67
  // Fetch courses from MongoDB API
68
+ async function fetchCourses() {
69
  try {
70
  const response = await fetch('https://learn.mongodb.com/api/v1/instructor-led-training-schedule');
71
  const data = await response.json();
style.css CHANGED
@@ -2,6 +2,24 @@
2
  body {
3
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
4
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
 
6
  /* Animation for course cards */
7
  @keyframes fadeIn {
 
2
  body {
3
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
4
  }
5
+ /* Course paths styling */
6
+ .course-path-card {
7
+ transition: all 0.3s ease;
8
+ }
9
+ .course-path-card:hover {
10
+ transform: translateY(-2px);
11
+ }
12
+
13
+ /* Calendar table styling */
14
+ table {
15
+ min-width: 1000px;
16
+ }
17
+ th {
18
+ background-color: #f8fafc;
19
+ }
20
+ tr:nth-child(even) {
21
+ background-color: #f9fafb;
22
+ }
23
 
24
  /* Animation for course cards */
25
  @keyframes fadeIn {