Instagramクローンコードコメント

20609 ワード
html JavaScript クローンエンコーディング CSS instragram テキストリンク
HTML、CSS、Javascriptを学んだ後、初めてクローンコードを試しました.
クローンエンコーディングオブジェクトは、「instagram」トピック로그인、메인のWebページです.
作業時間は約1週間で、作業焦点は以下のように設定されています.
  • HTML、CSSを使用して、同じ内容を最大限にコピーします.
  • javascriptを使用して実装事項を設定し、動的機能を実現します.

    • 1. Login-Page



    ログインページの作成は思ったほど難しくありません.
    HTMLとCSSを使って簡略化し、Javascriptを使って簡単な機能しか実現していません.
    Github: https://github.com/shinsewon/instagram/tree/master/sewonshin
    まだダウンの使い方に慣れていないので、何度か試行錯誤をして、やっと提出しました…
    (最初は、提出した情報は丁寧に書かれていましたが、ダメ、ダメ、書いたばかりの内容は提出されていましたが、これは内緒ではありません…)

    1. Login-html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>repl.it</title>
    <link href="styles/common.css" rel="stylesheet" type="text/css" />
    <link href="styles/login.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="main-container">
      <header class="logo">
        <div>
          <img class="logoPicture" src="img/logo_text.png" alt="인스타 로고" />
        </div>
      </header>
      <contant class="login-container">
        <input
          type="id"
          class="id"
          placeholder="전화번호,사용자 이름 또는 이메일"
        />
        <input type="password" class="password" placeholder="비밀번호" />
        <button class="loginBtn">로그인</button>
      </contant>
      <footer>비밀번호를 잊으셨나요 ?</footer>
    </div>
    <script src="js/login.js"></script>
  </body>
</html>

    2. Login-CSS

    * {
  box-sizing: border-box;
}

body {
  background-color: #fafafa;
}
.main-container {
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: wrap;
  width: 350px;
  height: 380px;
  margin: 200px auto;
  background-color: #fff;
  border: 1px solid #dbdbdb;
}
.logo {
  text-align: center;
}

.logoPicture {
  margin: 35px 0;
}

.login-container input {
  display: block;
  width: 270px;
  height: 36px;
  padding: 8px;
  color: rgba(var(--i1d, 38, 38, 38), 1);
  font-family: -apple-;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
}
.loginBtn {
  width: 268px;
  height: 30px;
  margin: 15px;
  background-color: #b9dffc;
  color: white;
  border: none;
  border-radius: 5px;
}

h1 {
  font-size: 50px;
  font-color: red;
}

input {
  margin: 3px auto;
  background-color: #fafafa;
  font-size: 12px;
}

footer {
  position: relative;
  top: 65px;
  color: rgba(var(--fe0, 0, 55, 107), 1);
  font-size: 12px;
  text-align: center;
}

    3. Login-javascript

    
const loginButton = document.querySelector(".loginBtn");

loginButton.addEventListener("click", function () {
  const loginId = document.querySelector(".id").value;
  const loginPassword = document.querySelector(".password").value;

  loginId && loginPassword
    ? (document.querySelector(".loginBtn").style.backgroundColor = "blue")
    : 0;
});

    総評🔥

  • 全体から見るとhtml、cssは難しくない.(合計2時間)
    • 無差別なdivタグを使うよりも、有意義なcimanticタグを使うほうがいいです.
  • javascriptダイナミックインプリメンテーション機能は、「ログインボタン」と「パスワードボタン」を入力したときにログインボタンをアクティブにし、ログインボタンの色の変化を実現する機能です.
  • の3つの演算子を用いてコード量を減少させ,毒性を向上させた.
    • Linux/Windows構成config ssh接続を使用
    Wiresharkは、フィルタの最初の10をよく表示します.