JavaScriptでおみくじを作る

2019/06/20

2019/06/23

この記事を書いている人 - WRITER -

サラリーマンエンジニアです。平成３１年４月１日から1日当たり100円を FX口座に積立てて令和元年の初日から自作プログラムによるシステムトレードをしています。プログラミングを基礎から学習しつつ効率的な自動売買ロジックを考えて、副収入で月給を超えることを目標にコツコツ頑張ります。

ドットインストールの講座を視聴して実際にPC上で動作させて学んでいきます。動画を見ながら自分でタイピングして覚える方がいいのですが、ソースが公開されていて、自分のコードと比較できるので、楽させてもらいます。

まずはボタンを押すとランダムで大吉、中吉、凶が表示されるおみくじを作りました。視聴すると簡単に出来ると思うけれど、やりたいこと(仕様)とやり方(実装)を結びつけるのは覚えて慣れていくしかない。

【完成時のソースコード】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>おみくじ</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div id="btn">?</div>
  <script src="js/main.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

body {
  background: #efefef;
}

#btn {
  width: 200px;
  height: 200px;
  background: #ef454a;
  border-radius: 50%;
  margin: 30px auto 0;
  text-align: center;
  line-height: 200px;
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 10px 0 #d1483e;
  user-select: none;
}

#btn:hover {
  opacity: 0.9;
}

#btn.pressed {
  box-shadow: 0 5px 0 #d1483e;
  margin-top: 35px;
}

body {

background: #efefef;

}

#btn {

width: 200px;

height: 200px;

background: #ef454a;

border-radius: 50%;

margin: 30px auto 0;

text-align: center;

line-height: 200px;

color: #fff;

font-size: 42px;

font-weight: bold;

cursor: pointer;

box-shadow: 0 10px 0 #d1483e;

user-select: none;

}

#btn:hover {

opacity: 0.9;

}

#btn.pressed {

box-shadow: 0 5px 0 #d1483e;

margin-top: 35px;

}

'use strict';

{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    const n = Math.random();
    if (n < 0.05) {
      btn.textContent = '大吉'; // 5%
    } else if (n < 0.2) {
      btn.textContent = '中吉'; // 15%
    } else {
      btn.textContent = '凶'; // 80%
    }
  });
  btn.addEventListener('mousedown', () => {
    btn.classList.add('pressed');
  });
  btn.addEventListener('mouseup', () => {
    btn.classList.remove('pressed');
  });
}