station/script.js at main · jeffreycharters/station · GitHub

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
window.addEventListener("DOMContentLoaded", (load) => {
  let visit = Number(localStorage.getItem("counter"));
  visit == 0 ? (visit += 1) : visit;
  document.querySelector(
    "#visitCounter"
  ).innerText = `Number of Visits: ${visit}`;
  localStorage.setItem("counter", (visit += 1));
});

function func() {
  document.getElementById("embed").style.display = "inline-block";
  document.getElementById("h1").scrollIntoView();
  new Audio("epic.mp3").play();
  document.getElementById("plus").style.display = "none";
}

let emoji =
  "😄🙃🤪🤩🤓🤔🤨🧐🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐🤓🤩🤪🤨🤔🤯🤠🥳🤫🤭🧐";

console.log("you are already console but i console some emojies" + emoji);

const icons = document.querySelectorAll(".svg-icon");
const container = document.querySelector(".container");
const title = document.querySelector("h2");
const links = document.querySelectorAll(".link");
let root = document.querySelector(":root");

icons.forEach(function (e) {
  e.addEventListener("click", function () {
    console.log(e);
    const nextIcon = e.getAttribute("data-set");
    e.classList.add("hidden");
    document.querySelector(`.${nextIcon}`).classList.remove("hidden");

    if (nextIcon === "moon") {
      container.classList.add("light-mode");
      title.classList.add("light-mode-gradient");
      links.forEach((e) => e.classList.add("link-light-mode"));
      links[1].style.color = "#FA7070";
      links[3].style.color = "#FA7070";
      root.style.setProperty("--bgc", "white");
      root.style.setProperty("--content", "black");

      document.querySelector("body").classList.add("light-mode");

      document
        .querySelector(".hero-button--outline")
        .classList.add("light-mode");
    } else {
      container.classList.remove("light-mode");
      links[1].style.color = null;
      links[3].style.color = null;

      title.classList.remove("light-mode-gradient");
      links.forEach((e) => e.classList.remove("link-light-mode"));
      document.querySelector("body").classList.remove("light-mode");
      root.style.setProperty("--bgc", "black");
      root.style.setProperty("--content", "white");

      document
        .querySelector(".hero-button--outline")
        .classList.remove("light-mode");
    }
  });
});

// change form bg color

const colorForm = document.getElementById("color-form");
const colorPicker = document.getElementById("color-picker");
const favoriteHex = document.getElementById("favorite-hex");

colorForm.addEventListener("submit", function changeColor(e) {
  e.preventDefault();
  colorForm.style.backgroundColor = colorPicker.value;
  favoriteHex.innerHTML = `
    Your favorite color has the hex code: ${colorPicker.value}
  `;
});