-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
160 lines (146 loc) · 6.16 KB
/
index.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
const primaryNav = document.querySelector('.primary-nav');
const navToggle = document.querySelector('#id-menu-bar');
const logoText = document.querySelector('.logo-text');
const menuBar = document.querySelector('.menu-bar');
/** Modal window variables */
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const modalCloseBtn = document.querySelector('.modal-close');
const projectBtn = document.querySelectorAll('.see-project');
// Validate email
// const form = document.querySelector('#contact-form');
// const inputEmail = document.querySelector('#email');
const alert = document.querySelector('.alert');
const projects = {
featureProj: {
title: 'WATHER-APPLICATION',
desc: 'A Weather Application that displays daily and weekly weather updates from different cities across the world',
technologies: ['react-redux', 'javascript', 'bootstrap', 'css', 'html'],
image: 'images/weather-app.png',
liveDemoLink: 'https://62b9c319ef5d2f4fb550e3fb--heartfelt-tapioca-356bb6.netlify.app/',
},
project1: {
title: 'MEALS-A-DAY',
desc: 'A web application that consumes the MealDB API. It displays a list of food, their recipes and instructions. One can also be able to comment on them',
technologies: ['javascript', 'api', 'css', 'html'],
image: 'images/meals-app.png',
liveDemoLink: 'https://jmoseka.github.io/Meals-A-Day/',
gitLink: 'https://github.com/jmoseka/Meals-A-Day',
},
project2: {
title: 'LEADERBOARD',
desc: 'The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved to an external Leaderboard API service',
technologies: ['javascript', 'html', 'css', 'webpack'],
image: 'images/leaderboard.png',
liveDemoLink: 'https://jmoseka.github.io/Leaderboard/',
gitLink: 'https://github.com/jmoseka/Leaderboard',
},
project3: {
title: 'TO-DO-LIST',
desc: 'A web app that helps you organize your day. It simply lists the things that you need to do and allows you to mark them as complete. It is built with ES6 and Webpack!',
technologies: ['javascript', 'css', 'html', 'webpack'],
image: 'images/to-do.png',
liveDemoLink: 'https://626e5ac8a92f1b301e871a90--fanciful-stroopwafel-1c6022.netlify.app/#',
gitLink: 'https://github.com/jmoseka/To-Do-List',
},
project4: {
title: 'CONFERENCE WEBSITE',
desc: 'A confrence website built based on an online school website. It is part of the Microverse end of a module final project, meant to apply all of the CSS and HTML learned so far.',
technologies: ['javascript', 'css', 'html'],
image: 'images/conference.png',
liveDemoLink: 'https://jmoseka.github.io/Conference-Frontend/',
gitLink: 'https://github.com/jmoseka/Conference-Frontend',
},
project5: {
title: 'AWESOME BOOKS',
desc: 'A basic website that allows users to add/remove books from a list. It is achieved by using JavaScript objects and arrays. We also dynamically modified the DOM and added basic events.',
technologies: ['js', 'css', 'html'],
image: 'images/awesome.png',
liveDemoLink: 'https://jmoseka.github.io/Awesome-Books/#',
gitLink: 'https://github.com/jmoseka/Awesome-Books',
},
project6: {
title: 'LANDING PAGE',
desc: 'A beautiful landing page for an ecommerce website that deals with beauty products',
technologies: ['html', 'css'],
image: 'images/landing.png',
liveDemoLink: 'https://sad-shirley-6aae5c.netlify.app/',
gitLink: 'https://github.com/jmoseka/Landing-Page',
},
};
/* Navigation humberger button open and close function */
navToggle.addEventListener('click', () => {
primaryNav.classList.toggle('active');
logoText.classList.toggle('active');
menuBar.classList.toggle('active');
});
// close modal function
const closeModal = () => {
modal.classList.add('hidden');
overlay.classList.add('hidden');
};
// close modal button set on listener
modalCloseBtn.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
/** Loop through project object to dynamically
* set data on modal window */
projectBtn.forEach((button) => {
button.addEventListener('click', () => {
// modal window close
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
const h2 = document.querySelector('.modal h2');
const p = document.querySelector('.modal p');
const img = document.querySelector('.image-proj');
// const ul = document.getElementsByClassName(".modal-list");
const items = document.querySelectorAll('.modal-list li');
const livelink = document.querySelector('.liveLink');
const githubLink = document.querySelector('.gitLink');
// eslint-disable-next-line no-restricted-syntax
for (const project of [...Object.keys(projects)]) {
if (button.classList.contains(project)) {
h2.textContent = projects[project].title;
p.textContent = projects[project].desc;
livelink.setAttribute('href', projects[project].liveDemoLink);
githubLink.setAttribute('href', projects[project].gitLink);
img.src = projects[project].image;
let s = 0;
// eslint-disable-next-line no-restricted-syntax
for (const i of items) {
i.textContent = projects[project].technologies[s];
s += 1;
}
}
}
});
});
/** CONTACT FORM VALIDATION */
// error message
// remove error message upon clicking anywhere
document.onclick = (e) => {
/** Close modal window if pressed anywhere */
if (e.target.id !== 'id-menu-bar') {
primaryNav.classList.remove('active');
logoText.classList.remove('active');
menuBar.classList.remove('active');
} else if (
e.target.id === 'email'
|| e.target.id === 'fname'
|| e.target.id === 'lname'
|| e.target.id === 'comments'
) {
alert.classList.add('hidden');
}
};
// error message
// function alertMsg(msg) {
// alert.classList.remove('hidden');
// alert.textContent = msg;
// }
// form.addEventListener('submit', (e) => {
// const lowerCaseReg = /[a - z]/;
// if (lowerCaseReg.test(inputEmail.value) === false) {
// alertMsg('Please use small letters for email address');
// e.preventDefault();
// }
// });