社会人2年間の集大成！占いサイトを作成した話②のつづきとなります！
動物占い画面の紹介
機能の紹介
カードをクリックするとモーダルが表示され、占いの結果が表示されます。カードが8枚あり、8通りの運勢を用意しました。
// 1~8の値をつめた配列を作成letarray=[1,2,3,4,5,6,7,8]for(leti=array.length-1;i>=0;i--){letrand=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通りの結果を用意するconstinuText="";consthitsujiText="";constpandaText="";;constkabaText="";consttoraText="";constkumaText="";constnekoText="";constusagiText="";// カードをクリック後の処理$('.js-modal-open').on('click',function(){constcardVal=$(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();returnfalse;});// とじるボタンを押下した際の処理$('.js-modal-close').on('click',function(){$('.js-modal').fadeOut();returnfalse;});まとめ
画面遷移毎にランダムに値を設定し、モーダルに値に応じた結果を表示する方法を考えることに苦労しました。あとは、クリック時に画像を設定するので、少し速度が遅いところが課題です。。。設計書は絵に書いたもののみだったため自分の頭の中で整理することに苦労しました。