to do list 만들기

영상에 나와 있는 예시를 토대로 to do list를 만들기를 시작했습니다.

 

html, css, JavaScript로만 만들어졌습니다.

 

1. HTML 구획 나누기

html을 작성하는 것 차제는 생각보다 간단합니다.

크게 그림이 있는 <header> 부분 / 실질적으로 실행될 <content> 부분 / <content> 안에 기록될 <list> 부분 + 작성하는 <input> 부분으로 나눌 수 있었습니다.

 

2. CSS

css는 단순해 보이지만 막상 하려고 하면 복잡해지는 것 같습니다.

저는 flex가 좀 더 익숙한데 여기에서는 position: relative와 absolute를 주로 사용하였습니다. 

flex에 비해서 코드도 더 짧아지고 괜찮은 듯싶지만, 정렬이 정확하지 않아서 flex를 사용하는 것이 그 부분에 있어서는 더 좋은 것 같습니다.

 

뭔가 CSS 어렵다 ㅜㅜ -> 이 부분에서 html과 css를 좀 더 공부하기 위해 잠시 to do list project는 중단하였습니다.

 

3. JavaScript.

아직 제대로 공부하지 않아서 설명이 잘 이해되지 않았습니다. 

const 같은 경우도 무엇인지는 알겠으나 와 닿지가 않아서 매번 '????' 하고 있게 됩니다. 기본적인 것인데 자꾸 어렵게 느껴지고 막히니까 그 이후의 것도 좀 더 어렵게 느껴지는 것 같습니다.

 

그래도 기능을 정리하자면

• <header>의 리사이클 아이콘 : hover시에 그림자 효과와 함께 약 45 deg가량 돌아갑니다. 그리고 click을 하면 페이지가 새로고침이 된다는 사실을 알게 되었습니다. 
• <header>의 날짜 : 오늘 날짜를 표현합니다. 오늘 날짜를 가져오는 코드가 필요할 것으로 예상됩니다.
• <list>의 빈 동그라미 : click시에 체크가 되고(체크가 되는 것이 아니라 체크된 아이콘으로 바뀌는 원리입니다.) 작성한 글이 취소선이 그어지면서 색이 lightgray색으로 바뀝니다.
• <list>의 휴지통 : hover시에 색상이 바뀝니다. click시에 list의 한 줄이 delete 됩니다.
• <input>의 +아이콘 : 따로 기능적으로 하는 일은 없습니다. 그냥 시각적으로 존재하는 것뿐입니다.
• <input>의 Add to do부분 : placeholder라는 property를 input안에 추가하면 됩니다. 비어있는 경우 즉 일반적 상태에서는 나타나 있고, 글 작성 시에는 사라진다. 
• <input>에서 작성 기능 : list를 작성하고 enter를 누르면('keyup'이라고 한다.) → input값이 비어있지는 않은지 확인합니다. 그 후, 비어있지 않으면 작성한 것(value값)을 가져옵니다. → list를 생성합니다. → input값을 reset 시킵니다. 
• <list> 기능
  • list는 할 일 목록입니다. 배열로써 작성되며, 배열 안의 각각의 요소들은 객체로 존재합니다.
  • 할 일을 작성하여 enter를 누르면 <list> 부분에서 실행되는 기능들이 포함된 새로운 객체가 만들어짐. ex) name, id, done, trash / done&trash는 boolean값 등이 있습니다.