- index.js만 조작해서 다음 과제를 해보세요.
-
디지털 타이머
- 맨 아래
타이머 설정하기
가 있는 부분에 타이머를 조작하는 버튼을 만들어주세요. 디지털 시계
부분에 브라우저를 새로고침하면 0이되는 시간초 나타내는 숫자 판을 만들어주세요.타이머 설정하기
부분에는+
버튼과-
버튼이 있습니다. 각 버튼을 누르면 위에서 만든디지털 시계
부분에 1초씩 추가 / 삭제 됩니다. 다만 0초 이상이어야 하고 60초 미만이어야 합니다.- 시작 버튼이 있습니다. 시작을 누르면 시작 버튼과
+
-
버튼은disabled
상태가 되고, 시간초를 나타내는 부분이 1초에 1씩 감소합니다. 0이 되면 정지합니다. 정지되면disabled
가 풀립니다.
- 맨 아래
-
아날로그 타이머 (선택)
- 아날로그 타이머를 만들어보세요. 틀은 동그랗고 초침만 있으면 됩니다.
-
이번 과제는 React와 같은 컴포넌트 프론트앤드 라이브러리, 프레임워크의 가장 기본적인 아이디어라고 생각하시면 됩니다. React는
div#app
만 있는 html에 컴포넌트를 JSX로 그려서 프론트를 나타냅니다. 물론 이렇게 노가다는 아니구요. -
JS만 조작해주세요. HTML은 손 대지 말아주세요. 다만 html에 있는 보기 싫은 아날로그, 디지털, 타이머 부분의 글은 JS로 지워주세요.
-
마찬가지로 모여서 의견을 모아가며 코딩해보시고, 풀리퀘스트 해주세요. 다만 이번엔 모여서 같이 하니까 최종적으로 비슷한 결과물이 오지 않을까 싶습니다. 본인 결과물이 다른 팀원들과 비슷하다면 따로 보내지마세요! 가장 이상적인 건 금요일 토요일팀이 팀끼리 논의해보고 가장 Best case를 뽑아내서 팀당 하나 씩 오는 겁니다.
-
난이도가 2시간 만에 하기엔 조금 어려울 수도 있습니다. 구글링도 많이 필요하고요. 미리 생각해오시는 걸 추천합니다.