[ 2주차 기본/심화/생각 과제 ] 웨비의 사진관 😋 가계부 💸 #2
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| const DATA = [ | ||
| { title: "꽃속의 웰코", summary: "이뿌지!!" }, | ||
| { title: "멀보니웰코", summary: "날씨 조타!" }, | ||
| { title: "눈웃음웰코", summary: "모야! 햇빛 죠아!" }, | ||
| { | ||
| title: "잠자는 말티즈으", | ||
| summary: | ||
| "말티즈가잠을자고있어요말티즈가잠을자고있어요말티즈가잠을자고있어요", | ||
| }, | ||
| { title: "사모예드가 당당티비!", summary: "아뇽! 나는 당당한 사모예에드!" }, | ||
| { title: "졸림 강얼지", summary: "졸려티비..." }, | ||
| { | ||
| title: "나 귀엽지?", | ||
| summary: | ||
| "너무 귀엽구 사랑스러워 너가 다행 핑크 옷 입은 강아지가 만세를 하고 웃다니 세상을 다 가질 것 같아", | ||
| }, | ||
| { | ||
| title: "우리는 두마리!", | ||
| summary: | ||
| "강아지가 두마리라니 더 사랑스럽고 너무 사랑스럽고 너무 귀엽다ㅠㅠ 아 진짜 귀엽다 어떡해,,,", | ||
| }, | ||
| { title: "무념무상", summary: "...졸려요" }, | ||
| { title: "너...너...", summary: "내가 가지고 만다" }, | ||
| ]; | ||
|
|
||
| export default DATA; | ||
|
Comment on lines
+25
to
+26
There was a problem hiding this comment. 나나 모듈에 대해서 잘 몰랐는데 |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import DATA from "./DATA.js"; | ||
|
|
||
| const $ = (selector) => document.querySelector(selector); | ||
| const $$ = (selector) => document.querySelectorAll(selector); | ||
|
Comment on lines
+3
to
+4
There was a problem hiding this comment. 코드에서 There was a problem hiding this comment. 원래 쓰려고 하다가 첨에 잘 안되기두 했구 오히려 더더 헷갈려서ㅠ 일단 보류해 두었으,,,,, 너무 헷갈리게 id나 class이름을 지은 것 같아ㅠ
Comment on lines
+3
to
+4
There was a problem hiding this comment. 요거 선택자 중복이라 함수로 따로 빼준거! There was a problem hiding this comment. 중복된 선택자들에게 다 적용하는 함수를 만들어주려면 함수명으로 $를 쓴다는 말인가?! |
||
|
|
||
| // 1.a , b | ||
| const firstImages = document.querySelectorAll(".first_section_pic"); | ||
|
|
||
|
Comment on lines
+6
to
+8
There was a problem hiding this comment. 위랑 같은 맥락으로 요기를 그럼 There was a problem hiding this comment. 우웅 마자요!!! 근데 쓰다 안 쓰다보다 일단 안 쓰는게 나을 것 같아서 일차적으로는 안 썻으 |
||
| //더보기 버튼 생성 | ||
| const moreBtn = document.createElement("button"); | ||
| moreBtn.classList.add("more_button"); | ||
| moreBtn.innerText = "더보기"; | ||
|
|
||
| firstImages.forEach((pic, index) => { | ||
| const h2 = document.createElement("h2"); | ||
| h2.classList.add("title"); | ||
| const p = document.createElement("p"); | ||
| p.classList.add("summary"); | ||
| const { title, summary } = DATA[index]; | ||
|
|
||
|
|
||
| let moreBtnClicked = false; | ||
|
|
||
| pic.addEventListener("mouseover", function () { | ||
| pic.childNodes[1].classList.add("addTitle"); | ||
| pic.classList.add("addTitle"); | ||
| h2.innerText = title; | ||
|
|
||
| const div = document.createElement("div"); | ||
| div.classList.add("title_summary_wrapper"); | ||
| div.appendChild(h2); | ||
| p.innerText = summary; | ||
| div.appendChild(p); | ||
| pic.appendChild(div); | ||
|
|
||
| //심화 1번 | ||
| const pHeight = p.clientHeight; | ||
| const summaryHeight = p.scrollHeight; | ||
|
|
||
| if (pHeight < summaryHeight) { | ||
|
Comment on lines
+35
to
+39
There was a problem hiding this comment. 오옹 나는 p태그의 높이를 |
||
| div.appendChild(moreBtn); | ||
| !moreBtnClicked ? (moreBtn.style.display = "flex") : null; | ||
|
There was a problem hiding this comment. 삼항연산자 쓰니까 되게 깔끔하네용.. 저기서 null은 아무런 동작을 하지 않는거야? There was a problem hiding this comment. 우웅!! 사실 if만 사용하는 부분에선 이항 연산자 사용해도 되긴 해용! 아니면 저렇게 null로? |
||
| moreBtn.addEventListener("click", () => { | ||
| p.classList.replace("summary", "summaryAll"); | ||
| moreBtn.style.display = "none"; | ||
| }); | ||
| } | ||
| moreBtn.addEventListener("click", () => { | ||
| p.classList.replace("summary", "summaryAll"); | ||
| moreBtnClicked = true; | ||
| moreBtn.style.display = "none"; | ||
| }); | ||
| }); | ||
|
Comment on lines
+47
to
+52
There was a problem hiding this comment. 심화과제는 못했지만 There was a problem hiding this comment. 아 요고 더보기 버튼이 눌렸었는지 안 눌렸는지 확인하려고 넣어둔 친구입니다! |
||
|
|
||
| pic.addEventListener("mouseleave", function () { | ||
| pic.classList.remove("addTitle"); | ||
| h2.innerText = ""; | ||
| p.innerText = ""; | ||
| p.classList.replace("summaryAll", "summary"); | ||
| moreBtn.style.display = "none"; | ||
| moreBtnClicked = false; | ||
| }); | ||
| }); | ||
|
|
||
| //2.a | ||
| const gotopBtn = document.getElementById("gotop_btn"); | ||
| window.addEventListener("scroll", () => { | ||
| const scrollY = window.scrollY; | ||
| const maxScroll = document.body.clientHeight - window.innerHeight; | ||
| const opacity = scrollY / maxScroll; | ||
| gotopBtn.style.opacity = opacity; | ||
| }); | ||
|
|
||
| //심화 2번 | ||
| const preview = document.getElementById("preview"); | ||
| const article = document.getElementById("img_wrapper"); | ||
| const toLeft = document.getElementById("toLeft"); | ||
| const toRight = document.getElementById("toRight"); | ||
|
|
||
| toLeft.addEventListener("click", () => { | ||
| const articleWidth = article.scrollLeft; | ||
|
Comment on lines
+78
to
+80
|
||
| const articleWidthh = article.scrollRight; | ||
| console.log(articleWidth, articleWidthh); | ||
| article.scrollTo({ | ||
| left: articleWidth - 150, | ||
| behavior: "smooth", | ||
| }); | ||
| }); | ||
|
|
||
| toRight.addEventListener("click", () => { | ||
| const articleWidth = article.scrollLeft; | ||
| const articleWidthh = article.scrollRight; | ||
| console.log(articleWidth, articleWidthh); | ||
| article.scrollTo({ | ||
| left: articleWidth + 150, | ||
| behavior: "smooth", | ||
| }); | ||
| }); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오오 이거 객체로 빼쥰거 좋은 것 같아 넘굿굿!!!!!