├── Alan Walker vs Coldplay Hymn For The Weekend Remix.mp3 ├── Believer original.mp3 ├── Build.html ├── Day N Nite From Moon Knight.mp3 ├── Hey Mama ft Nicki Minaj Bebe Rexha David Guetta.mp3 ├── I love you.mp3 ├── Janji Heroes Tonight feat Johnning NCS Release.mp3 ├── Pasoori Ali Sethi x Shae Gill Coke Studio Season 14.mp3 ├── Piercing Light.mp3 ├── Sia unstoppable.mp3 ├── Stone_Bang.html ├── The sky is pink and blue.jpg ├── app.js ├── index.html └── styles.css /Alan Walker vs Coldplay Hymn For The Weekend Remix.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Warlord27/JavaScrit_project/d25e2d1b0abe6315da2cfa48c296b567b12592d0/Alan Walker vs Coldplay Hymn For The Weekend Remix.mp3 -------------------------------------------------------------------------------- /Believer original.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Warlord27/JavaScrit_project/d25e2d1b0abe6315da2cfa48c296b567b12592d0/Believer original.mp3 -------------------------------------------------------------------------------- /Build.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | JavaScript Calculator 5 | 6 | 56 | 57 | 58 | 59 |

Calculator Program in JavaScript

60 |
61 |
62 | 63 | 64 |

65 | 66 | 67 | 68 | 69 | 70 | 71 |

72 | 73 | 74 | 75 | 76 | 77 |

78 | 79 | 80 | 81 | 82 | 83 |

84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
92 | 93 | 94 |
95 | 96 |
97 |
98 | 99 | -------------------------------------------------------------------------------- /Day N Nite From Moon Knight.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Warlord27/JavaScrit_project/d25e2d1b0abe6315da2cfa48c296b567b12592d0/Day N Nite From Moon Knight.mp3 -------------------------------------------------------------------------------- /Hey Mama ft Nicki Minaj Bebe Rexha David Guetta.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Warlord27/JavaScrit_project/d25e2d1b0abe6315da2cfa48c296b567b12592d0/Hey Mama ft Nicki Minaj Bebe Rexha David Guetta.mp3 -------------------------------------------------------------------------------- /I love you.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Warlord27/JavaScrit_project/d25e2d1b0abe6315da2cfa48c296b567b12592d0/I love you.mp3 -------------------------------------------------------------------------------- /Janji Heroes Tonight feat Johnning NCS Release.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Warlord27/JavaScrit_project/d25e2d1b0abe6315da2cfa48c296b567b12592d0/Janji Heroes Tonight feat Johnning NCS Release.mp3 -------------------------------------------------------------------------------- /Pasoori Ali Sethi x Shae Gill Coke Studio Season 14.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Warlord27/JavaScrit_project/d25e2d1b0abe6315da2cfa48c296b567b12592d0/Pasoori Ali Sethi x Shae Gill Coke Studio Season 14.mp3 -------------------------------------------------------------------------------- /Piercing Light.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Warlord27/JavaScrit_project/d25e2d1b0abe6315da2cfa48c296b567b12592d0/Piercing Light.mp3 -------------------------------------------------------------------------------- /Sia unstoppable.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Warlord27/JavaScrit_project/d25e2d1b0abe6315da2cfa48c296b567b12592d0/Sia unstoppable.mp3 -------------------------------------------------------------------------------- /Stone_Bang.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | KeyBoard Music 6 | 7 | 8 |

Press the key shown in the screen to listen song.

