【javascript】今日の運勢は？無料おみくじを引いてみよう！

例年、正月には家族みんなで初詣（はつもうで）に行ってたんですが、去年も今年も行けませんでした…！

去年は、妻がつわりでダウン。今年は、娘の体調が心配で。無理に行くもんでもないし、潔く諦めました！

「今年も娘が健やかに成長できますように！」とかお願いして、次の日に風邪でも引いちゃったら笑えませんからね。。

1
おみくじ引きたかったー！
2
おみくじ作ってみた！
3
今日の運勢は？おみくじを引いてみよう！
4
おみくじを作るコード
5
まとめ

おみくじ引きたかったー！

でも、でも…おみくじ引きたかったよー(*´ω｀*)

「今年はどんな年になるのか〜」っておみくじ引いて、結果に一喜一憂するのが初詣の醍醐味ですからね！

Amazonでおみくじ注文するわけにも行かないし、おみくじ引けなかったことが、僕にとっても妻にとっても心残りでした。

おみくじ作ってみた！

はい、ということで、おみくじ作ってみました。（急展開）

冬休みの宿題みたいに、牛乳パックと割り箸から作っても良かったんですが、面倒だったので、ドットインストールを見てサクッと作っちゃいました。

「こっちの割り箸は大吉で、こっちの割り箸は末吉で…あ、大凶2つ作っちゃおうかな〜w」って、おじさんが1人で楽しんでたらさすがにヤバイですからね。

それは娘が大きくなってからのお楽しみにしておきます…笑

今日の運勢は？おみくじを引いてみよう！

では、早速、おみくじを引いてみましょう！「今年の運勢」だと大凶が出た時にイヤな思いをするので、「今日の運勢」にしてみました（ワガママ）

やり方は簡単で、「今日の運勢は？」というボタンをタッチするだけです。どうぞ、気軽に引いちゃってください:D

See the Pen EZYGjb by Chef (@chef-aomori) on CodePen.

おみくじを作るコード

ちなみに、このおみくじはjavascript（とHTML,CSS）で作ってます。javascriptは苦手なので、遊びながら勉強できて一石二鳥！

下記のコードを「〇〇.html」のファイルに貼り付ければ、誰でも簡単に作れちゃうので、良かったらオフラインでも遊んでみてください:D

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>シェフのおみくじ</title>
<style>
body {
  text-align: center;
  font-size: 16px;
  color: #fff;
  font-family: Arial, sans-serif;
}
#result {
  margin: 15px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  line-height: 150px;
  font-size: 50px;
  font-weight: bold;
  background: #f44336;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
#btn {
  margin: 0 auto;
  width: 200px;
  padding: 10px;
  font-size: 20px;
  border-radius: 5px;
  background: #00aaff;
  box-shadow: 0 4px 0 #0088cc;
  cursor: pointer;
}
#btn:hover {
  opacity: 0.8;
}
#btn.pushed {
  margin-top: 18px;
  box-shadow: 0 2px 0 #0088cc;
}
</style>
</head>
<body>
  <div id="result">？</div>
  <div id="btn">今日の運勢は？</div>
  <script>
   (function() {
     'use strict';
      document.getElementById('btn').addEventListener('click', function() {
        var results = ['大吉', '吉', '小吉', '末吉', '中吉', '凶', '大凶'];
        var result = Math.floor(Math.random() * results.length);
        document.getElementById('result').innerHTML = results[result];
      });
      document.getElementById('btn').addEventListener('mousedown', function() {
        this.className = 'pushed';
      });
      document.getElementById('btn').addEventListener('mouseup', function() {
        this.className = '';
      });
   })();
  </script>
</body>
</html>