[Mini Project] WeBucks-JS

[タスク6]実施(チャレンジ)
実施期間:11/26～27

[Mission 6]チャレンジタスク

詳細ページ

コメントを削除する機能を実装してください.

のコメントによる「いいね」機能を実現してください.

✔¥コメント削除
[detail.js]

function uploadComment() {  
    const box = document.querySelector(".writeComment");

    const trashBtn = document.createElement("button");
    const dislikeIcon = document.createElement("i");

    trashBtn.setAttribute('class', 'trash1');
    trashBtn.innerHTML = "<i class='fas fa-trash-alt'></i>";

    // appendChild 속성으로 자식 요소로 추가해줌
    comments.appendChild(trashBtn);

    trashBtn.onclick = function (e) {
        box.removeChild(comments);
    };
};

[ Result ]

｣Strugle Point：新しく作成したコメントは削除できません

classList.新しく生成したコメントにadd()属性でクラスを付与しようとしたが,適用されないエラーが見つかった.そこで調べてみると、動的に生成された要素にはclassListがあります.addプロパティが使用できないことに注意して、setAttribute()プロパティを使用する必要があります.このオプションを使用すると、削除ボタンにcssプロパティを付与し、onclickイベントで削除できます.
✔¥コメントボタン押し機能
[detail.js]

function uploadComment() {  
  const dislikeIcon = document.createElement("i");
 
  dislikeIcon.className = "far fa-heart";
  dislikeIcon.onclick = clickHeart;

  comments.appendChild(dislikeIcon);

  function clickHeart() {
          const heart = window.event.target;
          if (heart.className == 'far fa-heart') {
              heart.className = 'fas fa-heart';
              heart.style.color = '#c73d3d';
          }
          else {
              heart.className = 'far fa-heart';
              heart.style.color = '#929292'
          }
      }
};

[ Result ]

｣Strugle Point：トップハートイベントのみ有効

onclick関数のclassList.add(.hide)とclassList.remove(.hide)を使用すると、一番上のHeartだけが変わる現象が発生します.この問題を解決するために、各ハートに異なるクラス名を指定し、対応する変数を生成して適用します.
💬   根本的な問題は解決されていますが、コードの可読性が悪くなり、より良い方法を探す必要があるかもしれません...!

»Strugle Point：新しく生成したコメントは空のHeartと2つの実心を表示して、クリックした後に1つは消えて、クリックして事件は発効します

元のコメントのheartと同じように関数を記述して適用しようとしたが,最初に埋め込まれたheartがhideクラスに適用されないという問題が発見され,動的に生成された要素であるためsetAttributeとして適用しようとしたが,これも適用されなかった.新しい関数でclickHeartwindowを作成しますevent.targetをheartに設定し、条件文を適用した結果、解決しました.

ログインページ

idがEメールフォーマットに合致する場合は、Eメール入力の枠線が緑になります.

パスワードには、英語の小文字、英語の大文字、特殊文字、および数字を含む少なくとも8文字が含まれます.この条件を満たすとpasswordinputのborderが緑になることを実現します.

ログインボタンのアクティブ化条件も、上述したid、パスワード条件に合致しなければならない.

パスワード入力内部右側にshowを作成し、hideボタン、show時にパスワードを表示し、hide時にtype=「password」を入力します.

✔idとパスワードが条件を満たしている場合borderを緑色に変更する機能
[login.js]

const idBox = document.getElementById('loginId');
const pwBox = document.getElementById('loginPw');

idBox.onkeyup = function () {
    const userId = document.querySelector('.id');

    if (userId.value.includes('@')) {
        userId.style.borderColor = 'green';
    }
    else {
        userId.style.borderColor = '#e3e3e3';
    }
};

pwBox.onkeyup = function () {
    const userPw = document.querySelector('.pw');
    const regexPw = /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#?!@$%^&*-]).{8,20}/;

    if (regexPw.test(userPw.value)) {
        userPw.style.borderColor = 'green';
    }
    else {
        userPw.style.borderColor = '#e3e3e3';
    }
};

[ Result ]

｣StruglePoint：正規表現を理解する

条件に合ったパスワードを作成するときに枠線の色の関数を変更すると、これは正規表現で実現されていることがわかり、正規表現を探してみると、人によって使い方が異なり、把握しにくいことがわかります.そこで様々な正規式を参考にして、私の実現に適したページのフォーマットを見つけて応用します!

｣Strugle point：外枠をクリックすると緑色になります

条件により,関数が良好に動作し,入力外で押さないと緑色が表示されない現象が発生した.検索するとinputラベルのアウトライン属性がデフォルトで指定されていることがわかり、それを削除してからすぐに見ることができ、cssはinputラベルの属性アウトラインをnoneに設定して解決しました!
✔¥パスワードhide,show機能
[login.js]

show.addEventListener('click', e => {
    if (e.target.className == "fa fa-eye eye") {
        e.target.className = "far fa-eye-slash eye";
        pwInput.setAttribute('type', 'text');
    }
    else {
        e.target.className = "fa fa-eye eye";
        pwInput.setAttribute('type', 'password');
    }
});

[ Result ]

｣補強点：アイ形状ボタンをクリックすると入力値が表示されます

ボタンをクリックしている間に、inputの値が見えるようにする方法を考えましたが、泰英のinputのtypeは何なのか、一言ですね…!そして分かりました.したがって、pwInputでsetAttributeプロパティを使用してタイプを変更すると、問題が解決します.

リストページ

コーヒーの名前の横にある「いいね」ボタン(愛)を押すと、赤い愛を表現してください.

リストページを反応型にしてください.

✔¥コーヒー星賛ボタン機能
[list.html]

<section class="wrapper">
        <div class="img">
            <div class="scale"><img alt="토피넛 콜드 브루" src="img/coffee.jpg" /></div>
            <p>토피넛 콜드 브루 &nbsp;<i class="far fa-heart" onclick="clickHeart();"></i></p>
        </div>
</section>

[list.js]

like.onclick = clickHeart;

function clickHeart() {
    const heart = window.event.target;
    if (heart.className == 'far fa-heart') {
        heart.className = 'fas fa-heart';
        heart.style.color = '#c73d3d';
    }
    else {
        heart.className = 'far fa-heart';
        heart.style.color = 'black'
    }
};

[ Result ]

｣Strugle point：最初のHeartにのみ適用され、他のHeartは2回目のクリックから適用される現象

機能は良好に動作していますが、2番目の愛から、クリックイベントがすぐに有効にならない現象が発生し、原因を見つけるためにhtmlとjsファイルをよく見ました.あまり行のないコードなので、コメントコメントコメントと同じように関数を適用したと思います.htmlでは、アイコンに他のクラス名が追加されていることに気づき、いくつかの違いが発生し、削除しました.結果は解決しました.
💬   jsでは、クラス名を使うより、IDを使う習慣を身につけましょう!
表計算ドキュメント
-メディアクエリを使用して画面を縮小する場合に適用

@media screen and (max-width: 850px) {
  .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
    height: 90px;
  }

  .headerMenu {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .headerMenu li {
    width: 50%;
  }

  .header h2 {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin: -5px 0 0 10px;
  }
}

[ Result ]

💬   反応型ネットワーク構成にはまだまだ不足点が多く、さらに勉強が必要…!