カラーピッカーで取得した色を反映させよう

Question

問題2：カラーピッカーで取得した色を反映させよう

カラーピッカーで取得した色を

「忍者CODE」に反映させよう！

あらかじめエディタに書くコード

                <h1 class="title">忍者CODE</h1>
<input type="color" id="color-change">
¥HTML¥

                .title{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    margin-top: 300px;
    font-size: 100px;
}
#color-change{
    display: block;
    margin: 0 auto;
    width: 100px;
}
¥CSS¥

Answer 1

解答ソースコード

              $(function(){
  $('#color-change').on("change", function(){
    let select_color = $(this).val();
    $('.title').css('color', select_color);
  });
});
¥JavaScript¥

              <!DOCTYPE html>
<html lang="">
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
	<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<style>
		.title{
			font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
			text-align: center;
			margin-top: 300px;
			font-size: 100px;
		}
		#color-change{
			display: block;
			margin: 0 auto;
			width: 100px;
		}
	</style>
</head>
<body>

	<h1 class="title">忍者CODE</h1>
	<input type="color" id="color-change">
	<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
</body>
</html>
¥HTML¥

カラーピッカーで取得した色を反映させよう

問題2：カラーピッカーで取得した色を反映させよう

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説