ストーリー時間:ダブルダブルお気に入り猫に取り組む

私は、1つのページ・アプリケーションを作成するためにパブリックAPIを使用する私の最近のプロジェクトを実装することに苦労した特徴について話したいです.
だから私のプロジェクトのアイデアは、誰かが“採用”に理想的な猫を選ぶためのアプリケーションを作成することでした.ユーザーはhttps://thecatapi.com/で利用可能な猫の品種のリストから検索することができます検索は、情報のいくつかの箇条書きのポイントを返します.ユーザーが猫が好きならば、彼らは「好きな」ことができます、そして、ユーザーがより多くの猫の種類を捜している間、イメージと名前はお気に入りdivに格納されます.
コーディングに飛び込む前に、このプロジェクトの難しい部分は、get requestの非同期動作と組み合わせてDOM操作されていたでしょう.しかし、驚くほど..私は、私自身が時間の良いチャンクのための「好意的な」機能を完璧にしようとしているのを見つけました.
したがって、これは基本的なアプリケーションが猫の品種を検索した後にどのように見えるかのセクションです.

好きなボタンがクリックされると、下の品種名の小さなイメージが空のお気に入り部門に表示されます.

最高3お気に入り

は、2回

の1つの品種が好きでありえません
……十分簡単.最初に私は最大3のお気に入りを行うに取り組んだ.これは「お気に入り」を扱う関数の中で呼ばれますイベントリスナーをクリックします.NewFavyは、猫のイメージと名前の中のHTML div要素です.

function checkFavorites(newFavorite) {
    const favorites = document.getElementById('favorites')

    if (favorites.children.length === 3) {
        favorites.removeChild(favorites.children[0])
        favorites.appendChild(newFavorite)
    }
    else {
        favorites.appendChild(newFavorite)
    }

私はテストを実行し、それがうまく働いた.簡単、素晴らしい!OK --次の部分.
私が持っていた最初の問題:どのように私は私の機能に合格していた新しいお気に入りの猫の品種は、すでに好意的だったかどうかを確認するつもりですか?お気に入りはすべてAdapdChildを使用して“お気に入り”divに追加されます.これは、1匹の猫の品種がお気に入りに追加された後のHTMLです.

それで、私は「お気に入り」div要素のすべての子供たちをチェックすることができました.おそらく最も簡単なお気に入りを繰り返します.子供たちは、新しいお気に入りの品種名がお気に入りの子に一致するかどうかを確認します.私がこれをコード化するならば、3匹の猫制限なしで、これは私が思いついたものです:

function checkFavorites(newFavorite) {
    const favorites = document.getElementById('favorites')
    const currentBreedName = newFavorite.getElementsByTagName('p')[0].textContent

    let checker = true
    for (i=0;i < favorites.children.length ;i++) {
        if (favorites.children[i].getElementsByTagName('p')[0].textContent === currentBreedName) {
            checker = false
        }
    }

    if (checker === true) {
        favorites.appendChild(newFavorite)
    }
    else {
        alert('AREADY IN FAVORITES')
    }

forループは、お気に入りのすべての現在の子を反復処理し、if文を使用して、名前が一致しようとしているかどうかを確認します.私はforループの中でAppendChildを使えません.そこで、' Checker '変数を作成し、2番目のif文をforループの後に追加します.
私はそれを理解するために少し私を取ったが、確かに、このコードはそれ自体で動作します.次のステップは3つのお気に入りに制限したコードと組み合わせることです.正しい順序で結合するならば、これは正しく働かなければなりませんか?
私はなぜ私は3匹の猫でもそれをキャップすることを決めた正確に確信していない.多分、決定麻痺でユーザーを助けるか、それを審美的に喜ばせるか、またはそれにしてください.とにかく…
私が私の最初のコード・ブロックをペーストして、私の第2のコード・ブロックの直後にそれを置くならば..動作しません.あなたが2回同じ品種が好きであるならば、それはあなたが「お気に入りですでに」であると警告します、しかし、それが第2のコード・ブロックを通過するとき、それが3人の子供に達していない時から、それは倍の愛された猫を加えます.
逆に、もし2つのコードを別の方法でブロックするなら、私は同じ振る舞いをする.まだ動作しない.コードブロック1の真ん中にコードブロック1を置くとしたら?コードブロック2のforループ内のコードブロック1?if文内のforループ内の入れ子になったif文?
私はこれを切り裂くことを期待していませんでした、しかし、私はその時士気に関して少し低くありませんでした.多分、私はコーディングをより簡単にするために私の制約を変えるべきですか?
どうにか、それは結局私に来ました.私が2つのif文を使用するならば、そして、私は私が探していた行動を得るために正しい順序で追加/削除される要素を得ることができました.そして、私が試みることを考えていた他のオプションのいくつかより読みやすい.
これは関数の最終バージョンです.

function checkFavorites(newFavorite) {
    let favorites = document.getElementById('favorites')
    let currentBreedName = newFavorite.getElementsByTagName('p')[0].textContent

    let checker = true
    for (i=0; i < favorites.children.length ;i++) {
        if (favorites.children[i].getElementsByTagName('p')[0].textContent === currentBreedName) {
            checker = false
        }
    }
    if (favorites.children.length != 3 && checker === true) {
        favorites.appendChild(newFavorite)
    }
    else if (favorites.children.length === 3 && checker === true) {
        favorites.removeChild(favs.children[0])
        favorites.appendChild(newFavorite)
    }
    else {
        alert('AREADY IN FAVORITES')
    }
}

を組み合わせることによって、私は1度だけ子供を補うことができます、そして、私は一度に両方の制約に従っています.別の方法として、私は他のステートメントと同じことをすることができましたが、読みやすさに影響を与えたでしょう.
十分シンプル-私は考えた.誰でもより良い解決策がありますか?