==料理
定食
丼
寿司
焼肉
ピザ
ステーキ
バーガー
カレー
うどん
そば
スパゲティ
ラーメン
弁当
パン
洋風
中華
天ぷら
唐揚げ
串
かつ
たこやき
おでん
ぎょうざ
鍋
海産物
おにぎり
サンドイッチ
ハンバーグ
スープ
サラダ
麺
==おかず
魚
牛
豚
鳥
馬
羊
貝
卵
豆
種
米
芋
えび
かに
小麦
チーズ
==野菜
キャベツ
玉ねぎ
とうもろこし
大根
人参
トマト
レタス
ブロッコリー
かぼちゃ
にんにく
ねぎ
枝豆
ピーマン
きゅうり
白菜
ほうれん草
ごぼう
アボガド
もやし
豆腐
じゃがいも
さつまいも
里芋
海苔
昆布
わかめ
きのこ
しいたけ
まつたけ
えのきだけ
なめたけ
==果物
りんご
バナナ
みかん
桃
ぶどう
メロン
すいか
梨
キウイ
いちご
ブルーベリー
==調味料
ドレッシング
ごま
フレンチ
和風
タルタルソース
コンソメ
味噌
豚骨
しょうゆ
塩
胡椒
ソース
砂糖
唐辛子
ごま
マヨネーズ
ケチャップ
マスタード
トッピング
抜き
アレルギー
アイス
プリン
ヨーグルト
ゼリー
チョコレート
マシュマロ
クッキー
ポテトチップ
生クリーム
カスタード
==飲み物
お茶
紅茶
コーヒー
牛乳
ジュース
コーラ
炭酸
栄養
酒
ビール
ワイン
view source

JavaScript

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('弁当', '料理');
  
});

CSS

#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;
}

HTML

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

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

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。