[05.05~08] solo_아고라스테이츠 만들기

• Solo project
• 회고

---

📌 아고라스테이츠 만들기

CSS

1. [>:nth-child()] : 부모요소의 자식요소 중 특정 순서에 있는 요소 선택시 필요
2. new Date().toLocaleTimeString() : 새로운 날짜,시간 표기
3. 참고

• 색조합 : https://colorhunt.co/palettes/popular
• 디자인 : https://dribbble.com/

javascript

: 많은 요소들을 html 요소에 넣기 위해 dom을 활용하여 javascript를 조작

1. className : 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정가능

   <div class="discussion__avatar--wrapper">
    <img class="discussion__avatar--image" 
         src="https://avatars.githubusercontent.com/u/12145019?s=64&u=5c97f25ee02d87898457e23c0e61b884241838e3&v=4"
         alt="avatar of kimploo">
   </div>

   //createElement : 새로운 div요소 생성
   const avatarWrapper = document.createElement("div");
   avatarWrapper.className = "discussion__avatar--wrapper";

2. render() {…} : 컴포넌트가 어떻게 생겻는지 정의하는 역할/ 컴포너트 내부에는 또 다른 컴포넌트가 들어 갈 수 있음

3. addEventListener : 이벤트 발생시 호출하는 함수
   →evnet.preventDefault()랑 항시 사용 : 페이지 재로드를 막아줌

   //폼 submit에 새로운 디스커션 추가
   const form = document.querySelector("form.form");
   const FormName = form.querySelector("div.form__input--name > input");
   const FormTitle = form.querySelector("div.form__input--title > input");
   const FormTextbox = form.querySelector("div.form__textbox > textarea");
   
   form.addEventListener('submit',(event) => {
           event.preventDefault(); //prevents page reloading
   		const newObj = {
   		id: "unique id",
   		createdAt: new Date().toISOString(),
   		title: FormTitle.value,
   		url: "https://github.com/codestates-seb/agora-states-fe/discussions",
   		author: FormName.value,
   		answer: null,
   		bodyHTML: FormTextbox.value,
   		avatarUrl: "https://avatars.githubusercontent.com/u/12145019?s=64&u=5c97f25ee02d87898457e23c0e61b884241838e3&v=4",
           };
         
           //agoraStatesDiscussions submit된 새로운 폼 앞에 추가
           agoraStatesDiscussions.unshift(newObj);
         
           //convertToDiscussion요소 생성
           const discussion = convertToDiscussion(newObj);
         
           ul.prepend(discussion);
           
           // submit후 리셋
           FormName.value = '';
           FormTitle.value = '';
           FormTextbox.value = '';
         }
         )

   

---

🙋🏻‍♀️회고

멀고도 먼 개발자의 환경 배우기란…. 절레절레