-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
94 lines (89 loc) · 2.5 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
'use strict';
function main() {
const ENTRY_POINT = '/';
let layoutInstance = null;
let headerInstance = null;
let footerInstance = null;
const root = document.querySelector('#root');
generateLayout();
generateHeader();
generateFooter();
activateRouter();
listenerSearch();
changeBg();
backHombe();
function generateLayout() {
layoutInstance = new Layout(root);
layoutInstance.generate();
}
function generateHeader() {
headerInstance = new Header(layoutInstance.header, 'SpyArtists', `Search all album's from your favourite artist's`);
headerInstance.generate();
}
function generateFooter() {
footerInstance = new Footer(layoutInstance.footer);
footerInstance.generate();
}
function activateRouter() {
routerInstance.buildDOM(ENTRY_POINT, layoutInstance.main);
}
function listenerSearch() {
const btn = document.querySelector('.search-btn');
btn.addEventListener('click', changeUrl);
}
function backHombe() {
const header = document.querySelector('#main-header');
header.addEventListener('click', () => {
location.reload();
})
}
function changeUrl(event) {
event.preventDefault();
const url = event.target.attributes.url.value;
const input = document.querySelector('.search-input').value;
if (input !== '') {
routerInstance.buildDOM(url, layoutInstance.main, input);
} else {
const error = document.querySelector('.error');
error.setAttribute('style', 'padding: 8px;background: rgba(0, 0, 0, 0.8);');
error.innerHTML = 'Por favor, introduce un artista';
}
}
function changeBg() {
const bgs = [
'./assets/imgs/5.jpg',
'./assets/imgs/1.jpg',
'./assets/imgs/2.jpg',
'./assets/imgs/3.jpg',
'./assets/imgs/4.jpg',
];
const classes = [
'fade-in',
'fade',
'fade-out',
'fade2-in',
'fade2',
'fade2-out'
]
const body = document.querySelector('#bg');
let counterBgs = 0;
let counterCls = 0;
const duration = 2000;
setInterval(() => {
counterBgs++;
if (counterBgs === bgs.length) {
counterBgs = 0;
}
body.setAttribute('style', `background-image: url(${bgs[counterBgs]})`);
}, duration * 3);
setInterval(() => {
body.classList.remove(classes[counterCls]);
counterCls++;
if (counterCls === classes.length) {
counterCls = 0;
}
body.classList.add(classes[counterCls]);
}, duration)
}
}
window.addEventListener('load', main);