westagram main page

EJ__OH·2021년 11월 14일
JavaScriptjs
0

main.html

<!DOCTYPE html>
<html lang="en">
  <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" />
    <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/c491e52303.js"
      crossorigin="anonymous"
    ></script>
    <title>Westagram Main</title>
  </head>
  <body>
    <nav>
      <div class="navWrapper">
        <div class="logoAndName">
          <img class="logo" src="src/instagram.png" alt="instagramLogo" />
          <span class="name">Westagram</span>
        </div>
        <input type="text" placeholder="검색" />
        <ul class="icons">
          <li class="navigate"><img src="src/explore.png" alt="explore" /></li>
          <li class="likeIssue"><img src="src/heart.png" alt="heart" /></li>
          <li class="myInfo"><img src="src/profile.png" alt="profile" /></li>
        </ul>
      </div>
    </nav>
    <main>
      <div class="feeds">
        <article>
          <div class="feedUpper">
            <div class="imageAndID">
              <img class="profileImage" src="src/profile_of_ej__oh.JPG" />
              <div class="profileId">ej__oh</div>
            </div>
            <i class="fas fa-ellipsis-h"></i>
          </div>
          <div class="feedImage">
            <img src="src/mangorookie.jpeg" alt="mangoAndRookie" />
          </div>
          <div class="feedInfo">
            <div class="feedIcons">
              <div class="iconsLeft">
                <img src="src/heart.png" alt="heart" />
                <img src="src/reply.png" alt="reply" />
                <img src="src/dmbutton.png" alt="dmbutton" />
              </div>
              <img class="iconsRight" src="src/save.png" alt="save" />
            </div>
            <div class="feedLike">
              <img class="profileImage" src="src/profile_of_ej__oh.JPG" />
              <div class="liketext">
                <span>jrong.__</span> 님 외 <span>1500</span> 명이 좋아합니다
              </div>
            </div>
            <div class="feedText">
              <span class="profileId">ej__oh</span>
              <span class="feedDescription"
                >위워크에서 진행한 베이킹 클래스 ...</span
              >
              <button class="showMoreBtn">더 보기</button>
            </div>
            <div class="reply"></div>
            <div class="hoursAgo">42분 전</div>
          </div>
          <div class="replyAndBtn">
            <input
              onkeyup="enterkey()"
              type="text"
              class="reply"
              placeholder="댓글 달기..."
            />
            <button class="replyBtn">게시</button>
          </div>
        </article>
      </div>
      <div class="main-right">
        <div class="rightMyProfile">
          <img class="image" src="src/profile_of_ej__oh.JPG" alt="ej__oh" />
          <div class="profileIdAndText">
            <div class="profileId">ej__oh</div>
            <div class="profileText">Hi || Wecoder__27</div>
          </div>
        </div>
        <div class="rightStory">
          <div class="upper">
            <div class="title">스토리</div>
            <button class="showAll">모두 보기</button>
          </div>
          <div class="othersWrapper">
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
            </div>
          </div>
        </div>
        <div class="recommend">
          <div class="upper">
            <div class="title">회원님을 위한 추천</div>
            <button class="showMore">모두 보기</button>
          </div>
          <div class="othersWrapper">
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
              <button class="followOther">팔로우</button>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
              <button class="followOther">팔로우</button>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
              <button class="followOther">팔로우</button>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
              <button class="followOther">팔로우</button>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
              <button class="followOther">팔로우</button>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
              <button class="followOther">팔로우</button>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
              <button class="followOther">팔로우</button>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
              <button class="followOther">팔로우</button>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
              <button class="followOther">팔로우</button>
            </div>
            <div class="othersProfile">
              <img src="src/profile_of_ej__oh.JPG" alt="ej__oh" class="image" />
              <div class="others">
                <div class="profileId">ej__oh</div>
                <div class="ago">15분 전</div>
              </div>
              <button class="followOther">팔로우</button>
            </div>
          </div>
        </div>
        <div class="rightInfo">
          소개·도움말·홍보·센터·API·채용 정보·개인정보처리방침·약관·위치·인기
          계정·해시태그·언어
          <br /><br />© 2021 INSTAGRAM FROM META
        </div>
      </div>
    </main>
    <script src="js/main.js"></script>
  </body>
</html>

src/main.css

body {
  background-color: #fafafa;
}

button {
  border: none;
  background-color: transparent;
}

input:focus {
  outline: none;
}

/* nav header styling */
nav {
  display: flex;
  justify-content: center;
  height: 55px;
  border-bottom: 1px solid lightgrey;
  background-color: white;
}

.navWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 935px;
  padding: 0 20px;
}

.logoAndName {
  display: flex;
  justify-content: baseline;
  width: 200px;
}

