commit minseok

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 = `
+    <div class="comment-wrapper">
+      <span class="comment">${commentText}</span>
+      <img
+        id="${commentId}" 
+        class="comment-delete-icon" 
+        onclick="deleteComment(${commentId})" 
+        src="./images/close.png" 
+        alt="comment" 
+      />
+    </div>
+  `;
+
+  // TODO3. "written-comments-container"에 댓글 HTML노드를 추가해주기
+  // 채팅창 값은 비워주기
+  commentContainer.innerHTML = commentContainer.innerHTML + commentNode;
+  commentInput.value = "";
+  emoticon.style.display = "none";
+});

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) => `
+  <div class="comment-wrapper">
+    <span class="comment">${comment}</span>
+    <img id="${index}" class="comment-delete-icon" onclick="deleteComment(${index})" src="./images/close.png" alt="comment" />
+  </div>`
+    )
+    .join("");
+};
+
+const footer = document.querySelector(".footer-message");
+footer.innerText = `Ⓒ ${new Date().getFullYear()} INSTAGRAM FROM META`;

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 {

instagram.html

@@ -14,6 +14,9 @@
         <img class="icon-list" src="./images/icon_list.png" />
       </header>
       <div class="content-container">
+        <div id="notification" class="notification">
+          min_.ns7님이 회원님의 게시물을 좋아합니다.
+        </div>
         <div class="story-container">
           <div class="story-element">
             <div class="story"></div>
@@ -36,6 +39,9 @@
             <div class="story-owner">jennierubyjane</div>
           </div>
         </div>
+        <div class="story-modal">
+          <img id="story-image" src="./images/profile.png" />
+        </div>
         <section class="article-container">
           <div class="profile-container">
             <div class="profile">
@@ -44,22 +50,65 @@
             </div>
             <div class="menu"></div>
           </div>
+          \
+          <div class="profile-modal">
+            <img id="profile-modal" src="./images/likelion_snu.png" />
+          </div>
           <img class="article" src="./images/article.jpg" />
           <div class="button-container">
-            <img class="feed-buttons" src="./images/feed_like_button.png" />
+            <img
+              class="feed-buttons"
+              id="black-heart"
+              src="./images/feed_like_button.png"
+            />
+            <img
+              id="red-heart"
+              class="feed-buttons"
+              src="./images/red-heart.png"
+            />
             <img class="feed-buttons" src="./images/feed_comment_button.png" />
             <img class="feed-buttons" src="./images/feed_share_button.png" />
+            <div id="like-count-text">
+              <span>좋아요</span>
+              <span id="like-count">1003</span>
+            </div>
           </div>
-          <div class="comment-container">
-            <img class="smile" src="./images/smile.png" />
-            <input class="comment" placeholder="댓글 달기..." />
-            <button class="comment-button">게시</button>
-          </div>
+          <form class="comments-create-form">
+            <div class="comment-container">
+              <img class="smile" src="./images/smile.png" />
+              <input class="comment" placeholder="댓글 달기..." />
+              <button type="submit" class="comment-button">게시</button>
+            </div>
+          </form>
+          <div class="written-comments-container"></div>
         </section>
       </div>
+      <div class="emoticon-box">
+        <div id="famous">최고 인기 이모티콘</div>
+        <div class="emoticon">
+          <span class="emoticon-image" id="emo1">😂</span>
+          <span class="emoticon-image" id="emo2">😮</span>
+          <span class="emoticon-image" id="emo3">😍</span>
+          <span class="emoticon-image" id="emo4">😢</span>
+          <span class="emoticon-image" id="emo5">👏</span>
+          <span class="emoticon-image" id="emo6">🔥</span>
+          <span class="emoticon-image" id="emo7">🎉</span>
+          <div></div>
+          <span class="emoticon-image" id="emo8">💯</span>
+          <span class="emoticon-image" id="emo9">❤️</span>
+          <span class="emoticon-image" id="emo10">🤣</span>
+          <span class="emoticon-image" id="emo11">🥰</span>
+          <span class="emoticon-image" id="emo12">😘</span>
+          <span class="emoticon-image" id="emo13">😭</span>
+          <span class="emoticon-image" id="emo14">😊</span>
+        </div>
+      </div>
+
       <footer>
-        <p class="footer-message">Ⓒ2024 LIONGRAM</p>
+        <p class="footer-message">Ⓒ2023 LIONGRAM</p>
       </footer>
     </main>
+    <script src="./instagram.js"></script>
+    <script src="./insta.js"></script>
   </body>
 </html>