おみくじアプリ自分で作ってみた!
今回は、模写ではなく自分でおみくじアプリを作ってみました!
今の自分でも、作れそうと思ったので挑戦した次第です。
意外にも10分くらいで作れました!
作成手順
1.HTMLで見た目を作る。おみくじの結果を表示するdivを作っておく
<body class="text-center mt-10">
<h1 class="title">おみくじ</h1>
<button id="btn" class="mr-3">おみくじスタート</button>
<button id="reset">リセット</button>
<div id="display" class="mt-2"></div>
<script src="site/js/main.js"></script>
</body>
2.ボタンなどの情報を取得して、おみくじの結果を配列で作る
let btn = document.getElementById("btn");
let display = document.getElementById("display");
let reset = document.getElementById("reset");
let list = [
"大吉",
"中吉",
"小吉",
"吉",
"末吉",
"凶",
"大凶",
];
3.ボタンを押した時に、配列からランダムで取り出してくるようにする。リセットボタンを作る
ランダムに取り出す方法を知らなかったので、調べました!!
btn.addEventListener("click",function(){
display.innerHTML = list[Math.floor(Math.random() * list.length)];
});
reset.addEventListener("click",function(){
display.innerHTML = "";
});
完成品
簡単な仕様ですが、初めて自分で作れたのでとても嬉しいです!
ちょっとずつ身についてきているなと実感しました!
この調子で頑張ります!
この記事が気に入ったらサポートをしてみませんか?