Skip to content

Commit c62af80

Browse files
hmillersarahhmillersarah
committed
Merge branch 'master' into 37-reusable-component-hero-section
2 parents 43318f7 + 9048c00 commit c62af80

File tree

7 files changed

+218
-127
lines changed

7 files changed

+218
-127
lines changed

‎ims-education.html‎

Lines changed: 55 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,7 @@ <h5>IMS support</h5>
312312
<li><a href="#imsdb">IMS database</a></li>
313313
<li><a href="#sysprog">System programming</a></li>
314314
<li><a href="#appdev">Application development</a></li>
315+
<li><a href="#live">Instructor-led</a></li>
315316
<li><a href="#faq">FAQs</a></li>
316317
<li><a href="#support">Support</a></li>
317318
</ul>
@@ -322,30 +323,7 @@ <h5>IMS support</h5>
322323
<!-- =========================== Courses - all roles =========================== -->
323324
<section id="all" class="white-bg card-section">
324325
<div class="card-section-header"><h2>All roles</h2></div>
325-
<!-- IMS Fundamentals, with live course -->
326-
<!-- <course-card
327-
name="IMS Fundamentals"
328-
desc="Learn about the main components of IBM IMS: IMS Database Manager
329-
(IMS DB), IMS Transaction Manager (IMS TM), and common system services
330-
for IMS DB and IMS TM. Learn how these components work and interact with
331-
applications, how IMS databases differ from each other and differ from
332-
relational databases message types, security, maintenance, troubleshooting,
333-
and more."
334-
imgsrc="wp-content/course-badges/badge_ims_fundamentals.png"
335-
level="Beginner"
336-
cost="None"
337-
badge="Yes"
338-
time="32 hours"
339-
link="https://learn.ibm.com/course/view.php?id=8829"
340-
livelevel="Beginner"
341-
livecost="$"
342-
livebadge="No"
343-
livetime="30 hours"
344-
livelink="https://learn.ibm.com/course/view.php?id=8829"
345-
>
346-
</course-card> -->
347-
348-
<!-- IMS Fundamentals, no live course -->
326+
<!-- IMS Fundamentals -->
349327
<course-card
350328
id="ims-fundamentals"
351329
name="IMS Fundamentals"
@@ -641,7 +619,7 @@ <h5>IMS support</h5>
641619

642620
<!-- =========================== Courses - Application development =========================== -->
643621
<section id="appdev" class="white-bg card-section">
644-
<div class="card-section-header"><h2>Application development</h2></div>
622+
<div><h2>Application development</h2></div>
645623
<!-- TM Application Programming -->
646624
<course-card
647625
id="ims-tm-prog"
@@ -679,6 +657,58 @@ <h5>IMS support</h5>
679657
</course-card>
680658
</section>
681659

