[project] 나만의 아고라스테이츠만들기

[Solo project]

일단 기본적인것까지만 구현하도록 했다. (디스커션까지 추가)

# CSS

맨처음 이거 일단 넣자.

그리고 각구역 나눠서 border만들자!

*{
	box-sizing: border-box;
    margin: 0;
    padding: 0;
   }
   
body {
	display: flex;
    justify-content: center;
    align-items: center;
    }

---

#완성본 (CSS)

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    }
main{
    background-color: #aacdbe;
    
}
h1 {
    color: #f0ece3;
    text-align: center;
}
.form__container {
    background-color: #FFD4b2;
}
.form{
    display: grid;
    grid-auto-flow: column;
}
        
        /* 추가입력창부분  */
input[type="text"]{
    background-color: #f0ECE3;
    border-radius: 3px;
    border: 1px dotted #f0ECE3;
}
div.form__input--wrapper  {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

textarea {
    width: 100%;
    border-radius: 3px;
    background-color: #f0ECE3
}

input[type="submit"] {
    width: 100%;
    height: 100%;
    background-color: #f0ECE3;
    border-radius: 5px;
    border: 1px dotted #f0ECE3;
    font-size: 2.5rem;
    }

 input[type="submit"]:hover {
        background-color: #e8f3d6;
        color: #ede4e0;
    }

        /*밑에 댓글 부분 */

li.discussion__container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 540px;
    margin-bottom: 0.5rem;
    border-radius: 5px;
    list-style-type: none; 
    background-color: #e8f3d6;
}


div.discussion__avatar--wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
}

div.discussion__avatar--wrapper > img {
    width: 48px;
    height: 48px;
    border-radius : 70%;
}

.discussion__content > .discussion__title {
    display: flex;
    justify-content: flex-start;
}
.discussion__content > .discussion__information {
    display: flex;
    justify-content: flex-end;
}

li.discussion__container > .discussion__answered {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

---

#완성본(java script)

// 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 photo = document.createElement('img')
  //사진 =avatarURL;
  //alt= author
  photo.src = obj.avatarUrl;
  photo.alt = 'avatar of' + obj.author;
  photo.title = obj.id; //마우스 오버하면 작성자의 아이디
  avatarWrapper.append(photo);

  //가운데내용
  const discussionContent = document.createElement("div");
  discussionContent.className = "discussion__content";

  const discussionTitle = document.createElement("h2");
  const titleAnchor = document.createElement("a");
  //생성했고 
  titleAnchor.href = obj.url;
  titleAnchor.textContent = obj.title;
  discussionTitle.append(titleAnchor);

  const discussionInformation = document.createElement("div");
  discussionInformation.className = "discussion__information";
  discussionInformation.textContent = `${obj.author} / ${new Date(obj.createdAt).toLocaleTimeString()}`;
  //author / createdAt
  // toLocaleDateString() 
  // new Date().toLocaleTimeString()
  discussionContent.append(discussionTitle, discussionInformation);


  //끝에 표시
  const discussionAnswered = document.createElement("div");
  discussionAnswered.className = "discussion__answered";
  
  const checked = document.createElement("p");
   
 checked.textContent = obj.answer ? "☑" : "☒" ;

 discussionAnswered.append(checked);

  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 form = document.querySelector("form.form");
const author = form.querySelector("div.form__input--name > input");
const title = form.querySelector("div.form__input--title > input");
const textbox = form.querySelector("div.form__textbox > textarea");

//submit이라는 이벤트가 있다.
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const obj = {
    id: "new id" ,
    createdAt : new Date().toISOString(),  //toISOString() datajs에 써잇는 시간식으로 표현하는방법때문이다
    title: title.value, 
    url: "https://github.com/codestates-seb/agora-states-fe/discussions" ,
    author: author.value, 
    answer : null,
    bodyHTML: textbox.value ,
    avatarUrl: "https://avatars.githubusercontent.com/u/90553688?s=64&u=3c4e4dc2053d4977ac12b9cfc2667582f986d3d8&v=4",
  };
  //만든 배열을 data더미의 배열에 추가해준다(맨앞요소로)
  agoraStatesDiscussions.unshift(obj);
//전체 데이터 더미를 ul로 append해준다( 근데 맨앞으로니까 prepend)
ul.prepend(convertToDiscussion(obj));
//입력한 값을 submit에서 댓글창으로 append되면 값을 초기화한다.
author.value = " ";
title.value = " ";
textbox.value = " ";

});

# 공부하게된 부분들

form.addEventListener("submit", (event) => {
  event.preventDefault();

여기서 event.preventDefault는 submit눌렀을때 새로고침되는걸 방지하는것으로!

addEventListener(submit)할때 붙어서 사용된다고 생각하자!

ul.prepend(convertToDiscussion(obj));

prepend는 append를 할때 쓰이는건데

데이터가 추가되면 맨뒤로 붙는게 아니고 맨앞으로 붙어서 append대신에 prepend썻다.