[HTML5]- 16 - 작성 시간 표시 기능 만드는 법

#주의#

이 글은 강의 글이 아니다.

틀린 부분, 깔끔하지 못한 부분 있을 수 있다.

지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.

 

---

이제 게시글을 작성하면 작성한 시간이 나오게 만들어 볼 것이다.

날짜를 표시하기 위해서는 각 게시글이 작성된 시간을 저장해야 한다.

 

이를 위해 게시글을 저장할 때, 게시글의 내용과 함께 작성된 시간도 함께 저장하도록 addPost() 함수를 수정해야 한다.

 

아래는 수정된 addPost() 함수다.

728x90

function addPost() {
  var title = document.getElementById("title").value;
  var content = document.getElementById("content").value;
  var date = new Date().toLocaleString(); // 현재 시간을 문자열로 변환

  var postDiv = document.createElement("div");
  postDiv.className = "card my-3";
  postDiv.innerHTML = `
    <div class="card-body">
      <h3 class="card-title">${title}</h3>
      <p class="card-text">${content}</p>
      <p class="card-text"><small class="text-muted">${date}</small></p>
      <img class="card-img-bottom" src="images/3.webp" alt="이미지">
      <button type="button" class="btn btn-danger my-3">삭제</button>
    </div>
  `;

  postDiv.querySelector(".btn-danger").addEventListener("click", function() {
    postDiv.remove();
    savePosts();
  });

  var postsDiv = document.getElementById("posts");
  postsDiv.insertBefore(postDiv, postsDiv.firstChild);

  savePosts();

  document.getElementById("title").value = "";
  document.getElementById("content").value = "";
}

반응형

위 코드에서 new Date().toLocaleString()은 현재 시간을 문자열로 변환하는 코드다.

 

게시글이 작성될 때마다 현재 시간을 저장하여 게시글 아래에 작성된 시간을 표시하도록 수정한것이다.