Javascript - EventListener를 활용하여 '좋아요' 아이콘 변경, '좋아요'갯수 관련 텍스트 변경하기

EventListner를 활용한 HTML 수정을 구현해보았습니다.

클릭에 따른 '좋아요' 아이콘, 갯수 관련 텍스트입니다.

 

- 작성코드 - 

 

See the Pen Untitled by duglikespiano (@duglikespiano) on CodePen.

 

 

1. '좋아요' 아이콘 변경

 

'좋아요'가 99개일 때를 기본(클릭되지 않은)상태로 설정하였습니다.

아이콘을 클릭하면 '좋아요'갯수가 100개가 되고 아이콘이 변경됩니다.

 

2. '좋아요' 텍스트 관련 내용

 

'좋아요'를 클릭하면,

관련 변수 값이 99에서 100으로 변경됩니다. 

 

다시 클릭하면,

관련 변수 값이 100에서 99로 변경됩니다.

 

문구를  작성 할 때 템플릿 리터럴을 사용해보았습니다.