-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
112 lines (95 loc) · 3.9 KB
/
app.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
//Resources
const menuItems = document.getElementById('menu-items');
const menuBtn = document.getElementById('menu');
const closeMenuBtn = document.getElementById('close-menu');
const skillsTab = document.getElementById('skills');
const worksTab = document.getElementById('works');
const sayHelloBtn = document.getElementById('say-hello');
const devWorksContainer = document.getElementById('works-as-a-developer');
const designWorksContainer = document.getElementById('works-as-a-designer');
const developerBtn = document.getElementById('developer-btn');
const designerBtn = document.getElementById('designer-btn');
const projects = document.getElementsByClassName('project');
const dim = document.getElementById('dim');
const photoHolder = document.getElementById('photo-holder');
const simpleView = document.getElementById('simple-view');
const tooSimpleLink = document.getElementById('too-simple');
const overallContainer = document.getElementById('overall-container');
const tooFancyLink = document.getElementById('too-fancy');
const date = document.getElementById('date');
//Menu btn is clicked
menuBtn.addEventListener('click', () => {
menuItems.classList.add('fade-in');
});
//Close-Menu btn is clicked
closeMenuBtn.addEventListener('click', () => {
menuItems.classList.remove('fade-in');
});
//close menu when a menu item is clicked on mobile or tablet
function tabIsClicked(element){
element.addEventListener('click', () => {
menuItems.classList.remove('fade-in');
if(element.id === 'say-hello') location.assign('#contact-me'); //navigate to contacts when say hello is clicked
});
}
tabIsClicked(skillsTab);
tabIsClicked(worksTab);
tabIsClicked(sayHelloBtn);
//Developer btn is clicked
developerBtn.addEventListener('click', () => {
developerBtn.classList.add('colored-btn');
designerBtn.classList.remove('colored-btn');
devWorksContainer.style.display = 'grid';
designWorksContainer.style.display = 'none';
})
//Designer btn is clicked
designerBtn.addEventListener('click', () => {
designerBtn.classList.add('colored-btn');
developerBtn.classList.remove('colored-btn');
designWorksContainer.style.display = 'grid';
devWorksContainer.style.display = 'none';
})
//Hover state for projects
for(let project of projects){
//Check if the developer btn is active
project.addEventListener('mouseover', () => {
if(developerBtn.classList.contains('colored-btn')) project.lastElementChild.style.display = 'flex';
});
project.addEventListener('mouseout', () => {
if(developerBtn.classList.contains('colored-btn')) project.lastElementChild.style.display = 'none';
});
//check if the designer btn is active
project.addEventListener('click', () => {
if(designerBtn.classList.contains('colored-btn')){
let src = `images/ui-screens/${project.id}`;
dim.style.display = "block";
photoHolder.style.background = `url(${src}) no-repeat`;
photoHolder.style.backgroundSize = 'contain';
photoHolder.style.backgroundPosition = 'center';
//display img in another tab
//window.open(`http://127.0.0.1:5500/images/ui-screens/${project.id}`, '_blank');
}
});
}
//click anywhere on screen to hide dim and photo
dim.addEventListener('click', (e) => {
if (e.target.id == 'dim'){
dim.style.display = "none";
photoHolder.style.background = "none";
}
})
//Toggle between fancy and simple look
//fancy link is clicked
tooFancyLink.addEventListener('click', () => {
overallContainer.style.display = 'none';
simpleView.style.display = 'block';
location.assign('#simple-view');
})
//simple link is clicked
tooSimpleLink.addEventListener('click', () => {
simpleView.style.display = 'none';
overallContainer.style.display = 'block';
location.assign('#body');
})
//make sure copyright date is update
date.innerText = new Date().getFullYear();