상호 작용적인 빙둔둔 무드 스케일 만들기

소개

이 프로젝트에서는 2022 년 올림픽에 대한 만족도를 재미있고 상호작용적인 방식으로 표현할 수 있는 빙둔둔 무드 스케일 (Bing Dwen Dwen Mood Scale) 을 만드는 방법을 배우게 됩니다. 빙둔둔 마스코트는 세계적인 센세이션을 일으켰으며, 이 프로젝트를 통해 빙둔둔과 상호작용하고 전반적인 만족도를 평가할 수 있습니다.

👀 미리보기

Bing Dwen Dwen Mood Scale demo

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

초기 무드 상태를 "불만족 (dissatisfied)"으로 설정하여 빙둔둔 무드 스케일을 초기화하는 방법
진행률 표시줄의 위치에 따라 빙둔둔의 무드를 업데이트하여 다양한 수준의 만족도를 반영하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

사용자 입력에 따라 HTML 요소의 모양을 변경하기 위해 DOM (Document Object Model, 문서 객체 모델) 을 조작합니다.
사용자 상호 작용에 응답하기 위해 JavaScript 이벤트 핸들러를 사용합니다.
요소에 CSS 클래스를 적용하여 시각적 모양을 변경합니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 구조를 설정하고 필요한 파일과 폴더를 준비합니다.

코드 편집기에서 프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── css
│   └── index.css
├── index.html
└── js
    └── index.js

여기서:

index.html은 메인 페이지입니다.
css는 페이지 스타일을 저장하기 위한 폴더입니다.
js/index.js는 코드를 추가해야 하는 JavaScript 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고침하면 페이지가 표시됩니다.

Initial Effect

빙둔둔 무드 스케일 초기화

이 단계에서는 빙둔둔 무드 스케일을 초기화하고 초기 무드 상태를 설정하는 방법을 배웁니다.

js/index.js 파일을 엽니다.
다음 코드를 찾습니다:

const range = document.getElementById("range");
const BingDwenDwen = document.querySelector(".BingDwenDwen");

빙둔둔의 초기 무드 상태를 "불만족 (dissatisfied)"으로 설정하기 위해 다음 코드를 추가합니다:

BingDwenDwen.className = "BingDwenDwen not-satisfied";

이렇게 하면 빙둔둔 요소의 초기 클래스 이름이 not-satisfied로 설정되어 "불만족" 무드 상태에 해당합니다.

프로그레스 바 기반 빙둔둔 무드 업데이트

이 단계에서는 진행률 표시줄의 위치를 기반으로 빙둔둔의 무드를 업데이트하는 방법을 배웁니다.

js/index.js 파일에서 다음 코드를 찾습니다:

range.onchange = (e) => {
  let value = Number(e.target.value); // value
  // TODO
};

진행률 표시줄 값에 따라 빙둔둔의 무드를 업데이트하기 위해 onchange 이벤트 핸들러 내부에 다음 코드를 추가합니다:

if (value == 25) {
  BingDwenDwen.className = "BingDwenDwen a-little-unsatisfied";
} else if (value == 50) {
  BingDwenDwen.className = "BingDwenDwen ordinary";
} else if (value == 75) {
  BingDwenDwen.className = "BingDwenDwen satisfied";
} else if (value == 100) {
  BingDwenDwen.className = "BingDwenDwen great";
} else {
  BingDwenDwen.className = "BingDwenDwen not-satisfied";
}

이 코드는 진행률 표시줄의 값을 확인하고 그에 따라 빙둔둔 요소의 클래스 이름을 업데이트합니다. 클래스 이름은 챌린지 설명에 지정된 다양한 무드 상태에 해당합니다.

파일을 저장하고 브라우저를 새로 고쳐 업데이트된 코드가 작동하는지 확인합니다.

이제 진행률 표시줄을 드래그하면 빙둔둔 이미지가 해당 무드 상태를 반영하도록 변경됩니다. 완성된 효과는 다음과 같습니다:

Completed Effect

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.