jemimaabu/dead-and-wounded

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

jemimaabu.com

A personal portfolio site built using HTML, CSS, jQuery and Python.

dead-and-wounded's Issues

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 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.

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.

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)

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 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.

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.

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

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.

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

Table fixed headers and scrollable body

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

Include Rules on page

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