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

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

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

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

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

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

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

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>

カスタマイズしてさらに楽しめる!

また、コードを微調整することで、

  • 大吉を多めにする
  • 大凶を多めにする

みたいに自由にカスタマイズすることもできます。また、おみくじだけじゃなく、王様ゲームとかも作れると思うので、けっこう楽しめると思いますよ。

まとめ

あ、そうそう。やっぱり、自分用に「今年の運勢がわかるおみくじ」も作ってみたんですが、結果は「大吉」でした!やったー!

(大吉だけ用意しておいて良かった〜!)

今日がみなさんにとって良い1日でありますように!

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!