MasahiroHarada/index.html

## index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript実践クイズ〜画像ギャラリー編〜</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <div class="container">
    <h1>画像ギャラリーをつくろう</h1>
    <div id="myGallery" class="gallery">
      <ol class="gallery-images">
        <li id="img1" class="gallery-image-item active">
          <img src="https://source.unsplash.com/PGHIP0o15Hk/900x450" alt="">
        </li>
        <li id="img2" class="gallery-image-item">
          <img src="https://source.unsplash.com/NodtnCsLdTE/900x450" alt="">
        </li>
        <li id="img3" class="gallery-image-item">
          <img src="https://source.unsplash.com/1ejZ2XBjJgU/900x450" alt="">
        </li>
      </ol>
      <ol class="gallery-thumbnails">
        <li class="gallery-thumbnail-item" data-gallery-image="img1">
          <img src="https://source.unsplash.com/PGHIP0o15Hk/256x144" alt="">
        </li>
        <li class="gallery-thumbnail-item" data-gallery-image="img2">
          <img src="https://source.unsplash.com/NodtnCsLdTE/256x144" alt="">
        </li>
        <li class="gallery-thumbnail-item" data-gallery-image="img3">
          <img src="https://source.unsplash.com/1ejZ2XBjJgU/256x144" alt="">
        </li>
      </ol>
    </div>
    <p>Images from <a href="https://unsplash.com">Unsplash</a>.</p>
  </div>
  <script src="/script.js"></script>
</body>
</html>

## script.js
/**
 * ギャラリーを初期化する
 *
 * @param {HTMLElement} root ギャラリー全体のルート要素
 */
function initGallery (root) {
  // サムネイル画像
  const thumbnails = root.querySelectorAll('[data-gallery-image]');

  // メイン画像のIDをサムネイルから取得
  const targetIds = Array.prototype.map.call(thumbnails, tn => {
    return "#" + tn.getAttribute('data-gallery-image');
  });

  // メイン画像
  const mainImages = root.querySelectorAll(targetIds.join(','));

  // サムネイルのクリックイベントハンドラ
  function onClickThumbnail () {
    // まずメイン画像をすべて隠す
    mainImages.forEach(image => /* Insert code here... */);
    // 表示するメイン画像のIDを取得する
    const id = /* Insert code here... */;
    // 表示するメイン画像を取得する
    const target = /* Insert code here... */;
    // 要素があったら表示する
    /* Insert code here... */
  }

  thumbnails.forEach(tn => {
    tn.addEventListener('click', /* Insert code here... */);
  });
}

const elem = document.getElementById('myGallery');
initGallery(elem);

## style.css
.container {
  margin: 0 auto;
  max-width: 840px;
  padding: 2rem;
}

h1 {
  font-size: 1.4rem;
  margin: 0 0 2rem 0;
}

.gallery-images {
  margin: 0 0 1rem 0;
}

.gallery-image-item {
  display: none;
}

.gallery-image-item.active {
  display: block;
}

.gallery-image-item img {
  width: 100%;
}

.gallery-images,
.gallery-thumbnails {
  list-style: none;
  padding: 0;
}

.gallery-thumbnails {
  display: flex;
  justify-content: space-between;
}

.gallery-thumbnail-item {
  cursor: pointer;
  width: 32%;
}

.gallery-thumbnail-item img {
  width: 100%;
}
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JavaScript実践クイズ〜画像ギャラリー編〜</title>
	<link rel="stylesheet" href="/style.css">
	</head>
	<body>
	<div class="container">
	<h1>画像ギャラリーをつくろう</h1>
	<div id="myGallery" class="gallery">
	<ol class="gallery-images">
	<li id="img1" class="gallery-image-item active">
	<img src="https://source.unsplash.com/PGHIP0o15Hk/900x450" alt="">
	</li>
	<li id="img2" class="gallery-image-item">
	<img src="https://source.unsplash.com/NodtnCsLdTE/900x450" alt="">
	</li>
	<li id="img3" class="gallery-image-item">
	<img src="https://source.unsplash.com/1ejZ2XBjJgU/900x450" alt="">
	</li>
	</ol>
	<ol class="gallery-thumbnails">
	<li class="gallery-thumbnail-item" data-gallery-image="img1">
	<img src="https://source.unsplash.com/PGHIP0o15Hk/256x144" alt="">
	</li>
	<li class="gallery-thumbnail-item" data-gallery-image="img2">
	<img src="https://source.unsplash.com/NodtnCsLdTE/256x144" alt="">
	</li>
	<li class="gallery-thumbnail-item" data-gallery-image="img3">
	<img src="https://source.unsplash.com/1ejZ2XBjJgU/256x144" alt="">
	</li>
	</ol>
	</div>
	<p>Images from <a href="https://unsplash.com">Unsplash</a>.</p>
	</div>
	<script src="/script.js"></script>
	</body>
	</html>
	/**
	* ギャラリーを初期化する
	*
	* @param {HTMLElement} root ギャラリー全体のルート要素
	*/
	function initGallery (root) {
	// サムネイル画像
	const thumbnails = root.querySelectorAll('[data-gallery-image]');

	// メイン画像のIDをサムネイルから取得
	const targetIds = Array.prototype.map.call(thumbnails, tn => {
	return "#" + tn.getAttribute('data-gallery-image');
	});

	// メイン画像
	const mainImages = root.querySelectorAll(targetIds.join(','));

	// サムネイルのクリックイベントハンドラ
	function onClickThumbnail () {
	// まずメイン画像をすべて隠す
	mainImages.forEach(image => /* Insert code here... */);
	// 表示するメイン画像のIDを取得する
	const id = /* Insert code here... */;
	// 表示するメイン画像を取得する
	const target = /* Insert code here... */;
	// 要素があったら表示する
	/* Insert code here... */
	}

	thumbnails.forEach(tn => {
	tn.addEventListener('click', /* Insert code here... */);
	});
	}

	const elem = document.getElementById('myGallery');
	initGallery(elem);
	.container {
	margin: 0 auto;
	max-width: 840px;
	padding: 2rem;
	}

	h1 {
	font-size: 1.4rem;
	margin: 0 0 2rem 0;
	}

	.gallery-images {
	margin: 0 0 1rem 0;
	}

	.gallery-image-item {
	display: none;
	}

	.gallery-image-item.active {
	display: block;
	}

	.gallery-image-item img {
	width: 100%;
	}

	.gallery-images,
	.gallery-thumbnails {
	list-style: none;
	padding: 0;
	}

	.gallery-thumbnails {
	display: flex;
	justify-content: space-between;
	}

	.gallery-thumbnail-item {
	cursor: pointer;
	width: 32%;
	}

	.gallery-thumbnail-item img {
	width: 100%;
	}