sudosanet/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>API TEST</title>
    <style>
        button{
            display: block;
            height: 40px;
            /*width: 100%;*/
            font-size:24px;
        }
        #wrap{
            margin:20px;
        }
    </style>
</head>
<body>
    <h1>今日は誰の誕生日？</h1>
    <button id="now">今日</button>
    <div id="wrap">
        <input id="m" type="number" name="m" min="1" max="12">月
        <input id="d" type="number" name="d" min="1" max="31">日
    </div>
    <button id="ent">表示</button>
    <h2 id="res"></h2>
</body>
<script>
    document.getElementById("now").addEventListener("click",n,false);
    document.getElementById("ent").addEventListener("click",e,false);
    function n(){
        const nowDate = new Date();
        document.getElementById("m").value = nowDate.getMonth()+1;
        document.getElementById("d").value = nowDate.getDate();
    }
    function e(){
        const m = document.getElementById("m").value;
        const d = document.getElementById("d").value;
        fetch(`https://api.imas-db.jp/calendar/birthday/list?month=${m}&day=${d}`).then((response)=> {
            return response.json();
            }).then((json)=> {
                console.log(json.birthday_list);
                const d = json.birthday_list;
                if(d.length==0){
                    document.getElementById("res").textContent="誕生日のアイドルはいません";
                }
                else{
                    let html="";
                    for(let i in d){
                        html+=`${d[i].name}<br>`;
                    }
                    document.getElementById("res").innerHTML=html;
                }
            });
    }
</script>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>API TEST</title>
	<style>
	button{
	display: block;
	height: 40px;
	/width: 100%;/
	font-size:24px;
	}
	#wrap{
	margin:20px;
	}
	</style>
	</head>
	<body>
	<h1>今日は誰の誕生日？</h1>
	<button id="now">今日</button>
	<div id="wrap">
	<input id="m" type="number" name="m" min="1" max="12">月
	<input id="d" type="number" name="d" min="1" max="31">日
	</div>
	<button id="ent">表示</button>
	<h2 id="res"></h2>
	</body>
	<script>
	document.getElementById("now").addEventListener("click",n,false);
	document.getElementById("ent").addEventListener("click",e,false);
	function n(){
	const nowDate = new Date();
	document.getElementById("m").value = nowDate.getMonth()+1;
	document.getElementById("d").value = nowDate.getDate();
	}
	function e(){
	const m = document.getElementById("m").value;
	const d = document.getElementById("d").value;
	fetch(`https://api.imas-db.jp/calendar/birthday/list?month=${m}&day=${d}`).then((response)=> {
	return response.json();
	}).then((json)=> {
	console.log(json.birthday_list);
	const d = json.birthday_list;
	if(d.length==0){
	document.getElementById("res").textContent="誕生日のアイドルはいません";
	}
	else{
	let html="";
	for(let i in d){
	html+=`${d[i].name}<br>`;
	}
	document.getElementById("res").innerHTML=html;
	}
	});
	}
	</script>
	</html>