JERRY의 공부방🔥 JERRY의 공부방🔥

안녕하세요, Jerry입니다! 조용한 알람(silence alarm) 웹 앱 만들기가 끝났습니다. 그런데 왜 웹 앱 만들기라는 제목으로 번외를 적냐? 5편 포스팅을 발행한 후 소스를 천천히 보니 마음에 들지 않는 부분이 있어서 코드를 수정을 했고, 수정한 부분을 공유하고 싶어 이렇게 번외 편으로 포스팅을 작성했습니다. 어느 부분인지 코드를 먼저 보고 코드 블록 이후에 설명을 적겠습니다. alarm.js const alarmContainer = document.querySelector('.js-alarm'); const currentTime = alarmContainer.querySelector('h1'); const setTime = alarmContainer.querySelector('input'); ..

안녕하세요, Jerry입니다. 우리가 어느새 5편까지 왔어요. 이제 마무리를 해야 하니 전편 소개를 정성 들여 이쁘게 해 볼까 합니다 :D [#1] querySelector( )와 백틱( ` )을 소개합니다. ▶ https://bejerry.tistory.com/15 [#2] setInterval( )과 ES6 맛보기! ▶ https://bejerry.tistory.com/16 [#3] typeof( )와 블록스코프! ▶ https://bejerry.tistory.com/17 [#4] classList 객체와 css 애니메이션 :) ▶ https://bejerry.tistory.com/18 자, 전 시간에 추가했던 CSS, 기억나시나요? 추가한 부분을 기존 alarm.css에서 걷어내고, 새로운 popu..

안녕하세요, Jerry의 공부방에서 웹 앱을 만들어보는 시간을 갖고 있는 Jerry입니다. 블로그에 포스트 리스트를 보니 썸네일(대표 이미지)들이 전부 마음에 안 들더라고요. 따로 썸네일용 이미지를 하나 제작하던가 해야겠어요. 벌써 4편입니다. 원래 계획은 3편 안에 끝내는 거였는데 호락호락하지 않네요. 포스팅하는 순간순간마다 추가적으로 무엇이든 설명하려고 해서 그런 것 같습니다 :) 좋은 자세라고 스스로를 위로하고 있습니다. 이전 포스팅들의 링크를 안내하고 시작할게요. 조용한 알람 웹 앱 만들기 - 1, 조용한 알람 웹 앱 만들기 - 2, 조용한 알람 웹 앱 만들기 - 3 입니다. 3편의 소스를 쭈욱 읽어보시고 이해하시는 게 중요한 것 같습니다. 이제 CSS에 코드를 추가하여 색깔이 깜빡이게 해 보아요..

안녕하세요, Jerry의 공부방의 Jerry입니다. 3편을 쓰기에 앞서 1편과 2편의 링크를 먼저 걸고 시작하겠습니다. 1편 : 조용한 알람(display alarm) 웹 앱 만들기 - 1(https://bejerry.tistory.com/15) 2편 : 조용한 알람(display alarm) 웹 앱 만들기 - 2(https://bejerry.tistory.com/16) 자, 정리를 간략히 하고 3편 이어 나가겠습니다 :) 1편에선 시간을 구하는 것까지 했습니다. 그리고 2편에선 우리가 멈춘 시간에게 생기를 불어넣어 시계가 움직이게 했죠! 정말 간단한 거지만 결과물을 보면 괜스레 기분 좋습니다 XD 그렇다면, 이번 시간엔 태그에 시간을 입력해서 현재시간과 세팅 시간(input에 사용자가 입력한 시간)이 ..

웁웁(!) 돌아왔습니다. 이전에 했던 CSS, HTML 소스는 여기서(https://bejerry.tistory.com/15) 확인 하실 수 있습니다. 이전 소스가 있어야 원할히 따라하실 수 있을 것 같습니다. (누가? 대체 누가 이걸 따라해?) 지난 시간 네, 이전 글에는 시간을 브라우저에 나타내긴 했습니다만 실시간으로 초가 올라가고, 분이 올라가지 않고 멈춰있었습니다. 우리가 필요한건 디지털 시계처럼 시간이 가는걸 브라우저에 나타내야 합니다. 이 때 우리에게 필요한 것은 setInterval( ) 메서드입니다. setInterval( ) mdn(https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)에..

안녕하세요, Jerry입니다. 포스팅에 앞서 조용한 상황을 가정하고 시작해보려고 합니다. 회사나 조용한 곳에서 데스크탑 혹은 노트북으로 일을 보고 있습니다. 알람을 맞춰야 하는데 소리모드로 하자니 주위가 조용합니다. 진동모드로 하자니 제가 진동을 체크 못 할것 같습니다. 그렇다면 시간을 어떻게 맞춰야 할까요? 그래서 생각한 정말 정말 매우 매우 간단한 웹 앱을 하나 만들어보려고 합니다. 이름을 굳이 지어야 한다면, Silence Alarm으로 지어놓고 시작하겠습니다. (혹시 괜찮은 이름 있으면 댓글 남겨주세요 XD) 간단한 웹 앱에 무엇이 필요한지 체크해보겠습니다. 1. 현재 시간 2. (알람이 울릴)설정 시간 3. 새 창 4. 화면 눈에 띄게 깜빡거리기 이 정도면 될 것 같습니다. 설정한 시간이 현재 ..