見出し画像

おみくじアプリ自分で作ってみた！

Yuki

今回は、模写ではなく自分でおみくじアプリを作ってみました！
今の自分でも、作れそうと思ったので挑戦した次第です。
意外にも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 = "";
});

完成品

簡単な仕様ですが、初めて自分で作れたのでとても嬉しいです！
ちょっとずつ身についてきているなと実感しました！
この調子で頑張ります！

この記事が気に入ったらサポートをしてみませんか？