const idinput = document.querySelector("input");
const pwinput = document.querySelector('.pw');
const inputs = document.querySelector('.inputs');
const btn = document.querySelector('.btn');
inputs.addEventListener('keyup', (e) => {
btn.style.background = !idinput.value || !pwinput.value ? 'rgb(191,224,253)' :'blue';
})
삼항 연산자를 이용해 코드를 간결하게 사용할 수 있다.
const ul = document.querySelector('.comments');
const inputBox = document.querySelector('.inputBox');
const weName = document.querySelector('.name').innerHTML.bold();
const heartIcon = document.querySelector('.heartIcon');
const iconBox = document.querySelector('.iconBox');
const inputComment = document.querySelector('.inputComment');
inputComment.addEventListener('submit', (e) => {
e.preventDefault();
if(inputBox.value !==''){
const btn = document.createElement('button');
btn.className='textremove';
const i = document.createElement('i');
i.className='fas fa-ellipsis-h';
btn.append(i);
const makeDiv = document.createElement('div');
makeDiv.className='divHeart';
const heart = document.createElement('i');
heart.className='far fa-heart';
makeDiv.appendChild(heart);
let makeli = document.createElement('li');
makeli.innerHTML=`${weName} ${inputBox.value}`;
makeli.append(btn,makeDiv);
ul.append(makeli);
inputBox.value = '';
//댓글 삭제
btn.addEventListener('click', () =>{
makeli.remove();
})
//댓글 좋아요
makeDiv.addEventListener('click', () =>{
makeDiv.style.color = makeDiv.style.color==='red' ? makeDiv.style.color='rgb(219,219,219)': makeDiv.style.color='red';
})
}
})
heartIcon.addEventListener('click', () => {
heartIcon.style.color==='red' ?(heartIcon.innerHTML='<i class="far fa-heart fa-2x"></i>', heartIcon.style.color='black')
:(heartIcon.innerHTML='<i class="fas fa-heart fa-2x"></i>', heartIcon.style.color='red')
});//게시글 좋아요
DOM에 접근하여 createElement
로 div태그를 만들고 원하는 태그이름이나 클래스이름을 정해준다. 버튼을 눌렀을 때 append를 이용해 리스트, 아이콘, 클래스이름을 추가하여 댓글이 추가되는 것처럼 보이게 했다. ...
아이콘을 넣어 remove
함수를 사용해 makeli
를 지우게했고, 삼항연산자를 활용해 버튼의 색깔에 변화를 줬다.
게시글 좋아요는 색이 채워지는 형태라 버튼이 눌러지면 기존아이콘을 빨간색의 새로운 아이콘으로 변경할 수 있게 했다.