코드스테이츠 프론트엔드 부트캠프-Section1 My Agora States 제작(1)

아직 미완성단계...일단 위에 정보를 입력하면 리스트에 추가되게끔 구현은 성공하였다.

내일까지 CSS파일과 JS파일을 최대한 더 건드려보자!

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);

  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 createdAtDate = new Date(obj.createdAt).toLocaleString();
  const contentInfo = document.createElement('div'); 
  contentInfo.className = "discussion__information"; 
  contentInfo.textContent = `${obj.author}/ ${createdAtDate}`
  discussionContent.append(contentInfo); 

  const contentAnswered = document.createElement('p');
  contentAnswered.className = "discussion__answered"; 

  if (obj.answer === null) {
    contentAnswered.textContent = '👨‍💻검토중'
  } else {
    contentAnswered.textContent = '❤️답변 완료'
  }
  discussionAnswered.append(contentAnswered); 

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

// agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링하는 함수입니다.
const render = (element) => {
  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 inputform = document.querySelector("form.form")
const inputName = document.querySelector("#name") // 작성자
const inputTitle = document.querySelector("#title") // 제목
const inputStory = document.querySelector("#story") // 내용

inputform.addEventListener("submit", (addEventListener) => {
  event.preventDefault(); // 새로고침 방지
  const newDiscussions = { 
    id: 'id', 
    createdAt: new Date(),
    title: inputTitle.value,
    url: "http://www.naver.com",
    author: inputName.value,
    answer: null,
    bodyHTML: inputStory.value,
    avatarUrl: "https://avatars.githubusercontent.com/u/104156381?s=64&v=4",
  };
  agoraStatesDiscussions.unshift(newDiscussions); 
  const discussion = convertToDiscussion(newDiscussions); 
  ul.prepend(discussion); 
  render(ul); 

  inputName.value = '';
  inputTitle.value = '';
  inputStory.value = '';

});

여기까진 스크립트!

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: '나눔스퀘어', 'sans-serif';
}

body{
  min-height: 100vh;
  background: var(--background); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-attachment: fixed;
  margin-top:30px;
  background-image: linear-gradient(
      to bottom,
      #b0e9ff4d,
      rgba(255, 255, 255, 0)
    );
}
main {
  width: 780px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30px;
}
#name, #title, #story {
  width:100%;
  border-radius: 5px;
}
#name {
  height:2.5em;
}
#title {
  height:2.5em;
}
#story {
  height:6em;
}
.form__input--name > input {
  padding:10px;
}
.form__input--title > input {
  padding:10px;
}
.form__textbox > textarea {
  padding:10px;
}
.form__submit {
  text-align: center;
}
.form__submit > input {
  width: 50%;
  height: 50px;
  margin-top : 10px;
  background-color: #ff9900;
  font-size: 18px;
  color: #fff;
  border-radius: 50px;
  border:none;
}

.form__submit > input:hover {
  background-color: #ff6600;
  font-weight:bold;
}
.discussions__container > li {
  background-image: linear-gradient(to right, #afe7ff, #d7e6ff, #ffcd94, #fff2ce);
  background-size: 300% 100%;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  border-radius:20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
  padding: 20px;
}
.discussions__container > li:hover{
  background-position: 100% 0;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.discussion__avatar--wrapper {
  padding: 0px;
  align-items: stretch;
}
.discussion__avatar--wrapper > img {
  border-radius: 50%;
  width:50px;
}
.discussion__content {
  margin-right: auto;
  padding: 10px 20px;
}
.discussion__title {
  font-size: 0.95rem;
  line-height: 1.5rem;
  margin-bottom: 1px;
  color: rgb(0, 0, 0);
}
.discussion__answered > p {
  width:150px;
  color: #727272;
  text-align:right;
  font-size:0.85rem;
}
.discussion__information {
  font-size:0.75rem;
  color:gray;
}
.discussion__title > a {
  text-decoration: none;
  color: inherit;
}

저렇게만 했는데도 CSS가 120줄이다... 합칠수있는건 합치고 조금 더 추가하도록 해야겠다.