나만의 아고라 스테이츠 만들기

배포링크!

https://wangamy0222.github.io/fe-sprint-my-agora-states/

이번에는 과제로 나만의 아고라 스테이츠를 만들었다!
뭐하지...뭐하지 하다가 저번에 페어분과 나눈 이야기 중에 스타듀밸리가 떠올라서 그거로 테마를 하면 좋겠다! 라고 생각되서 실행에 옯겼다!

그 중 몇가지 javascript 기능들을 소개하고자 한다!

Scroll Top

• 버튼을 누르면 맨 위페이지로 이동시킨다

//scrolltotop
const scrollButton = document.querySelector(".scroll");
let intervalId = 0;

function scrollStep(scrollStepHeight) {
  if (window.pageYOffset === 0) {
    clearInterval(intervalId);
  }
  window.scrollTo(0, window.pageYOffset - scrollStepHeight);
}

function scrollToTop(scrollStepHeight, delay) {
  if (scrollStepHeight <= 0) {
    alert("The specified scroll step height must be positive!");
  } else if (delay <= 0) {
    alert("The specified scroll delay must be positive!");
  }
  intervalId = setInterval(() => scrollStep(scrollStepHeight), delay);
}

scrollButton.addEventListener("click", () => scrollToTop(90, 16.6));

Audio Play Section

• 버튼을 누르면 바가 컬러풀하게 움직이고 노래가 나온다!

const bars = document.querySelectorAll(".audiobar");
const audioContainer = document.querySelector(".audio--container");
const audio = document.querySelector("audio");
let interval = null;

bars.forEach((bar) => {
  let size = Math.random();
  bar.style.transform = `scaleY(${size})`;
});

audioContainer.addEventListener("click", () => {
  if (interval) {
    clearInterval(interval);
    audio.pause();
    interval = null;

    bars.forEach((bar) => {
      bar.style.background = `white`;
    });
    return;
  } else {
    audio.play();
    interval = setInterval(() => {
      bars.forEach((bar) => {
        let size = Math.random();
        let hue = Math.floor(Math.random() * 360);
        bar.style.transform = `scaleY(${size})`;
        bar.style.background = `hsl(${hue}, 70%, 60%)`;
      });
    }, 150);
  }
});

audio.addEventListener("ended", () => {
  clearInterval(interval);
});

아직 온전히 내 힘으로 한 것이 아니라 많이 아쉬운 과제였다...
실력이 아직 모자라서 다른 분들의 코드를 참고해서 만들었다! 다음 과제에서는 더욱더 성장할 수 있도록 실력을 쌓아야겠다!!!