9 |
10 |
11 | A 12 |
13 |
14 | S 15 |
16 |
17 | D 18 |
19 |
20 | F 21 |
22 |
23 | G 24 |
25 |
26 | H 27 |
28 |
29 | J 30 |
31 |
32 | K 33 |
34 |
35 | L 36 |
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 65 | 96 | -------------------------------------------------------------------------------- /The sky is pink and blue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Warlord27/JavaScrit_project/d25e2d1b0abe6315da2cfa48c296b567b12592d0/The sky is pink and blue.jpg -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | // app.js 2 | 3 | // Complete logic of game inside this function 4 | const game = () => { 5 | let playerScore = 0; 6 | let computerScore = 0; 7 | let moves = 0; 8 | 9 | 10 | // Function to 11 | const playGame = () => { 12 | const rockBtn = document.querySelector('.rock'); 13 | const paperBtn = document.querySelector('.paper'); 14 | const scissorBtn = document.querySelector('.scissor'); 15 | const playerOptions = [rockBtn,paperBtn,scissorBtn]; 16 | const computerOptions = ['rock','paper','scissors'] 17 | 18 | // Function to start playing game 19 | playerOptions.forEach(option => { 20 | option.addEventListener('click',function(){ 21 | 22 | const movesLeft = document.querySelector('.movesleft'); 23 | moves++; 24 | movesLeft.innerText = `Moves Left: ${10-moves}`; 25 | 26 | 27 | const choiceNumber = Math.floor(Math.random()*3); 28 | const computerChoice = computerOptions[choiceNumber]; 29 | 30 | // Function to check who wins 31 | winner(this.innerText,computerChoice) 32 | 33 | // Calling gameOver function after 10 moves 34 | if(moves == 10){ 35 | gameOver(playerOptions,movesLeft); 36 | } 37 | }) 38 | }) 39 | 40 | } 41 | 42 | // Function to decide winner 43 | const winner = (player,computer) => { 44 | const result = document.querySelector('.result'); 45 | const playerScoreBoard = document.querySelector('.p-count'); 46 | const computerScoreBoard = document.querySelector('.c-count'); 47 | player = player.toLowerCase(); 48 | computer = computer.toLowerCase(); 49 | if(player === computer){ 50 | result.textContent = 'Tie' 51 | } 52 | else if(player == 'rock'){ 53 | if(computer == 'paper'){ 54 | result.textContent = 'Computer Won'; 55 | computerScore++; 56 | computerScoreBoard.textContent = computerScore; 57 | 58 | }else{ 59 | result.textContent = 'Player Won' 60 | playerScore++; 61 | playerScoreBoard.textContent = playerScore; 62 | } 63 | } 64 | else if(player == 'scissors'){ 65 | if(computer == 'rock'){ 66 | result.textContent = 'Computer Won'; 67 | computerScore++; 68 | computerScoreBoard.textContent = computerScore; 69 | }else{ 70 | result.textContent = 'Player Won'; 71 | playerScore++; 72 | playerScoreBoard.textContent = playerScore; 73 | } 74 | } 75 | else if(player == 'paper'){ 76 | if(computer == 'scissors'){ 77 | result.textContent = 'Computer Won'; 78 | computerScore++; 79 | computerScoreBoard.textContent = computerScore; 80 | }else{ 81 | result.textContent = 'Player Won'; 82 | playerScore++; 83 | playerScoreBoard.textContent = playerScore; 84 | } 85 | } 86 | } 87 | 88 | // Function to run when game is over 89 | const gameOver = (playerOptions,movesLeft) => { 90 | 91 | const chooseMove = document.querySelector('.move'); 92 | const result = document.querySelector('.result'); 93 | const reloadBtn = document.querySelector('.reload'); 94 | 95 | playerOptions.forEach(option => { 96 | option.style.display = 'none'; 97 | }) 98 | 99 | 100 | chooseMove.innerText = 'Game Over!!' 101 | movesLeft.style.display = 'none'; 102 | 103 | if(playerScore > computerScore){ 104 | result.style.fontSize = '2rem'; 105 | result.innerText = 'You Won The Game' 106 | result.style.color = '#308D46'; 107 | } 108 | else if(playerScore < computerScore){ 109 | result.style.fontSize = '2rem'; 110 | result.innerText = 'You Lost The Game'; 111 | result.style.color = 'red'; 112 | } 113 | else{ 114 | result.style.fontSize = '2rem'; 115 | result.innerText = 'Tie'; 116 | result.style.color = 'grey' 117 | } 118 | reloadBtn.innerText = 'Restart'; 119 | reloadBtn.style.display = 'flex' 120 | reloadBtn.addEventListener('click',() => { 121 | window.location.reload(); 122 | }) 123 | } 124 | 125 | 126 | // Calling playGame function inside game 127 | playGame(); 128 | 129 | } 130 | 131 | // Calling the game function 132 | game(); 133 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | Rock Paper Scissor 12 | 13 | 14 |
15 | 16 |
Rock Paper Scissor
17 | 18 | 19 |
20 |
21 |

Player

22 |

0

23 | 24 |
25 |
26 |

Computer

27 |

0

28 | 29 |
30 |
31 | 32 |
Choose your move
33 | 34 | 35 |
Moves Left: 10
36 | 37 | 38 |
39 | 40 | 41 | 42 |
43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 |
51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* styles.css */ 2 | /* universal selector - Applies to whole document */ 3 | *{ 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | background: #0b5ff0; 8 | color: rgb(248, 237, 237); 9 | } 10 | /* To center everything in game */ 11 | .game{ 12 | display: flex; 13 | flex-direction: column; 14 | height: 100vh; 15 | width: 100vw; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | /* Title of the game */ 21 | .title{ 22 | position: absolute; 23 | top: 0; 24 | font-size: 4rem; 25 | z-index: 2; 26 | } 27 | 28 | /* Score Board */ 29 | .score{ 30 | display: flex; 31 | width: 30vw; 32 | justify-content: space-evenly; 33 | position: absolute; 34 | top: 70px; 35 | z-index: 1; 36 | } 37 | 38 | /* Score */ 39 | .p-count,.c-count{ 40 | text-align: center; 41 | font-size: 1.5rem; 42 | margin-top: 1rem; 43 | } 44 | 45 | /* displaying three buttons in one line */ 46 | .options{ 47 | display: flex; 48 | width: 50vw; 49 | justify-content: space-evenly; 50 | margin-top: 2rem; 51 | } 52 | 53 | /* Styling on all three buttons */ 54 | .rock, .paper, .scissor{ 55 | padding: 0.8rem; 56 | width: 100px; 57 | border-radius: 10px; 58 | background: rgb(232, 235, 50); 59 | outline: none; 60 | border-color: rgb(50, 162, 50); 61 | border: none; 62 | cursor: pointer; 63 | } 64 | 65 | .move{ 66 | font-size: 2rem; 67 | font-weight: bold; 68 | } 69 | 70 | /* Reload button style */ 71 | .reload { 72 | display: none; 73 | margin-top: 2rem; 74 | padding: 1rem; 75 | background: rgb(41, 201, 213); 76 | outline: none; 77 | border: none; 78 | border-radius: 10px; 79 | cursor: pointer; 80 | } 81 | 82 | .result{ 83 | margin-top: 20px; 84 | font-size: 1.2rem; 85 | } 86 | 87 | /* Responsive Design */ 88 | @media screen and (max-width: 612px) 89 | { 90 | .title{ 91 | text-align: center; 92 | } 93 | .score{ 94 | position: absolute; 95 | top: 200px; 96 | width: 100vw; 97 | } 98 | .options{ 99 | width: 100vw; 100 | } 101 | } --------------------------------------------------------------------------------