171106-TIL

Reading time ~1 minute

오늘 한일

- 계산기 및 행맨 제작 완료

  • 계산기 화면

    계산기

  • 행맨 화면

    행맨

  • 호눅스(feat.크롱)의 행맨 코드 일부, 버튼 생성 및 클릭 이벤트 처리

    var keys = document.getElementById("btn-keys");
    
    for (var i = 'a'.charCodeAt(0); i <= 'z'.charCodeAt(0); i++ ) {
      var str = String.fromCharCode(i);
      var button = document.createElement('button');
      button.innerHTML = str;
      keys.appendChild(button);
    }
    
    keys.onclick = function(event) {
      //outside button
      if (!!event.target.id) {
        console.log("outside");
        return;
      }
      var x = event.target.innerHTML;
      console.log(x);
      checkWords(x, game);
    }
    

오늘 느낀점

  • 계산기를 구현하면서 HTML과 CSS 작업을 오래했는데 너무 힘들다.(HTML과 CSS로 저 페이지 만드는데 4시간, Javascript로 계산기 구현하는데 30분 걸린거 같다)어우 퍼블리셔 및 프론트엔드 분들 존경스럽다.

  • 그래도 계산기의 HTML, CSS 작업을 하면서 HTML의 태그와 속성들에 대해서 좀더 알게 되었다. 그 소리는 Javascript로 HTML의 어떤걸 조작 해야할지 알게 된거 같아 다행히 고생한 보람이 있는것 같다.

  • 레벨1의 몇분들은 행맨을 구현하는데 캔버스로 이미지까지 그리더라…보니까 프로그래밍을 경험한 기간이 달라 아무래도 로직을 짜는건 나보다 느리지만 Javascript를 사용하는 법 자체는 훨씬 잘한다. Javascript는 어느정도 간단히 학습 한다음 AJAX 처리하는 부분을 공부하고 Javascript만 활용한 작은 프로젝트를 해볼까 싶었는데 하루정도 더 걸릴지도 모르겠다. 특히나 내일 저녁에 약속이 생겨버려서 목표한 수요일까지 학습 시간이 줄어들어 아쉽다.(미루고 싶긴 했지만 나머지가 직장인들이 흠..)

  • 계산기를 만들면서는 HTML, CSS에 대해 공부하고 행맨을 하면서는 Javascript로 HTML을 조작하는 법에서 어느정도씩은 학습한 것 같다. 레벨1 과정 내용들을 따라서 해보길 잘한것 같다. 내일은 배열 및 정렬 알고리즘 구현에 대해서 학습 한다는 것 같아서 아마 참석하지 않을 것 같다.

  • 위에 첨부한 코드가 딱 배우고 싶었던 부분들의 기본적인 내용이였다. 차후(가능하다면 내일 오후) 볼링 페이지를 제작 할때 사용하자.


내일 할일

  • Javascript 공부