Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
54 commits
Select commit Hold shift + click to select a range
5cd2137
Project structuring Fixes #1
Dhuha9 Feb 2, 2021
2a69fcb
Prettier config added, Fixes #2
Dhuha9 Feb 2, 2021
0c7d0b0
Add letter buttons
ismailkhalil20 Feb 2, 2021
9dda54d
Recommiting #5
ismailkhalil20 Feb 2, 2021
013c907
LetterBtns Component initializing #5
ismailkhalil20 Feb 2, 2021
44d5a96
Main Component initializing, Fixes #3
Dhuha9 Feb 2, 2021
0dbc831
Add components to Main component Fixes #9
Dhuha9 Feb 2, 2021
b3d9f28
Handling play again button Fixes #15
Dhuha9 Feb 2, 2021
30254c4
Handle letter buttons Fixes #10
ismailkhalil20 Feb 2, 2021
38a7a1b
Merge branch 'master' of https://github.com/Dhuha9/hangman_react_js
ismailkhalil20 Feb 2, 2021
1f329c7
Handling letter buttons callback to main Fixes #11
ismailkhalil20 Feb 3, 2021
8c0d0b3
Made an enhancement on the code
ismailkhalil20 Feb 3, 2021
f81dde4
Fetching API word #8
fayzasalman Feb 3, 2021
5a1bb25
Header Component initializing #4
fayzasalman Feb 3, 2021
cd8ef50
Not much changes
ismailkhalil20 Feb 3, 2021
59b00b7
fixed conflet
ismailkhalil20 Feb 3, 2021
699f987
Handled state when correct also added some features Fixes #12
ismailkhalil20 Feb 4, 2021
21ed9fb
Handling error Fixes #13
ismailkhalil20 Feb 4, 2021
340e781
fixed few bugs
ismailkhalil20 Feb 4, 2021
df3d93b
Fixed initialState and Set
ismailkhalil20 Feb 4, 2021
664ecd8
MatchedLetters Component initializing Fixes #6
Dhuha9 Feb 5, 2021
7240b83
Displaying guessed letters Fixes #16
Dhuha9 Feb 5, 2021
4aa98e4
Header design and styling Fixes #18
fayzasalman Feb 5, 2021
101da74
HangState Component done Fixes #7
Dhuha9 Feb 5, 2021
35fc8f6
Footer design and styling Fixes #19
fayzasalman Feb 5, 2021
72ff8ca
Merge branch 'master' of https://github.com/Dhuha9/hangman_react_js
fayzasalman Feb 5, 2021
4dbed91
guessedLetter error of undefind fixed
Dhuha9 Feb 5, 2021
c9644c0
Footer design and styling Fixes #19
fayzasalman Feb 5, 2021
2ce5add
Footer design and styling Fixes #19
fayzasalman Feb 5, 2021
ad095d2
handling playagain button from Footer component
Dhuha9 Feb 5, 2021
78d34e7
handling playagain button from Footer component
Dhuha9 Feb 5, 2021
56644f1
LetterBtns style added
fayzasalman Feb 5, 2021
ae73d6d
Matched style added
fayzasalman Feb 5, 2021
5247125
MatchedLetters Style done
fayzasalman Feb 5, 2021
820817e
some changes
ismailkhalil20 Feb 5, 2021
b1b3437
Main design and styling Fixes #20
fayzasalman Feb 5, 2021
d24b5df
want new changes
ismailkhalil20 Feb 5, 2021
845d897
Merge branch 'master' of https://github.com/Dhuha9/hangman_react_js
ismailkhalil20 Feb 5, 2021
37ea0a7
styling main done
fayzasalman Feb 5, 2021
ec5b8c5
won state handled
Dhuha9 Feb 5, 2021
3a6e5fe
main updated
fayzasalman Feb 5, 2021
369cc9c
Revert "main updated"
Dhuha9 Feb 5, 2021
8a05d12
stoped game from crashing
ismailkhalil20 Feb 5, 2021
7d280ec
back to original
ismailkhalil20 Feb 5, 2021
c5d6f24
finished every thing
ismailkhalil20 Feb 5, 2021
7f03076
Hint button handled
Dhuha9 Feb 6, 2021
a3bd19b
all resposive done
Dhuha9 Feb 6, 2021
b6f4ee6
displying won and lost
Dhuha9 Feb 6, 2021
e578220
README.md file added
fayzasalman Feb 6, 2021
136434c
readme file
fayzasalman Feb 6, 2021
a169e6b
Update README.md
fayzasalman Feb 6, 2021
5bf6051
Update README.md
fayzasalman Feb 6, 2021
f5b0c7b
Update README.md
fayzasalman Feb 6, 2021
cfb1f9c
Update README.md
fayzasalman Feb 6, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 36 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,38 @@
# Create a game
# ReactJS Hangman Game

### Built With

- [React ](https://reactjs.org/)- A JavaScript library for building user interfaces

#### Resulting image looks something like this:

## Overview
Create a hangman game! <br>
Example of what we want to accomplish
![Example of hangman game](images/example.jpg)
### Requirements

1. HTML:
1. Add buttons that correspond to each letter from a to z.
2. Add a section that will hold the blanks that are going to be equal to the number of characters for the current word.
3. Add a div to show the man who's going to be hanged if you lose.
4. Add a counter from 10 that will decrease by 1 with every wrong guess.
4. Add a button to play again.

2. JS:
1. At the beginning use fetch API to retrieve a random word from this api https://random-word-api.herokuapp.com/word?number=1. Make the blanks equal the number of letters in the random word.
2. Everytime the user clicks on one of the letters the following should happen:
1. The random word is search through to find if it contains the clicked letter, if the clicked letter is part of the random word's letters then it gets shown up instead of the space, if not, then the lives counter is decreased by one. In some rare cases a clicked letter corresponds to two letters in the generated word, if that happens then show both words.
2. The button becomes disabled and should only work once.
3. If the lives counter reaches 0 then the game is over and the hangman should be HANGED! 👨‍🦱🔪
4. Clicking on the play again button should do the whole process again.


NOTE: Be creative with the game's mechanics and design!!!
Have fun, and Good luck :D

## How to play

Try to discover the answer for the question choosing letter by letter. If the letter is not contained in the answer, a portion of the hangman is added and you will lose a chance.
The game ends when you discover the answer before the hangman is formed or when you do not have more attempts to play!

## Specifications

- Generate random words by fetching Api

### Dependencies

- Node: [http://nodejs.org/](http://nodejs.org/)
- ReactJS: [https://reactjs.org](https://reactjs.org)

### Initial Set Up

1. Clone the repository
2. `npm install` or `yarn`
3. `npm start` or `yarn start` app start with your port number

--------------------------------------------------------------
### UI design here
- Link : [https://xd.adobe.com/view/f759723c-c8d2-46a8-859e-4dba9ec99e06-a20a/](https://xd.adobe.com/view/f759723c-c8d2-46a8-859e-4dba9ec99e06-a20a)

### Play here

- Link : [https://grass-team-hangman-reactjs.netlify.app/](https://grass-team-hangman-reactjs.netlify.app)

Loading