[요구사항] Day 1
- 위 이미지와 같은 페이지 만들기
[요구사항] Day 2
- 랜덤한 Hex color code를 생성하는 함수 작성하기 (직접 작성해보세요.)
Hex Code란?
0~9까지의 숫자와 A~F까지의 알파벳이 랜덤하게 구성되어 이루는 6자리 코드를 의미합니다.
예를 들면 000000, 3474FF 등 모두 유효한 Hex Code입니다. CSS에서는 Hex Code앞에 #를 붙여 색상값으로 이용할 수 있습니다.
예) #3474FF
[요구사항] Day 3
- 버튼 클릭 시, 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code 텍스트 수정하기
🚨 애니메이션 효과는 필요하지 않습니다.
[요구사항] Day 1
- 페이지 로딩 시, 첫 번째 이미지 화면에 보이기
- 좌측, 우측 화살표 두개 보이기
- 화면 아래 쪽에 Dot 다섯개 보이기
[요구사항] Day 2
- 좌측 화살표 클릭시 이전 이미지 보여주기
- 우측 화살표 클릭시 다음 이미지 보여주기
[요구사항] Day 3
- 5번째 이미지에서 우측 화살표를 누를 경우, 1번째 이미지 보여주기
- 1번째 이미지에서 좌측 화살표를 누를 경우, 5번째 이미지 보여주기
- 이미지 하단의 Dot를 누를 경우, 해당 순번의 이미지 보여주기
이미지 출처 : https://unsplash.com/
참고 사이트: https://namu.wiki/w/숫자야구
🚨 특이 케이스에 대한 대응은 하지 않아도 괜찮습니다. 예) 중복 숫자 등
- 게임 시작 버튼 만들기
- 게임 시작 버튼을 클릭 했을때, 랜덤한 세 자리 숫자 만들기 (사용자에게 보여주진 않습니다.)
- 숫자 입력칸 만들기
- 사용자가 엔터키를 클릭 했을때, 입력값이 세자리 숫자가 아닌 경우 경고창 띄워주기
- 사용자가 엔터키를 클릭 했을때, 2단계에서 생성한 숫자와 사용자의 입력값 비교하기
- 각 자리 별로 비교하고, 같은 자리에 같은 숫자가 몇개 있는지 판별합니다. (스트라이크 갯수)
- 각 자리 별로 비교하고, 다른 자리에 같은 숫자가 몇개 있는지 판별합니다. (볼 갯수)
- 화면에 스트라이크와 볼의 갯수를 표기합니다.
- 사용자가 10회까지 시도할 수 있도록 제한합니다.
- 게임 재시작 버튼을 만들고, 재시작 할 수 있도록 합니다.
이미지 출처 : https://giphy.com/
참고 사이트: https://vanilla-coding-calendar.netlify.app/ 위 사이트를 참고하여 최대한 똑같은 기능을 구현해보세요.
🚨 특이 케이스에 대한 대응은 하지 않아도 괜찮습니다. 예) 윤년, 기원전 등
🚨 달력은 현재 날짜를 기준으로 첫 페이지가 나타나야 합니다.
- 오늘의 현재 요일 표기
- 오늘의 현재 날짜 표기
- 오늘의 현재 월 표기
- 오늘의 현재 연도 표기
- 일,월,화,수,목,금,토 요일 라벨링 표기
- 현재 월의 1일이 무슨 요일인지 판별하고, 해당 요일 라벨링에 1일 표기하기
- 현재 월의 마지막 날짜까지 달력에 표기하기
- 우측 화살표를 클릭 했을때, 다음 달의 요일 및 날짜 표기
- 좌측 화살표를 클릭 했을때, 이전 달의 요일 및 날짜 표기
- 특정 날짜를 클릭 했을때, 상단의 요일 및 날짜 반영하기
