[Javascript] 바닐라 JS로 크롬앱 만들기 - 4

devseunggwan·2020년 5월 28일
0

🚶🏻 시작하며

저번 장까지 니꼴라스의 클론 코딩을 보면서 자바스크립트의 기본을 배웠다. 그리고 산출물은 나왔는데 CSS가 제대로 적용되어있지 않아서 수정 작업을 진행한 내용을 이번 글로 적으려고 한다. 그리고 마지막엔 클론 코딩을 마친 후기를 적고 시리즈를 완결할 것이다.

⌨️ 작업 내용

HTML, CSS도 기초만 아는 상황이라 간단하지만 페이지 구성에 신경써서 배열을 진행하였다. CSS로 주로 작업하고, 동적으로 생성하는 내용은 자바스크립트를 사용해서 작업하였다. 그리고 페이지 전반적으로 이모지를 삽입했다. 글만 있을 페이지에 생동감을 주기 위해서다.

⌚️ 시계

시계는 왼쪽 위에 위치시켰다. 마진을 줘서 왼쪽과 위쪽 공간에 여유를 주었다.

네이버 웨일은 가운데 시계가 있고, 윈도우는 오른쪽 아래에 있고, 맥은 오른쪽 위에 있기 때문에 곂치지 않는 왼쪽 위를 선택했다.

.js-clock {
  position: fixed;
  font-size: 30px;
  margin-left: 3%;
  margin-top: 3%;
}

🔖 TO-DO 리스트

TO-DO 리스트가 기능의 핵심이기 때문에 가운데에 위치시켰다.

할 일을 입력하면 아래로 추가되도록 설정하였고 👏완료 버튼을 누르면 사라지도록 설정하였다. 기존에 있던 완료 버튼의 모습이 너무 이상해서 고심 끝에 👏완료 와 초록색 버튼을 넣어서 만들자고 결정했다.

자바스크립트에서 동적으로 버튼을 생성하기 때문에 생성할 때 버튼의 속성을 조정하였다.

function paintToDo(text) {
  const li = document.createElement('li');
  const delBtn = document.createElement('button');
  const span = document.createElement('span');
  const newId = toDos.length + 1;

  delBtn.innerText = '👏완료';
  span.innerText = text;
  delBtn.addEventListener('click', deleteToDo);

  //style Button
  delBtn.style.fontSize = '20px';
  delBtn.style.backgroundColor = '#019875';
  delBtn.style.marginRight = '20px';
  delBtn.style.marginBottom = '10px';
  delBtn.style.color = 'white';
  delBtn.style.border = 'none';

  //style Text
  li.appendChild(delBtn);
  li.appendChild(span);
  li.id = newId;

  li.style.alignContent = 'center';

  toDoList.appendChild(li);
  const toDoObj = {
    text: text,
    id: toDos.length + 1,
  };
  toDos.push(toDoObj);
  saveToDos();
}

🌡 날씨

날씨는 왼쪽 아래에 위치시켰다. 글자를 아랫쪽으로 내린 다음에 마진을 줘서 왼쪽과 아랫쪽 공간에 여유가 생기도록 만들어주었다.

.js-weather {
  position: fixed;
  font-size: 20px;
  bottom: 0;
  text-align: right;
  margin-bottom: 3%;
  margin-left: 3%;
}

🕶 클론코딩 후기

니꼴라스 선생님의 클론코딩을 정주행했다. 자바스크립트의 기본을 처음 배우는 입장에서 상세하게 잘 가르쳐주셨고 이 강의를 들음으로 유료 강의의 신뢰성이 올라갔다. 다른 강의도 차후에 시간나면 들을 예정이고 유료 강의도 주머니 사정만 되면 하나씩 모을 예정이다.

profile
변화를 두려워하지 않는 개발자입니다.

0개의 댓글