forked from anotheranotherhoon/fe-sprint-my-agora-states
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
58 lines (47 loc) · 2.32 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 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 discussionContent = document.createElement("div");
discussionContent.className = "discussion__content";
const discussionAnswered = document.createElement("div");
discussionAnswered.className = "discussion__answered";
// TODO: 객체 하나에 담긴 정보를 DOM에 적절히 넣어주세요.
//html순서대로 작성해서 넣어주기
const discussionAvatarImage = document.createElement('img');
discussionAvatarImage.className = "discussion__avatar--image";
discussionAvatarImage.src = obj.avatarUrl;
avatarWrapper.append(discussionAvatarImage);
const discussionTitle = document.createElement('h2')
discussionTitle.className = "discussion__title";
const aLink = document.createElement('a');
aLink.href = obj.url;
aLink.textContent = obj.title;
discussionTitle.append(aLink);
const discussionInformation = document.createElement('div');
discussionInformation.className ="discussion__information";
discussionInformation.textContent = `${obj.author} / ${obj.createdAt}`;
discussionContent.append(discussionTitle, discussionInformation);
const discussionTwo = document.createElement('div');
discussionTwo.className = "discussion__two";
discussionTwo.append(avatarWrapper, discussionContent);
const pTag = document.createElement('p');
pTag.textContent = '☑';
discussionAnswered.append(pTag);
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);