diff --git a/insta.js b/insta.js new file mode 100644 index 0000000..c2ed30b --- /dev/null +++ b/insta.js @@ -0,0 +1,92 @@ +const logoinsta = document.querySelector(".logo"); + +logoinsta.addEventListener("click", () => { + window.location.reload(); +}); + +const alarm = document.getElementById("black-heart"); +const noti = document.querySelector(".notification"); + +alarm.addEventListener("click", () => { + noti.style.display = "block"; + setTimeout(() => { + noti.style.display = "none"; + }, 2000); +}); + +const storyModal = document.querySelector(".story-modal"); +const storyElements = document.querySelectorAll(".story-element"); +const storyimage = document.getElementById("story-image"); + +storyElements.forEach((storyElement) => { + storyElement.addEventListener("click", () => { + storyModal.style.display = "block"; + }); +}); + +storyModal.addEventListener("click", (event) => { + if (event.target === storyModal) { + storyModal.style.display = "none"; + } +}); + +storyimage.addEventListener("click", (event) => { + event.stopPropagation(); +}); + +const smile = document.querySelector(".smile"); +const emoticon = document.querySelector(".emoticon-box"); + +smile.addEventListener("click", () => { + emoticon.style.display = "block"; +}); + +emoticonimages = document.querySelectorAll(".emoticon-image"); + +emoticonimages.forEach((emoticonelement) => { + emoticonelement.addEventListener("click", () => { + let targetemoticon = emoticonelement.innerText; + console.log(targetemoticon); + comment = document.querySelector(".comment"); + comment.value += targetemoticon; + }); +}); + +const commentsCreateForm = document.querySelector(".comments-create-form"); +const commentContainer = document.querySelector(".written-comments-container"); +const commentInput = document.querySelector(".comment"); + +// 댓글의 내용을 저장할 자료구조 +const commentsList = []; +let commentId = 0; + +// form 태그 제출 시 이벤트 핸들링. event(e)를 인자로 받아 event 정보를 취득. 매우 중요 +commentsCreateForm.addEventListener("submit", (e) => { + // TODO1. form 태그가 클릭 되었을 때 페이지 이동을 막고 댓글 내용을 취득하기 + e.preventDefault(); + const commentText = commentInput.value; + if (!commentText) return; + commentsList.push(commentText); + + // TODO2. 댓글 내용이 표시될 HTML노드를 만들어주기 + // 이렇게 string 형식으로 HTML요소를 만들어서 HTML파일에 삽입할 수 있어요! + commentId = commentsList.length; + const commentNode = ` +
+ ${commentText} + comment +
+ `; + + // TODO3. "written-comments-container"에 댓글 HTML노드를 추가해주기 + // 채팅창 값은 비워주기 + commentContainer.innerHTML = commentContainer.innerHTML + commentNode; + commentInput.value = ""; + emoticon.style.display = "none"; +}); diff --git a/instagram.JS b/instagram.JS new file mode 100644 index 0000000..6f1ee07 --- /dev/null +++ b/instagram.JS @@ -0,0 +1,91 @@ +// TODO1. "story-modal" 클래스 요소 취득하기 +// document 에서 "story-modal" 이라는 클래스를 가진 요소를 하나 취득하여 +// storyModal 변수에 저장하세요. +// getElementById? querySelector? querySelectorAll? 무엇을 사용할지 고민해보세요. + +// TODO3. +// 앞서 정의한 storyModal 에 eventListener를 추가하세요. +// eventType은 'click' 이며, eventHandler의 기능은 다음과 같습니다. +// eventHandler 기능 : 앞서 정의한 storyModal의 style.display 속성을 "block"으로 바꿈. + +// PUT YOUR CODE HERE + +// TODO1. "profile-container" 클래스 요소 취득하기 +const profile_container = document.querySelector(".profile-container"); // PUT YOUR CODE HERE... + +// TODO2. "profile-modal" id를 가진 요소 취득하기 +const profile_modal = document.querySelector("#profile-modal"); // PUT YOUR CODE HERE... + +// TODO3. profile_container에 eventListener를 추가하세요. +// eventType은 'mouseover' 이며, eventHandler의 기능은 다음과 같습니다. +// eventHandler 기능1 : profile_modal 의 style.display 속성을 "block"으로 바꿈. +// eventHandler 기능2 : profile_modal 의 style.position 속성을 "absolute"으로 바꿈. +profile_container.addEventListener("mouseover", () => { + profile_modal.style.display = "block"; + profile_modal.style.position = "absolute"; +}); +// PUT YOUR CODE HERE... + +// TODO4. profile_container에 또 다른 eventListener를 추가하세요. +// eventType은 'mouseout' 이며, eventHandler의 기능은 다음과 같습니다. +// eventHandler 기능 : profile_modal 의 style.display 속성을 "none"으로 바꿈. +profile_container.addEventListener("mouseout", () => { + profile_modal.style.display = "none"; +}); + +// 실습 3 +const likeCount = document.getElementById("like-count"); +const blackHeart = document.getElementById("black-heart"); +const redHeart = document.getElementById("red-heart"); + +// TODO1. 검정색 하트를 눌렀을 때 +blackHeart.addEventListener("click", () => { + // 빨간 하트를 보여주고 검정 하트는 숨기기 + redHeart.style.display = "inline"; + blackHeart.style.display = "none"; + + // likeCount 요소의 내부 텍스트를 취득하세요 + const count = likeCount.innerText; // PUT YOUR CODE HERE... + + // 좋아요 갯수를 하나 늘려서 likeCount 요소의 내부 텍스트로 저장하세요. + likeCount.innerText = Number(count) + 1; // PUT YOUR CODE HERE... +}); + +// TODO2. 빨간색 하트를 눌렀을 때 +redHeart.addEventListener("click", () => { + // 검정 하트는 보여주고 빨간 하트는 숨기기 + blackHeart.style.display = "inline"; + redHeart.style.display = "none"; + + // likeCount 요소의 내부 텍스트를 취득하세요 + const count = likeCount.innerText; // PUT YOUR CODE HERE... + + // 좋아요 갯수를 하나 감소시켜 likeCount 요소의 내부 텍스트로 저장하세요. + likeCount.innerText = Number(count) - 1; // PUT YOUR CODE HERE... +}); + +// 실습 5 + +const deleteComment = (id) => { + // TODO1. commentsList 의 id번째 원소를 하나 삭제합니다. + // 우리가 각 comment의 id 를 commentsList 에서의 순서로 설정했기에 가능합니다. + commentsList.splice(id, 1); + + // TODO2. 새로운 commentsList에 map 함수를 호출하여 + // 댓글 HTML 노드들로 이루어진 배열을 만듭니다. + // join 함수를 이용해 배열 원소들을 하나의 스트링으로 만들어 + // commentContainer의 innerHTML에 저장합니다. + + commentContainer.innerHTML = commentsList + .map( + (comment, index) => ` +
+ ${comment} + comment +
` + ) + .join(""); +}; + +const footer = document.querySelector(".footer-message"); +footer.innerText = `Ⓒ ${new Date().getFullYear()} INSTAGRAM FROM META`; diff --git a/instagram.css b/instagram.css index 54e07b4..316523d 100644 --- a/instagram.css +++ b/instagram.css @@ -1,3 +1,79 @@ +.emoticon-box { + display: none; + justify-content: center; + flex-direction: column; + position: relative; + left: 140px; +} +.smile:hover { + opacity: 0.3; +} +.emoticon { + font-size: 32px; +} +#famous { + color: #737373; + font-size: 14px; +} +.notification { + display: none; + position: absolute; + left: 800px; + z-index: 2; +} +#black-heart:hover { + opacity: 0.3; +} +header:hover { + opacity: 0.5; +} + +.comment-wrapper:hover > .comment-delete-icon { + display: block; +} + +.comment-delete-icon { + width: 12px; + height: 12px; + cursor: pointer; + display: none; +} + +#like-count-text { + padding-left: 6px; + padding-bottom: 6px; +} + +#red-heart { + display: none; +} + +#profile-modal { + display: none; + width: 325px; + height: 250px; +} +.story-modal { + display: none; /* 모달창 숨겨 놓기 */ + position: fixed; + z-index: 1; /* 모달창을 제일 앞에 두기 */ + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; /* 스크롤 허용 auto */ + cursor: pointer; /* 마우스 손가락모양 */ + background-color: rgba(0, 0, 0, 0.8); /* 0.8은 투명도*/ +} + +#story-image { + border-radius: 20px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); /* 모달 가운데에 놓기 */ +} .main-container { display: flex; flex-direction: column; @@ -36,6 +112,8 @@ padding-right: 20%; padding-left: 20%; height: 20%; + position: relative; + z-index: 1; } .story-container .story-element { diff --git a/instagram.html b/instagram.html index f61dd59..312500a 100644 --- a/instagram.html +++ b/instagram.html @@ -14,6 +14,9 @@
+
+ min_.ns7님이 회원님의 게시물을 좋아합니다. +
@@ -36,6 +39,9 @@
jennierubyjane
+
+ +
@@ -44,22 +50,65 @@
+ \ +
+ +
- + + +
+ 좋아요 + 1003 +
-
- - - -
+
+
+ + + +
+
+
+
+
최고 인기 이모티콘
+
+ 😂 + 😮 + 😍 + 😢 + 👏 + 🔥 + 🎉 +
+ 💯 + ❤️ + 🤣 + 🥰 + 😘 + 😭 + 😊 +
+
+ + +