틀 만들기
여럿이서 하는 채팅에서 고객센터 채팅으로 틀 변경
*여럿이서 하는 채팅 참고 >> [WIL] - 38주차 - 프로젝트 front
기본 틀은 codepen.io에서 가져왔다.
오후 6시가 지나면 상담사 연결을 하지 못하게 했다.
시간 체크하기
오후 6시 체크 코드
let today = new Date();
let hours = today.getHours(); // 시
let minute = today.getMinutes()
if (hours > 18 && minute > 0) {
}
대화를 할 때 현재 시간에 맞게 코드를 수정
<span class="message-data-time">${hours}:${minute}</span>
문자열 첫 글자 삭제하기
const str = "abcde";
const newStr1 = str.substr(1); // bcde
const newStr2 = str.substring(1); // bcde
const newStr3 = str.slice(1); // bcde
나와 상대를 구분해서 사용했던 $를 제거(기존 코드 참고)
if (e.data[0] == "$") {
newMsg.innerText = e.data.slice(1)
}
채팅 틀에 맞게 출력시키기
채팅으로 할 때도 기본 매크로처럼 틀에 맞게 작성되어야 한다.
형식은 <li><span>시간</span><span>닉네임</span><div>message</div></li> 이다.
각 태그 별로 css가 적용되어있는데 아래를 모두 만족하게 작성해야했다.
1. 내가 작성한 경우 className은 message me이고 고객센터는 message center이다.
2. 시간과 이름도 같이 출력해야한다.
부모인 li 태그를 생성하고 자식 요소를 생성하는 방법으로.appendChild() 방법이 나왔지만
여러 개를 실행하려고 하다보니 되지 않았다.
또한 li 태그를 버리고 활용해보려고 했다가 채팅 칸이 서로 겹치는 상황이 생겼다.
wrap을 활용해서 현재 자식 요소에서 부모요소를 만들었다.
$(".message").wrap("<li class='chatbotmsg'></li>")
부모요소에서 append를 활용해 여러 개의 자식 요소들을 추가하려고 했다.
$(".chatbotmsg").append($('<span>', {
class: 'message-data-time', text: `${hours}:${minute}`
}));$(".chatbotmsg").append($('<span>', {
class: 'message-data-name', text: `ADME`
}));$(".chatbotmsg").append($('<span>', {
class: 'message-data-name', style: 'float: right;', text: `${nickname}`
}));
시간과 이름을 출력하니 2번씩 출력되고 있다.
여러 개의 자식 요소를 설정하는 예시
const div = document.createElement("div");
const span = document.createElement("span");
const p = document.createElement("p");
document.body.append(div, 'hello', span, p);
//결과
<body>
<div></div>
hello
<span></span>
<p></p>
</body>
'TIL' 카테고리의 다른 글
| 연관관계 매핑 프로젝트에 적용하기(코드) (0) | 2022.11.16 |
|---|---|
| Git blog 이미지 크기 수정하기(chirpy) (0) | 2022.10.26 |
| Security (0) | 2022.10.11 |
| 2022-09-25 스터디 ch2, ch3 정리 (0) | 2022.09.24 |
| 2022-09-25 스터디 ch1 정리 (0) | 2022.09.22 |