AkademieProjekt3/script.js

123 lines
3.2 KiB
JavaScript
Raw Normal View History

2024-03-22 21:19:38 +00:00
//Nastavení Header menu
const menuIcon = document.querySelector(".menu-icon");
const menuList = document.querySelector("nav");
const hamburgerIcon = document.querySelector(".fa-solid");
menuIcon.addEventListener("click", () => {
if (hamburgerIcon.classList[1] === "fa-bars") {
hamburgerIcon.classList.add("fa-xmark");
hamburgerIcon.classList.remove("fa-bars");
menuList.style.display = "block";
} else {
hamburgerIcon.classList.add("fa-bars");
hamburgerIcon.classList.remove("fa-xmark");
menuList.style.display = "none";
}
});
2024-03-23 18:38:39 +00:00
// Dark Light Mode
const body = document.querySelector("body");
2024-03-28 17:53:22 +00:00
const head = document.querySelector("header");
const links = document.querySelectorAll("a");
2024-03-23 18:38:39 +00:00
const nav = document.querySelector(".navigation");
const h1 = document.querySelector("h1");
2024-03-28 17:53:22 +00:00
const nadpish2 = document.querySelectorAll("h2");
2024-03-23 18:38:39 +00:00
const p = document.querySelector("p");
2024-03-28 17:53:22 +00:00
const solid = document.querySelector(".fa-solid");
const solid1 = document.querySelector(".menu-icon");
const footer = document.querySelector("footer");
2024-03-23 23:58:20 +00:00
2024-03-28 17:53:22 +00:00
let isDraculaMode = false;
// Funkce pro nastavení stylů pro Dracula mód
function setDraculaStyles() {
body.style.backgroundColor = "#2a232b"; // Barva pozadí pro Dracula mód
body.style.color = "#f8f8f2"; // Barva textu pro Dracula mód
head.style.backgroundColor = "#2a232b";
links.forEach((a) => {
a.style.color = "#f76b00";
});
nav.style.backgroundColor = "#2a232b";
h1.style.color = "#e54472";
nadpish2.forEach((h2) => {
h2.style.color = "#18f700";
});
solid.style.backgroundColor = "#2a232b";
solid.style.color = "#f76b00";
solid1.style.backgroundColor = "#2a232b";
footer.style.backgroundColor = "#2a232b";
}
// Funkce pro nastavení stylů pro Light mód
function setLightStyles() {
body.style.backgroundColor = "#f8f8f2"; // Barva pozadí pro Light mód
body.style.color = "#282a36"; // Barva textu pro Light mód
head.style.backgroundColor = "#f8f8f2";
}
2024-03-23 23:58:20 +00:00
// Funkce pro přepnutí módu
function toggleMode() {
2024-03-28 17:53:22 +00:00
if (isDraculaMode) {
// Pokud je momentálně v Dracula modu, přepnout na Light mód
setLightStyles();
isDraculaMode = false;
2024-03-23 23:58:20 +00:00
} else {
2024-03-28 17:53:22 +00:00
// Pokud je momentálně v Light modu, přepnout na Dracula mód
setDraculaStyles();
isDraculaMode = true;
2024-03-23 23:58:20 +00:00
}
2024-03-23 18:38:39 +00:00
}
2024-03-23 23:58:20 +00:00
2024-03-28 17:53:22 +00:00
// Při kliknutí na tlačítko spusť funkci pro přepnutí módu
2024-03-23 23:58:20 +00:00
document.getElementById("toggleButton").addEventListener("click", toggleMode);
2024-03-28 17:53:22 +00:00
// Nastavit výchozí styl na Dracula mód po načtení stránky
setDraculaStyles();
isDraculaMode = true;
2024-03-28 19:08:37 +00:00
// Photo Gallery -> section
const image1 = document.querySelector(".picture")
image1.addEventListener("mouseenter", () => {
image1.style.transform = "scale(2.2)"
})
image1.addEventListener("mouseleave", () => {
image1.style.transform = "scale(1)"
})
const image2 = document.querySelector(".picture1")
image2.addEventListener("mouseenter", () => {
image2.style.transform = "scale(2.2)"
})
image2.addEventListener("mouseleave", () => {
image2.style.transform = "scale(1)"
})
const image3 = document.querySelector(".picture2")
image3.addEventListener("mouseenter", () => {
image3.style.transform = "scale(2.2)"
})
image3.addEventListener("mouseleave", () => {
image3.style.transform = "scale(1)"
})