ToDoList Web(for mobile) 바로가기
모바일 크롬앱이나 컴퓨터 웹의 모바일 사이즈에서 보는 것을 추천합니다.
프로젝트 코드 보기
더 자세한 내용을 보고 싶으시다면 공부한 내용을 정리한 깃허브를 방문해주세요.
username+'s to do list
문구가 나타나게 구현. localstorage
를 이용하여 새로고침을 해도 유저 정보가 날아가지 않도록 구현. preventDefault()
함수를 통해 막음. hidden
을 더해줘서 로그인 form을 숨김.00:00:00
의 구조로 매 초마다 시간이 업데이트 되게끔 시계를 구현Date object
를 이용하여 오늘 날짜와 시간을 가져옴. Date의 함수를 이용하여 시간, 분, 초를 가져올 수 있음.padStrat()
를 이용하여 string이 적어도 두자리를 가지게 만듦.Math.random()
함수를 이용하여 랜덤 넘버를 인덱스로 사용.event.target.parentElement
을 이용하여 클릭된 버튼으로 어떤 to-dos를 삭제 해야하는 지 알아냄. 컴퓨터에서 사용하는 To-do list 가 아닌 모바일에서 사용하고자 하는 To-do list를 만들고 싶어 고려해야야 할 사항들이 몇가지 있었다. 컴퓨터에서 모바일 용 디자인을 어떻게 할 것인가, 각각의 모바일 디바이스에 맞게 어떻게 크기를 맞출 것인가. 와 같은 것들이었는데 이는 크롬에서 제공하는 기능을 이용하여 해결할 수 있었다.
마우스 옆의 아이콘을 누르면 모바일 사이즈에 맞게 웹을 보여준다. 심지어 상단에서 웹을 돌아가게 할 기기의 종류를 선택할 수도 있다. (핸드폰 뿐만 아니라 아이패드도 선택 가능) 이를 잘 활용한다면 앞으로도 모바일용 웹을 구현할 때 편리할 것 같다.