-
Notifications
You must be signed in to change notification settings - Fork 0
/
Module3_Project.js
140 lines (114 loc) · 5.82 KB
/
Module3_Project.js
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
function moduleProject3() {
// Task 1: Write a `buildNav` component that returns a nav
function buildNav(links) {
const container = document.createElement('nav');
links.forEach(link => {
let a = document.createElement('a');
a.href = link.href;
a.title = link.title;
a.textContent = link.textContent;
container.appendChild(a);
});
return container;
}
// DOM creation using `buildNav` component
document.querySelector('header').appendChild(buildNav([
{ href: 'https://www.example.com', textContent: 'Home', title: 'Go to the home page' },
{ href: 'https://www.example.com/about', textContent: 'About', title: 'Learn more about our company' },
{ href: 'https://www.example.com/services', textContent: 'Services', title: 'View our available services' },
{ href: 'https://www.example.com/blog', textContent: 'Blog', title: 'Read our latest blog posts' },
{ href: 'https://www.example.com/contact', textContent: 'Contact', title: 'Get in touch with us' },
]));
// Task 2A: Write a `buildLearnerCard` component that returns a card
function buildLearnerCard(learner, languages) {
const card = document.createElement('div');
card.classList.add('learner-card');
const nameP = document.createElement('div');
nameP.textContent = learner.fullName;
const idElement = document.createElement('p');
idElement.textContent = `Learner ID: ${learner.id}`;
const dobP = document.createElement('div');
dobP.textContent = `Date of Birth: ${learner.dateOfBirth}`;
const favLangP = document.createElement('p');
const favLanguage = languages.find(lang => lang.id === learner.favLanguage);
favLangP.textContent = `Favorite Language: ${favLanguage.name}`;
[nameP, idElement, dobP, favLangP].forEach(p => {
card.appendChild(p);
});
card.addEventListener('click', evt => {
document.querySelectorAll('.learner-card').forEach(card => {
card.classList.remove('active');
});
card.classList.add('active'); // Corrected to add 'active' class to the clicked card
});
return card;
}
// Task 2B: Use the two variables below to make learner Cards, and put them in the DOM
let languages = [
{ id: 37, name: 'JavaScript', creator: 'Brendan Eich', year: 1995 },
{ id: 82, name: 'Python', creator: 'Guido van Rossum', year: 1991 },
{ id: 12, name: 'Java', creator: 'James Gosling', year: 1995 },
{ id: 53, name: 'C#', creator: 'Microsoft Corporation', year: 2000 },
{ id: 91, name: 'Ruby', creator: 'Yukihiro Matsumoto', year: 1995 }
];
let learners = [
{ id: 24, fullName: 'Kenneth Fisher', dateOfBirth: '1990-01-01', favLanguage: 82 },
{ id: 53, fullName: 'Jess Williams', dateOfBirth: '1985-05-10', favLanguage: 37 },
{ id: 72, fullName: 'Brandon Nguyen', dateOfBirth: '1992-09-15', favLanguage: 53 },
{ id: 41, fullName: 'Sabah Beydoun', dateOfBirth: '1988-03-25', favLanguage: 91 },
{ id: 17, fullName: 'Daniel Castillo', dateOfBirth: '1995-11-05', favLanguage: 12 }
];
learners.forEach(learner => {
const learnerCard = buildLearnerCard(learner, languages);
document.querySelector('section').appendChild(learnerCard);
});
// Task 3: Write a `buildFooter` component that returns a footer
function buildFooter(footerData) {
const footer = document.createElement('footer');
let companyInfoDiv = document.createElement('div');
companyInfoDiv.classList.add('company-info');
let companyNameP = document.createElement('p'); // Define companyNameP
companyNameP.textContent = footerData.companyName;
let addressP = document.createElement('p');
addressP.classList.add('address');
addressP.textContent = footerData.address;
let contactEmailP = document.createElement('p');
contactEmailP.classList.add('contact-email');
contactEmailP.innerHTML = `Email: <a href="mailto:${footerData.contactEmail}">${footerData.contactEmail}</a>`; // Fixed typo
companyInfoDiv.appendChild(companyNameP);
companyInfoDiv.appendChild(addressP);
companyInfoDiv.appendChild(contactEmailP);
let socialMediaDiv = document.createElement('div');
socialMediaDiv.classList.add('social-media');
for (let platform in footerData.socialMedia) {
let socialMediaLink = document.createElement('a');
socialMediaLink.href = footerData.socialMedia[platform];
socialMediaLink.textContent = platform.charAt(0).toUpperCase() + platform.slice(1);
socialMediaDiv.appendChild(socialMediaLink);
}
footer.appendChild(companyInfoDiv);
footer.appendChild(socialMediaDiv);
return footer;
}
// DOM creation using `buildFooter` component
document.body.appendChild(buildFooter({
companyName: 'Bloom Institute of Technology',
address: '123 Main Street, City, Country',
contactEmail: 'info@example.com',
socialMedia: {
twitter: 'https://twitter.com/example',
facebook: 'https://www.facebook.com/example',
instagram: 'https://www.instagram.com/example',
},
}));
// Task 4: Clicking on the section should deactivate the active card
document.querySelector('section').addEventListener('click', evt => {
if (evt.target.closest('.learner-card')) return;
document.querySelectorAll('.learner-card').forEach(card => {
card.classList.remove('active');
});
});
}
// DO NOT CHANGE THIS CODE
if (typeof module !== 'undefined' && module.exports) module.exports = { moduleProject3 }
else moduleProject3();