live: https://berkaybideci.github.io/hangman-game/
Create a hangman game!
Example of what we want to accomplish here. You can use it to know exactly what the game is about, but do not copy it. Use your own way. Be as creative as you can! (You don't need to implement Hint button)
-
HTML:
- Add buttons that correspond to each letter from a to z.
- Add a section that will hold the blanks that are going to be equal to the number of characters for the current word.
- Add a div to show the man who's going to be hanged if you lose.
- Add a counter from 10 that will decrease by 1 with every wrong guess.
- Add a button to play again.
-
JS:
- 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.
- Everytime the user clicks on one of the letters the following should happen:
- 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.
- The button becomes disabled and should only work once.
- If the lives counter reaches 0 then the game is over and the hangman should be HANGED! 👨🦱🔪
- Clicking on the play again button should do the whole process again.
- Use
projectsin github, they can be useful in arranging the tasks or issues with description and image so everyone knows what they should do - To track your work its better to add columns like
in progress,done, andclosed - Minimize the communication required in Slack, try to make depend on review comments and task descriptions
- You should create a branch locally with the naming convention
[issue id + issue title]and then push it and submit a Pull Request that must be close that issue. Look here to know more. - Make the tasks small but more, this can reduce conflicts and won't overwhelm you.
Pull Requests
- Go to the issues board and create a new issue with the task assigned to you.
- Assign the issue to yourself so others know who is working on this issue.
- After finishing the work, push your code and assign your team membmers on that pull request so they can review the code.
Commit Message Format
Each commit message consists of a header, a body and a footer. The header has a special format that includes a type and a subject:
<type>: <subject>
<BLANK LINE>
<body>
The header is mandatory, while the body is optional but highly encouraged.
Type
Must be one of the following:
- Build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- Doc: Documentation only changes
- Feat: A new feature
- Fix: A bug fix
- Perf: A code change that improves performance
- Refactor: A code change that neither fixes a bug nor adds a feature
- Style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
Subject
The subject contains a succinct description of the change:
- use the imperative, present tense: “change” not “changed” nor “changes”
- don’t capitalize the first letter
- no dot (.) at the end
Body
Just as in the subject, use the imperative, present tense: “change” not “changed” nor “changes”. The body should include the motivation for the change and contrast this with previous behavior.
- The code should be totally clean and checked line by line before committing and pushing.
- You shouldn't leave any unnecessary comments in the code.
- Don't leave any logs inside the code.
- All variables should be
constexcept for specific cases where you will need to uselet - Variables should use camelCase naming convention
- CSS classes should follow BEM naming convention. You can find more about it here.
- Leave only one empty line between CSS classes. This also goes for different purpose code blocks (like
importsand variables under it). - Make sure your naming is right and not confusing i.e. the
navbarshouldn't be namedheaderor when you fetchmoviesyour function should returnmoviesnotdata - Make sure you clean your imported modules or files that you don't use before committing. The same goes for any variable, function or piece of code not used.
- Don't repeat yourself (DRY). Make sure the code you write is reusable and reduce repetition of information of all kinds. For example, don't write two functions that do the same or almost the same job. Read more about DRY here.
If you have issues, google them.
If you still have issues, talk to your friends in the same room.
If you still have issues, talk to your instructors.
NOTE: Be creative with the game's mechanics and design!!! Have fun, and Good luck :D