var title = '今日のごはん 今日は何を食べる？ オススメのランチ';
document.title = title;
var $h1 = $('<h1>').text(title);
var $p1 = $('<p>').text(' 食材とかランダムででてくるよ！ きまぐれでランチや晩ごはんを決めるときに！');
var $p2 = $('<p>').text('気に入った選択肢が出るまで読み込みして！　リンク先で近くのお店やレシピ探せるかも！');
var $h2 = $('<h2>').append($p1).append($p2);
var $img = $('<img>',{src:'reload.svg',width:40});

var qs = [
  {
    name : 'google',
    q:'https://www.google.com/search?q='
  },
  {
    name : 'kikkoman',
    q:'https://www.kikkoman.co.jp/homecook/search/select_search.html?free_word='
  },
  {
    name : 'kurashiru',
    q:'https://www.kurashiru.com/search?query='
  },
  {
    name : 'cookpad',
    q:'https://cookpad.com/search/'
  },
];

var $div = $('<div>');
var $slc;
$('#demo').append($h1);
$('#demo').append($h2);
$('#demo').append($img);
$('#demo').append($div);
setSearch();


$h1.on('click', function(){
  location.reload();
});
$img.on('click', function(){
  location.reload();
});


function setSearch(){
  $slc = $('<select>');
  $div.append($slc);
  qs.forEach(function(v){
    var $opt = $('<option>',{value:v.q}).text(v.name);
    $slc.append($opt);
  });
}

function setHead(v){
  var $button = $('<h3>');
  $button.text(v);
  $div.append($button);
}

function setBtn(v, key){
  var $button = $('<a>',{href:'/',target:'_blank'});
  $button.text(v);
  $button.on('click', function(){
    var v = $(this).text();
    $(this).addClass('pushed');
    if(key !== '料理'){
      v = v + ' 料理';
    }
    var q = $slc.val();
    var href = q+v;
    $(this).attr({href:href});
    //window.open(''+v);
  });
  $div.append($button);
}

$.get('/csv/food.txt', function(data){
  console.log(data);
  var texts = data.split("\n");

  var ketTexts = {};
  var key = "";
  texts.forEach(function(v){
    if(!v){return;}
    if(v.match(/==/)){
      v = v.replace(/==/, '');
      key = v;
      ketTexts[key] = [];
    } else {
      ketTexts[key].push(v);
    }
  });
  console.log(ketTexts);
  for (const [key, value] of Object.entries(ketTexts)) {
    console.log(`${key}: ${value}`);
    console.log(value);
    setHead(key);
    var len = value.length;
    for(var i=0;i<3;i++){
      var r = Math.floor(Math.random()*len);
      var rv = value[r];
      setBtn(rv, key);
    }
  }

  setHead('近場で検索');
  setBtn('ランチ', '料理');
  setBtn('ディナー', '料理');
  setBtn('弁当', '料理');
  
});

#demo{
  padding:0 10px;
}
#demo h2{
  font-size:24px;
}
#demo h3{
  padding-top:4px;
}
#demo img{
  padding:8px 12px;
  cursor:pointer;
}
#demo a{
  display:ineline-block;
  font-size:32px;
  padding:8px;
  color:#000;
  text-decoration:none;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-food-random/