/
script.js
139 lines (115 loc) · 4.08 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
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
//placeholder searchbox//
function remove() {
document.getElementById('search-id').setAttribute('placeholder', '');
}
function add() {
document.getElementById('search-id').setAttribute('placeholder', ' Search');
}
//placeholder searchbox 2//
function remove1() {
document.getElementById('search1').setAttribute('placeholder', '');
}
function add1() {
document.getElementById('search1').setAttribute('placeholder', ' Search');
}
//LEFT-MENU toggle
let menu = document.getElementsByClassName('menu-bar')[0];
let list = document.getElementById('list');
menu.addEventListener('click', () => {
list.classList.toggle('active');
});
//Close menu btn toggle
let closeBtn = document.getElementsByClassName('close-btn-a')[0];
let menuText = document.getElementsByClassName('menu-text')[0];
closeBtn.addEventListener('click', () => {
list.classList.toggle('active');
});
menuText.addEventListener('click', () => {
list.classList.toggle('active');
});
//Language btn dropdown
let langBtn = document.getElementById('lang-btn-id');
let langClass = document.getElementsByClassName('lang')[0];
let arrowClass = document.getElementById('arrow');
let btnClass = document.getElementById('lang-btn-id');
langBtn.addEventListener('click', () => {
langClass.classList.toggle('active-lang');
});
function arrowAdd() {
if (arrowClass.getAttribute('class') == 'fa fa-angle-down arrow-class-w') {
arrowClass.setAttribute('class', 'fa fa-angle-up arrow-class-b');
} else {
arrowClass.setAttribute('class', 'fa fa-angle-down arrow-class-w');
}
}
langBtn.addEventListener('click', arrowAdd);
//Language btn BG and color change
function changeBg() {
if (btnClass.getAttribute('class') == 'lang-btn') {
btnClass.setAttribute('class', 'lang-btn-active');
} else {
btnClass.setAttribute('class', 'lang-btn');
}
}
langBtn.addEventListener('click', changeBg);
//popular Show/hide
let popularBtn = document.getElementById('popular-btn-id');
let popularList = document.getElementById('popular-list-id');
popularBtn.addEventListener('click', popularShow);
function popularShow() {
if (window.innerWidth > 699) {
popularList.setAttribute('class', 'popular-list popular-list-active');
stormList.setAttribute('class', 'storm-list');
covidList.setAttribute('class', 'covid-list');
} else if (
popularList.getAttribute('class') == 'popular-list popular-list-active' ||
window.innerWidth > 699
) {
popularList.setAttribute('class', 'popular-list');
} else if (
popularList.getAttribute('class') == 'popular-list' ||
window.innerWidth > 699
) {
popularList.setAttribute('class', 'popular-list popular-list-active');
}
}
let stormBtn = document.getElementById('storm-btn-id');
let stormList = document.getElementById('storm-list-id');
stormBtn.addEventListener('click', stormShow);
function stormShow() {
if (window.innerWidth > 699) {
popularList.setAttribute('class', 'popular-list');
stormList.setAttribute('class', 'storm-list storm-list-active');
covidList.setAttribute('class', 'covid-list');
} else if (
stormList.getAttribute('class') == 'storm-list storm-list-active' ||
window.innerWidth > 699
) {
stormList.setAttribute('class', 'storm-list');
} else if (
stormList.getAttribute('class') == 'storm-list' ||
window.innerWidth > 699
) {
stormList.setAttribute('class', 'storm-list storm-list-active');
}
}
let covidBtn = document.getElementById('covid-btn-id');
let covidList = document.getElementById('covid-list-id');
covidBtn.addEventListener('click', covidShow);
function covidShow() {
if (window.innerWidth > 699) {
popularList.setAttribute('class', 'popular-list');
stormList.setAttribute('class', 'storm-list');
covidList.setAttribute('class', 'covid-list covid-list-active');
} else if (
covidList.getAttribute('class') == 'covid-list covid-list-active' ||
window.innerWidth > 699
) {
covidList.setAttribute('class', 'covid-list');
} else if (
covidList.getAttribute('class') == 'covid-list' ||
window.innerWidth > 699
) {
covidList.setAttribute('class', 'covid-list covid-list-active');
}
}