AkademieProjekt3/script.js

//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";
  }
});

// Dark Light Mode

const body = document.querySelector("body");
const head = document.querySelector("header");
const links = document.querySelectorAll("a");
const nav = document.querySelector(".navigation");
const h1 = document.querySelector("h1");
const nadpish2 = document.querySelectorAll("h2");
const p = document.querySelector("p");
const solid = document.querySelector(".fa-solid");
const solid1 = document.querySelector(".menu-icon");
const footer = document.querySelector("footer");
const gotop = document.querySelector("#scrollToTopBtn");
const theme = document.querySelector("#toggleButton");
const box = document.querySelectorAll(".code-box");
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";
  gotop.style.backgroundColor = "#18f700";
  theme.style.backgroundColor = "#18f700";
}

// Funkce pro nastavení stylů pro Light mód;
function setLightStyles() {
  body.style.backgroundColor = "#e7efa7"; // Barva pozadí pro Light mód
  body.style.color = "#282a36"; // Barva textu pro Light mód
  head.style.backgroundColor = "#e7efa7";
  nav.style.backgroundColor = "#e7efa7";
  solid.style.backgroundColor = "#e7efa7";
  solid1.style.backgroundColor = "#e7efa7";
  footer.style.backgroundColor = "#e7efa7";
	nadpish2.forEach((h2) => {
		h2.style.color = "#c627d8";
	});
	gotop.style.backgroundColor = "#a7e6ef";
	theme.style.backgroundColor = "#a7e6ef";
	box.forEach((p) =>{
		p.style.color = "white"
	})
}

// Funkce pro přepnutí módu
function toggleMode() {
  if (isDraculaMode) {
    // Pokud je momentálně v Dracula modu, přepnout na Light mód
    setLightStyles();
    isDraculaMode = false;
  } else {
    // Pokud je momentálně v Light modu, přepnout na Dracula mód
    setDraculaStyles();
    isDraculaMode = true;
  }
}

// Při kliknutí na tlačítko spusť funkci pro přepnutí módu
document.getElementById("toggleButton").addEventListener("click", toggleMode);

// Nastavit výchozí styl na Dracula mód po načtení stránky
setDraculaStyles();
isDraculaMode = true;

// 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)";
});

// Tlačítko go to top
// Zobrazit tlačítko, pokud je uživatel dostatečně daleko od horní části stránky
window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("scrollToTopBtn").style.display = "block";
  } else {
    document.getElementById("scrollToTopBtn").style.display = "none";
  }
}

// Posunout nahoru, když uživatel klikne na tlačítko
function scrollToTop() {
  document.body.scrollTop = 0; // Pro Safari
  document.documentElement.scrollTop = 0; // Pro ostatní prohlížeče
}