【JavaScript】おみくじを作ってみた

こんにちは！セミマサです。

今回はJavaScriptを使っておみくじを作ってみました。

デモサイト
ソースコード
おわりに

デモサイト

今回のデモサイトです。

ソースコード

HTML

<section>
    <div class="fortune-container">
        <div id="fortune">ここに結果が表示されます</div>
        <button id="fortune-button">おみくじを引く！</button>
    </div>
</section>

<div id="fortune">ここに結果が表示されます</div>

<button id="fortune-button">おみくじを引く！</button>

</div>

</section>

今回のHTMLです。

CSS

.fortune-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding:16px 0;
}
#fortune{
  border:2px red solid;
  font-size: 1.5rem;
  text-align: center;
  width: 48%;
  padding: 8px;
}

#fortune-button{
  margin-top: 8px;
  background-color: cornsilk;
  border-color: rosybrown;
  border-width: 4px;
}

.fortune-container{

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

padding:16px 0;

}

#fortune{

border:2px red solid;

font-size: 1.5rem;

text-align: center;

width: 48%;

padding: 8px;

}

#fortune-button{

margin-top: 8px;

background-color: cornsilk;

border-color: rosybrown;

border-width: 4px;

}

今回のCSSです。

JavaScript


const button = document.getElementById('fortune-button')
const fortune = result =>{
    document.getElementById('fortune').textContent = result;
};
const shuffle = array =>{
    for(let i = array.length -1; i > 0; i--){
        let j = Math.floor(Math.random() * (i + 1));
        let reserve = array[i];
        array[i] = array[j];
        array[j] = reserve;
    }
    fortune(array[0]);
};
button.onclick = ()=>{
    const fortuneArray = ['大吉','中吉','小吉','吉','末吉','凶','大凶'];
    shuffle(fortuneArray);
};