1- let audioFile , $pause , $play , _cachedSelectedMusicId ;
1+ let audioFile , $pause , $play , _cachedSelectedMusicId ;
22let subtextArr = [ 'Where do you want to be teleported?' ,
3- 'Make your pick and start making things' ,
4- 'Pick your mood before you make things' ,
5- 'Listen awesome. Do awesome.' ,
6- 'Be productive today, pick your mood!' ,
7- 'Pick, before you start making things' ] ;
3+ 'Make your pick and start making things' ,
4+ 'Pick your mood before you make things' ,
5+ 'Listen awesome. Do awesome.' ,
6+ 'Be productive today, pick your mood!' ,
7+ 'Pick, before you start making things'
8+ ] ;
89
910let randomSubtext = subtextArr [ Math . floor ( Math . random ( ) * subtextArr . length ) ] ;
1011
11- document . addEventListener ( "DOMContentLoaded" , ( event ) => {
12+
13+ $pause = document . querySelector ( '.pausePlayBtn.icon-pause' ) ;
14+ $play = document . querySelector ( '.pausePlayBtn.icon-play' ) ;
15+
16+ let playAudio = ( ) => {
17+ if ( $pause . style . visibility === 'visible' ) {
18+ audioFile . pause ( ) ;
19+ $pause . style . visibility = 'hidden' ;
20+ $play . style . visibility = 'visible' ;
21+ } else {
22+ audioFile . play ( ) ;
23+ $pause . style . visibility = 'visible' ;
24+ $play . style . visibility = 'hidden' ;
25+ }
26+ } ;
27+ document . addEventListener ( 'DOMContentLoaded' , ( ) => {
1228 document . querySelector ( '.mainTitle__subtext' ) . innerText = randomSubtext ;
1329 $pause = document . querySelector ( '.pausePlayBtn.icon-pause' ) ;
1430 $play = document . querySelector ( '.pausePlayBtn.icon-play' ) ;
1531
16- document . querySelector ( '.pausePlayContainer' ) . addEventListener ( "click" , ( ) => {
17- if ( $pause . style . visibility === 'visible' ) {
18- audioFile . pause ( ) ;
19- $pause . style . visibility = 'hidden' ;
20- $play . style . visibility = 'visible' ;
21- } else {
22- audioFile . play ( ) ;
23- $pause . style . visibility = 'visible' ;
24- $play . style . visibility = 'hidden' ;
25- }
32+ document . querySelector ( '.pausePlayContainer' ) . addEventListener ( 'click' , ( ) => {
33+ playAudio ( ) ;
2634 } ) ;
2735
28- document . querySelector ( '.icon-cancel' ) . addEventListener ( " click" , ( ) => {
29- document . querySelector ( '.page3' ) . style . display = 'none' ;
36+ document . querySelector ( '.icon-cancel' ) . addEventListener ( ' click' , ( ) => {
37+ document . querySelector ( '.page3' ) . style . display = 'none' ;
3038 } ) ;
3139} ) ;
3240
41+ window . addEventListener ( 'keydown' , function ( e ) {
42+ if ( e . keyCode === 80 || e . keyCode === 32 ) {
43+ // keycode for 'p' button or 'spacebar' to pause-play
44+ e . preventDefault ( ) ;
45+ playAudio ( ) ;
46+ }
47+
48+ if ( e . keyCode === 37 ) {
49+ // keycode for 'left-arrow' button for menu-page
50+ e . preventDefault ( ) ;
51+ landingPageFn ( ) ;
52+ }
53+
54+ if ( e . keyCode === 39 ) { // keycode for 'right-arrow' button player-page
55+ e . preventDefault ( ) ;
56+ playerPageFn ( localStorage . getItem ( 'musicId' ) ) ;
57+ }
58+ } ) ;
59+
3360let playerPageFn = ( id ) => {
61+ localStorage . setItem ( 'musicId' , id ) ;
3462 let selectedMusicId = document . querySelector ( '#' + id ) ;
3563 let selectedMusicTitle = selectedMusicId . querySelector ( '.musicOptBox__title' ) . innerText ;
3664 let selectedMusicDesc = selectedMusicId . querySelector ( '.musicOptBox__desc' ) . innerText ;
@@ -57,13 +85,13 @@ let playerPageFn = (id) => {
5785 document . querySelector ( '.page2' ) . style . display = 'block' ;
5886 document . querySelector ( '.musicOptBox.page2' ) . style . display = 'block' ;
5987 _cachedSelectedMusicId = selectedMusicId ;
60- }
88+ } ;
6189
6290let landingPageFn = ( ) => {
6391 document . querySelector ( '.page2' ) . style . display = 'none' ;
6492 document . querySelector ( '.page1' ) . style . display = 'block' ;
65- }
93+ } ;
6694
67- let aboutPageFn = ( ) => {
95+ let aboutPageFn = ( ) => { // eslint-disable-line
6896 document . querySelector ( '.page3' ) . style . display = 'block' ;
69- }
97+ } ;
0 commit comments