☕️ JS 스타벅스 페이지 클론 코딩 #특수기호, Date, 페이지 상단이동

🍪 특수 기호

html에서 사용할 수 있는 특수기호들은 html entities 검색 후 확인해볼 수 있습니다.

참고 사이트 - https://tools.w3cub.com/html-entities

<p class="copyright">
  📌 카피라이트 기호 생성
  &copy; <span class="this-year"></span> Starbucks Coffee Company. All Rights Reserved.
</p>

🍪 현재 년도 생성

new Date 생성자 함수를 이용해 현재 년도 또는 날짜를 생성해 줄 수 있습니다.

const thisYear = document.querySelector(".this-year"); //span요소 선택
thisYear.textContent = new Date().getFullYear(); // 년도만 반환

🍪 페이지 최상단 이동

GSAP cdn 사이트에서 ScrollToPlugin 을 사용하여 버튼 클릭 시 최상단으로 이동하는 기능을 추가해 줄 수 있습니다.

📌 html 버튼 요소 생성

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollToPlugin.min.js" integrity="sha512-tQFq+nb/TSS648SDzWbSj0A67t4I1PFzR0U6Oi/yEYFyUbAIwg74SOCbr7t2X1Rn+iln7sYwfh8y+z7p0gddOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div id="to-top">
  <div class="material-symbols-outlined">arrow_upward</div>
</div>

window.addEventListener(
  "scroll",
  _.throttle(function () {
    // 배지 숨기기
    if (window.scrollY > 500) {
      gsap.to(badgeEl, 0.6, {
        opacity: 0,
        display: "none",
      });
      // 📌 최상단 이동 버튼 보이기
      gsap.to("#to-top", 0.2, {
        x: 0,
      });
    } else {
      // 배지 보이기
      gsap.to(badgeEl, 0.6, {
        opacity: 1,
        display: "block",
      });
      // 📌 최상단 이동 버튼 숨기기
      gsap.to("#to-top", 0.2, {
        x: 100,
      });
    }
  }, 300)
);

// 📌 ScrollTo 이용하여 이벤트 핸들러 작성
const toTopEl = document.querySelector("#to-top");
toTopEl.addEventListener("click", function () {
  gsap.to(window, 0.7, {
    scrollTo: 0, // 페이지가 시작하는 상단 0 으로 이동
  });
});