[Project4~7/임경희] The message, Counter, Image Carousel, Digital Clock

[limkhl]

📝 실행 방법

1. 요기로 들어가거나 Root 위치에서 npx serve -s 실행하시면 아래 이미지와 같은 홈 화면이 나옵니다. 각 제목을 클릭하면 각 프로젝트 별 페이지를 확인할 수 있습니다. 헤더의 문구를 클릭하면 홈 화면으로 돌아갑니다.
2. 각 프로젝트별 폴더로 이동하셔서 npx serve -s 실행해도 프로젝트마다 실행해볼 수 있습니다.
   

---

Project 4 Colors

커밋 링크: e9368ce

---

Project 5 Counter

커밋 링크: 67240fb

---

Project 6 Image Carousel

커밋 링크: 87f3912

👩‍💻 구현 내용

• 현재 보여야 하는 슬라이드를 제외한 슬라이드는 모두 display: none으로 바꿔주고, 현재 슬라이드만 display: block으로 바꿔서 노출시키는 방식으로 구현했습니다.

• unsplash API를 이용해 이미지를 랜덤으로 받아와 이미지 슬라이드를 만듭니다.

  export const IMG_API_END_POINT = `https://source.unsplash.com/1600x900/?`;
  
  // 같은 api를 한 번에 여러 번 호출하면 같은 이미지를 불러오는 문제가 있어
  // 각각 검색 키워드를 달리 지정해줌
  export const KEYWORDS_FOR_IMAGE = ['nature', 'water', 'beach', 'sea', 'park', 'mountain', 'star'];

  fetch(`${IMG_API_END_POINT}${KEYWORDS_FOR_IMAGE[curIndex - 1]}`).then((res) => {
    $slide.innerHTML = /* html */ `
      <div class="numberText">${curIndex} / ${imgLength}</div>
      <img class="slideImg" src="${res.url}" alt="slide image"/>
    `;
  });

  for (let i = 1; i <= imgLength; i++) {
      new Slide({
        $target: $slideContainer,
        initialState: {
          curIndex: i,
          imgLength,
        },
      });
    }

---

Project 7 Digital Clock

커밋 링크: c91f69b

👩‍💻 구현 내용

• javascript의 Date 관련 내장 메소드와 setInterval을 이용해 구현했습니다.
• 새벽, 낮, 저녁에 맞춰 배경 색깔을 지정해줬습니다.