Instagramクローンコメント機能
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>westagram</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../style/style.css" type="text/css">
</head>
<body>
<nav>
<div class="nav-left">
<img class="instaIcon" src="../img/instagram.png">
<span><a href="#">westagram</a></span>
</div>
<div class="nav-center">
<input type="text" placeholder="검색">
</div>
<div class="nav-right">
<img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png">
<img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png">
<img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png">
</div>
</nav>
<main>
<div id="feeds">
<div class="article-top">
<img class="gotns" src="../img/gotns.png">
<span>yo.heyho</span>
</div>
<article>
<img class="good" src="../img/goodmorning.jpeg" />
</article>
<section>
<div class="icon-bar">
<img src="../img/heart.png">
<img src="../img/bubble.png">
<img src="../img/export.png">
<img src="../img/ribbon.png">
</div>
<div>
<span class="strong like">aineworld</span>님<span class="strong">외 5000명</span>이 좋아합니다
</div>
<div>
<span class="strong post">Iam_Hani_good_dog</span> 주인놈이랑 셀카 한 방... <a href="#">더 보기</a>
</div>
<div class="commentBox">
<ul class="commentList">
</ul>
<form id="comment">
<input type="text" placeholder="댓글 달기..." />
<button class="commentBtn">게시</button>
</form>
</div>
</section>
</div>
<div id="main-right">
<div><img class="wecodeImage" src="../img/wecode.jpeg">
<p><span class="strong">wecode_bootcamp<br></span><span class="fontGrey">WeCode | 위코드</span></p>
</div>
<div class="story">
<div class="instory1">
<div class="fontGrey">스토리</div>
<div>모두 보기</div>
</div>
<div class="instory2">
<div>
<img class="gotns" src="../img/gotns.png">
<div class="flexBox">
<div>hyukysiv</div>
<div class="fontGrey">20시간 전</div>
</div>
</div>
<div>
<img class="gotns" src="../img/gotns.png">
<div class="flexBox">
<div>hyukysiv</div>
<div class="fontGrey">20시간 전</div>
</div>
</div>
<div>
<img class="gotns" src="../img/gotns.png">
<div class="flexBox">
<div>hyukysiv</div>
<div class="fontGrey">20시간 전</div>
</div>
</div>
</div>
</div>
<div class="suggest">
<div class="inSuggest1">
<div class="fontGrey">회원님을 위한 추천</div>
<div>모두 보기</div>
</div>
<div class="inSuggest2">
<div>
<img class="gotns" src="../img/gotns.png">
<div class="flexBox">
<div>hyukysiv</div>
<div class="fontGrey">20시간 전</div>
</div>
</div>
<div>
<img class="gotns" src="../img/gotns.png">
<div class="flexBox">
<div>hyukysiv</div>
<div class="fontGrey">20시간 전</div>
</div>
</div>
<div>
<img class="gotns" src="../img/gotns.png">
<div class="flexBox">
<div>hyukysiv</div>
<div class="fontGrey">20시간 전</div>
</div>
</div>
</div>
</div>
<footer class="fontGrey">Instagram 정보. 지원, 홍보 센터, API, 채용 정보, 개인정보처리방침, 약관, 디렉터리, 프로필, 해시태그, 언어</footer>
</div>
</div>
</main>
<script src="../js/main.js"></script>
</body>
</html>JavaScript
const comment = document.querySelector("#comment"); //form
const input = document.querySelector("#comment input");
const commentList = document.querySelector('.commentList');
const btn = document.querySelector("button");
const listItem = document.querySelector("li");
function addComment(event) {
event.preventDefault(); // click의 기본동작인 리로드를 막아줘야 한다.
const li = document.createElement("li");
const commentUserId = document.createElement("span");
const span = document.createElement("span");
// 세 요소를 만든다.
commentUserId.innerText = "Heyho92"; //첫번째 span에 아이디를 넣는다.
commentUserId.classList.add('commentUser'); //id에 클래스 commentUser를 넣어주고, css로 스타일을 줬다.
span.innerText = input.value; //input에 입력한 값을 두번째 스판안에 넣었다.
commentList.appendChild(li);
li.appendChild(commentUserId); // li에 span 2개를 넣는다.
li.appendChild(span);
input.value = ""; //인풋창을 비워준다.
}
function sendBtn() {
const gesi = input.value;
if (gesi) {
btn.classList.remove('commentBtn');
gesi = "";
} else {
btn.classList.add('commentBtn');
gesi = "";
} //sendBtn 함수가 실행되면 게시버튼의 클래스에 commentBtn이 제거되어 css가 다르게 적용된다.
//(input에 값이 들어오면 게시버튼이 활성화된다.)
}
input.addEventListener("keyup", sendBtn); //input에 keyup 이벤트가 발생하면
//sendBtn 함수가 실행된다.
btn.addEventListener("click", addComment);//btn에 click 이벤트가 발생하면
btn.addEventListener("click", sendBtn); //addComment, sendBtn 함수가 실행된다.
//addComment 함수에서 input.value="" 로 초기화 해 주고 sendBtn 함수가 실행되어
//클릭 이벤트 발생후에 다시 옅은 파란색으로 변한다.
<li>を生成し、innerTextとしてコメントリストに追加します.また,値入力時にパブリッシュボタンをアクティブにする機能も実現した.
娯楽をするときもクリックするときも事件を起こさせます.
関数を実行すると、コメントとしての「入力」の残りのvalue値が消えます.
アクティビティリファレンス:https://developer.mozilla.org/ko/docs/Web/Events
Reference
この問題について(Instagramクローンコメント機能), 我々は、より多くの情報をここで見つけました https://velog.io/@heyho9292/instagram-clone-댓글달기-기능テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol