-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
122 lines (113 loc) · 3.83 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
window.addEventListener('DOMContentLoaded', slider);
function slider() {
const slides = [];
slides[0] = {
img: "./img/head-img-1.jpg",
heading: "change is good",
txt: "same stuff different day, routine anxiety stress etc... you're about to explode, been there sir. keep everything behind and pack your stuff we'll make you feel good again."
};
slides[1] = {
img: "./img/head-img-2.jpg",
heading: "wait for what",
txt: "they told you there is seven wonders!! nope with us you'll discover a lot more, they devide the year in four seasons !! we devide the day in four season."
};
slides[2] = {
img: "./img/head-img-3.jpg",
heading: "been there",
txt: "you think travel is boring? you've tried it before, the service did not match the ad, not with us our most proffesional modest guides who will take to breathtaking places."
};
let index = 0;
const slide = document.querySelector('.slider');
const timer = window.setInterval(next, 4000);
const bg = document.querySelector('.slider__img');
const title = document.querySelector('.slider__heading');
const text = document.querySelector('.slider__txt');
const indics = document.getElementsByClassName('slider__indic');
function init() {
timer;
slide.addEventListener('mouseenter', stop);
slide.addEventListener('mouseleave', resume);
changeSlide(index);
}
function resume() {
slider();
console.log('mouse out');
}
function stop() {
window.clearInterval(timer);
console.log('mouse in');
}
function changeSlide(){
bg.src = slides[index].img;
title.innerHTML = slides[index].heading;
text.innerHTML = slides[index].txt;
for (var i = 0; i < indics.length; i++) {
indics[i].className = indics[i].className.replace(" active", "");
}
indics[index].className+= " active";
}
function prev() {
(index <=0) ? index = 3 : index--;
changeSlide(index);
}
function next() {
(index>= (slides.length -1)) ? index = 0 : index++;
changeSlide(index);
}
return init();
}
// NAV
const button = document.querySelector('.nav__btn');
const navBar = document.getElementById('navbar');
const navList = document.querySelector('.nav__navigation');
const navItems = document.querySelectorAll('.nav__item');
let showNav = false;
let currentHeight = pageYOffset;
button.addEventListener('click', toggleNav);
function toggleNav() {
if (!showNav) {
button.classList.add('close');
navBar.classList.add('show');
navList.classList.add('close');
navItems.forEach(item => item.classList.add('show'));
showNav= true;
}else{
button.classList.remove('close');
navBar.classList.remove('show');
navList.classList.remove('close');
navItems.forEach(item => item.classList.remove('show'));
showNav = false;
}
}
window.onscroll = function(){
let currentScrollPos = window.pageYOffset;
if (currentHeight < currentScrollPos) {
navBar.style.backgroundColor = 'rgba(0,0,0, .7)';
navBar.style.height = "8rem";
}else if (currentScrollPos === 0) {
navBar.style.backgroundColor = "transparent";
}
currentHeight = currentScrollPos;
}
//ACCORDION
const acrdItem = document.getElementsByClassName('acrd__item');
const acrdHeader = document.getElementsByClassName('acrd__btn');
for (var i = 0; i < acrdHeader.length; i++) {
acrdHeader[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
const itemClass = this.parentNode.className;
for (var i = 0; i < acrdItem.length; i++) {
acrdItem[i].className= 'acrd__item close';
}
if (itemClass == 'acrd__item close') {
this.parentNode.className = "acrd__item open";
}
}
//REVIEWS
randomRobot();
function randomRobot(){
const base = "https://robohash.org";
document.getElementById('robot-img-1').src = base + '/' + Math.random();
document.getElementById('robot-img-2').src = base + '/' + Math.random();
}