forked from SyedImtiyaz-1/Code-Shop
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
89 lines (73 loc) · 2.69 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
document.addEventListener("DOMContentLoaded", function() {
// Show pre-loader for 3 seconds
var preloader = document.getElementById("preloader");
var content = document.getElementById("content");
setTimeout(function() {
preloader.style.display = "none";
content.style.display = "block";
}, 2500);
});
// Get the button:
const goToTopBtn = document.getElementById("goToTopBtn");
// Add a click event listener to the button
goToTopBtn.addEventListener("click", function() {topFunction()});
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
goToTopBtn.style.display = "block";
} else {
goToTopBtn.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
// Intersection Observer for showing and hiding elements
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
});
// Select all elements with the class "hidden"
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((element) => observer.observe(element));
const toggle = document.getElementById('toggleDark');
const body = document.querySelector('body');
toggle.addEventListener('click', function(){
this.classList.toggle('bi-moon');
if(this.classList.toggle('bi-brightness-high-fill')){
body.style.background = 'rgb(255,239,239)';
body.style.color = 'black';
body.style.transition = '2s';
}else{
body.style.background = 'black';
body.style.color = 'white';
body.style.transition = '2s';
}
});
const clearButton = document.querySelector('.clear-button');
const inputField = document.querySelector('#my-input-field');
clearButton.addEventListener('click', () => {
// Clear the input field
inputField.value = '';
});
const accordionItems = document.querySelectorAll('.accordion__item');
accordionItems.forEach((item) => {
const btn = item.querySelector('.accordion__btn');
const content = item.querySelector('.accordion__content');
btn.addEventListener('click', () => {
item.classList.toggle('accordion__item--active');
// Toggle the visibility of the content
if (item.classList.contains('accordion__item--active')) {
content.style.maxHeight = content.scrollHeight + 'px';
} else {
content.style.maxHeight = '0';
}
});
});