입력한 글자를 일정한 규칙에 따라 움직이는 것처럼 보이도록 구현하는 과제이다. (by 시니하님)
-
'1-1. 정답' 폴더: 정답 코드와 코드를 해석하며 적은 저의 주석이 담긴 폴더입니다.
-
'1-2. hard training` 폴더: 정답 코드를 보지 않고 혼자 만들어 본 코드가 담긴 폴더입니다.
일주일 동안 풀다가 결국 혼자 구현하지못하여 정답 코드에 대한 설명을 듣고 구현해보았다.
- 세 개의 박스 중 하나를 클릭하면 세 박스가 100, 200, 300점 중 하나의 값을 랜덤으로 가진다.
- 박스를 누를 때마다 눌린 박스의 값이 화면에 표시된다.
- 박스가 클릭될수록 매번 박스의 점수가 누적되어 화면에 보인다.
- 박스가 클릭될 때마다 랜덤으로 색이 바뀐다.
- 글자 색은 배경 색에 따라 달라진다. (배경이 어두우면 밝게, 배경이 밝으면 어둡게 설정됨)
## html로 틀 짜기
- 세 개의 버튼 만들기
- 버튼이 눌릴 때 해당 버튼의 점수를 보여줄 공간 만들기
- 버튼을 누를 때마다 생성되는 점수들의 합을 보여줄 공간 만들기
## 숫자 섞는 기능 만들기
- shuffleScores 함수 만들기
- 100, 200, 300을 섞어서 분배하기
## 색 섞는 기능 만들기
- shuffleColors 함수 만들기
- red, green, blue로 각각 랜덤값을 만들어서 rgb로 색 만들기
## 글자 색 다크모드 기능 만들기
- shuffleColors 함수 안에 만들기
- rgb의 평균값이 128보다 크면 글자는 검정색으로 설정하기
- rgb의 평균값이 128보다 작으면 글자는 흰색으로 설정하기
## 클릭한 버튼의 점수 볼 수 있게 만들기
- textContent로 id가 showScore인 element 변경하기
흔들리는 버튼을 클론 코딩하는 과제이다. 버튼의 디자인이 모두 주어진 상태에서
(1) 스크롤이 버튼이 있는 곳까지 내려가면 (2) 버튼을 흔든다 이 두 가지 조건만 만족하게 하면 된다.
[CSS, JavaScript] 스크롤을 내리면 흔들리는 버튼 만들기
네 가지의 인자(initial, condition, task, fin)를 받아서 의도한대로 결과를 출력하는 함수 loop의 내용을 완성한다.
자바스크립트로 이진 탐색을 구현한다. binarySearch 함수를 구현하는데, binarySearch에 인수로 배열과 찾고자 하는 값을 넣으면 찾고자 하는 값이 위치한 인덱스를 반환한다.