660+
<!-- =========================== Courses - Instructor-led =========================== -->
661+
<section id="live" class="white-bg card-section">
662+
<div><h2>Instructor-led</h2></div>
663+
<!-- <p>No instructor-led courses are currently available for enrollment. Please check back to see if new courses are available.</p> -->
664+
<p>For more information about the live class format, see the upcoming events on the <a href="https://community.ibm.com/community/user/ibmz-and-linuxone/groups/public?CommunityKey=eba3ada3-db89-4dca-9154-328195f5e560" target="_blank" rel="noopener noreferrer">IMS community page.</a></p>
665+
666+
<!-- IMS Fundamentals, April Session -->
667+
<course-card
668+
id="ims-fundamentals-april-2025"
669+
name="IMS Fundamentals"
670+
session="April 2025 session"
671+
desc="Learn about the main components of IBM IMS: IMS Database Manager (IMS DB),
672+
IMS Transaction Manager (IMS TM), and common system services for IMS DB and
673+
IMS TM. Learn how these components work and interact with applications, how
674+
IMS databases differ from each other and differ from relational databases
675+
message types, security, maintenance, troubleshooting, and more."
676+
imgsrc="wp-content/icons/icon_education.svg"
677+
selfpaced="false"
678+
level="Beginner"
679+
cost="None"
680+
badge="Yes"
681+
time="32 hours"
682+
start="Apr 22, 2025 08:00 AM (CT)"
683+
end="Apr 30, 2025 01:00 PM (CT)"
684+
link="https://www.ibm.com/it-infrastructure/us-en/resources/campaignmail/z/ims/eventsignup.html"
685+
>
686+
</course-card>
687+
688+
<!-- IMS Fundamentals, April Session -->
689+
<course-card
690+
id="ims-fundamentals-may-2025"
691+
name="IMS Fundamentals"
692+
session="May 2025 session"
693+
desc="Learn about the main components of IBM IMS: IMS Database Manager (IMS DB),
694+
IMS Transaction Manager (IMS TM), and common system services for IMS DB and
695+
IMS TM. Learn how these components work and interact with applications, how
696+
IMS databases differ from each other and differ from relational databases
697+
message types, security, maintenance, troubleshooting, and more."
698+
imgsrc="wp-content/icons/icon_education.svg"
699+
selfpaced="false"
700+
level="Beginner"
701+
cost="None"
702+
badge="Yes"
703+
time="32 hours"
704+
start="May 6, 2025 09:00 PM (CT)"
705+
end="May 15, 2025 02:00 AM (CT)"
706+
link="https://www.ibm.com/it-infrastructure/us-en/resources/campaignmail/z/ims/eventsignup.html"
707+
>
708+
</course-card>
709+
710+
</section>
711+
682712
<!-- =========================== FAQ =========================== -->
683713
<section id="faq" class="light-gray-bg pure-g">
684714
<!-- Header -->

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,8 @@ <h5>IMS support</h5>
325325
<div class="banner-container">
326326
<img src="wp-content/Icon_02_IMS GoldPage.svg" alt="Blog">
327327
<p class="banner-text-left"><a onfocus="closeNavMenu()" href="https://imsdev.github.io/ims-internship-2025.html" rel="noopener noreferrer">Register for the May 2025 Customer Internship!</a> </p>
328-
<p class="banner-text-right"><a href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=2047&tabId=5718&w=1" target="_blank" rel="noopener noreferrer">New! IBM IMS Z Trial →</a> </p>
328+
<p class="banner-text-right"><a href="https://forms.office.com/r/GVb90wUSXf" target="_blank" rel="noopener noreferrer">IMS modernization survey →</a> </p>
329+
<!-- <p class="banner-text-right"><a href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=2047&tabId=5718&w=1" target="_blank" rel="noopener noreferrer">New! IBM IMS Z Trial →</a> </p> -->
329330
</div>
330331
</span>
331332
</div>

‎web-components/course-card/course-card.css‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ h2 {
55
margin: 0em;
66
}
77

