[Javascript Project] Expanding Cards

cacao_cat

    <link rel="stylesheet" href="styles.css" />

relでファイルとの関係性を、hrefでそのファイルがある場所（URL）を指定。

cacao_cat

<title>と</title>で囲われた部分がそのページのタイトルになる。タイトルタグに記載された内容は、ブラウザのタブ部分や、Google等の検索エンジンの検索結果にタイトルとして表示される。

cacao_cat

    <div class="container">

<div>
囲った部分をブロックレベル要素としてグループ化することができるタグ

class
divに付ける名前
例えば、<div></div>で囲まれたHTMLのコードがたくさんあると、CSSを適用するときに、どこの<div></div>にCSSを適用すれば良いのかわからない。（一口にdivと言ってもどのdivかの区別がつかない。）

container
画面内のコンテンツの収まる範囲を設定するブロック

cacao_cat

console.dir(document.childNodes);
HTMLのchildrenを確認する。
中身を確認すると、htmlタグの次の階層のHTML要素を確認できる。
head,bodyタグが配置されていることがわかる。
このように、Element ツリーはdocumentオブジェクト上に保持されていることがわかる。

cacao_cat

console.dir(document.children);
HTML Collectionという配列風オブジェクトに、elementが格納されている。
childrenには、nodeの中でも、エレメントのみ格納される。

cacao_cat

const panels = document.querySelectorAll('.panel')
document.querySelectorAll

指定された要素を全て取得
class(panel) 属性に一致する全ての要素を取得

cacao_cat

body {
  font-family: 'Muli', sans-serif;
 # HTMLブロックを横並びにする
  display: flex;
 # 縦の中央寄せ
  align-items: center;
 # アイテムを中央に寄せる 
  justify-content: center;
 # height:100vhなら親要素の高さを気にせず指定できる。親要素に影響されない。
  height: 100vh;
 # はみ出した領域を隠す。
  overflow: hidden;
  margin: 0;
}

https://csshtml.work/height100vh/

cacao_cat

    transition: flex 0.7s ease-in-out;

ease-in,ease-out,easeなどについて

cacao_cat

const panels = document.querySelectorAll('.panel')
console.log(panels);

全てのパネルを、ノードリストと呼ばれる配列のようなものに入れる

.activeとそれ以外のpanel

cacao_cat

const panels = document.querySelectorAll('.panel')
console.log(panels[0]);

インデックス0指定すると、activeのみが表示される

cacao_cat

配列と同じようにノードリストをループすることもできる。

panels.forEach(panel => {
    console.log(panel);
    panel.addEventListener('click', () => {
        removeActiveClasses()
        panel.classList.add('active')
    })
})

cacao_cat

panels.forEach(panel => {
    console.log(panel);
    panel.addEventListener('click', () => {
        console.log(123)
        removeActiveClasses()
        panel.classList.add('active')
    })
})

画像のどれかをクリックすると、123が表示される。

cacao_cat

        removeActiveClasses()

拡大することはあっても、他のものを引っ込めることはない。

このコードによって、クリックしたら展開されるだけのpanelsを、
activeのクラスを付ける前に、すべてのactiveのクラスを削除。