Skip to content

Commit b74b614

Browse files
CSFelixCSFelix
authored
📦 Updates
1 parent 9578e97 commit b74b614

File tree

5 files changed

+250
-9
lines changed

5 files changed

+250
-9
lines changed

‎assets/js/scripts/mobile-menu-btn-effect.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
// toggle the "change" class to make the mobile menu button animation
12
function myFunction(x) { x.classList.toggle("change"); }

‎assets/js/scripts/mobile-menu-toggle-effect.js‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
const toggleMobileMenuBtn = document.getElementById('mobileMenuToggle');
22
const toggleMobileMenu = document.getElementById('mobileMenu');
3+
const mobileMenuOptions = toggleMobileMenu.getElementsByTagName('li');
34

4-
toggleMobileMenuBtn.addEventListener("click", () => {
5+
// When the menu button is tap, the menu is toggled in and out.
6+
toggleMobileMenuBtn.addEventListener('click', () => {
57

6-
// if the mmenu is not toggled (right == -150px)
8+
// if the menu is not toggled (right == -150px)
79
// we toggle it! (right = 15px)
8-
if (toggleMobileMenu.style.right != '15px') {
9-
toggleMobileMenu.style.right = '15px';
10-
}
10+
if (toggleMobileMenu.style.right != '15px') { toggleMobileMenu.style.right = '15px'; }
1111

1212
// else, we geet the menu back to its original position
13-
else {
14-
toggleMobileMenu.style.right = '-150px';
15-
}
16-
});
13+
else { toggleMobileMenu.style.right = '-150px'; }
14+
});
15+
16+
// when a menu option is clicked, the menu is toggled out
17+
//
18+
// as far thee meenu options are storeed into a list, we gotta
19+
// do a for-loop to get each element and add thee event listener
20+
for (let index = 0; index <= mobileMenuOptions.length - 1; index++) {
21+
mobileMenuOptions[index].addEventListener('click', () => {
22+
toggleMobileMenu.style.right = '-150px';
23+
toggleMobileMenuBtn.classList.toggle("change");
24+
});
25+
}

‎assets/js/scripts/modal-toggle.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* Themes */
2+
const themesModal = document.getElementById('themesModal');
3+
const themesBtn = document.getElementById('themeBtn');
4+
const mobileThemesBtn = document.getElementById('mobileThemeBtn');
5+
const themesClose = document.getElementById('themesClose');
6+
7+
themesBtn.onclick = function() { themesModal.style.display = "block"; }
8+
mobileThemesBtn.onclick = function() { themesModal.style.display = "block"; }
9+
themesClose.onclick = function() { themesModal.style.display = "none"; }
10+
11+
/* Kaggle Notebooks */
12+
const kaggleModal = document.getElementById('kaggleModal');
13+
const kaggleBtn = document.getElementById('kaggleBtn');
14+
const kaggleClose = document.getElementById('kaggleClose');
15+
16+
kaggleBtn.onclick = function() { kaggleModal.style.display = "block"; }
17+
kaggleClose.onclick = function() { kaggleModal.style.display = "none"; }
18+
19+
/* ML Algorithms */
20+
const mlAlgorithmsModal = document.getElementById('mlAlgorithmsModal');
21+
const mlAlgorithmsBtn = document.getElementById('mlAlgorithmsBtn');
22+
const mlAlgorithmsClose = document.getElementById('mlAlgorithmsClose');
23+
24+
mlAlgorithmsBtn.onclick = function() { mlAlgorithmsModal.style.display = "block"; }
25+
mlAlgorithmsClose.onclick = function() { mlAlgorithmsModal.style.display = "none"; }
26+
27+
/* DS Tools */
28+
const dsToolsModal = document.getElementById('dsToolsModal');
29+
const dsToolsBtn = document.getElementById('dsToolsBtn');
30+
const dsToolsClose = document.getElementById('dsToolsClose');
31+
32+
dsToolsBtn.onclick = function() { dsToolsModal.style.display = "block"; }
33+
dsToolsClose.onclick = function() { dsToolsModal.style.display = "none"; }
34+
35+
/* Closing modals when user taps outside the modal */
36+
window.onclick = function(event) {
37+
if (event.target == themesModal) { themesModal.style.display = "none"; }
38+
else if (event.target == kaggleModal) { kaggleModal.style.display = "none"; }
39+
else if (event.target == mlAlgorithmsModal) { mlAlgorithmsModal.style.display = "none"; }
40+
else if (event.target == dsToolsModal) { dsToolsModal.style.display = "none"; }
41+
}

