社会人2年間の集大成！占いサイトを作成した話③

社会人2年間の集大成！占いサイトを作成した話②のつづきとなります！

動物占い画面の紹介

機能の紹介

カードをクリックするとモーダルが表示され、占いの結果が表示されます。カードが8枚あり、8通りの運勢を用意しました。

// 1~8の値をつめた配列を作成
let array = [1,2,3,4,5,6,7,8]
for (let i = array.length - 1; i >= 0; i--) {
    let rand = Math.floor(Math.random() * (i + 1));
    // 配列の数値を入れ替える
    [array[i], array[rand]] = [array[rand], array[i]]
  }

// それぞれのカードに1〜８の値を割り振る
$('.card-one').val(array[0]);
$('.card-two').val(array[1]);
$('.card-three').val(array[2]);
$('.card-four').val(array[3]);
$('.card-five').val(array[4]);
$('.card-six').val(array[5]);
$('.card-seven').val(array[6]);
$('.card-eight').val(array[7]);

// モーダルに表示する8通りの結果を用意する
const inuText = "";
const hitsujiText = "";
const pandaText = "";;
const kabaText = "";
const toraText = "";
const kumaText = "";
const nekoText = "";
const usagiText = "";

// カードをクリック後の処理
$('.js-modal-open').on('click',function(){
    const cardVal = $(this).val();
    // 1~8に割り振った番号をもとに表示する結果を設定する
    switch (cardVal) {
        case "1":
            $('.content').children('img').attr('src', '../images/inu.png');
            $('.fortune-result').text(inuText);
            break;
        case "2":
            $('.content').children('img').attr('src', '../images/hitsuji.png');
            $('.fortune-result').text(hitsujiText);
            break;
        case "3":
            $('.fortune-result').text(pandaText);
            break;
        case "4":
            $('.content').children('img').attr('src', '../images/kaba.png');
            $('.fortune-result').text(kabaText);
            break;
        case "5":
            $('.content').children('img').attr('src', '../images/tora.png');
            $('.fortune-result').text(toraText);
            break;
        case "6":
            $('.content').children('img').attr('src', '../images/kuma.png');
            $('.fortune-result').text(kumaText);
            break;
        case "7":
            $('.content').children('img').attr('src', '../images/neko.png');
            $('.fortune-result').text(nekoText);
            break;
        case "8":
            $('.content').children('img').attr('src', '../images/usagi.png');
            $('.fortune-result').text(usagiText);
            break;
    }
    // モーダルを表示する
    $('.js-modal').fadeIn();
    return false;
});

// とじるボタンを押下した際の処理
$('.js-modal-close').on('click',function(){
    $('.js-modal').fadeOut();
    return false;
});

まとめ

画面遷移毎にランダムに値を設定し、モーダルに値に応じた結果を表示する方法を考えることに苦労しました。あとは、クリック時に画像を設定するので、少し速度が遅いところが課題です。。。設計書は絵に書いたもののみだったため自分の頭の中で整理することに苦労しました。

今回はここまでとなります。
次回では恋愛占いのページの紹介を行っていきます

続きはこちら！
社会人2年間の集大成！占いサイトを作成した話④