-
Notifications
You must be signed in to change notification settings - Fork 2
/
script.js
81 lines (76 loc) · 2.81 KB
/
script.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
// INFORMATION ABOUT SPEAKERS STORED AS OBJECTS - JASON
const featureSpeaker = [
{
profilePic: './images/speakers/santa.png',
guestName: 'Prescot Daniel',
profileInfo: 'Senior Full Stack Developer at Kinfork Inc',
shortBio: 'Prescot is famed for his beastly proficiency in C#, Java Python, AS.Net, etc',
},
{
profilePic: './images/speakers/speaker2.png',
guestName: 'Prescot Daniel',
profileInfo: 'Senior Full Stack Developer at Kinfork Inc',
shortBio: 'Prescot is famed for his beastly proficiency in C#, Java Python, AS.Net, etc',
},
{
profilePic: './images/speakers/speaker3.png',
guestName: 'Prescot Daniel',
profileInfo: 'Senior Full Stack Developer at Kinfork Inc',
shortBio: 'Prescot is famed for his beastly proficiency in C#, Java Python, AS.Net, etc',
},
{
profilePic: './images/speakers/speaker4.png',
guestName: 'Prescot Daniel',
profileInfo: 'Senior Full Stack Developer at Kinfork Inc',
shortBio: 'Prescot is famed for his beastly proficiency in C#, Java Python, AS.Net, etc',
},
{
profilePic: './images/speakers/spaker5.png',
guestName: 'Prescot Daniel',
profileInfo: 'Senior Full Stack Developer at Kinfork Inc',
shortBio: 'Prescot is famed for his beastly proficiency in C#, Java Python, AS.Net, etc',
},
{
profilePic: './images/speakers/speaker6.png',
guestName: 'Prescot Daniel',
profileInfo: 'Senior Full Stack Developer at Kinfork Inc',
shortBio: 'Prescot is famed for his beastly proficiency in C#, Java Python, AS.Net, etc',
},
];
// Grabing feature container to initiate other cards
document.addEventListener('DOMContentLoaded', () => {
// Helper function to meetSpeaker to loop through and return new arrays:
function meetSpeakers(speaker) {
return `
<div class="speaker">
<img src="${speaker.profilePic}" alt="image of the first speaker">
<div class="meet-speaker">
<h1 class="intro white">${speaker.guestName}</h1>
<span class="info"><em>${speaker.profileInfo}</em></span>
<hr class="line">
<p class="abt-speaker">${speaker.shortBio}</p>
</div>
</div>
<hr class="line full one">
<hr class="line full two">
`;
}
document.querySelector('.featured-container').innerHTML = `
${featureSpeaker.map(meetSpeakers).join('')}`;
});
// Menu control Logic
const openMenuBtn = document.querySelector('.menu');
const exitBtn = document.querySelector('img.exit');
const navBar = document.querySelector('.navbar');
const links = document.querySelectorAll('nav a');
openMenuBtn.addEventListener('click', () => {
navBar.style.display = 'flex';
});
exitBtn.addEventListener('click', () => {
navBar.style.display = 'none';
});
links.forEach((link) => {
link.addEventListener('click', () => {
navBar.style.display = 'none';
});
});