js 타이머 업그레이드 + 할 일 + 시계 + 오디오 붙이기

타이머 디자인에 감동 받으며 따라했다가, 일상 프로그램으로 업데이트해서 실사용하기로 했다.

Nas 에 올려놓고, 가족들이 사용하는 앱으로 만들기로 했다.

쉽게 생각했는데, 와우... 이것만 해도 엄청 복잡했다.

Todo, Clock, 위치와 온도는 전에 Nomad 코더 따라하면서 했던것을 거의 복/붙 했다.

투두 리스트 로컬 스토리지 조작: 다시 스터디 후, 기능 업그레이드.

드래그 앤 드롭으로 구현하기.

오디오 객체

asmr 을 만들다가, 오디오 객체 다루면서... 주화 이비마에 빠져들었다.

1. 오디오 객체 처음 다루면서, 뜬금없이 욕심이 나서, 나스에 아파치가 작동하고 있어서, 이걸 이용해보기로 했다.
2. 네트워크 드라이브에 노래를 넣는다 -> php 에서 디렉토리를 읽은 후, json 형식으로 쏴준다.
3. 오디오 플레이어에서 api 를 받아서, 플레이 리스트를 만들고, 재생한다.

3-4년 전에 잠깐 다뤄봤던 php 라서, 그 때도 잘 몰랐는데, 지금은 당연히 더 모르지. 결국 NAS 의 웹서버에서 json 으로 api 뿌리는 것까진 만들었는데, 주화입마에 빠졌다. ㅠㅠ

토글 버튼 구현

주화입마에 빠진 후, 집중이 너무 안돼서... 프로젝트를 줄이기로 했다. 그래서, 모든 요소들의 기본값을 안보이게 하고, 토글 버튼으로 보이게 하도록 했다. 많이 쓸 것 같아서, 함수로 만들었다. 일단은 성공이지만, 주화입마는 너무 아프다. 

남들은 이미 더 좋은 방법으로 쓰고 있겠지? 아마 그럴꺼다. ㅠ 어쩌다보니, 폰트어썸까지 사용하게 됐다.

그 다음엔?

지금 시점에선 생각나는 기술을 찾아서 구현하는 것보다, 강의 보면서 관련된 예제를 빠르게 학습 후, 다시 프로젝트를 하는 것이 효율적일 듯 싶다.ipt

//토글 함수 (1/5)
function toggleSelector(targetId, FlexBlock,clickedId) {
  const target = document.querySelector(targetId);
  const clickedBtn = document.gettargetentById(clickedId);
  console.log(target);

  if (target.style.display !== "none") {
    // clickedBtn.innerHTML = '<i class="fas fa-toggle-on"></i>';
    clickedBtn.innerHTML = '<i class="fas fa-eye"></i>';
    target.style.display = 'none';
  } else {
    // clickedBtn.innerHTML = '<i class="fas fa-toggle-off"></i>';
    clickedBtn.innerHTML = '<i class="fas fa-eye-slash"></i>';
    target.style.display = FlexBlock;
  }
}

html

<div class="toggleEye">
     Clock <i class="fas fa-eye-slash" id="clockToggle" onclick="toggleSelector('#clockContainer','flex',this.id)"></i>
     </div>

토글로 숨기기