jemimaabu/dead-and-wounded

A number guessing game (the original name is Bulls and Cows but I like violence so lol)

dead-and-wounded

A number guessing game.

The purpose of the game is to guess the random number generated by the computer.

If your guess has the right number in the right position, it registers as +1Dead.

If it has the right number but in the wrong position, it registers as +1Wounded.

Example: Computer generates a random number 4123 and you guess 2167 so it returns 1 dead, 1 wounded.

How To Play

1. Choose a difficulty level (Easy - 4 numbers, Medium - 5 numbers, Hard - 6 numbers).
2. Start guessing.
3. Use the responses to figure out the computer's number.

Rules

• The length of the number must correspond to the level chosen i.e. 1234 for Easy, 12345 for Medium, 123456 for Hard
• The input must consist only of numbers (no letters or special characters)
• The number should not have duplicate characters (no repeated numbers e.g. 0012, 1656 etc)

---

Open Source

This project is open to contributions from the public. Basically, if you're a beginner, think of it as your introduction to open source. And if you've been open sourcing for a while, here's another contribution to add to your belt.

Contributing

Checkout CONTRIBUTING.md for details on creating pull requests and solving issues and all that jazz.

License

This project is licensed under the MIT License - see the LICENSE file for details.

dead-and-wounded's Issues

Result Display Table

Problem: The table for "Guess" and "Results" has no clear distinction and the Results row shifts to the left once a result is displayed.

Solution: Include a border on the table

Alternative: Set a fixed width to both rows so the difference is clear and no shifting occurs.

Include 'How To Play' div

Problem: The page doesn't include instructions on how to play

Solution: Create an "instructions" div with the "How to Play" content detailed in README.md

Implementation: Place the div above the form.

Arrange the select and input tags

Problem: The select and input are right next to each other.

Solution: Place the Input below the 'Difficulty' select and properly align it.

Implementation: You could use the line break tag or style it in CSS.

Create CSS File

Problem: The repo currently doesn't have a CSS file

Solution: Create a main.css file and link the html file to it

Style the form error div

Implementation: Apply a styling property to the form-errors div. Try to think of how errors in forms usually look and work with that.

Additional context
For bonus points:

• Highlight the input when an error occurs
• Make the form error transition (slideIn, fadeIN e.t.c.) into the page rather than just appearing

Show/Hide Instructions

Problem: The instructions take up space on the page.

Solution: Find a way to allow the user hide the instructions.

Implementation: Create a 'toggle InstructionsDisplay' method and use this to set instructions to display: none or display: block. Assign the method to a button on the page.

Additional context
Bonus points if you make the instructions disappear smoothly (e.g. slideUp)

Make Result Table Responsive

Problem: The table displaying results is too wide on mobile

Solution: Create a media query styling rule with max-width: 992px for the table

Include Rules on page

Implementation: Include the rules present in the README.md in the instructions div. Take note of the listing style used.

Show Minimum Word length

Hi there,
I noticed the user doesn't get to know the word length till he actually guesses.
I'm unsure if this is by design or not.
If it isn't I can make a small contrib to fix that.

Add Leader board System

Implementation: Add a leader board system ranking players based on number of tries and how quickly they finished after a game session

Table fixed headers and scrollable body

Headers are scrollable as the body. It would be better if headers were always visible while scrolling

Arrange Input In Mobile

Problem: The button overlaps the input in mobile view and the Difficulty label is on top of the select tag

Solution: Set the difficulty label and select to one line and let the input and button be below that in mobile.

Difficulty Label

Problem: The select option for levels i.e. "Easy, Medium, e.t.c." doesn't have a label

Solution: Include a label 'Difficulty' for the select options.