あれ、いつも書いてるな～という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
}