2022-08-31 유튜브_클론_6

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4

 

---

JS 코드 설명

 

main.js

const moreBtn = document.querySelector('.info .metadata .moreBtn');
const title = document.querySelector('.info .metadata .title');

moreBtn.addEventListener('click', ()=>{
    moreBtn.classList.toggle('clicked');
    title.classList.toggle('clamp');
});

람다식으로 작성된 코드다.

 

동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다.

 

---

style.css 수정

 

 

body .infoAndUpNext > .info .metadata .titleAndButton .title {
    font-size: var(--font-medium);
}

body .infoAndUpNext > .info .metadata .titleAndButton .title.clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

clamp라는 클래스를 지닌 title에 대하여 적용될 CSS 코드를 작성한다.

 

clamp 되었을 경우에 텍스트는 2줄로 고정이 되고 초과한 글자는 생략된다.

 

body .infoAndUpNext > .info .metadata .titleAndButton .moreBtn.clicked {
    transform: rotate(180deg);
}

버튼이 클릭된 경우 아이콘을 180도 회전한다.

 

---

index.html 수정

 

<span class="title clamp">
    Test Video (시원함 주의)(동해물과 백두산이 마르고 닳도록 하느님이
    보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로
    길이 보전하세)
</span>

clamp된 상태가 기본이기 때문에 class에 clamp를 추가한다.

 

---

실행

 

클릭 전	클릭 후

 

---

완성

 

 

 

GitHub Pages를 이용해서 웹사이트를 인터넷에 올려보자.

 

Youtube

 

 

---

BOOM!