JAvascript|instagramクローンプロジェクトコメント②

Instagramのログインページとホームページをクローンしました.
次は私の数日のシャベルの記録です.💥

コメントが削除しやすい機能

以前はドラマの肌を作っていたときに秘密のコメントを确认していたのですがメッセージが実现しました!

<input type="checkbox" id="like-heart">
<label for="like-heart"></label>

input[id="like-heart"] {
    display: none;
}

input[id="like-heart"] + label {
    display: inline-block;
    font-size: 11px;
    color: var(--black);
}

input[id="like-heart"]:checked + label:before {
    content: "\f023";
    font-size: 11px;
    font-family: "FontAwesome";
}

input[id="like-heart"] + label:before {
    content: "\f09c";
    font-size: 11px;
    font-family: "FontAwesome";
}

このようにinput checkboxで选んだ时はいっぱいのHeartを使いたかったのですがfontAwesome cheatsheetに空のHeartがないのでこの方法はスキップしておきます...🙃
いつかチェックボックスとラベルで試してほしい!
ずっとどうしようかと思っていたのですが、最後はクラス名切り替えで実現しました!

// 좋아요
const likeBtn = document.querySelectorAll('.like-heart');
const likeReply = (e) => {
    e.classList.toggle('reply-like');
    if (e.classList.contains('reply-like')) {
        e.classList.remove('xi-heart-o');
        e.classList.add('xi-heart');
        e.style.color = '#ed4956';
        alert('Like!!!');
    } else {
        e.classList.add('xi-heart-o');
        e.classList.remove('xi-heart');
        e.style.color = '#000';
        alert('unLike!!!');
    }
}

// 삭제
const deleteBtn = document.querySelectorAll('.delete-reply');
const deleteReply = (e) => {
    if (confirm('댓글을 삭제하시겠습니까?')) {
        e.parentNode.remove();
        alert('댓글이 삭제되었습니다.');
    }
}

querySelectorAllでノードを見つけて順番に受信し、ログイン時に実装されたのと同じfor of文を使用してイベントリスナーに付与します.
でも…!
login.jsとmainjsでは、querySelectorAllが配列として受信され、転送イベントリスナー登録のためのコードが3回繰り返し、それぞれcommon.jsが削除されて汎用関数が作成される.
elements(配列)、関数名、イベント名をパラメータとして受け入れます.

// 공통함수
const repeatFunction = (elements, functionName, eventName) => {
    for (let element of elements) {
        element.addEventListener(eventName, (e) => {
            functionName(e.target);
        })
    };
}

// 함수 호출
repeatFunction(likeBtn, likeReply, 'click');

もう1つのファイルを作成するのはメモリの負担ですか?そうなるかもしれないので、指導者に聞いてみましたが、幸いにも彼はよかったと言っていました.🤩
コード再構築で重複を解消するのは本当に刺激的です.
問題はまた来た🥲🥲🥲🥲
はい、削除機能はハードコーディングの部分にのみ追加され、動的に追加された新しいコードには適用されません.どうしてですか.
最初は、createElementを使用して要素を作成するのではなく、cloneNodeを使用していたので、createElementで要素を1つずつ生成する方法で置き換えてみましたが、実際にはそうではありません.
私はあなたの助けを求めて、あなたは私にコメントを並べ替えの対象として管理することを教えてくれます.

//댓글배열
const replyArr = [];
//댓글 객체 만들기 위한 클래스
class Reply {
    constructor(id, content, isLike) {
        this.id = id;
        this.content = content;
        this.isLike = isLike;
    }
}

const addComment = () => {
  
  ...
  
  //댓글객체 생성하고 배열에 푸쉬
 replyArr.push(new Reply('ididididid', commentInput.value, false));
 
  ...
    }
}

このようにして、配列を回してみましたが、私がクリックした配列インデックスをどのように知ってイベントリスナーに電話すればいいか分かりません.
jsでは難しいですがreactionでは簡単です(🤔) 実現できる方法というか、反応が怖いけど、わくわく…!
数日解决していないで半分の机能を放弃して、先生とチャットして突然1つのアイデアを思いついて、それを対象にしないで、直接ChildNodesノードを选んで、それから活动のレンタルを追加します!!!

//이벤트 추가
newComment.childNodes[5].addEventListener('click', (e) => {
  deleteReply(e.target);
});

newComment.childNodes[7].addEventListener('click', (e) => {
  likeReply(e.target);
});

実はちょっと難しいですか?コードなのであまり効果的な方法ではなさそうですが、そこまで満足したいと思いますハハ
何日もやっていないことをして気持ちがいいです!
完成したコメント機能!

アイデンティティー検索機能

実施条件

宣言は、

アイデンティティデータの配列を含む.

検索ウィンドウでテキストを入力すると、配列内の要素にはそのテキストに一致するIDしか表示されません.

は、文ではなく異なる配列メソッドを使用します.

const id = [
    {
        id: 'instaquokka',
        profile: 'url',
        desc: '호주 로트네스트에 사는 쿼카',
    }
];

配列オブジェクトを作成して偽データを生成することにより,keyupで探索機能を実現した.
includeと書き、idが検索値に含まれている場合にliタグ表示を生成します.

