JavaScriptでおみくじを作ってみた- 勉強のメモ

おみくじアプリの作成過程をまとめて。
(2019/08/28 書いてるときにつまずいたところを追記)

<H1>目的</h1>
ボタンを押したら画像がランダムで出てくるタイプのおみくじを作る。
画像はいらすとやさんからお借りしました。

<h1>コード</h1>

```HTML:HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <title>おみくじ</title>
</head>
<body>

    <section>

        <h1>おみくじ</h1>

        <div id="result"><i class="fas fa-question faa-wrench animated"></i></div>

        <div id="btn"><i class="far fa-star fa-spin"></i>占う</div>
        

    </section>
</body>
</html>
```

```CSS:CSS
body{

    font-family: 'Kosugi Maru', sans-serif;
    text-align: center;
}

h1{
    
    font-size: 30px;

}

#result{

    margin: 0 auto;
    width: 181px;
    height: 400px;
    border: 5px solid black;
    border-radius: 20px;
    font-size: 60px;
    line-height: 400px;
}

#btn{

    font-size: 20px;
    color: #ffffff;
    background: #7ab6ff;
    box-shadow: 0 4px 0#0f7bff;
    border-radius: 20px;
    width: 300px;
    padding: 20px 0;
    margin: 30px auto 0 auto;
    cursor: pointer;

}

#btn:active{
    box-shadow: 0 2px 0 #0f7bff;
}

````

```JavaScript:JavaScript

var img = new Array (
    './images/daikiti.png',
    './images/chukiti.png',
    './images/syouchiti.png',
    './images/kichi.png',
    './images/suekiti.png',
    './images/kyou.png',
    './images/daikyou.png'
);

var button = document.getElementById('btn');

button.addEventListener('click', () =>{

    var random = Math.floor(Math.random() * img.length);
    var result = '<img src =' +img[random]+ '>';

    document.getElementById('result').innerHTML = result;

})

```

#コードの解説

```CSS:CSS
#btn:active{
    box-shadow: 0 2px 0 #0f7bff;
}
```

btnをクリックされたときのスタイルを```box-shadow```で指定。

```JavaScript:JavaScript
var img = new Array (
    './images/daikiti.png',
    './images/chukiti.png',
    './images/syouchiti.png',
    './images/kichi.png',
    './images/suekiti.png',
    './images/kyou.png',
    './images/daikyou.png'
);
```
変数で画像の配列を作成。


```HTML:HTML
<div id="btn"><i class="far fa-star fa-spin"></i>占う</div>
```

```JavaScript:JavaScript
var button = document.getElementById('btn');
```
HTMLの```btn```を変数で指定する。

```JavaScript:JavaScript

button.addEventListener('click', () =>{

   //クリックされたときの内容を記述

})


```

btnがクリックされたときの内容を記述する。
ランダムで画像を表示させたいので、```Math.random()```を使いランダムで配列を出す。

```JavaScript:JavaScript
var random = Math.floor(Math.random() * img.length);
    var result = '<img src =' +img[random]+ '>';

```
変数を使い画像を表示する要素を生成する。

```JavaScript:JavaScript

document.getElementById('result').innerHTML = result;

```
HTMLの`result`に```innerHTML```を使い画像を表示。


<h1>完成</h1>
![omikuji.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254314/cc13478b-248c-1c43-a757-47cdf3ff2af5.gif)


#:sob:書いててつまずいたところ(追記)

```JavaScript:JavaScript

    var random = Math.floor(Math.random() * img.length);

    document.getElementById('result').innerHTML = random;

```

![omikuji.miss.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254314/8daf95a1-c01f-e8db-9a9c-5b18cbb5aeca.gif)

(画像じゃなくて何故か数字が…)



```JavaScript:JavaScript

 var random = Math.floor(Math.random() * img.length);
    var result = '<img src =' +img[random]+'>';

    document.getElementById('result').innerHTML = result;

```
変数`result`に画像を表示するimg要素を生成したうえで`innterHTML`で表示。




#参考
[いらすとや](https://www.irasutoya.com/)
[ドットインストール](https://dotinstall.com)