Skip to main content
HashnodeRey's Blog

Command Palette

Search for a command to run...

[Instagram Clone]Login Page

Updated
R
Rey Jang
Part of seriesProjects

Screenshot 2022-05-06 at 10.31.59.png Instagram Clone Coding Using HTML, CSS, and Vanilla Javascript

HTML

Head

-Add title and logo icon in title bar

<title>Westagram</title>
<link rel="icon" href="instagram.png" type="image/icon type">

-Link CSS files and Google font API

    <link rel="stylesheet" href="login.css" />
    <link rel="stylesheet" href="common.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" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,100&display=swap" rel="stylesheet" />


Body

-Log in container

   <div class="login-container">
      <h1>Westagram</h1>
      <form></form>
      <div class="divider">OR</div>
      <div class="fb-wrapper"></div>
      <div class="forgot-wrapper"></div>
    </div>

-Log in form

      <form>
        <input type="text" placeholder="Phone number, username or email address" class="login-input" id="id">
        <input type="password" placeholder="Password" class="login-input" id="pw" onkeydown="activateBtn()">
        <button class="login-btn">Log In</button>
      </form>

-Horizontal line(divider)

<div class="divider">OR</div>

-Log in with Facebook 

      <div class="fb-wrapper">
        <div class="fb">
          <a href="https://facebook.com"><img src="img/facebook.png">
            Log in with Facebook
          </a>
        </div>
      </div>

-Finding password

      <div class="forgot-wrapper">
        <div class="forgot">
          <a href="https://www.instagram.com/accounts/password/reset/">Forgotten your password?</a>
        </div>
      </div>

-Sign up div

    <div class="sign-up">
      <p>Don't have an account? <a href="https://www.instagram.com/accounts/emailsignup/">Sign up</a></p>
    </div>


CSS

-Common

