랜덤 인사 카드 생성기

소개

이 프로젝트에서는 "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() 함수를 구현합니다.

1. index.js 파일을 엽니다.
2. writeGreeting() 함수를 찾고 // TODO 주석을 다음 코드로 바꿉니다:

return greetings[Math.floor((Math.random() * 10) % greetings.length)];

이 코드는 greetings 배열 내에서 무작위 인덱스를 생성하고 해당 인사말을 반환합니다.

show() 함수 구현

이 단계에서는 greetingDisplay 요소에 인사말을 표시하는 show() 함수를 구현합니다.

1. index.js 파일을 엽니다.
2. show() 함수를 찾고 // TODO 주석을 다음 코드로 바꿉니다:

greetingDisplay.innerHTML = writeGreeting();

이 코드는 writeGreeting() 함수를 호출하여 무작위 인사말을 가져온 다음 greetingDisplay 요소의 innerHTML을 설정하여 인사말을 표시합니다.

3. index.js 파일을 저장합니다.
4. VM 에서 "Web 8080" 보기를 새로 고쳐 인사 카드 작동 방식을 확인합니다. "Write" 버튼을 클릭하여 무작위 인사말을 표시합니다.

축하합니다! 휴일 인사 카드 프로젝트를 완료했습니다.

요약

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