id.filter((obj) => {
  const noResult = document.querySelector('.noResult');
  
  if (obj.id.includes(searchInput.value.toLowerCase())) {
    createLi(obj.id, obj.profile, obj.desc);
  } else {
    searchList.innerHTML = '<span class="noResult light">검색결과가 없습니다.</span>'
  }
});

ドアの中にliタグ生成コードを入れすぎると、liタグを作成するcreateLi関数を単独で呼び出します!
しかし動的にタグを生成した後、appendchildでコードを貼り付けるかどうかはこのように長くなるしかありません...他の方法を探しています.

const createLi = (id, imgSrc, desc) => {
    const ul = document.querySelector('.search-list');
    const li = document.createElement('li');
    const div = document.createElement('div');

    const img = document.createElement('img');
    img.src = imgSrc;

    const profileId = document.createElement('a');
    profileId.className = 'black';
    profileId.innerHTML = id;
    
    const profileDesc = document.createElement('span');
    profileDesc.innerHTML = desc;

    div.appendChild(profileId);
    div.appendChild(profileDesc);
    li.appendChild(img);
    li.appendChild(div);
    ul.appendChild(li);
}

いずれにしても、これで検索できますが、keyupのたびに検索結果が出てきます.💦

innerHTMLを初期化するコードをif文に追加し、簡単に解決しました.

searchList.innerHTML = '';

検索結果なしで검색결과가 없습니다.を実現しましょう.
最初はelse文に検索結果が含まれていないと思っていたので、その部分にコードを付けておけばいいのですが、検索結果がないときは、検索結果のあるキーワードを打っても検索結果は消えません…😔

なぜかというと、私が書いた方法はfilterです.また,keyupのたびに配列内のすべてのデータにアクセスして比較する.
解決策は、キーワードが含まれるたびに++を加算するhasResultという変数を生成することです.また、hasResult===0の場合のみinnerHTMLに検索結果がなく、spanタグが追加されました!

const search = () => {
    if (searchInput.value.length > 0) {
        keywordDelBtn.classList.remove('hidden');
        searchResult.classList.remove('hidden');
        searchList.innerHTML = '';
        let hasResult = 0;

        id.filter((obj) => {
            const noResult = document.querySelector('.noResult');
            if (noResult) {
                noResult.remove();
            }
            if (obj.id.includes(searchInput.value.toLowerCase())) {
                hasResult++;
                createLi(obj.id, obj.profile, obj.desc);
            } else {
                hasResult === 0
                    ? searchList.innerHTML = '<span class="noResult light">검색결과가 없습니다.</span>'
                    : '';
            }
        });
    } else {
        searchResult.classList.add('hidden');
    }
}

完了した検索機能!

プロファイル写真をクリックしてメニューボックスを作成

実施条件

プロファイル画像をクリックすると、メニューボックスが生成されます.

メニュー枠外領域をクリックすると、再度閉じることができます.

考えてみましたが、もし私が箱の外をクリックしたら、どうやってメニューボックスを消しますか?
(jqueryのhasがjavascriptにあるかどうか、ずっとグーグルで検索していましたが...ははは)
先生が教えてくれた検索キーワードで一度検索すると出てきます
だからgooglingも開発者の実力ですね...😲
要するに、ドキュメント内でイベントをクリックしてcontainsで解決を完了します!
やってみると検索ウィンドウにも同じように適用できると思ったので、共通関数も外しました.

//메뉴박스 밖 클릭 시 프로필 메뉴 닫기, 검색창 밖 클릭 시 검색결과창 닫기
document.addEventListener('click', (e) => {
    closeMenu(profileMenu, profile, e);
    closeMenu(searchResult, searchInput, e);
});

const closeMenu = (menubox, includedClass, e) => {
    if (!menubox.contains(e.target) && !includedClass.contains(e.target)) {
        menubox.classList.add('hidden');
    }
}

peer review

途中で他の人とお互いのコードを評価し合うpeer reviewをしました.
反応型は付加的な機能を体現しているので、最初から反応型とは思っていなかった私にとって、他の人とのpeer reviewはいろいろ教えてくれました…
まず

反応型のため、pxよりもvw、vh、remが好まれる.🥲

反省はすべての大きさをpxに指定し、一つ一つremに変えた.次回は、最初から反応型になっていることを考えると、レイアウトを作るべきだと思います.

scriptラベルを下に書くのではなく、deferプロパティを書きます!

defer属性とは<script>ラベルのdeferプロパティは、ページがすべてロードされた後に外部スクリプトを実行できるプロパティです!!
私は毎日bodyの一番下にスクリプトラベルを置いていますが、その属性があるなんて...!


とにかく有益なpeer review!

はんのうがた

最初からレイアウトを気にしない反応型.もう応用反応型から遠すぎる.ほほほ
したがって、ログインページが450 px未満の場合、border値は消えます.
ホームページが1078 px以下(タブレット)の場合、会員に推薦された部分が消失し、768 px以下(移動)の場合、検索ウィンドウが消失する単純反応型のみが実現します.
🔽 ログインページ

🔽 ホームページ1078 px以下(メイン-右消去)

🔽 ホームページ768 px以下(navの検索ウィンドウが消えた)

次回から反応型を出すことを考えるので、最初からちゃんとレイアウトとcssを工夫しておきたいと思います…!👊🏻

完了🔥🔥🔥

终わったら嬉しい!!