TIL - 7일차 220125 (HTML, CSS, JS)

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

어제 계산기를 구현해봤을때 생각보다 어려워서 오늘도 어려울 줄 알았는데 다음날 다시 보니 술술 풀리는 느낌이여서 신기했어요. 저번 섹션때에는 나이트메어 구현하다가 멘붕이 왔는데 이번에는 잘 해결해서 뿌듯합니다!

성장한 느낌이 들어요 ㅎㅎ

 

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

class, textContent, hover, focus, active

 

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

기존에 배운 내용을 토대로 계산기를 구현했습니다. HTML Element에 Javascript를 이용해 class를 추가하는 방법을 학습했습니다. hover, focus, active를 통해 interactive 한 버튼을 만드는 것을 학습했습니다.

 

 

오전 8:30 - 8:45 plan / 나의 하루 목표

오늘 하루 목표는 계산기 Nightmare까지 다 해보기 입니다!

그리고 헷갈렸던 부분? 어려웠던 부분 정리하기 입니다!

 

오후 9:00 - 오후 5:00 pair / 계산기

어제는 계산기 advanced 구현은 다되었는데 모카테스트 하나를 통과 못해 아고라 스테이츠에 첫 질문을 해보았습니다.

그리고 오늘 아침에 다시 천천히 생각하면서 해보았더니 어제 미해결한 부분도 해결하고 나이트메어 한부분빼고 전부 구현했습니다.

 

오늘 나이트메어에서 미해결한 내용!

- 자바스크립트를 활용하여, HTML Element에 class를 추가하는 법을 학습합니다. 연산자 버튼을 눌렀을 때, script.js의 내 용을 수정하여 isPressed 클레스를 추가하여 연산자 버튼의 색을 변경합니다.

if (action === 'operator') {
          target.classList.add('isPressed'); // 클래스를 추가하는 메소드
          if (previousKey === 'number' && firstNum !== undefined && operatorForAdvanced !== undefined) {
              display.textContent = calculate(Number(firstNum), operatorForAdvanced, Number(display.textContent))
          }
          operatorForAdvanced = buttonContent;
          firstNum = display.textContent;
          previousKey = 'operator';
      }

 

오후 5:00 - 6:00 zoom / Sprint Review

줌을 통해서 오늘 제가 나이트메어에서 해결하지 못했던 부분을 잘 해결했습니다!

 

오후 6:00 - 6:30 review / 일일 회고

어제 계산기를 구현해봤을때 생각보다 어려워서 오늘도 어려울 줄 알았는데 다음날 다시 보니 술술 풀리는 느낌이여서 신기했어요. 저번 섹션때에는 나이트메어 구현하다가 멘붕이 왔는데 이번에는 잘 해결해서 뿌듯합니다!

성장한 느낌이 들어요 ㅎㅎ