今日一日

9:50 amサイン
夜明けに寝ていたので、出発が少し遅れた.
今眠くてたまらない私はまだコーヒーで支えています.🧑🏻‍💻

westagram clone
作成したレイアウトの使用
[機能が実装されました]

Git&Github| by Junsik
gitとgithubで差を設定し、westagram githubで初期値を設定し、
知らなければならない命令を教えてくれた.

Westagram機能の実装

コードを行ごとに整理し、イベントのプロパティを理解しましょう。

const userId = document.querySelector(".loginId");
const userPw = document.querySelector(".loginPw");
const userBtn = document.querySelector(".loginBtn");
const Validation = ()=>{
    const memberId = userId.value;
    const memberPw = userPw.value;
    if(memberId.includes("@") && memberPw.length >= 5){
        userBtn.classList.add("active");
    }else{
        userBtn.classList.remove("active");
    }
}
userId.addEventListener('keyup',Validation);
userPw.addEventListener('keyup',Validation);

私が書いたコードを整理してください。

個のラベルにクラス値をコレクタとして与えた.

矢印関数(Arrow function)は、functionキーワードの代わりに矢印(=>)を使用して、関数をより簡単に宣言することができる.
矢印関数を使用して、Validation 함수input、すなわちidおよびpwが値を受け入れる必要があることを指定します.
valueプロパティとして受け取りました.
3.条件文成立:value値を受け取ったidとpwを比較する.
認証includes()メソッドにアレイで指定された要素が含まれているかどうか
メールを使用する場合は、includesとして@を使用できます(@).
すなわち、アイデンティティ値が@であり、アイデンティティ値の長さが5より大きい場合.
ボタンラベルには、activeクラスとしてclassListでaddの値が得られる.

ClassListとは?

addを使用して追加できるクラス要素を受信することができる.
ボタンの親に0.2opacityを割り当て、透明度を設定します.classListaddが指定され、ボタンのactiveレベルで透明度が基本色に戻ります.

loginBtn {
    margin-top: 10px;
    padding: 5px;
    border-radius: 4px;
    border: none;
    background-color: #C4E1FB;
    opacity: 0.2;
    transition: all 0.2s;
}
.loginBtn.active{
    opacity: 1;
}

🧑🏻‍💻 16期対18期。

今夜以降16期までの騎手たちから良いアドバイスと先輩たちのアドバイスをもらいました.
準備ができていて、とても役に立ちました.上記のコードは1週間が過ぎたが,一方で多くの懸念と不安をもたらした.
そうですね.16期の先輩たちは先輩として私たちの気持ちをよく知っていて、心配することはありません.
上記の3ヶ月の過程で多くのものを獲得し、プロジェクトを通じて経験力が大きく向上します.本当に役に立つ時間でしたありがとう~:)

どのように問題を解決しますか?

✓グーグル

一番いい方法はグーグルです。📝

フロントエンドTip:

✓ 先端学習サイト