소개
이 프로젝트에서는 "Write" 버튼을 클릭하면 무작위 인사말이 표시되는 휴일 인사 카드를 만드는 방법을 배우게 됩니다. 이 프로젝트는 JavaScript 함수, 이벤트 리스너, DOM 조작을 사용하는 방법을 이해하는 데 도움이 될 것입니다.
👀 미리보기
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다:
- 프로젝트 환경 설정 방법
- 미리 정의된 배열에서 인사말을 무작위로 선택하는 함수 구현 방법
- 선택된 인사말을 인사 카드에 표시하는 함수 구현 방법
- "Write" 버튼에 이벤트 리스너를 추가하여 인사말 표시를 트리거하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
- JavaScript 함수를 사용하여 무작위 콘텐츠 생성
- DOM 을 조작하여 HTML 요소의 콘텐츠 업데이트
- 특정 작업을 트리거하기 위해 이벤트 리스너 추가
- 제공된 프로젝트 구조로 작업하고 단계별 지침 따르기
프로젝트 구조 설정
이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:
프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:
├── index.css
├── index.html
└── index.js
여기서:
index.css는 이 챌린지를 위한 스타일 파일입니다.index.js는 이 챌린지를 위해 완성해야 하는 JavaScript 파일입니다.index.html은 인사 카드 페이지입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고침하면 페이지가 표시됩니다.
writeGreeting() 함수 구현
이 단계에서는 제공된 greetings 배열에서 무작위로 인사말을 선택하는 writeGreeting() 함수를 구현합니다.
index.js파일을 엽니다.writeGreeting()함수를 찾고// TODO주석을 다음 코드로 바꿉니다:
return greetings[Math.floor((Math.random() * 10) % greetings.length)];
이 코드는 greetings 배열 내에서 무작위 인덱스를 생성하고 해당 인사말을 반환합니다.
show() 함수 구현
이 단계에서는 greetingDisplay 요소에 인사말을 표시하는 show() 함수를 구현합니다.
index.js파일을 엽니다.show()함수를 찾고// TODO주석을 다음 코드로 바꿉니다:
greetingDisplay.innerHTML = writeGreeting();
이 코드는 writeGreeting() 함수를 호출하여 무작위 인사말을 가져온 다음 greetingDisplay 요소의 innerHTML을 설정하여 인사말을 표시합니다.
index.js파일을 저장합니다.- VM 에서 "Web 8080" 보기를 새로 고쳐 인사 카드 작동 방식을 확인합니다. "Write" 버튼을 클릭하여 무작위 인사말을 표시합니다.
축하합니다! 휴일 인사 카드 프로젝트를 완료했습니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