8+
h3 {
9+
font-weight: 400;
10+
font-size: 1.375em;
11+
padding: 0em;
12+
margin: 0em;
13+
}
14+
815
p {
916
font-size: 1.125em;
1017
}
@@ -48,11 +55,6 @@ img {
4855
.inline-g p {
4956
padding: 0em;
5057
margin: 0em;
51-
font-weight: bold;
52-
}
53-
54-
.inline-g span {
55-
font-weight: normal;
5658
}
5759

5860
/* Styling for course card */
@@ -86,11 +88,6 @@ img {
8688
align-items: center;
8789
}
8890

89-
/* .inline-g {
90-
display: grid;
91-
grid-template-columns: 1fr 6fr;
92-
} */
93-
9491
.inline-g div {
9592
display: grid;
9693
grid-template-columns: repeat(4, 1fr);

‎web-components/course-card/course-card.html‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,22 @@
77
<div>
88
<div>
99
<h2 class="course-name"></h2>
10+
<h3 class="live-session"></h3>
1011
<p class="course-desc"></p>
1112
<div class="column-g">
1213
<div class="inline-g">
13-
<p>Level: <span class="course-level"></span></p>
14-
<p>Cost: <span class="course-cost"></span></p>
15-
<p>Badge: <span class="course-badge"></span></p>
16-
<p>Time: <span class="course-time"></span></p>
17-
</div>
18-
<!-- Uncomment if using self-paced/live distinction -->
19-
<!-- <div class="inline-g">
20-
<p>Self-paced:</p>
21-
<div>
22-
<p>Level: <span class="course-level"></span></p>
23-
<p>Cost: <span class="course-cost"></span></p>
24-
<p>Badge: <span class="course-badge"></span></p>
25-
<p>Time: <span class="course-time"></span></p>
26-
</div>
27-
</div> -->
28-
<div class="inline-g live-course">
29-
<p>Instructor-led:</p>
30-
<div>
31-
<p>Level: <span class="live-level"></span></p>
32-
<p>Cost: <span class="live-cost"></span></p>
33-
<p>Badge: <span class="live-badge"></span></p>
34-
<p>Time: <span class="live-time"></span></p>
35-
</div>
14+
<p><b><span class="course-type"></span></b> Yes</p>
15+
<p><b>Level: </b><span class="course-level"></span></p>
16+
<p><b>Cost: </b><span class="course-cost"></span></p>
17+
<p><b>Badge: </b><span class="course-badge"></span></p>
18+
<p class="course-time-g"><b>Time: </b><span class="course-time"></span></p>
19+
<p class="course-start-g"><b>Starts: </b><span class="course-start"></span></p>
20+
<p class="course-end-g"><b>Ends: </b><span class="course-end"></span></p>
3621
</div>
3722
</div>
3823
</div>
3924
<div class="link-g">
40-
<a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
41-
<a class="live-link" target="_blank" rel="noopener noreferrer">Instructor-led course →</a>
25+
<a class="course-link" target="_blank" rel="noopener noreferrer"></a>
4226
</div>
4327
</div>
4428
</div>

‎web-components/course-card/course-card.js‎

Lines changed: 76 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,75 @@ fetch("web-components/course-card/course-card.html")
33
.then(stream => stream.text())
44
.then(text => createComponent(text))
55

6-
// Create web component
6+
/**
7+
* Creates a web component using a given HTML template.
8+
* @param {string} html - The HTML template.
9+
* @returns {void}
10+
*/
711
function createComponent(html) {
812

13+
/**
14+
* Sets the content of an element based on a CSS selector.
15+
* @param {string} cssSelector - The CSS selector of the element to set the content for.
16+
* @param {string} content - The content to set for the element.
17+
* @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
18+
* @returns {void}
19+
*/
920
function setContent(cssSelector, content, shadow) {
1021
const selector = shadow.querySelector(cssSelector);
1122
selector.textContent = content;
1223
}
1324

14-
function setLink(cssSelector, url, name, shadow) {
25+
/**
26+
* Sets the link of an element based on a CSS selector.
27+
* @param {string} cssSelector - The CSS selector of the element to set the link for.
28+
* @param {string} url - The link url.
29+
* @param {string} name - The name of the element containing the link.
30+
* @param {string} linkText - The link text.
31+
* @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
32+
* @returns {void}
33+
*/
34+
function setLink(cssSelector, url, name, linkText, shadow) {
1535
const link = shadow.querySelector(cssSelector);
1636
link.href = url;
1737
link.setAttribute('aria-label', `Learn more about ${name}`);
38+
link.textContent = linkText;
39+
}
40+
41+
/**
42+
* Hides the content of an element based on a CSS selector.
43+
* @param {string} cssSelector - The CSS selector of the element to hide.
44+
* @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
45+
* @returns {void}
46+
*/
47+
function hideContent(cssSelector, shadow) {
48+
const selector = shadow.querySelector(cssSelector);
49+
selector.style.display = 'none';
1850
}
1951

2052
// Web component class
2153
class CourseCard extends HTMLElement {
2254

23-
// Creates element with default values
55+
// Creates an instance of CourseCard
2456
constructor() {
2557
super();
58+
this.selfpaced = 'true';
2659
}
2760

28-
// Return array of properties to observe
61+
/**
62+
* Returns an array of properties to observe.
63+
* @returns {Array} An array of property names.
64+
*/
2965
static get observedAttributes() {
30-
return ['name', 'desc', 'imgsrc', 'level', 'cost', 'badge', 'time', 'link', 'livelevel', 'livecost', 'livebadge', 'livetime', 'livelink'];
66+
return ['name', 'session', 'desc', 'imgsrc', 'selfpaced', 'level', 'cost', 'badge', 'time', 'start', 'end', 'link'];
3167
}
3268

33-
// Called when an attribute is defined or changed
69+
/**
70+
* Called when an attribute is defined or changed.
71+
* @param {string} property - The name of the attribute.
72+
* @param {string} oldValue - The old value of the attribute.
73+
* @param {string} newValue - The new value of the attribute.
74+
*/
3475
attributeChangedCallback(property, oldValue, newValue) {
3576
if (oldValue === newValue) return;
3677
this[property] = newValue;
@@ -46,41 +87,51 @@ function createComponent(html) {
4687
const courseImg = shadow.querySelector('.course-img');
4788
courseImg.src = this.imgsrc;
4889
courseImg.setAttribute('alt', `${this.name} badge`);
90+
if (this.selfpaced != 'true') {
91+
const courseCard = shadow.querySelector('.course-card');
92+
courseCard.style.alignItems = 'flex-start';
93+
}
4994

5095
// Set course name
5196
setContent('.course-name', this.name, shadow);
97+
// Set session for live course
98+
setContent('.live-session', this.session, shadow);
5299
// Set course desc
53100
setContent('.course-desc', this.desc, shadow);
54101
// Set course level
55102
setContent('.course-level', this.level, shadow);
103+
// Set course type
104+
const courseType = this.selfpaced == 'true' ? 'Self-paced: ' : 'Instructor-led: ';
105+
setContent('.course-type', courseType, shadow);
56106
// Set course cost
57107
setContent('.course-cost', this.cost, shadow);
58108
// Set course badge
59109
setContent('.course-badge', this.badge, shadow);
60-
// Set course time
61-
setContent('.course-time', this.time, shadow);
62-
// Set course link
63-
setLink('.course-link', this.link, this.name, shadow);
64110

65-
// Hide live course if not available
66-
if (this.livelevel == undefined) {
67-
const liveCourse = shadow.querySelector('.live-course');
68-
const liveCourseLink = shadow.querySelector('.live-link');
69-
liveCourse.style.display = liveCourseLink.style.display = "none";
70-
} else {
71-
// Set course level
72-
setContent('.live-level', this.livelevel, shadow);
73-
// Set course cost
74-
setContent('.live-cost', this.livecost, shadow);
75-
// Set course badge
76-
setContent('.live-badge', this.livebadge, shadow);
111+
var linkText;
112+
// Change card content based on self-paced vs live course
113+
if (this.selfpaced == 'true') {
77114
// Set course time
78-
setContent('.live-time', this.livetime, shadow);
79-
// Set course link
80-
setLink('.live-link', this.livelink, this.name, shadow);
115+
setContent('.course-time', this.time, shadow);
116+
// Hide course duration
117+
hideContent('.course-start-g', shadow);
118+
hideContent('.course-end-g', shadow);
119+
// Update link text
120+
linkText = 'Learn more →'
121+
} else {
122+
// Set course duration
123+
setContent('.course-start', this.start, shadow);
124+
setContent('.course-end', this.end, shadow);
125+
// Hide course time
126+
hideContent('.course-time-g', shadow);
127+
// Update link text
128+
linkText = 'Register →'
81129
}
130+
// Set course link
131+
setLink('.course-link', this.link, this.name, linkText, shadow);
82132
}
83133
}
84134

135+
// Define new CourseCard element
85136
customElements.define('course-card', CourseCard);
86137
}

0 commit comments

Comments
 (0)