0から始めるJavaScriptの学習記録　その３　【ガチャと履歴】

こんにちは朱夏です。

JavaScriptの学習3日目やっていきます。
今回は、前2回の学習からガチャアプリを作ってみたいと思います。

ベースになるのは前回のおみくじアプリになります。

ドットインストール

JavaScriptでおみくじを作ろう (全9回)

https://dotinstall.com/lessons/omikuji_js_v5

JavaScriptで簡単なおみくじを実装する方法について学んでいきます。

それではやっていきます。

コード

今回も最初にコードを置いておきます。
先ずはHTMLです。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>ガチャ</title>
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
      <!----- ヘッダー ----->
      <header>ガチャ</header>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div id="btn">クリック！</div>
      <h2>排出結果</h2>
      <div id="inbox"></div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)test.com</p>
      </footer>
      <!----- フッター END ----->
      <script src="js/sample.js"></script>
   </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</footer>

</body>

</html>

次にCSSファイルです。

body {
    background: grey;
}

#btn {
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 50%;
    margin: 30px;
    text-align: center;
    line-height: 200px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    cursor: pointer;
    box-shadow: 0 10px 0 #b34139;
    user-select: none;
}

#btn:hover {
    opacity: 0.9;
}

#btn:active {
    box-shadow: 0 5px 0 #b34139;
    margin-top: 35px;
    margin-bottom: 25px;
}

.ssr {
    background-color: yellow;
    margin: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10%;
    text-align: center;
    line-height: 50px;
    color: #cfcfcf;
    font-size: 25px;
    user-select: none;
    animation: ssr-anime 0.3s ease-in;
}

@keyframes ssr-anime {
    0% {
        transform: rotate(0) scale(0);
        opacity: 0;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
    
}

.sr {
    background-color: #cfcfcf;
    margin: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10%;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 25px;
    user-select: none;
    animation: sr-anime 0.2s ease-in;
}

@keyframes sr-anime {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
    
}

.rare {
    background-color: brown;
    margin: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10%;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 25px;
    user-select: none;
    animation: r-anime 0.2s ease-in;
}

@keyframes r-anime {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
    
}

#inbox {
    display: flex;
    flex-wrap: wrap;
}

100

101

102

103

104

105

106

107

108

109

110

body {

background: grey;

}

#btn {

width: 200px;

height: 200px;

background: red;

border-radius: 50%;

margin: 30px;

text-align: center;

line-height: 200px;

color: white;

font-weight: bold;

font-size: 30px;

cursor: pointer;

box-shadow: 0 10px 0 #b34139;

user-select: none;

}

#btn:hover {

opacity: 0.9;

}

#btn:active {

box-shadow: 0 5px 0 #b34139;

margin-top: 35px;

margin-bottom: 25px;

}

.ssr {

background-color: yellow;

margin: 10px;

width: 50px;

height: 50px;

border-radius: 10%;

text-align: center;

line-height: 50px;

color: #cfcfcf;

font-size: 25px;

user-select: none;

animation: ssr-anime 0.3s ease-in;

}

@keyframes ssr-anime {

0% {

transform: rotate(0) scale(0);

opacity: 0;

}

100% {

transform: rotate(360deg) scale(1);

opacity: 1;

}

.sr {

background-color: #cfcfcf;

margin: 10px;

width: 50px;

height: 50px;

border-radius: 10%;

text-align: center;

line-height: 50px;

color: white;

font-size: 25px;

user-select: none;

animation: sr-anime 0.2s ease-in;

}

@keyframes sr-anime {

0% {

transform: scale(0);

opacity: 0;

}

100% {

transform: scale(1);

opacity: 1;

}

.rare {

background-color: brown;

margin: 10px;

width: 50px;

height: 50px;

border-radius: 10%;

text-align: center;

line-height: 50px;

color: white;

font-size: 25px;

user-select: none;

animation: r-anime 0.2s ease-in;

}

@keyframes r-anime {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

#inbox {

display: flex;

flex-wrap: wrap;

}

最後にJavaScriptファイルです。

'use strict'

{
    const btn = document.getElementById('btn')
    
    btn.addEventListener('click', () => {
        
        const n = Math.random();
        const gacha = document.createElement('div')

        if (n < 0.05) {
            btn.textContent = 'SSR';
            gacha.textContent = "SSR";
            gacha.classList.add('ssr');
        } else if (n < 0.2){
            btn.textContent = 'SR';
            gacha.textContent = "SR";
            gacha.classList.add('sr');
        } else {
            btn.textContent = 'R';
            gacha.textContent = "R";
            gacha.classList.add('rare');
        }
        
        document.getElementById('inbox').appendChild(gacha);

    })
}