xhackjp1/飲食店検索.html

## 飲食店検索.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>通信を使ったプログラムを書いてみる</h1>
  <button id="search-button">
    検索
  </button>
  <input id="search-text" type="text">
  <div id="restaurant-informations">
    <!-- ここに、レストラン情報を表示させる -->
  </div>
  <script>
    const SEARCH_BUTTON = document.getElementById("search-button")
    const SEARCH_TEXT = document.getElementById("search-text")
    const REST_INFO = document.getElementById("restaurant-informations")

    SEARCH_BUTTON.addEventListener("click", () => seachShop())

    function seachShop(){
      REST_INFO.innerText = ""

      var oReq = new XMLHttpRequest();
      oReq.open("GET", `https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=自分のkeyを入れてね&freeword=${SEARCH_TEXT.value}&pref=PREF13`);
      oReq.send();
      oReq.addEventListener("load", () => {
        let response = JSON.parse(oReq.responseText)
        response.rest.forEach(el => {
          // ここで、要素を作ってあげればOK
          const _div = document.createElement("div")
          _div.innerText = el.name

          const _img = document.createElement("img")
          _img.src = el.image_url.shop_image1

          REST_INFO.appendChild(_div)
          REST_INFO.appendChild(_img)
        });
      })
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<h1>通信を使ったプログラムを書いてみる</h1>
	<button id="search-button">
	検索
	</button>
	<input id="search-text" type="text">
	<div id="restaurant-informations">
	<!-- ここに、レストラン情報を表示させる -->
	</div>
	<script>
	const SEARCH_BUTTON = document.getElementById("search-button")
	const SEARCH_TEXT = document.getElementById("search-text")
	const REST_INFO = document.getElementById("restaurant-informations")

	SEARCH_BUTTON.addEventListener("click", () => seachShop())

	function seachShop(){
	REST_INFO.innerText = ""

	var oReq = new XMLHttpRequest();
	oReq.open("GET", `https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=自分のkeyを入れてね&freeword=${SEARCH_TEXT.value}&pref=PREF13`);
	oReq.send();
	oReq.addEventListener("load", () => {
	let response = JSON.parse(oReq.responseText)
	response.rest.forEach(el => {
	// ここで、要素を作ってあげればOK
	const _div = document.createElement("div")
	_div.innerText = el.name

	const _img = document.createElement("img")
	_img.src = el.image_url.shop_image1

	REST_INFO.appendChild(_div)
	REST_INFO.appendChild(_img)
	});
	})
	}
	</script>
	</body>
	</html>