-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f11ac4c
commit ba0242f
Showing
2 changed files
with
221 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <!DOCTYPE html> | ||
| <!-- Coding By CodingNepal - www.codingnepalweb.com --> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Hangman Game JavaScript | CodingNepal</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <script src="scripts/word-list.js" defer></script> | ||
| <script src="scripts/script.js" defer></script> | ||
| </head> | ||
| <body> | ||
| <div class="game-modal"> | ||
| <div class="content"> | ||
| <img src="#" alt="gif"> | ||
| <h4>Game Over!</h4> | ||
| <p>The correct word was: <b>rainbow</b></p> | ||
| <button class="play-again">Play Again</button> | ||
| </div> | ||
| </div> | ||
| <div class="container"> | ||
| <div class="hangman-box"> | ||
| <img src="#" draggable="false" alt="hangman-img"> | ||
| <h1>Hangman Game</h1> | ||
| </div> | ||
| <div class="game-box"> | ||
| <ul class="word-display"></ul> | ||
| <h4 class="hint-text">Hint: <b></b></h4> | ||
| <h4 class="guesses-text">Incorrect guesses: <b></b></h4> | ||
| <div class="keyboard"></div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| /* Importing Google font - Open Sans */ | ||
| @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| font-family: "Open Sans", sans-serif; | ||
| } | ||
| body { | ||
| display: flex; | ||
| padding: 0 10px; | ||
| align-items: center; | ||
| justify-content: center; | ||
| min-height: 100vh; | ||
| background: #5E63BA; | ||
| } | ||
| .container { | ||
| display: flex; | ||
| width: 850px; | ||
| gap: 70px; | ||
| padding: 60px 40px; | ||
| background: #fff; | ||
| border-radius: 10px; | ||
| align-items: flex-end; | ||
| justify-content: space-between; | ||
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | ||
| } | ||
| .hangman-box img { | ||
| user-select: none; | ||
| max-width: 270px; | ||
| } | ||
| .hangman-box h1 { | ||
| font-size: 1.45rem; | ||
| text-align: center; | ||
| margin-top: 20px; | ||
| text-transform: uppercase; | ||
| } | ||
| .game-box .word-display { | ||
| gap: 10px; | ||
| list-style: none; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| .word-display .letter { | ||
| width: 28px; | ||
| font-size: 2rem; | ||
| text-align: center; | ||
| font-weight: 600; | ||
| margin-bottom: 40px; | ||
| text-transform: uppercase; | ||
| border-bottom: 3px solid #000; | ||
| } | ||
| .word-display .letter.guessed { | ||
| margin: -40px 0 35px; | ||
| border-color: transparent; | ||
| } | ||
| .game-box h4 { | ||
| text-align: center; | ||
| font-size: 1.1rem; | ||
| font-weight: 500; | ||
| margin-bottom: 15px; | ||
| } | ||
| .game-box h4 b { | ||
| font-weight: 600; | ||
| } | ||
| .game-box .guesses-text b { | ||
| color: #ff0000; | ||
| } | ||
| .game-box .keyboard { | ||
| display: flex; | ||
| gap: 5px; | ||
| flex-wrap: wrap; | ||
| margin-top: 40px; | ||
| justify-content: center; | ||
| } | ||
| :where(.game-modal, .keyboard) button { | ||
| color: #fff; | ||
| border: none; | ||
| outline: none; | ||
| cursor: pointer; | ||
| font-size: 1rem; | ||
| font-weight: 600; | ||
| border-radius: 4px; | ||
| text-transform: uppercase; | ||
| background: #5E63BA; | ||
| } | ||
| .keyboard button { | ||
| padding: 7px; | ||
| width: calc(100% / 9 - 5px); | ||
| } | ||
| .keyboard button[disabled] { | ||
| pointer-events: none; | ||
| opacity: 0.6; | ||
| } | ||
| :where(.game-modal, .keyboard) button:hover { | ||
| background: #8286c9; | ||
| } | ||
| .game-modal { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| background: rgba(0,0,0,0.6); | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| z-index: 9999; | ||
| padding: 0 10px; | ||
| transition: opacity 0.4s ease; | ||
| } | ||
| .game-modal.show { | ||
| opacity: 1; | ||
| pointer-events: auto; | ||
| transition: opacity 0.4s 0.4s ease; | ||
| } | ||
| .game-modal .content { | ||
| padding: 30px; | ||
| max-width: 420px; | ||
| width: 100%; | ||
| border-radius: 10px; | ||
| background: #fff; | ||
| text-align: center; | ||
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | ||
| } | ||
| .game-modal img { | ||
| max-width: 130px; | ||
| margin-bottom: 20px; | ||
| } | ||
| .game-modal img[src="images/victory.gif"] { | ||
| margin-left: -10px; | ||
| } | ||
| .game-modal h4 { | ||
| font-size: 1.53rem; | ||
| } | ||
| .game-modal p { | ||
| font-size: 1.15rem; | ||
| margin: 15px 0 30px; | ||
| font-weight: 500; | ||
| } | ||
| .game-modal p b { | ||
| color: #5E63BA; | ||
| font-weight: 600; | ||
| } | ||
| .game-modal button { | ||
| padding: 12px 23px; | ||
| } | ||
|
|
||
| @media (max-width: 782px) { | ||
| .container { | ||
| flex-direction: column; | ||
| padding: 30px 15px; | ||
| align-items: center; | ||
| } | ||
| .hangman-box img { | ||
| max-width: 200px; | ||
| } | ||
| .hangman-box h1 { | ||
| display: none; | ||
| } | ||
| .game-box h4 { | ||
| font-size: 1rem; | ||
| } | ||
| .word-display .letter { | ||
| margin-bottom: 35px; | ||
| font-size: 1.7rem; | ||
| } | ||
| .word-display .letter.guessed { | ||
| margin: -35px 0 25px; | ||
| } | ||
| .game-modal img { | ||
| max-width: 120px; | ||
| } | ||
| .game-modal h4 { | ||
| font-size: 1.45rem; | ||
| } | ||
| .game-modal p { | ||
| font-size: 1.1rem; | ||
| } | ||
| .game-modal button { | ||
| padding: 10px 18px; | ||
| } | ||
| } |