아고라스테이츠 만들기

필수 구현기능 

• 디스커션 나열 기능
  • script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다.
• CSS
  • 아고라스테이츠 질문 리스트가 중앙으로 와야 합니다.
  • style.css를 수정하여 멋지고 아름답게 나만의 아고라스테이츠를 꾸밉니다.
  • colorhunt, dribbble에서 적절한 색 조합, 디자인을 참고합니다.
• 디스커션 추가 기능
  • script.js를 수정하여 디스커션 추가 기능을 구현합니다.
  • section.form__container 요소에 새로운 아고라스테이츠 질문을 추가할 수 있는 입력 폼을 제작합니다. 형식은 자유입니다.
  • 아이디, 본문을 입력하고 버튼을 누르면 실제 화면에 디스커션이 추가되어야 합니다.
  • agoraStatesDiscussions 배열에 추가한 데이터가 실제 쌓여야 합니다.

 

이번에는 페어와 함께가 아닌 혼자 해보는 시간이었다. 일단 js 아고라스테이츠 데이터를 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";

  li.append(avatarWrapper, discussionContent, discussionAnswered);

 

  const discussionContent_title = document.createElement('h2');

  discussionContent_title.className = "discussion__title";

  const discussionContent_information = document.createElement('div');

  discussionContent_title.className = "discussion__information";

  discussionContent.append(discussionContent_title, discussionContent_information);

 

  const discussionContent_title_link = document.createElement('a');

  discussionContent_title.append(discussionContent_title_link);

 

  discussionContent_title_link.href = obj.url;

  discussionContent_title_link.textContent = obj.title;

  discussionContent_information.textContent = obj.createdAt;

 

  

  const avatarImg = document.createElement('img');

  avatarImg.src = obj.avatarUrl;

  avatarImg.alt = 'avatar of ' + obj.author;

  avatarWrapper.append(avatarImg);

  

  const discussionContent = document.createElement("div");

  discussionContent.className = "discussion__content";

  const 

 

  const ul = document.querySelector('ul.discussions__container');

ul.append(li);

 

  return li;

};

 

여기까지 했는데 내가 구현한 것은

디스커션 창이 사진이랑 내용이 전부 따로 놀고 더 이상 기능이 안 됐다.. 이 부분은 다시 처음부터 해보거나 어디가 잘못됐는지 찾아봐야 할 것 같다. 또 디스커션에 추가할 수 있는 부분을 아직 어떻게 해야할지 감이 안 잡힌다..

 

css 부분은 맥북 인터넷 페이지와 비슷한 색감을 주고 싶어서 회색과 흰색을 이용해 꾸몄다

내가 좋아하는 카톡 테마와 비슷하게 꾸미고 싶었다 ..ㅎㅎ

 

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

display: flex;

justify-content: center;

align-items: center;

background: rgb(234, 233, 233);

background-repeat: no-repeat;

background-size: cover;

}

section.from__container {

background-color: rgb(255, 255, 255);

border-radius: 20px;

}

.from__input--wrapper {

margin: 5px;

}

section.discussion__wrapper {

width: 600px;

border: 1px solid rgb(220, 218, 218);

display: flex;

justify-content: center;

align-items: center;

background-color: rgb(255, 255, 255);

border-radius: 10px;

margin: 1px;

}

div.discussion__avatar--wrapper > img {

width: 48px;

}

div.discussion__content {

margin: 5px;

padding: 5px;

border: 1px solid rgb(185, 184, 184);

border-radius: 5px;

font-family: monospace;

font-size: 10px;

overflow: hidden;

opacity: 0.5;

background: rgb(234, 233, 233);

justify-content: space-between;

display: flex;

}

h1 {

color: rgb(157, 156, 156);

background-color: rgb(234, 233, 233);

text-align: center;

}

form.form {

padding: 15px;

border: 2px solid rgb(218, 218, 218);

background-color: rgb(255, 255, 255);

border-radius: 10px;

}

.form__submit > input {

width: 400px;

height: 20px;

}

.form__submit {

 

}

.form__input--name > label {

word-spacing : 7px;

}

.form__input--title > label {

word-spacing : 15.5px;

}

.form__textbox > label {

word-spacing : 7px;

}

아직 스크롤과 input 창, submit 크기 등등 보완해야 할 점이 너무 많다! 복습도 해야 하는데 시간이 너무 부족하다,,

그래도 하면서 느낀 점은 js 부분은 아직 너무 어렵고 많이 부족해서 자괴감이 들고 많이 힘들긴 했지만 css 할 때 내가 하고싶은 디자인으로 어떻게 하면 더 깔끔하게 할 수 있을지, 색감 부분도 고민하는 것 등등 재밌었다!