index23 map, filter, sortの一日 ！【Day64 of 100】

本日は計5件のコミットで作業を進めました。内容はその他の実装・CSSの調整です。

①　その他の実装 map, filter, sort

index23 map, filter, sortの続き

変更ファイル：html_ver/index23.html, html_ver/index23.js

        <title>Relax Cafe Map, Find, Sort - 👩‍💻マップ関数の練習</title>
            <h1>👧Relax Cafe Map, Find, Sort</h1>
            <p>👩‍💻マップ、ファインド、ソート関数の練習</p>
  

  elem.innerText = `全本：${n.title}`;
const div5 = document.getElementById('main5');
const cheapBooks = books.filter((n) => {
    return n.price < 3500;
});
cheapBooks.forEach((n) => {
    const elem = document.createElement('div');
    elem.innerText = `安の本 中身：${n.summary}`;
    div5.appendChild(elem);
});
const div6 = document.getElementById('main6');
const sortBooks = books.sort((m, n) => {
    return m.price - n.price;
});
const bookList2 = books.map((n) => {
    const elem = document.createElement('div');
    elem.innerText = `価格順：${n.price}`;
    div6.appendChild(elem);
    return elem.innerText;
});
console.log('mapですべて配列に', bookList);
console.log('filter安の本', cheapBooks);
console.log('Sort300円以下の本', sortBooks);

index23 map, filter, sortの続き

変更ファイル：html_ver/index23.html, html_ver/index23.js

        <title>Relax Cafe Map, Filter, Sort - 👩‍💻マップ関数の練習</title>
            <h1>👧Relax Cafe Map, Filter, Sort</h1>
            <p>👩‍💻マップ、フィルタ、ソート関数の練習</p>

const lowPrice = books.filter((n) => n.price < 3500);
lowPrice.forEach((n) => {
    elem.innerText = `安本 中身：${n.summary}`;
console.log('filter安の本', lowPrice);

index23 map, filter, sortの続き2 省略形で修正

変更ファイル：html_ver/index23.js

elem.innerText = `安本Desc：${n.summary}`;
const sortBooks = books.sort((m, n) => m.price - n.price);

index23 map, filter, sortの続き。昇順降順をもう一度

変更ファイル：html_ver/index23.js

const prices = [3000, 1000, 5000, 2000];
});
const div7 = document.getElementById('main7');
const asc = [...prices].sort((m, n) => m - n);
const ascList = asc.map((n) => {
    const elem = document.createElement('div');
    elem.innerText = `数字昇順：${n}`;
    div7.appendChild(elem);
const div8 = document.getElementById('main8');
const desc = [...prices].sort((m, n) => n - m); // nから引けば逆転する！
const descList = desc.map((n) => {
    const elem = document.createElement('div');
    elem.innerText = `数字降順：${n}`;
    div8.appendChild(elem);
});
console.log(asc); // [1000, 2000, 3000, 5000]
console.log(desc); // [5000, 3000, 2000, 1000]

②　CSSをいじった話

index23 map関数 第一引数は絶対関数！その関数の引数例nにはすでに大元の配列のデータが入っている！

変更ファイル：html_ver/index23.css, html_ver/index23.html, html_ver/index23.js

:root {
    --bg-speed: 3s;
    /* 初期値（カフェカラー） */
    --c1: rgba(44, 26, 18, 0.4);
    --c2: rgba(141, 64, 36, 0.1);
    --c3: rgba(224, 122, 95, 0.3);
    --c4: rgba(61, 44, 37, 0.9);
}
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    /* ↓ background-color: #000; を削除して透明にする */
    background: transparent;
}
/* 1. 写真レイヤー（ここをしっかり表示させる） */
.background-photo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* 画面幅いっぱい */

今日の振り返り

コミット5本でまとまった実装ができました。各変更の意図を理解しながら進めることで、コードの構造に対する理解が深まってきています。map, filter, sort、引数がなにか、確認が必要ですね

今日の成果物 🎉

👉 https://kiyo4810.github.io/autocal/html_ver/index23.html