아고라스테이츠 만들기

			         <결과물>

1.Bare Minimum Requirement

// index.html을 열어서 agoraStatesDiscussions 배열 요소를 확인하세요.
console.log(agoraStatesDiscussions);

// convertToDiscussion은 아고라 스테이츠 데이터를 DOM으로 바꿔줍니다.
const convertToDiscussion = (obj) => {
  const li = document.createElement("li"); // li 요소 생성
  li.className = "discussion__container"; // 클래스 이름 지정

  const avatarWrapper = document.createElement("div");
  avatarWrapper.className = "discussion__avatar--wrapper";
  const discussionContent = document.createElement("div");
  discussionContent.className = "discussion__content";
  const discussionAnswered = document.createElement("div");
  discussionAnswered.className = "discussion__answered";

  // TODO: 객체 하나에 담긴 정보를 DOM에 적절히 넣어주세요.
  const avatarImg = document.createElement('img');
  avatarImg.src = obj.avatarUrl;
  avatarImg.alt = 'avatar of ' + obj.author;
  avatarWrapper.append(avatarImg);
//title
  const contentTitle = document.createElement('h2');
  contentTitle.className = "discussion__title";
  discussionContent.append(contentTitle);
  //링크
  const contentLink = document.createElement('a');
  contentLink.href = obj.url;
  contentLink.textContent = obj.title;
  contentTitle.append(contentLink);
  //정보
  const contentInformation = document.createElement('div');
  contentInformation.className = "discussion__information";
  contentInformation.textContent = obj.author;
  discussionContent.append(contentInformation);

  //체크박스
  const contentAnswered = document.createElement('p');
  contentAnswered.className = "discussion__answered";
  discussionAnswered.append(contentAnswered);
  if( obj.answer ===null ){
    contentAnswered.textContent = "☒";
  }else{
    contentAnswered.textContent = "☑";
  }
  contentInformation.textContent = `${obj.author} / ${new Date(obj.createdAt).toLocaleString("ko-KR")}`;
  //new date= 인수 없이 호출하면 현재 날짜와 시간이 저장된 Date 객체가 반환됩니다. 여기서는 obj.createdAt를 넣어줌 , 그리고 toLocaleString은 시간을 현지화 시킨 것

 li.append(avatarWrapper, discussionContent, discussionAnswered);
  return li;
};

// agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링하는 함수입니다.
const render = (element) => {
  element.innerHTML = "";
  for (let i = 0; i < agoraStatesDiscussions.length; i += 1) {
    element.append(convertToDiscussion(agoraStatesDiscussions[i]));
  }
  return;
};

// ul 요소에 agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링합니다. 렌더링이란 즉 화면에 노출시켜주는 것을 의미함
const ul = document.querySelector("ul.discussions__container");
render(ul);

위에 제목과 링크부분을

const contentTitle = document.createElement('h2');
 const contentLink = document.createElement('a');
 contentTitle.append(contentLink);
 contentLink.textContent = obj.title;
 로 짧게 쓸 수도 있다.

2.디스커션 추가

input에 값을 입력하면

const form = document.querySelector(".form__container");
//const submitBtn = document.querySelector('button');//우선 읽
let elInputUsername =document.querySelector('#name');//이름
let elInputTitle =document.querySelector("#title");//제목
let elInputContent =document.querySelector('#story');//내용

form.addEventListener('submit', function(e) {
  e.preventDefault();
	

  const newDiscussion = {
    id: "",
    createdAt: new Date().toLocaleString(),
    title: elInputTitle.value,
    url: "https://github.com/codestates-seb/agora-states-fe/discussions/45",
    author: elInputUsername.value,
    answer: null,
    bodyHTML: elInputContent.value,
    avatarUrl:
    "https://avatars.githubusercontent.com/u/95295766?s=64&u=85d493e0be0d2ca55965efd9f6c5b268c9dca168&v=4",
};

agoraStatesDiscussions.unshift(newDiscussion);//배열에 추가가됨 왜 표면에 안나타나징
console.log(newDiscussion);
const newArr = convertToDiscussion(newDiscussion);

ul.prepend(newArr);
//const랑 prepend안쓰고 render(ul)쓰고 위에서 render함수 초기화해줘도 된다!