Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[2주차 기본/심화 과제] 웨비의 사진관 😋 #4

Merged
merged 9 commits into from
Jun 18, 2024
Merged

[2주차 기본/심화 과제] 웨비의 사진관 😋 #4

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e425894
init: copy week1 file
simeunseo Oct 25, 2023
8bf3228
feat: hover descriptoin
simeunseo Oct 26, 2023
7348a96
feat: top btn opacity depend on scrollY
simeunseo Oct 26, 2023
c592135
feat: ellipsis when text over 3 lines
simeunseo Oct 26, 2023
c34a82d
design: more btn styling
simeunseo Oct 26, 2023
adc3f9d
feat: add more btn depend on the length of text
simeunseo Oct 26, 2023
f5a0490
feat: add more btn click event
simeunseo Oct 26, 2023
b33f1b5
design: fixed width on p tag in contents
simeunseo Oct 26, 2023
7872707
feat: preview sectionscroll button
simeunseo Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions week2/assign1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,22 +41,28 @@ <h1>2023</h1>
<h3>Sogang Univ North Gate</h3>
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet. L
ipsum dolor sit amet. Lorem
</p>
</div>
<img src="./images/section1/1.png" alt="서강대학교 남문" />
</div>
<div class="overlay-wrapper">
<div class="content">
<h3>Hangang Park</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet. Lorem
</p>
</div>
<img src="./images/section1/2.png" alt="뚝섬 한강공원" />
</div>
<div class="overlay-wrapper">
<div class="content">
<h3>Artist GrandFa</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet. Lorem
</p>
</div>
<img
src="./images/section1/3.png"
Expand Down
21 changes: 14 additions & 7 deletions week2/assign1/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,21 @@ document.addEventListener("scroll", () => {
topBtn.style.opacity = window.scrollY / windowHeight / 2;
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저는 y축 스크롤 된거를 스크롤할 수 있는 최대치로 나눠서 구현했는데 이렇게도 할 수 있군요!


/* 글자수에 따른 더보기 버튼 활성화 및 작동 */
const moreBtn = document.createElement("button"); //button 요소 생성
moreBtn.innerText = "more";
moreBtn.setAttribute("class", "content-more-btn"); //button 클래스명 지정

const contents = document.querySelectorAll(".content");
contents.forEach((content) => {
if (content.children[1].innerText.length >= 85) {
content.appendChild(moreBtn);
const contentDescription = content.children[1];
/* 글자수에 따른 더보기 버튼 활성화 및 작동 */
if (contentDescription.innerText.length >= 85) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR에 적어준 부분인 것 같아서,

Suggested change
if (contentDescription.innerText.length >= 85) {
if (contentDescription.clientHeight < contentDescription.scrollHeight) {
}

저는 이런식으로 사용해서 구현했어용 참고 !~!

const moreBtn = document.createElement("button"); //button 요소 생성
moreBtn.innerText = "more";
moreBtn.setAttribute("class", "content-more-btn"); //button 클래스명 지정
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setAttribute 외에도 classList.add 를 이용하는 방식도 있어요!! 이를 이용하는 것이 속도면에서 더 빠르다는 얘기가 있네요~ 한 번 참고해 보시는 것도 좋을 거 같아요!!

참고자료
https://teamtreehouse.com/community/classname-vs-setattribute

https://measurethat.net/Benchmarks/Show/54/0/classname-vs-setattribute-vs-classlist


content.appendChild(moreBtn); //button 붙이기

/* 클릭 이벤트시 버튼 사라짐 */
content.addEventListener("click", () => {
contentDescription.style.display = "block"; //말줄임 표시를 없앰
moreBtn.style.display = "none";
});
Comment on lines +23 to +26
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

addEventListener가 content에 있는데 버튼 클릭 시가 아니라 내용 클릭시 내용이 다 보이게 구현하신건가용..?

}
});
2 changes: 2 additions & 0 deletions week2/assign1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,8 @@ section > h1 {

padding: 0.5rem 1rem;
border-radius: 1rem;

cursor: pointer;
}

/* second section */
Expand Down