instagram 메인페이지 구현
- 메인페이지 기능 구현
1.댓글 달기.
2.하트 눌렀을 시 빨간색으로 바뀌면서 좋아요 +1
3.엔터 눌렀을 시 댓글 버튼 활성화
// 댓글 추가
const comment_btn = document.querySelector("#comment_btn");
const feeds_container = document.querySelector("#feeds_container");
comment_btn.addEventListener('click', function(e) {
const comment = document.querySelector("#comment_textarea");
const new_comment_html = `
<div class='feeds_comment mt-10'>
<div class='feeds_comment_id'>
<a href='#' class='mr-10'>asdfasdf</a>
<span>${comment.value}</span>
</div>
</div>
`;
feeds_container.innerHTML += new_comment_html;
//comment.value = '';
});
// 댓글 게시 활성화
const commentTextArea = document.querySelector('#comment_textarea');
commentTextArea.addEventListener('keyup', function(e) {
commentValue = this.value;
textAreaColorChange();
});
function textAreaColorChange() {
return (commentValue.length >= 1 ) ? comment_btn.classList.add('font_color_blue') : comment_btn.classList.remove('font_color_blue');
}
// 엔터 활성화
commentTextArea.addEventListener('keypress', function(e) {
if ( e.keyCode === 13) {
e.preventDefault();
document.querySelector('#comment_btn').click();
document.querySelector('#comment_textarea').value = '';
}
})
// 하트 색깔 바꾸기 및 좋아요 업 다운
const heartcolor = document.querySelector("#like_color");
heartcolor.addEventListener('click', function(e) {
heartcolor.classList.toggle('fa-heart-color');
heartcolor.classList.toggle('far');
heartcolor.classList.toggle('fas');
const isContainsFas = heartcolor.classList.contains('fas');
let like = document.querySelector("#feeds_like");
let likeNumber = Number(like.innerText);
// if( isContainsFas === true ) {
// like.innerText = likeNumber + 1;
// } else {
// like.innerText = likeNumber - 1;
// }
like.innerText = isContainsFas ? likeNumber + 1 : likeNumber - 1;
});
코드 리뷰 업데이트 예정
Author And Source
이 문제에 관하여(instagram 메인페이지 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tjdgns503/instagram-메인페이지-구현저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)