[Project] 나만의 아고라스테이츠 만들기 2차
2022.11.15
💡 SOLO Project
▶️ 나만의 아고라스테이츠 만들기
어제까지 한 건 정말… 기초중의 기초였다… 오늘 추가적으로 한 부분은
- script.js 질문 입력창
- css 기초 틀잡고 조금 꾸미기
어제와 달라진 부분들만 정리해보았다.
📌 script.js
// 사용자 정보 (11.14일자)
const information = document.createElement('div')
information.className = 'discussion__information'
information.textContent = `${obj.author} / ${obj.createdAt}`
discussionContent.append(information)
// created.At의 시간을 다시 정의했다. (11.15일자)
// 사용자 정보
const information = document.createElement('div')
information.className = 'discussion__information'
information.textContent = `${obj.author} / ${new Date(obj.createdAt).toLocaleString()}`
discussionContent.append(information)
📌 script.js
// 또한 질문입력창을 추가해주었다.
// 질문 입력창
const form = document.querySelector('form.form'); //form 요소이면서 class가 form인것을 불러냄
const inputName = document.querySelector('.form__input--name > input');
const inputTitle = document.querySelector('.form__input--title > input')
const inputQuestion = document.querySelector('.form__textbox > textarea')
form.addEventListener('submit', (event) => {
event.preventDefault(); // 새로고침을 막음
const obj = {
id: "999", //임의의 값 아무거나
createdAt: new Date(),
title: inputTitle.value,
url: "https://github.com/codestates-seb/agora-states-fe/discussions/45",
author: inputName.value,
answer: null,
bodyHTML: inputQuestion.value,
avatarUrl:
"https://avatars.githubusercontent.com/u/97888923?s=64&u=12b18768cdeebcf358b70051283a3ef57be6a20f&v=4",
}
// 기존의 데이터 => 아고라스테이츠 디스커젼 가장 앞에 추가
agoraStatesDiscussions.unshift(obj);
ul.prepend(convertToDiscussion(obj)) // 하나의 DOM으로 만들어주고 prepend: 맨앞으로 추가
inputName.value = '';
inputTitle.value = '';
inputQuestion.value = '';
})
// 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);
오늘 시간이 부족했던 첫번째 이유는 페이지네이션에 실패한 이유가 가장 크다.
페이지네이션을 시도해보고자 정말 많은 자료들을 뒤져보고 내 코드에 적용해보았지만 오늘은 실패했다. 생각보다 구조가 많이 복잡하고 너무 어려웠다.
앞으로도 이렇게 구조가 복잡한 코드들을 많이 접하게 될텐데 벌써부터 겁먹어버렸다. 과제는 이미 제출해버렸지만 타 블로그의 페이지네이션 방법들을 차근차근 뜯어보고 꼭 구현해낼 것이다.
📌 style.css
/* TODO: 보기 좋은 나만의 아고라 스테이츠를 위해서 CSS를 수정하세요. */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Gaegu', cursive;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
}
a:hover {
color: rgb(119, 92, 92);
}
a:active {
text-decoration: none;
}
h1 {
text-align: center;
font-size: 36px;
color:rgb(244, 244, 167); ;
background-color: black;
}
body{
background-color: rgb(248, 232, 188);
}
.titleAsk{
background-image: url(https://user-images.githubusercontent.com/104547038/201836011-6242c9ce-599e-4a5b-8751-d7d33772977f.jpeg);
background-size: contain;
width: 100%;
height: 300px;
}
ol,
li {
list-style: none;
margin-top: 5px;
}
/* 입력창 */
.form__container{
position: absolute;
top: 250px;
left: 50%;
width: 600px;
height: 400px;
border-radius: 10px;
background-color: rgb(245, 245, 151);
transform: translateX(-50%);
box-shadow: 0 0 10px 5px rgb(0 0 0 / 30%);
}
.form__input--wrapper{
margin: 20px 50px 0;
}
.form__input--wrapper div {
padding: 10px 0;
}
.form input, .form textarea{
color:#fff;
border: 1px solid rgba(255,255,255,0.2);
color:#0d2259;
border: 1px solid rgba(13,34,89,0.2);
border-radius: 5px;
padding: 5px;
}
#name{
width: 100%;
}
#story{
width: 100%;
height: 120px
}
/* submit버튼 */
.submit_button{
margin-left: 58%;
width: 200px;
height: 50px;
font-size: 20px;
background-color: rgb(181, 179, 179);
border-radius: 20px;
border-color: black;
}
.submit_button:hover{
background-color: rgb(245, 245, 151);
}
/* 전체 디스커젼 */
.discussion__wrapper{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 320px;
}
li.discussion__container {
display: flex;
flex-direction: row;
width: 550px;
height: 80px;
justify-content: space-between;
background-color: whitesmoke;
border-radius: 20px;
box-shadow: -3px 3px 5px 2px grey;
}
li.discussion__container:hover{
background-color: rgb(245, 245, 151);
}
/* 프로필 사진 */
.discussion__avatar--wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
margin-left: 10px;
}
.discussion__avatar--image {
border-radius: 50%;
width: 50px;
overflow: hidden;
margin-left: 5%;
object-fit: cover;
}
.discussion__content {
padding: 10px;
display: flex;
flex-direction: column;
flex-grow: 2;
justify-content: space-around;
}
.discussion__information {
text-align: right;
font-size: 0.7rem;
}
.discussion__title {
margin: 10px 0 20px 20px;
font-size: 0.8rem;
}
/* 체크박스 */
.discussion__answered {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
font-size: 24px;
margin-right: 20px;
}
/* 제목이 두줄 이상일 때 한줄로 표기 */
section .discussion__title a {
font-size: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
CSS도 시도해보고 싶은 것이 있었다. 내가 생각한 테마는 카카오톡 알림 페이지로 각 질문들을 겹쳐놓고 클릭하면 촤르륵…ㅎ 펼치고 싶었다…. 하지만 구현해내지 못했다. 페이지네이션에서 시간을 너무 많이 소비해서 CSS자료를 많이 찾아보지 못했고 조금 급하게 마무리한 감이 있다.
이번주 내내 천천히 여유를 가지고 페이지네이션과 내가 구현하고자했던 CSS를 꼭 구현해 낼 것이다.
📌 11.14 [ 결과물 ]
앞으로 개선할 점
CSS flex 더 확실하게 공부하기
페이지네이션 같은 복잡한 구조의 코드가 나와도 차근차근 해석해보는 연습하기
그래도 열심히 배운점
- 데이터를 DOM으로 불러와서 페이지 만드는 법
- git 활용법
Comments