실습문제 응용해서 만들기

실습과제로 주어진 간단한 조건을 가지고
업그레이드를 시킨다면 어떻게 시킬 수 있을까 생각해보고
해보고 싶은 방식으로 하나씩 만들었다


1. 연도별 띠 출력

- 백틱 활용하여 변수 입력



2. 숫자비교 (prompt로 1-5사이의 숫자를 받고, 그 숫자만큼 input 생성)

- 다양한 css 효과 사용
- 앞 디자인과 비슷한 느낌이 들어서 차별화를 위해 실행하면 배경이 어두워지고 폭죽이 터지는 효과 추가



처음에는 디자인 안 잡고 하다가 세 번째부터는 간단하게 밑그림 그려놓고 구현했다
확실히 1차 디자인이 있어 그걸 보고 그려나가니 좀 더 수월하게 만들어낼 수 있었다



3. 키에 따른 표준체중과 내 체중값 비교하기(유효성검사, 버튼 disabled)

- 디지털 시계 만들었던 내용 활용
- 다양한 경우의 수를 생각하며 유효성 검사 구현 (오랜만..)


4. 별찍기 (input에 입력된 숫자만큼 별 출력. 숫자 한 칸의 값을 한 줄씩 출력)

 

- css를 배경으로 한 번 더 깔았는데 무슨 이유에서인지 새로고침하면 깨져서 나옴(이유는 아직 못 찾아봄…)
- input값 가져오는거 계속 반복인데도 왜인지 아직도 헷갈리는 나..




5. 지역별 온도와 그 평균값을 차트로 확인하기 (드디어 써본 chartjs)

- 위의 UI가 너무 불친절하다는 피드백을 받고 타이틀을 추가하고 inputbox에 온도표시 추가

6. 1-45중 5개 번호출력하는 추점기 만들기(5개 번호가 중복되지 않게, 10단위로 공 색깔 다르게, 5개 번호의 합계 평균값 출력, cas로 추첨통 간단하게 만들기 )

 

- for문을 활용해서 id값을 부여. 그 과정에서 div:nth-child(n)를 활용해서 되게 재미있었음 .
- 생각보다 일찍 만들어서 뿌듯했다






7. 라면 재료 출력(간단하게 미리캔버스에서 배경디자인 따오고 배열안에 있는 값 li로 하나씩 출력)

- 별거 없는데 맨날 헤매는 position 잡기