* {
    background-color: #f8f8f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

button, .icon {
    cursor: pointer;
}

form {
    background-color: #fff;
}

-Log in container

.login-container {
    height: 450px;
    width: 400px;
    border: 1px solid lightgrey;
    background-color: #fff;
    margin: 40px auto 0;
}

.login-container h1 {
    text-align: center;
    margin: 50px 0 50px 0;
    background-color: #fff;
    font-family: 'Lobster', cursive;
}

.login-input {
    display: block;
    box-sizing: border-box;
    border: 1px solid lightgrey;
    border-radius: 3px;
    background-color: rgba(250, 250, 250, 1);
    box-shadow: 0 1px #fff;
    height: 40px;
    width: 320px;
    padding: 10px;
    margin: 0 auto;
    font-size: 13px;
}

.login-input:first-child {
    margin-bottom: 10px;
}

.login-input:nth-child(2) {
    margin-bottom: 20px;
}

.login-btn {
    display: block;
    box-sizing: border-box;
    background-color: rgba(56, 151, 240, 0.3);
    border-style: none;
    border-radius: 5px;
    width: 320px;
    padding: 8px;
    margin: 0 auto;
    color: #fff;
}

-divider

.divider {
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    color:rgb(165, 164, 164);
    font-size: 13.5px;
    font-weight: 500;
    margin: 20px 0 0 40px;
    width: 320px;
    background-color: #fff;
  }

  .divider:before, .divider:after {
    background-color: rgb(224, 221, 221);
    content: "";
    display: inline-block;
    height: 1.2px;
    position: relative;
    vertical-align: middle;
    width: 50%;
  }

  .divider:before {
    right: 2em;
    margin-left: -50%;
  }

  .divider:after {
    left: 2em;
    margin-right: -50%;
  }

-Facebook wrapper

.fb-wrapper {
      text-align: center;
      margin-top: 25px;
  }

  .fb {
    background-color: #fff;
  }

  .fb a {
      text-decoration: none;
      color: #050570;
      font-size: 15px;
      font-weight: 500;
      vertical-align: middle;
      display: inline;
      background: #fff;
  }

  .fb img {
      width: 15px;
      vertical-align: middle;
      margin-right: 5px;
  }

-Forgot password wrapper

.forgot-wrapper {
      text-align: center;
      margin-top: 25px;
  }

  .forgot {
    background-color: #fff;
  }

  .forgot a {
      text-decoration: none;
      color: rgb(107, 106, 106);
      font-size: 14px;
      background: #fff;
  }

-Sign up wrapper

.sign-up {
    height: 80px;
    width: 400px;
    border: 1px solid lightgrey;
    background-color: #fff;
    margin: 10px auto 0;
    text-align: center;
}

.sign-up p {
    box-sizing: border-box;
    margin: 30px 0 30px 0;
    font-size: 16px;
    color: #484848;
    background-color: #fff;
}

.sign-up p a {
    text-decoration: none;
    font-weight: 600;
    color: #19B5FE;
    background: #fff;
}


JavaScript

-Activate the log in button when the user filled both of the ID and Password form

function activateBtn() {
    if ((document.getElementById('id').value !== "") && (document.getElementById('pw').value !== "")) {
        document.querySelector('.login-btn').style.background = "#0096FF";
    }
}

//add onkeydown event attribute to the password input tag


Output 👇


To Do✔️

  • ID/PW Validation
  • Add Footer
  • Link to the main page
  • Refactoring


Entire Code 👇

-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" />
    <title>Westagram</title>
    <link rel="stylesheet" href="login.css" />
    <link rel="stylesheet" href="common.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" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,100&display=swap" rel="stylesheet" />
    <link rel="icon" href="instagram.png" type="image/icon type">
  </head>
  <body>
    <div class="login-container">
      <h1>Westagram</h1>
      <form>
        <input type="text" placeholder="Phone number, username or email address" class="login-input" id="id">
        <input type="password" placeholder="Password" class="login-input" id="pw" onkeydown="activateBtn()">
        <button class="login-btn">Log In</button>
      </form>
      <div class="divider">OR</div>
      <div class="fb-wrapper">
        <div class="fb">
          <a href="https://facebook.com"><img src="img/facebook.png">
            Log in with Facebook
          </a>
        </div>
      </div>
      <div class="forgot-wrapper">
        <div class="forgot">
          <a href="https://www.instagram.com/accounts/password/reset/">Forgotten your password?</a>
        </div>
      </div>
    </div>
    <div class="sign-up">
      <p>Don't have an account? <a href="https://www.instagram.com/accounts/emailsignup/">Sign up</a></p>
    </div>

    <script src="login.js"></script>
  </body>
</html>

-CSS

* {
    background-color: #f8f8f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

button, .icon {
    cursor: pointer;
}

form {
    background-color: #fff;
}
.login-container {
    height: 450px;
    width: 400px;
    border: 1px solid lightgrey;
    background-color: #fff;
    margin: 40px auto 0;
}

.login-container h1 {
    text-align: center;
    margin: 50px 0 50px 0;
    background-color: #fff;
    font-family: 'Lobster', cursive;
}

.login-input {
    display: block;
    box-sizing: border-box;
    border: 1px solid lightgrey;
    border-radius: 3px;
    background-color: rgba(250, 250, 250, 1);
    box-shadow: 0 1px #fff;
    height: 40px;
    width: 320px;
    padding: 10px;
    margin: 0 auto;
    font-size: 13px;
}

.login-input:first-child {
    margin-bottom: 10px;
}

.login-input:nth-child(2) {
    margin-bottom: 20px;
}

.login-btn {
    display: block;
    box-sizing: border-box;
    background-color: rgba(56, 151, 240, 0.3);
    border-style: none;
    border-radius: 5px;
    width: 320px;
    padding: 8px;
    margin: 0 auto;
    color: #fff;
}

.divider {
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    color:rgb(165, 164, 164);
    font-size: 13.5px;
    font-weight: 500;
    margin: 20px 0 0 40px;
    width: 320px;
    background-color: #fff;
  }

  .divider:before,
  .divider:after {
    background-color: rgb(224, 221, 221);
    content: "";
    display: inline-block;
    height: 1.2px;
    position: relative;
    vertical-align: middle;
    width: 50%;
  }

  .divider:before {
    right: 2em;
    margin-left: -50%;
  }

  .divider:after {
    left: 2em;
    margin-right: -50%;
  }

  .fb-wrapper {
      text-align: center;
      margin-top: 25px;
  }

  .fb {
    background-color: #fff;
  }

  .fb a {
      text-decoration: none;
      color: #050570;
      font-size: 15px;
      font-weight: 500;
      vertical-align: middle;
      display: inline;
      background: #fff;
  }

  .fb img {
      width: 15px;
      vertical-align: middle;
      margin-right: 5px;
  }

  .forgot-wrapper {
      text-align: center;
      margin-top: 25px;
  }

  .forgot {
    background-color: #fff;
  }

  .forgot a {
      text-decoration: none;
      color: rgb(107, 106, 106);
      font-size: 14px;
      background: #fff;
  }

.sign-up {
    height: 80px;
    width: 400px;
    border: 1px solid lightgrey;
    background-color: #fff;
    margin: 10px auto 0;
    text-align: center;
}

.sign-up p {
    box-sizing: border-box;
    margin: 30px 0 30px 0;
    font-size: 16px;
    color: #484848;
    background-color: #fff;
}

.sign-up p a {
    text-decoration: none;
    font-weight: 600;
    color: #19B5FE;
    background: #fff;
}

-JavaScript

function activateBtn() {
    if ((document.getElementById('id').value !== "") && (document.getElementById('pw').value !== "")) {
        document.querySelector('.login-btn').style.background = "#0096FF";
    }
}
#web-development

Comments

Join the discussion

No comments yet. Be the first to comment.

Projects

Part 1 of 10
Up next

[Instagram Clone]Main Page Layout & Design

Instagram Clone Coding Using HTML, CSS, and Vanilla Javascript HTML & CSS Body Nav bar <nav class="navbar"> <div class="nav-wrapper"> <span class="logo">Westagram</span> <input type="text" placeholder="Search...

More from this blog

[Kream 클론 프로젝트] 상품 더보기 기능

목표 offset/limit parameter를 사용한 상품 더보기 기능 구현 과정 1. 상품 더보기 기능 상품 목록 하단의 더보기 버튼을 누를 때마다 상품을 8개씩 더 로딩해오는 기능을 구현하기위해 예전에 배웠던 query parameter와 offset/limit 개념을 활용했다. offset과 limit을 설정해두면 데이터 요청 후 받아온 결과값에 순서를 부여해서 offset부터 limit까지의 데이터만 보여줄 수 있도록 페이징 처리...

Jul 22, 2022

[Kream 클론 프로젝트] 상품 검색 & 정렬 기능

목표 상품의 검색과 옵션별 정렬이 가능한 상품 목록 페이지 구현 과정 1. 상품 목록(메인) 페이지 UI 1) Kream이 상품 거래 사이트이다보니 각 상품마다 동일하게 반복되는 양식들이 많았는데, 이 부분들을 전부 컴포넌트로 만들고 재사용함으로써 코드의 길이를 많이 줄일 수 있었다. 특히 2차 프로젝트에서는 styled components를 사용하면서 각 페이지마다 js파일의 코드 양이 두배로 많아지는 바람에 한번 작성하고나면 알아보기가...

Jul 22, 2022

[Lululemon 클론 프로젝트] 장바구니 페이지

목표 상품 추가 / 삭제 / 수량 변경이 가능한 장바구니 페이지 구현 과정 1. 상품 데이터 받아오기 1) 사용자가 장바구니에 넣은 상품들의 목록을 렌더링하기위해 fetch 함수로 서버에서 데이터를 받아온 후 'itemList' 변수에 저장해두었다 . 2) 사용자를 식별한 다음 그에 맞는 데이터를 불러와야하기때문에 request header에 로그인시 발급했던 토큰 인가 과정을 추가했다. 코드🔻 const Bag = () => { co...

Jun 11, 2022

[Lululemon 클론 프로젝트] 로그인/회원가입 페이지

목표 JWT 인증방식을 활용한 로그인/회원가입 페이지 구현 과정 1. 로그인/회원가입 페이지 UI 1) lululemon의 사이트는 로그인 페이지에서 회원가입 버튼 클릭시 양식이 슬라이드로 올라와 한 페이지에서 로그인과 회원가입을 모두 진행할 수 있는 방식으로 되어 있었다. 이를 구현하기 위해 로그인 양식과 회원가입 양식을 각각 컴포넌트로 만든 뒤 'modal' 변수의 상태값이 true인지 false인지에 따라 적절한 컴포넌트가 렌더링될 수 ...

Jun 11, 2022

Rey's Blog

49 posts