HTML, CSS, JS | Javascript로 댓글 작성 기능 구현 과정 기록

코딩하는붕어·2021년 6월 18일
0

🔨구현 과정🔨




👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻


console.log 테스트중인데 아무것도 안찍힌다

호두 사진 보면서 힘내는중




👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻


예전에 수강했던 니꼬쌤의 Chrome 앱 만들기 강의 중 'to do list 만들기' 부분을 참고했다.
결과는 성공!인 것 같지만...
저렇게 이상한 곳에서 출력이 된다. CSS 문제인건가




👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻



<ul>와 <li> 위치를 저기 '42분 전' 밑으로 옮겼다.
이제 조금만 수정하면 될 듯!




👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻


list CSS 완료!
버튼 CSS 완료!
문제점은 댓글을 쓰고 게시를 누르면 썻던 댓글은 input 창에서 지워져야되는데 그대로 남아있음.
그리고 앞에 zzz_yk가 썼다는걸 뜨게 하고 싶은데 아직은 방법을 못찾고있다.

<수정해야 할 것>

  • Enter 키로 댓글 입력하기
  • 입력 완료한 댓글은 input창에서 사라지게하기
  • 댓글 앞에 위스타 id도 같이 뜨게 하기




👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻


입력 완료한 댓글은 input 창에서 사라지게하기 성공!
함수 안에 input.value=""; 를 넣어주면 되는것이었다.. 저는 바보 입니다




👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻


멘토님의 리뷰를 듣고 난 후 느낀점 = 신기술을 접할때 이런 기분이구나. 라는걸 체험함
어떻게 저렇게 코드를 깔끔하게 쓰셨지???
my 코드 like 스파게티 ㅎ
그래도 해결책에 접근할 수 있는 방법을 제시해주셔서 느리지만 문제점을 하나씩 해결중!!
댓글을 작성하면 댓글 내용 앞에 id가 뜨게 만들고싶었는데 이 문제점을 거의 해결했다.
innerHTML에 그냥 하드코딩해도 되는거였다 ㅎ-ㅎ
id의 value 값을 따로 주신 분들도 계셔서 문제의 접근 방법이 참 다양하다는걸 깨닫는중
(아직 id와 댓글 내용 사이에 간격 띄우기 CSS는 적용하지않음!)




👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻



드디어 내가 원하던 결과물이 완성되었음.
댓글 내용을 <span>으로 감싸고 CSS에 margin-left를 줬다.
두둥탁
할렐루야 아멘
이제 리팩토링 후 추가기능구현에 도전해볼 예정이다
일단 토요일에 양갈비 먹고 힘좀 낸 후에

profile
Lofi hiphop, Hifi develope

0개의 댓글