nav .logoAndName .logo {
  height: 30px;
  padding-right: 14px;
  border-right: 2px solid #171717;
  color: #171717;
}

.logoAndName .name {
  text-align: center;
  padding-left: 14px;
  color: #171717;
  font-family: "Lobster", cursive;
  font-size: 26px;
}

nav input {
  width: 200px;
  height: 30px;
  padding: 7px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  background-color: #fafafa;
}

ul.icons {
  display: flex;
  justify-content: space-between;
  width: 150px;
}

nav .icons li img {
  height: 25px;
}

/* main styling */
main {
  position: relative;
  width: 935px;
  margin: 0 auto;
  padding: 30px 0px 0px;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

.feeds article {
  width: 616px;
  border: 1px solid lightgrey;
  background-color: white;
}

/* feedUpper styling */
.feeds article .feedUpper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 14px;
}

.feeds article .feedUpper .imageAndID {
  display: flex;
  justify-content: flex-start;
}

.feeds article .feedUpper .imageAndID .profileImage {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.feeds article .feedUpper .imageAndID .profileId {
  margin: auto 0;
  margin-left: 15px;
  padding: 2px;
  font-weight: 600;
}

.feeds article .feedUpper i {
  font-size: 15px;
}

/* feedImage styling */
.feeds article .feedImage {
  height: 614px;
}

.feeds article .feedImage img {
  width: 100%;
  height: 100%;
}

/* feedInfo styling */
.feeds article .feedInfo {
  position: relative;
}

/* feedIcons styling */
.feeds article .feedInfo .feedIcons {
  display: flex;
  justify-content: space-between;
  box-sizing: content-box;
  height: 40px;
  padding: 6px 16px 8px;
}

.feeds article .feedInfo .feedIcons .iconsLeft img {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 8px;
}

.feeds article .feedInfo .feedIcons .iconsRight {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 8px;
}

.feeds article .feedInfo .feedIcons .iconsLeft img:first-child {
  padding-left: 0px;
}

/* feedLike styling */
.feeds article .feedInfo .feedLike {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 18px;
  margin-bottom: 8px;
  padding: 0px 16px;
}

.feeds article .feedInfo .feedLike .profileImage {
  width: 20px;
  height: 20px;
  border: 1px solid lightgrey;
  border-radius: 50%;
}

.feeds article .feedInfo .feedLike .liketext {
  margin-left: 10px;
  font-size: 14px;
}

.feeds article .feedInfo .feedLike .liketext span {
  font-weight: 600;
}

/* feedText styling */
.feeds article .feedInfo .feedText {
  padding: 0px 16px;
}

.feeds article .feedInfo .feedText {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
}

.feeds article .feedInfo .feedText .profileId {
  margin-right: 10px;
  font-size: 16px;
  font-weight: 600;
}

.feeds article .feedInfo .feedText .feedDescription {
  font-size: 14px;
  font-weight: 400;
}

.feeds article .feedInfo .feedText .showMoreBtn {
  border: none;
  background-color: transparent;
  color: #8e8e8e;
}

/* reply styling */
.feeds article .feedInfo .reply .replyChunk {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  padding: 0px 16px;
}

.feeds article .feedInfo .reply .replyItSelf {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.feeds article .feedInfo .reply .replyItSelf .shownReplyId {
  margin-right: 10px;
  font-size: 14px;
  font-weight: 600;
}

.feeds article .feedInfo .reply .replyItSelf .shownReplyText {
  font-size: 14px;
  font-weight: 400;
}

.feeds article .feedInfo .reply img {
  box-sizing: content-box;
  width: 14px;
  height: 14px;
}

/* hoursAgo styling */
.feeds article .feedInfo .hoursAgo {
  display: flex;
  align-items: center;
  height: 19px;
  margin: 0 0 16px;
  padding: 0px 16px;
  font-size: 10px;
}

/* reply and button styling */
.feeds article .replyAndBtn {
  display: flex;
  justify-content: space-between;
  height: 48px;
  padding: 6px 16px;
  border-top: 1px solid lightgrey;
}

.feeds article .replyAndBtn .reply {
  border: none;
  width: 90%;
  font-size: 14px;
  color: #262626;
}

.feeds article .replyAndBtn .replyBtn {
  border: none;
  background-color: transparent;
  color: #cce6fd;
  font-size: 14px;
}

.main-right {
  position: fixed;
  top: 85px;
  right: 220px;
  width: 293px;
}

.main-right .rightMyProfile {
  display: flex;
  justify-content: flex-start;
  height: 56px;
}

.main-right .rightMyProfile .image {
  align-self: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.main-right .rightMyProfile .profileIdAndText {
  align-self: center;
  padding-left: 20px;
}

.main-right .rightMyProfile .profileIdAndText * {
  height: 18px;
  font-size: 14px;
}

.main-right .rightMyProfile .profileIdAndText .profileId {
  font-weight: 600;
}

.main-right .rightMyProfile .profileIdAndText .profileText {
  color: #8e8e8e;
}

.upper button {
  font-size: 12px;
  font-weight: 600;
  color: #262626;
}

.main-right .rightStory {
  height: 200px;
  margin-top: 15px;
  border: 1px solid lightgrey;
  background-color: white;
  overflow-y: scroll;
}

.main-right .rightStory .upper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  padding: 0 10px;
}

.main-right .rightStory .upper .title {
  font-size: 14px;
  font-weight: 600;
  color: #8e8e8e;
}

/* othersWrapper styling */
.othersWrapper {
  margin: 0 10px;
}

.othersWrapper .othersProfile {
  display: flex;
  justify-content: flex-start;
  position: relative;
  height: 48px;
  padding: 8px 0px;
}

.othersWrapper .othersProfile img {
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.othersWrapper .othersProfile .others {
  align-self: center;
  margin: auto 0px;
  padding-left: 10px;
  font-weight: 600;
}

.othersWrapper .othersProfile .others .profileId {
  height: 17px;
  padding-top: 2px;
  font-size: 14px;
}

.othersWrapper .othersProfile .others .ago {
  height: 16px;
  padding-top: 2px;
  font-size: 12px;
  color: #8e8e8e;
}

.main-right .recommend {
  height: 175px;
  margin-top: 15px;
  border: 1px solid lightgrey;
  background-color: white;
  overflow-y: scroll;
}

.main-right .recommend .upper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  margin: 0 10px;
  font-weight: 600;
}

.main-right .recommend .upper .title {
  font-size: 14px;
  color: #8e8e8e;
}

.main-right .othersProfile button {
  position: absolute;
  right: 0px;
  top: 16px;
  color: #0095f6;
  font-weight: 600;
  line-height: 16px;
  font-size: 12px;
}

.main-right .rightInfo {
  margin-top: 20px;
  font-size: 11px;
  line-height: 13px;
  font-weight: 400;
  color: #c7c7c7;
}

@media screen and (max-width: 1300px) {
  .main-right {
    display: none;
  }
}

js/main.js

const replyInput = document.querySelector(".replyAndBtn .reply");
const replyBtn = document.querySelector(".replyAndBtn .replyBtn");
// const heartIcon = document.querySelector(".imgHeartIcon");
let reply;

function handleReply() {
  if (reply) {
    // div, span, img 태그 생성하고 class 부여
    const DivReplyChunk = document.createElement("div");
    DivReplyChunk.className = "replyChunk";
    const DivReplyItSelf = document.createElement("div");
    DivReplyItSelf.className = "replyItSelf";
    const SpanShownReplyId = document.createElement("span");
    SpanShownReplyId.className = "shownReplyId";
    const SpanReplyText = document.createElement("span");
    SpanReplyText.className = "shownReplyText";
    const ImgHeartIcon = document.createElement("img");
    ImgHeartIcon.className = "imgHeartIcon";
    ImgHeartIcon.setAttribute("src", "src/heart.png");

    //imghearticon이라는 클라스를 가지고 있는 img 태그가 클릭 이벤트 생기면
    // redheart 이미지로 바뀌는 기능
    ImgHeartIcon.addEventListener("click", () => {
      ImgHeartIcon.removeAttribute("src");
      ImgHeartIcon.setAttribute("src", "src/redheart.png");
    });

    // 생성된 2개의 span 태그에 각각 아이디와 reply를 content로 부여
    SpanShownReplyId.innerText = "canon_mj";
    SpanReplyText.innerHTML = reply;

    // 이제 레이아웃대로 만들어진 태그들 차곡차곡 쌓기
    const divReply = document.querySelector(".reply");
    divReply.appendChild(DivReplyChunk);
    DivReplyChunk.appendChild(DivReplyItSelf);
    DivReplyItSelf.appendChild(SpanShownReplyId);
    DivReplyItSelf.appendChild(SpanReplyText);
    DivReplyChunk.appendChild(ImgHeartIcon);

    // 댓글 입력창 비우고 reply에 빈 문자열 할당
    replyInput.value = "";
    reply = "";
  }
}

// event handler
function init() {
  replyInput.addEventListener("input", () => {
    reply = replyInput.value;
  });
  replyBtn.addEventListener("click", handleReply);
}
init();

function enterkey() {
  if (window.event.keyCode == 13) {
    handleReply();
  }
}

login page와 마찬가지로 생각나는 기능은 깃헙에 계속 업데이트 예정... 궁금하시면 github/eojine94 커몬~!

profile
EJ__OH
Junior FE Developer
이전 포스트

westagram login page

다음 포스트

[React] Hook, Props, State

0개의 댓글

관련 채용 정보