【Chapter9】課題

概要と目標 JavaScriptでおみくじアプリ。

完成例を参考におみくじアプリを作成して下さい。
おみくじの札の種類、デザインは任意とします。

今回のゴール

RERUN

新しいウインドウで表示する

解答例解答例を確認しよう。

完成したら、解答例を確認しましょう。
絶対的な正解はないので、参考程度に確認しましょう。

index.html

chapter09/omikuji/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>おみくじ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="l-container">
    <h1 class="site-title" id="title">
      <span class="site-title_caption">今日のあなたの運勢は？</span><br>
      <span class="site-title_name">おみくじ</span>
    </h1>
    <p id="msg" class="message">「おみくじを引く」ボタンを押してね</p>
    <button id="btn" class="button">おみくじを引く</button>
  </div>
  <!-- /.l-container -->

  <script src="app.js"></script>
</body>
</html>

答えを見る

app.js

chapter09/omikuji/app.js

// タイプを配列で管理
var results = [
  {
    title: '大吉',
    msg: 'おめでとう！今日は最高！'
  },
  {
    title: '中吉',
    msg: '今日はそこそこいいよ。'
  },
  {
    title: '小吉',
    msg: '今日はぼちぼちです。'
  },
  {
    title: '吉',
    msg: 'まぁ、普通です。'
  },
  {
    title: '凶',
    msg: '今日はあんまりよくないかも・・・'
  },
  {
    title: '大凶',
    msg: '今日は残念です。'
  }
];

// 要素の取得
var title = document.getElementById('title');
var msg = document.getElementById('msg');
var btn = document.getElementById('btn');

// クリックイベントの生成
btn.addEventListener('click', function () {
  // イベント発生時
  // ランダムな数値を生成
  var random = Math.floor(Math.random() * results.length);

  // h1要素をおみくじ結果に変更
  title.innerHTML = '<span class="site-title_result">' + results[random]['title'] + '</span>';

  // p要素をおみくじ結果のメッセージに変更
  msg.innerHTML = results[random]['msg'];
});

答えを見る

style.css

chapter09/omikuji/style.css

* {
  margin: 0;
  padding: 0;
  font-size: 1em;
}

body {
  background-image: url('images/bg-washi.png');
  font: 1em/1.5 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
  color: #333;
}

.l-container {
  width: 95%;
  margin: 5em auto 0;
  text-align: center;
}

.site-title {
  margin-bottom: 3em;
  line-height: 1.2;
  height: 9em;
}

.site-title_caption {
  font-size: 1.25em;
  letter-spacing: -.05em;
}

.site-title_name {
  font-size: 3em;
  letter-spacing: .1em;
}

.site-title_result {
  font-size: 3em;
  letter-spacing: .1em;
  display: inline-block;
  width: 3em;
  height: 3em;
  border: 8px solid #B71C1C;
  border-radius: 50%;
  line-height: 3em;
  letter-spacing: -.05em;
  color: #B71C1C;
}

.message {
  letter-spacing: .03em;
  margin: 3em 0;
}

.button {
  position: relative;
  top: 0;
  display: block;
  border: 0;
  outline: 0;
  margin: 0 auto;
  width: 240px;
  background-color: #333;
  color: #fff;
  padding: 1em;
  cursor: pointer;
  border-radius: .5em;
  box-shadow: 0 .125em 0 #121212;
  transition: all 0.2s ease-in-out;
  font: 1em/1.5 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}

.button:hover {
  background-color: #666;
  top: -2px;
  box-shadow: 0 .25em 0 #333;
}

.button:active {
  background-color: #121212;
  top: 0px;
  box-shadow:  0 1px 0 #000;
}

答えを見る

まとめ JavaScriptはむづかしい。

JavaScriptはプログラミング言語。
HTMLやCSSと比べるとかなり難易度が高い。

JavaScriptはブラウザが処理を実行するプログラミング言語
主にWebサイトに動きを付ける目的で利用する

Chapter09 課題

index.html

app.js

style.css