-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
80 lines (73 loc) · 2.7 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
const hamburgerButton = document.querySelector('#hamburger-button');
const mobileMenu = document.querySelector('.mobile-menu-modal');
const mobileMenuLink = document.querySelectorAll('.mobile-menu a');
const courseProgram = [
{
name: 'Javascript',
title: 'The Complete Vannila Coursel',
description: 'This JavaScript course starts from scratch and goes on to advanced concepts like OOP. ',
image: 'assets/images/JAVASCRIPT.jpg',
},
{
name: 'React',
title: 'Pure React',
description: 'This is a pure react course without the fancy extras like redux, hooks and more. By the end of the course,',
image: 'assets/images/REACT.jpg',
},
{
name: 'Web Development',
title: 'Introduction to Web Development',
description: 'This course covers the fundamental concepts of software engineering.',
image: 'assets/images/Quality.jpg',
},
{
name: 'Ruby',
title: 'The Complete Vanilla Ruby Course',
description: 'As a general-purpose programming language, Ruby is limited only by the developer’s imagination .',
image: 'assets/images/ruby.jpg',
},
{
name: 'Rails',
title: 'Complete Ruby on Rails Course',
description: 'This is a complete Ruby on Rails course that will aim to demonstrate the power of the Ruby on Rails.',
image: 'assets/images/rails.png',
},
{
name: 'Css',
title: 'The Complete Vanilla CSS Course',
description: 'Without CSS, every web page would be drab plain text and images that flowed straight down the page.',
image: 'assets/images/Css.png',
},
];
const generateCard = (cardData) => {
const markup = document.createElement('div');
markup.classList.add('course-card');
markup.innerHTML = ` <div class="image-container">
<img src=${cardData.image} alt="${cardData.name}-picture">
</div>
<div class="courses-detail">
<p class ="courses-name">${cardData.name}</p>
<p class="courses-title">${cardData.title}</p>
<div class="courses-separator"></div>
<p class="courses-description">${cardData.description}</p>
</div>`;
return markup;
};
const generateMentorCard = () => {
if (document.querySelector('.units-container')) {
const courseContainer = document.querySelector('.units-container');
for (let i = 0; i < courseProgram.length; i += 1) {
courseContainer.appendChild(generateCard(courseProgram[i]));
}
}
};
generateMentorCard();
const toggleMenuDisplay = () => {
document.body.classList.toggle('toggle-modal-body');
hamburgerButton.classList.toggle('change');
mobileMenu.classList.toggle('toogleModalDisplay');
};
hamburgerButton.addEventListener('click', toggleMenuDisplay);
mobileMenuLink.forEach((link) => {
link.addEventListener('click', toggleMenuDisplay);
});