wecode-bootcamp-korea · SK0414 · Sep 8, 2021 · Sep 10, 2021 · Sep 12, 2021
diff --git a/students/16th/README.md b/students/16th/README.md
diff --git a/students/16th/joonsikyang/js/login.js b/students/16th/joonsikyang/js/login.js
diff --git a/students/16th/joonsikyang/js/main.js b/students/16th/joonsikyang/js/main.js
diff --git a/students/16th/joonsikyang/login.html b/students/16th/joonsikyang/login.html
diff --git a/students/16th/joonsikyang/main.html b/students/16th/joonsikyang/main.html
diff --git a/students/17th/README.md b/students/17th/README.md
diff --git a/students/18th/README.md b/students/18th/README.md
diff --git a/students/19th/README.md b/students/19th/README.md
diff --git a/students/20th/README.md b/students/20th/README.md
diff --git a/students/21th/README.md b/students/21th/README.md
diff --git a/students/22th/README.md b/students/22th/README.md
diff --git a/students/23th/README.md b/students/23th/README.md
diff --git a/students/24th/README.md b/students/24th/README.md
diff --git a/students/25th/seungkyun/imgs/IMG_1113.JPG b/students/25th/seungkyun/imgs/IMG_1113.JPG
diff --git a/students/25th/seungkyun/imgs/IMG_1455.jpeg b/students/25th/seungkyun/imgs/IMG_1455.jpeg
diff --git a/students/25th/seungkyun/imgs/IMG_2082.jpeg b/students/25th/seungkyun/imgs/IMG_2082.jpeg
diff --git a/students/25th/seungkyun/imgs/IMG_2304.PNG b/students/25th/seungkyun/imgs/IMG_2304.PNG
diff --git a/students/25th/seungkyun/js/login.js b/students/25th/seungkyun/js/login.js
@@ -0,0 +1,15 @@
+const id = document.getElementById('idfield');
+const pw = document.getElementById('pwfield');
+const submitButton = document.getElementById('submitButton');
+
+document.addEventListener('keyup', function() {
+    if (id.value != "" && pw.value != "") {
+      submitButton.style.backgroundColor = "#0095F6";
+      submitButton.disabled = false;
+      submitButton.style.cursor = "pointer";
+    } else {
+      submitButton.style.backgroundColor = "#B2DFFC";
+      submitButton.disabled = true;
+      submitButton.style.cursor = "default";
+    }
+});
diff --git a/students/25th/seungkyun/js/main.js b/students/25th/seungkyun/js/main.js
@@ -0,0 +1,32 @@
+const textField = document.querySelector(".commentField");
+const textfieldBtn = document.querySelector(".uploadComment");
+const commentLine = document.querySelector(".picText");
+const userName = "anonymous1234"
+
+// text 입력 시 버튼 활성화
+document.addEventListener('keyup', function() {
+  if (textField.value != "") {
+    textfieldBtn.style.opacity = "1.0";
+    textfieldBtn.disabled = false;
+    textfieldBtn.style.cursor = "pointer";
+  } else {
+    textfieldBtn.style.opacity = "0.5";
+    textfieldBtn.disabled = true;
+    textfieldBtn.style.cursor = "default";
+  }
+})
+
+textfieldBtn.addEventListener('click', () => addComment())
+textField.addEventListener('keypress', e =>
+{if (e.key == 'Enter') {addComment()}});
+
+function addComment() {
+  let getComment = textField.value;
+  let inputComment = document.createElement('div');
+  inputComment.className = "commentLines";
+  inputComment.innerHTML = `<div><a href="#">${userName}</a><span>${getComment}</span></div>
+    <img alt="heart img" class="commentHeart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" />`;
+
+  commentLine.appendChild(inputComment);
+  textField.value = "";
+}
diff --git a/students/25th/seungkyun/login.html b/students/25th/seungkyun/login.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WEstagram</title>
+  <link rel="stylesheet" href="style/common.css">
+  <link rel="stylesheet" href="style/login.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div class="container">
+
+    <div class="instagram_logo">WEstargram</div>
+    <div class="input_wrapper">
+      <div class="textfield_wrapper">
+        <input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" id="idfield" class="textfield">
+        <input type="password" placeholder="비밀번호" id="pwfield" class="textfield">
+      </div>
+        <button class="submitButton" disabled="true" id="submitButton">로그인</button>
+    </div>
+    <a href="" class="forgetpw">비밀번호를 잊으셨나요?</a>
+  </div>
+  <script defer src="js/login.js"></script>
+</body>
+</html>
diff --git a/students/25th/seungkyun/main.html b/students/25th/seungkyun/main.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WEstagram</title>
+    <link rel="stylesheet" href="style/common.css" />
+    <link rel="stylesheet" href="style/main.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet" />
+    <script src="https://kit.fontawesome.com/6584921572.js" crossorigin="anonymous"></script>
+  </head>
+  <body>
+    <nav class="navPostionSet">
+      <div class="navContainer">
+        <div class="navLeft">
+          <i class="fab fa-instagram"></i>
+          <a class="westagramLogo" href="main.html">WEstargram</a>
+        </div>
+        <div class="navCenter">
+          <input type="text" class="searchField" placeholder="검색" />
+          <i class="fas fa-search"></i>
+        </div>
+        <div class="navRight">
+          <a href="#"><img alt="explore img" class="navIcons" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png" /></a>
+          <a href="#"><img alt="heart img" class="navIcons" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" /></a>
+          <a href="#"><img alt="profile img" class="navIcons" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png" /></a>
+        </div>
+      </div>
+    </nav>
+    <main class="bodyContainer">
+      <article class="feeds">
+        <div class="feedHeader">
+          <img alt ="personalPictureInFeeds" src="imgs/IMG_1113.JPG">
+          <div class="feedHeaderInside">
+            <a class="accountName" href="#">seungkyun_y</a>
+            <button><i class="fas fa-ellipsis-h"></i></button>
+          </div>
+        </div>
+        <img alt="Main Images" class="feedImage" src="imgs/IMG_2082.jpeg" />
+        <div class="iconsContainer">
+          <div class="iconsLeft">
+            <button><i class="far fa-heart"></i></button>
+            <button><i class="far fa-comment"></i></button>
+            <button><i class="far fa-paper-plane"></i></button>
+          </div>
+          <div class="iconsRight">
+            <button><i class="far fa-bookmark"></i></button>
+          </div>
+        </div>
+        <div class="likePersonContainer">
+          <div class="likeBySomeone">
+            <a href=""><img alt="someone's personal Image" class="likePersonPic" src="imgs/IMG_1113.JPG" /></a>
+            <div class="likePersonText"><a src="##">사람이름</a>님&nbsp;<a>외 <span>00명</span></a>이 좋아합니다</div>
+          </div>
+        </div>
+        <div class="commentContainer">
+          <div class="picText">
+            <div><a href="#">seungkyun_y</a><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolores aliquam ut, perspiciatis perferendis soluta autem tempore mollitia laborum voluptas est eligendi eius error velit quam eos ipsum tempora reprehenderit.</span></div>
+            <div class="commentLines">
+              <div><a href="#">user_1234</a><span>Sample Text</span></div>
+              <img alt="heart img" class="commentHeart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" />
+            </div>
+          </div>
+        </div>
+        <div class="days">
+          <time datetime="20:00"></time>
+          <time class="" datetime="2021-09-10T13:55:10" title="2021년 9월 10일">1일 전</time>
+        </div>
+        <div class="makeComment">
+          <div class="makeCommentContainer">
+            <button><i class="far fa-smile"></i></button>
+            <textarea class="commentField" placeholder="댓글 달기..."></textarea>
+            <button class="uploadComment" disabled="true">게시</button>
+          </div>
+        </div>
+      </article>
+      <aside>
+        <div class="sideBarContainer">
+          <div class="aboutMeInSide">
+            <img alt ="personalPictureInFeed" class="myImageInSide" src="imgs/IMG_1113.JPG" />
+            <div class="aboutMeNames">
+              <div><a>seungkyun_y</a></div>
+              <div><a>SEUNGKYUN HONG</a></div>
+            </div>
+            <button>전환</button>
+          </div>
+          <div class="personalRecommendContainer">
+            <div class="personalRecommendHeader">
+              <span>회원님을 위한 추천</span>
+              <a href="#">모두 보기</a>
+            </div>
+            <div class="personalRecommendMain">
+              <div class="recommendPicbox">
+                <img alt ="" class="recommendForYouPic" src="imgs/IMG_1455.jpeg" />
+              </div>
+              <div class="personalRecommendID">
+                <div><a>seungkyun_y</a></div>
+                <div>회원님을 팔로우합니다</div>
+              </div>
+              <div>
+                <button>팔로우</button>
+              </div>
+            </div>
+          </div>
+          <footer>
+            <p><a href="#">소개</a>﹒<a href="#">도움말</a>﹒<a href="#">홍보 센터</a>﹒<a href="#">API</a>﹒<a href="#">채용</a>﹒<a href="#">정보</a>﹒<a href="#">개인정보관리방침</a>﹒<a href="#">약관</a>﹒<a href="#">위치</a>﹒<a href="#">인기계정</a>﹒<a href="#">해시태그</a>﹒<a href="#">언어</a></p>
+            <p>© 2021 INSTAGRAM FROM FACEBOOK</p>
+          </footer>
+        </div>
+      </aside>
+    </main>
+    <script defer src="js/main.js"></script>
+  </body>
+</html>
diff --git a/students/25th/seungkyun/style/common.css b/students/25th/seungkyun/style/common.css
@@ -0,0 +1,7 @@
+/* 공통적으로 필요한 style */
+
+* {
+  box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+}
diff --git a/students/25th/seungkyun/style/login.css b/students/25th/seungkyun/style/login.css
@@ -0,0 +1,69 @@
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height:100vh;
+}
+
+.container {
+  position: relative;
+  width : 350px;
+  height : 380px;
+  padding: 10px 0;
+  border: 1px solid #DBDBDB;
+  text-align: center;
+}
+
+.instagram_logo {
+  display: inline-block;
+  width: 175px;
+  height: 51px;
+  margin: 22px 0 12px 0;
+  font-family: 'Lobster', cursive;
+  font-size : 35px;
+}
+
+.textfield_wrapper {
+  margin-top: 24px;
+}
+
+.textfield {
+  width: 258px;
+  height: 36px;
+  padding: 9px 0px 7px 8px;
+  margin-bottom: 7px;
+  border: 1px solid #DBDBDB;
+  border-radius: 3px;
+  background-color: rgb(250, 250, 250);
+  font-size: 12px;
+}
+.textfield:focus {
+  outline: none;
+  border-color: #A8A8A8;
+}
+
+.submitButton {
+  width: 260px;
+  height: 30px;
+  margin: 8px 40px;
+  border: none;
+  border-radius: 3px;
+  background-color: #B2DFFC;
+  font-size: 14px;
+  font-weight:700;
+  color: white;
+}
+
+.forgetpw {
+  display: block;
+  position: absolute;
+  bottom: 20px;
+  width: 348px;
+  font-size:12px;
+  color: rgb(50,94,106);
+  text-decoration: none;
+}
+
+.forgetpw:visited, .forgetpw:link {
+  color: rgb(50,94,106);
+}