‎assets/js/scripts/random-easter-egg.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/scripts/themes-toggle.js‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
/*
2+
************
3+
** Consts **
4+
************
5+
*/
6+
7+
// theme modals img
8+
const defaultOptionSticker = document.getElementById('defaultOptionSticker');
9+
const halloweenOptionSticker = document.getElementById('halloweenOptionSticker');
10+
const christmasOptionSticker = document.getElementById('christmasOptionSticker');
11+
const easterOptionSticker = document.getElementById('easterOptionSticker');
12+
13+
// theme modals ratios
14+
const defaultOptionRadio = document.getElementById('defaultOptionRadio');
15+
const halloweenOptionRadio = document.getElementById('halloweenOptionRadio');
16+
const christmasOptionRadio = document.getElementById('christmasOptionRadio');
17+
const easterOptionRadio = document.getElementById('easterOptionRadio');
18+
19+
// positive theme modals stickers
20+
const positiveDefaultTheme = './assets/stickers/default/in-love.png';
21+
const positiveHalloweenTheme = './assets/stickers/halloween/love.png';
22+
const positiveChristmasTheme = './assets/stickers/christmas/love.png';
23+
const positiveEasterTheme = './assets/stickers/easter/love.png';
24+
25+
// negative theme modals stickers
26+
const negativeDefaultTheme = './assets/stickers/default/sick.png';
27+
const negativeHalloweenTheme = './assets/stickers/halloween/sad.png';
28+
const negativeChristmasTheme = './assets/stickers/christmas/sad.png';
29+
const negativeEasterTheme = './assets/stickers/easter/sad.png';
30+
31+
// img tags
32+
const aboutMeSticker = document.getElementById('aboutMeSticker');
33+
const skillsSticker = document.getElementById('skillsSticker');
34+
const projectsSticker = document.getElementById('projectsSticker');
35+
const reachMeSticker = document.getElementById('reachMeSticker');
36+
37+
// default theme stickers
38+
const aboutMeDefaultTheme = './assets/stickers/default/hi.png';
39+
const skillsDefaultTheme = './assets/stickers/default/cool.png';
40+
const projectsDefaultTheme = './assets/stickers/default/amazed.png';
41+
const reachMeDefaultTheme = './assets/stickers/default/excited.png';
42+
43+
// halloween theme stickers
44+
const aboutMeHalloweenTheme = './assets/stickers/halloween/hi.png';
45+
const skillsHalloweenTheme = './assets/stickers/halloween/happy (1).png';
46+
const projectsHalloweenTheme = './assets/stickers/halloween/run.png';
47+
const reachMeHalloweenTheme = './assets/stickers/halloween/relaxed.png';
48+
49+
// christmas theme stickers
50+
const aboutMeChristmasTheme = './assets/stickers/christmas/hi.png';
51+
const skillsChristmasTheme = './assets/stickers/christmas/hooray.png';
52+
const projectsChristmasTheme = './assets/stickers/christmas/announcement.png';
53+
const reachMeChristmasTheme = './assets/stickers/christmas/elf.png';
54+
55+
// easter theme stickers
56+
const aboutMeEasterTheme = './assets/stickers/easter/hi.png';
57+
const skillsEasterTheme = './assets/stickers/easter/run.png';
58+
const projectsEasterTheme = './assets/stickers/easter/proud.png';
59+
const reachMeEasterTheme = './assets/stickers/easter/relaxed.png';
60+
61+
/*
62+
**************
63+
** Function **
64+
**************
65+
*/
66+
function changeTheme() {
67+
const actualTheme = localStorage.getItem('actualTheme');
68+
69+
// Halloween Theme
70+
if (actualTheme === '1') {
71+
72+
// page stickers
73+
aboutMeSticker.src = aboutMeHalloweenTheme;
74+
skillsSticker.src = skillsHalloweenTheme;
75+
projectsSticker.src = projectsHalloweenTheme;
76+
reachMeSticker.src = reachMeHalloweenTheme;
77+
78+
// themes modal stickers
79+
defaultOptionSticker.src = negativeDefaultTheme;
80+
halloweenOptionSticker.src = positiveHalloweenTheme;
81+
christmasOptionSticker.src = negativeChristmasTheme;
82+
easterOptionSticker.src = negativeEasterTheme;
83+
84+
// themes modal radios
85+
defaultOptionRadio.checked = false;
86+
halloweenOptionRadio.checked = true;
87+
christmasOptionRadio.checked = false;
88+
easterOptionRadio.checked = false;
89+
}
90+
91+
// Christmas Theme
92+
else if (actualTheme === '2') {
93+
94+
// page stickers
95+
aboutMeSticker.src = aboutMeChristmasTheme;
96+
skillsSticker.src = skillsChristmasTheme;
97+
projectsSticker.src = projectsChristmasTheme;
98+
reachMeSticker.src = reachMeChristmasTheme;
99+
100+
// themes modal stickers
101+
defaultOptionSticker.src = negativeDefaultTheme;
102+
halloweenOptionSticker.src = negativeHalloweenTheme;
103+
christmasOptionSticker.src = positiveChristmasTheme;
104+
easterOptionSticker.src = negativeEasterTheme;
105+
106+
// themes modal radios
107+
defaultOptionRadio.checked = false;
108+
halloweenOptionRadio.checked = false;
109+
christmasOptionRadio.checked = true;
110+
easterOptionRadio.checked = false;
111+
}
112+
113+
// Easter Theme
114+
else if (actualTheme === '3') {
115+
116+
// page stickers
117+
aboutMeSticker.src = aboutMeEasterTheme;
118+
skillsSticker.src = skillsEasterTheme;
119+
projectsSticker.src = projectsEasterTheme;
120+
reachMeSticker.src = reachMeEasterTheme;
121+
122+
// themes modal stickers
123+
defaultOptionSticker.src = negativeDefaultTheme;
124+
halloweenOptionSticker.src = negativeHalloweenTheme;
125+
christmasOptionSticker.src = negativeChristmasTheme;
126+
easterOptionSticker.src = positiveEasterTheme;
127+
128+
// themes modal radios
129+
defaultOptionRadio.checked = false;
130+
halloweenOptionRadio.checked = false;
131+
christmasOptionRadio.checked = false;
132+
easterOptionRadio.checked = true;
133+
}
134+
135+
// Default Theme
136+
else {
137+
138+
// page stickers
139+
aboutMeSticker.src = aboutMeDefaultTheme;
140+
skillsSticker.src = skillsDefaultTheme;
141+
projectsSticker.src = projectsDefaultTheme;
142+
reachMeSticker.src = reachMeDefaultTheme;
143+
144+
// themes modal stickers
145+
defaultOptionSticker.src = positiveDefaultTheme;
146+
halloweenOptionSticker.src = negativeHalloweenTheme;
147+
christmasOptionSticker.src = negativeChristmasTheme;
148+
easterOptionSticker.src = negativeEasterTheme;
149+
150+
// themes modal radios
151+
defaultOptionRadio.checked = true;
152+
halloweenOptionRadio.checked = false;
153+
christmasOptionRadio.checked = false;
154+
easterOptionRadio.checked = false;
155+
}
156+
}
157+
158+
/*
159+
*****************
160+
** Window Load **
161+
*****************
162+
*/
163+
window.addEventListener('load', changeTheme());
164+
165+
/*
166+
**************************
167+
** Input Radio Checking **
168+
**************************
169+
*/
170+
defaultOptionRadio.addEventListener('change', function() {
171+
localStorage.setItem('actualTheme', '0');
172+
changeTheme();
173+
});
174+
175+
176+
halloweenOptionRadio.addEventListener('change', function() {
177+
localStorage.setItem('actualTheme', '1');
178+
changeTheme();
179+
});
180+
181+
christmasOptionRadio.addEventListener('change', function() {
182+
localStorage.setItem('actualTheme', '2');
183+
changeTheme();
184+
});
185+
186+
easterOptionRadio.addEventListener('change', function() {
187+
localStorage.setItem('actualTheme', '3');
188+
changeTheme();
189+
});

0 commit comments

Comments
 (0)