JavaScriptで簡単な「おみくじアプリ」を作成しました。
プログラミング初心者の方は是非アウトプットの参考にしてください。
おみくじアプリの作り方
おみくじアプリはこちら。
ボタンを押したら、「大吉・中吉・小吉・吉・末吉・凶」のどれかが出るおみくじです。
それでは早速作っていきましょう。
HTML
<h2>簡単おみくじ</h2> <p>ボタンをクリックしてください！</p> <div id="btn">おみくじ</div>
まずは、おみくじのタイトルと文章を用意しました。
そして、「id=”btn”」をもったdivタグを作りました。
CSS
body {
text-align: center;
}
h2 {
margin: 50px 0 30px 0;
font-size: 30px;
}
#btn {
user-select: none;
background-color: red;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
box-shadow: 0 10px #efefef;
color: #fff;
font-size: 30px;
margin: 30px auto;
}
#btn:active {
box-shadow: 0 5px #efefef;
margin-top: 35px;
}
「btn」をクリックすると、ボタンが凹むような実装にしました。
JavaScript
そして最後にJavaScriptのコードです。
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
const omikuji = ['大吉', '中吉', '小吉', '吉', '末吉', '凶'];
const num = Math.floor(Math.random() * omikuji.length);
btn.textContent = omikuji[num];
まずは、getElementByIdで「id=”btn”」の要素を取得。
そして、addEventListenerでbtnをクリックしたら処理が起こるようにアロー関数を書きます。
関数の中に、resultの名前の変数を作成し、その中に[‘大吉’, ‘中吉’, ‘小吉’, ‘吉’, ‘末吉’, ‘凶’]の値を入れた配列を用意。
次にnumといった変数を宣言し、配列の要素の数の量だけランダムな整数値を取得します。
最後に、btnにtextContentを使って、変数omikujiのランダムな整数値を取得します。
これでボタンをクリックしたら、おみくじの結果が表示されるようになりました。
まとめ
以上が、おみくじアプリの作り方でした。
これからもプログラミングを学んでいきましょう。
