This is my first time asking a question on StackOverflow! I was wondering if this code can be made more simple since there is some repetition. I am new to JS so I would like some direction in making it cleaner.
For example, I believe I can add multiple classes in one querySelector. But for the multiple if/else statements I have no idea.
Thanks in advance!
const year = document.querySelector(".copyright .copy-text p");
year.innerHTML = "Copyright" + " " + new Date().getFullYear() + " " + "-" + " " + "MAtech";
const isInViewport = function (elem) {
const distance = elem.getBoundingClientRect();
return (
distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
const copyright = document.querySelector(".copyright");
const services = [
document.querySelector(".services2"),
document.querySelector(".services3"),
document.querySelector(".services4"),
document.querySelector(".services5"),
document.querySelector(".services6"),
document.querySelector(".services7"),
document.querySelector(".services8"),
document.querySelector(".services9"),
document.querySelector(".services10"),
];
let scrolled = false;
let scrollTimeout;
window.addEventListener("wheel", (e) => {
const scrollHeight = window.document.documentElement.scrollTop;
if (!scrolled) {
scrolled = true;
if (services[8] && services[4]) {
if (e.deltaY > 0) {
window.scrollBy(0, window.innerHeight);
} else if (e.deltaY < 0) {
const sec10 = document.querySelector(".services10");
const distancesec10 = sec10.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec10.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
} else if (services[4] && services[3]) {
if (e.deltaY > 0) {
window.scrollBy(0, window.innerHeight);
} else if (e.deltaY < 0) {
const sec6 = document.querySelector(".services6");
const distancesec6 = sec6.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec6.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
} else if (services[3] && services[2]) {
if (e.deltaY > 0) {
window.scrollBy(0, window.innerHeight);
} else if (e.deltaY < 0) {
const sec5 = document.querySelector(".services5");
const distancesec5 = sec5.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec5.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
} else if (!services[3] && services[2]) {
if (e.deltaY > 0) {
window.scrollBy(0, window.innerHeight);
} else if (e.deltaY < 0) {
const sec4 = document.querySelector(".services4");
const distancesec4 = sec4.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec4.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
} else if (!services[2] && services[1]) {
if (e.deltaY > 0) {
window.scrollBy(0, window.innerHeight);
} else if (e.deltaY < 0) {
const sec3 = document.querySelector(".services3");
const distancesec3 = sec3.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec3.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
} else if (!services[1] && services[0]) {
if (e.deltaY > 0) {
window.scrollBy(0, window.innerHeight);
} else if (e.deltaY < 0) {
const sec2 = document.querySelector(".services2");
const distancesec2 = sec2.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec2.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
}
}
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
scrolled = false;
}, 500);
});
window.addEventListener("keydown", (e) => {
const scrollHeight = window.document.documentElement.scrollTop;
if (!scrolled) {
scrolled = true;
if (services[8] && services[4]) {
if (e.keyCode === 40) {
window.scrollBy(0, window.innerHeight);
} else if (e.keyCode === 38) {
const sec10 = document.querySelector(".services10");
const distancesec10 = sec10.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec10.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
} else if (services[4] && services[3]) {
if (e.keyCode === 40) {
window.scrollBy(0, window.innerHeight);
} else if (e.keyCode === 38) {
const sec6 = document.querySelector(".services6");
const distancesec6 = sec6.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec6.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
} else if (services[3] && services[2]) {
if (e.keyCode === 40) {
window.scrollBy(0, window.innerHeight);
} else if (e.keyCode === 38) {
const sec5 = document.querySelector(".services5");
const distancesec5 = sec5.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec5.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
} else if (!services[3] && services[2]) {
if (e.keyCode === 40) {
window.scrollBy(0, window.innerHeight);
} else if (e.keyCode === 38) {
const sec4 = document.querySelector(".services4");
const distancesec4 = sec4.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec4.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
} else if (!services[2] && services[1]) {
if (e.keyCode === 40) {
window.scrollBy(0, window.innerHeight);
} else if (e.keyCode === 38) {
const sec3 = document.querySelector(".services3");
const distancesec3 = sec3.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec3.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
} else if (!services[1] && services[0]) {
if (e.keyCode === 40) {
window.scrollBy(0, window.innerHeight);
} else if (e.keyCode === 38) {
const sec2 = document.querySelector(".services2");
const distancesec2 = sec2.getBoundingClientRect();
if (isInViewport(copyright)) {
document.documentElement.scrollBy(0, distancesec2.top);
} else {
document.documentElement.scrollTo(0, scrollHeight - window.innerHeight);
}
}
}
}
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
scrolled = false;
}, 500);
});
const choices = document.querySelectorAll(".arrow");
if (services[8]) {
const spot = [
".services2",
".services3",
".services4",
".services5",
".services6",
".services7",
".services8",
".services9",
".services10",
".copyright",
];
choices.forEach(function (item, index) {
const elmnt = document.querySelector(spot[index]);
item.addEventListener("click", () => {
elmnt.scrollIntoView({
block: "start",
});
});
});
} else if (!services[8] && services[4]) {
const spot = [".services2", ".services3", ".services4", ".services5", ".services6", ".copyright"];
choices.forEach(function (item, index) {
const elmnt = document.querySelector(spot[index]);
item.addEventListener("click", () => {
elmnt.scrollIntoView({
block: "start",
});
});
});
} else if (!services[4] && services[3]) {
const spot = [".services2", ".services3", ".services4", ".services5", ".copyright"];
choices.forEach(function (item, index) {
const elmnt = document.querySelector(spot[index]);
item.addEventListener("click", () => {
elmnt.scrollIntoView({
block: "start",
});
});
});
} else if (!services[3] && services[2]) {
const spot = [".services2", ".services3", ".services4", ".copyright"];
choices.forEach(function (item, index) {
const elmnt = document.querySelector(spot[index]);
item.addEventListener("click", () => {
elmnt.scrollIntoView({
block: "start",
});
});
});
} else if (!services[1] && services[0]) {
const spot = [".services2", ".copyright"];
choices.forEach(function (item, index) {
const elmnt = document.querySelector(spot[index]);
item.addEventListener("click", () => {
elmnt.scrollIntoView({
block: "start",
});
});
});
}
const host = ["https://matech.gr/", "https://matech.gr/en/"];
if (window.location.href == host[0]) {
const cookieBox = document.querySelector(".cookiebar"),
acceptBtn = cookieBox.querySelector(".btn");
acceptBtn.onclick = () => {
document.cookie = "CookieBy=MAtech; max-age=" + 60 * 60 * 24 * 30;
if (document.cookie) {
cookieBox.style.display = "none";
} else {
alert(
"Δεν είναι δυνατή η ρύθμιση του cookie! Παρακαλώ καταργήστε τον αποκλεισμό αυτού του ιστότοπου από τη ρύθμιση cookie του προγράμματος περιήγησής σας."
);
}
};
const checkCookie = document.cookie.indexOf("CookieBy=MAtech");
checkCookie != -1 ? (cookieBox.style.display = "none") : (cookieBox.style.display = "block");
} else if (window.location.href == host[1]) {
const cookieBox = document.querySelector(".cookiebar");
const acceptBtn = cookieBox.querySelector(".btn");
acceptBtn.onclick = () => {
document.cookie = "CookieBy=MAtech; max-age=" + 60 * 60 * 24 * 30;
if (document.cookie) {
cookieBox.style.display = "none";
} else {
alert("The cookie cannot be set! Please unblock this site from your browser cookie setting.");
}
};
const checkCookie = document.cookie.indexOf("CookieBy=MAtech");
checkCookie != -1 ? (cookieBox.style.display = "none") : (cookieBox.style.display = "block");
}
const hosts = [
"https://matech.gr/ilektrologikesergasies",
"https://matech.gr/ydravlikesergasies",
"https://matech.gr/systimataasfaleias",
"https://matech.gr/ilektrikessyskeves",
"https://matech.gr/privacypolicy",
"https://matech.gr/en/electricalworks",
"https://matech.gr/en/plumbingworks",
"https://matech.gr/en/securitysystems",
"https://matech.gr/en/electricalappliances",
"https://matech.gr/en/privacypolicy",
];
if ([hosts[0],hosts[1],hosts[2],hosts[3],hosts[4],hosts[5],hosts[6],hosts[7],hosts[8],hosts[9]].includes(window.location.href)
) {
window.addEventListener("load", function () {});
const target = document.querySelector("footer");
const scrollToTopBtn = document.querySelector(".scrollToTopBtn");
const rootElement = document.documentElement;
function callback(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
scrollToTopBtn.classList.add("showBtn");
} else {
scrollToTopBtn.classList.remove("showBtn");
}
});
}
function scrollToTop() {
rootElement.scrollTo({
top: 0,
behavior: "smooth",
});
}
scrollToTopBtn.addEventListener("click", scrollToTop);
const observer = new IntersectionObserver(callback);
observer.observe(target);
}