익명의 개발노트

댓글달기 part1 본문

프로그래밍/뭔가 해보기

댓글달기 part1

캡틴.JS 2019. 3. 29. 16:45
반응형

생각보다 바닐라 코딩으로 하려니, 시간이 오래걸렸다.

아직 저 투표기능 구현만 방법을 찾으면 될 것 같군.

 

구현할 기능은 8가지.

 

1.입력받으면 입력값 초기화

2. 입력값 댓글로들어가기

3. 댓글 삭제, 수정기능

4. 좋아요 투표기능

5. 타임스템프기능

6. 무작위 아이디

7. 댓글 삭제기능

8. 댓글 수정기능

 

1. HTML을 만들자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="index.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  
</head>
<body>
    <div id="form-commentInfo">
        <div id="comment-count">댓글 <span id="count">0</span></div>
        <input id="comment-input" placeholder="댓글을 입력해 주세요.">
        <button id="submit">등록</button>
    </div>
    <div id=comments>

    </div>
    <script src="index.js"></script>
</body>
</html>

2.CSS만들기

#form-commentInfo{
    width: 100%;
}

#comment-count{
    margin-bottom: 10px; 
}

#comment-input{
    width: 50%;
    height: 3.3em;
}

#submit{
    background-color: rgb(0, 128,255);
    width: 5.5em;
    height: 3.3em;;
    font-size: 15px;
    font-weight: bold;
    color: aliceblue;
}

#voteUp, #voteDown{
    width: 3.5em;
    height: 1.9em;
    background-color: aqua;    
}

#comments{
    margin-top: 10px;
}

.eachComment{   
    width :50%; 
    margin: 10px;  
    padding: 0.5em; 
    border-bottom: 1px solid #c1bcba;
}

.eachComment .name{
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 0.3em;
    display: flex;
    justify-content: space-between;
}

.eachComment .inputValue{
    font-size: 1.2em;
    font-style: italic;    
}

.eachComment .time{
    font-size: 0.7em;
    color: #c1bcba;
    font-style: oblique;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    
}

.eachComment .voteDiv{
    display: flex;
    justify-content: flex-end;
}

.eachComment .deleteComment{
    background-color: red;
    color: aliceblue;
}

3. JS만들기

//1.입력받으면 입력값 초기화
//2. 입력값 댓글로들어가기
//3. 댓글 삭제, 수정기능
//4. 좋아요 투표기능
//5. 타임스템프기능
//6. 무작위 아이디  
//7. 댓글 삭제기능
//8. 댓글 수정기능

const inputBar = document.querySelector("#comment-input");
const rootDiv = document.querySelector("#comments");
const btn = document.querySelector("#submit");
const mainCommentCount = document.querySelector('#count'); //맨위 댓글 숫자 세는거.

//타임스템프 만들기
function generateTime(){
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth();
    const wDate = date.getDate();
    const hour = date.getHours();
    const min = date.getMinutes();
    const sec = date.getSeconds();

    const time = year+'-'+month+'-'+wDate+' '+hour+':'+min+':'+sec;
    return time;

}

//유저이름 발생기
//유저이름은 8글자로 제한.
function generateUserName(){
    let alphabet = 'abcdefghijklmnopqrstuvwxyz';
    var makeUsername = '';
    for(let i=0; i<4;i++){
        let index = Math.floor(Math.random(10) * alphabet.length);
        makeUsername += alphabet[index];        
    }
    for(let j=0;j<4;j++){
        makeUsername += "*";
    }
    return makeUsername;    
}

function numberCount(event){
    console.log(event.target);
    if(event.target === voteUp){
        console.log("2");
      return voteUp.innerHTML++; 
      
    }else if(event.target === voteDown){
      return voteDown.innerHTML++; 
    }   
    
}

function deleteComments(event){    
    const btn = event.target;    
    const list = btn.parentNode.parentNode;//commentList
    rootDiv.removeChild(list);
    //메인댓글 카운트 줄이기.
    if(mainCommentCount.innerHTML <='0'){
        mainCommentCount.innerHTML = 0;
    }else{
        mainCommentCount.innerHTML--;
    }
}


//댓글보여주기
function showComment(comment){
    const userName = document.createElement('div');
    const inputValue = document.createElement('span');
    const showTime = document.createElement('div');
    const voteDiv = document.createElement('div');
    const countSpan = document.createElement('span')
    const voteUp = document.createElement('button');
    const voteDown = document.createElement('button');  
    const commentList = document.createElement('div');  //이놈이 스코프 밖으로 나가는 순간 하나지우면 다 지워지고 입력하면 리스트 다불러옴.
    //삭제버튼 만들기
    const delBtn = document.createElement('button');
    delBtn.className ="deleteComment";
    delBtn.innerHTML="삭제";
    commentList.className = "eachComment";
    userName.className="name";
    inputValue.className="inputValue";
    showTime.className="time";
    voteDiv.className="voteDiv";
    //유저네임가져오기 
    userName.innerHTML = generateUserName();    
    userName.appendChild(delBtn);  
    //입력값 넘기기
    inputValue.innerText = comment;
    //타임스템프찍기
    showTime.innerHTML = generateTime();
    countSpan.innerHTML=0;
    //투표창 만들기, css먼저 입혀야함.  
    voteUp.id = "voteUp";
    voteUp.innerHTML = '↑';    
    voteDown.id = "voteDown";
    voteDown.innerHTML = '↓';       
    voteDiv.appendChild(voteUp);
    voteDiv.appendChild(voteDown);

    //댓글뿌려주기       
    commentList.appendChild(userName);
    commentList.appendChild(inputValue);
    commentList.appendChild(showTime);
    commentList.appendChild(voteDiv);
    rootDiv.prepend(commentList);

    voteUp.addEventListener("click",numberCount);
    voteDown.addEventListener("click",numberCount);
    delBtn.addEventListener("click",deleteComments);
   console.dir(rootDiv);

}



//버튼만들기+입력값 전달
function pressBtn(){ 
   const currentVal = inputBar.value;
   
   if(!currentVal.length){
      alert("댓글을 입력해주세요!!");
   }else{
      showComment(currentVal);  
      mainCommentCount.innerHTML++;
      inputBar.value ='';
   }
}

btn.onclick = pressBtn;

 

코드참 지저분....

 

1. 수정기능은 모달창띄워서 할 예정.

2. 투표기능 : 버튼에 숫자, 그림 같이 넣는 법 찾으면 끝날 듯.  해결

3. DB가 되면 대댓글해봐야지.

 

 

 

반응형

'프로그래밍 > 뭔가 해보기' 카테고리의 다른 글

포스기 만들기.  (0) 2019.04.12
자바로 만들었던 게임.  (4) 2019.04.05
댓글 달기 Part 3  (0) 2019.04.05
댓글달기 Part2  (0) 2019.04.03
간단한 ToDoList 만들기  (0) 2019.03.29
'프로그래밍/뭔가 해보기' Related Articles more
Comments