あれ、いつも書いてるな～というJavaScript の小技集の、記事にあった「配列からランダムで値を取り出す」を使用して、お昼ご飯アプリを作りました。

以下、意識してコードを書く

動くアプリを作る
書いたコードを理解
機能またはデザインを追加
成果物は、ネット上にあげる
非効率的な部分をリファクタリング

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lunch_app</title>
    <link rel="stylesheet" href="./09_lunch.css">
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
    <input type="button" value="ボタン" id="btn">
    <p>本日のお昼は............</p>
    <h2></h2>
    <h1></h1>
<script>
$(document).ready(function(){

    $("#btn").on("click", function(){   
     
        //食事の種類
        var kind = ["和食(◉◞౪◟◉)","洋食(⊙◞౪◟⊙)","コンビニ☭(;´༎ຶД༎ຶ`)☭ "];
        var random = Math.floor(Math.random () * 3);
        
        var w = ["牛丼!!","ラーメン!!","寿司!!"];
        //w配列からランダムで値を取り出す
        var wRandam = w[Math.floor(Math.random () * w.length)];        
        var y = ["ピザ!!","パスタ!!","カレー!!"];
        //y配列からランダムで値を取り出す
        var yRandam = y[Math.floor(Math.random () * y.length)];
        var k = ["パン!!","おにぎり!!","うまい棒!!"];
        //k配列からランダムで値を取り出す
        var kRandam = k[Math.floor(Math.random () * k.length)];
   
        //和食の処理結果
        if(random == 0){
            $("h2").text(kind[0]);
            $("h1").text(wRandam);
        //洋食の処理結果
        }else if(random == 1){
            $("h2").text(kind[1]);
            $("h1").text(yRandam);
        //コンビニの処理結果
        }else{
            $("h2").text(kind[2]);
            $("h1").text(kRandam);
        }
    })

});   
</script>    
</body>
</html>

css

# btn{
    font-weight: bold;
    padding: 10px 30px;
    background-color: black;
    color: #fff;
    border-style: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

p{
    color:black;
    font-weight: bold;
    font-size: 19px;
    padding: 50px;
}

h2{
    color:blue;
    font-weight: bold;
    font-size: 120px;
    margin: 50px
}

h1{
    color: deeppink;
    font-weight: bold;
    font-size: 350px;
    margin: 50px
}