I made a simple 'Guess my Number' game with JavaScript, please give your feedback

Hello. I made a small web application to practice JavaScript, mainly DOM manipulation. It’s a game where the user needs to guess a number between 1 and 20. It has a scoring and highscore system, sound effects (which can be disabled).

You can check it out here: Guess My Number!

I have found one problem tho, and i wonder if anyone here can help me. I worked hard to make it responsive, and when I check the chrome developer tools, I see that the app works well and responsively in all the examples of viewports that exists in the dev tools.

But when i try to test it on my smartphone (Samsung Galaxy J6) or in my girlfriend’s (Iphone 8 Plus) everything is very messy. Some things are on top of others, etc.

I do not know what’s going on. The viewport size of my device and that of my girlfriend fit the media queries that I created. Does anyone have a sense of what might be happening?

PS: Sorry my bad english, its not my first language.

3 Likes

Hi @athos.franco123 !

I think your project looks good.
As for the phone issue, I tried it on my phone (iphone se) and it is working fine.

1 Like

I think it looks good (no issues on my mobile). Can you post a screenshot of what’s not working?

Some things about the game:

  • I’d restrict the possible inputs (you’re looking for a number between 1 and 20, but I can also enter negative numbers and decimals)
  • You’re logging the secret number to the console…
  • It would be good to clear the input field after a guess, so the player doesn’t have to manually delete it when typing in a new number

Thank you @jwilkins.oboe :blush:

Idk why its not working on my phone then. It seems to be working on everybody’s.

Hello @jsdisco

  • I’d restrict the possible inputs (you’re looking for a number between 1 and 20, but I can also enter negative numbers and decimals)
  • It would be good to clear the input field after a guess, so the player doesn’t have to manually delete it when typing in a new number

Those are pretty good suggestions. Didnt thought about that. Thank you.

  • You’re logging the secret number to the console…

Lmao. I did that for testing purposes and forgot to remove it later. Thanks i will fix that.

Here’s the screenshot (the colors are darker because my phone is on night mode, which automatically darkens most colors on web):

It looks like the whole bottom section is pushed upwards somehow. I can’t reproduce this, so I can only guess…
You’re restricting the height of the <body> to 100vh, and the height of <main> to 65vh, but it looks like the game needs more space than that, so maybe that already solves it.

Hi @athos.franco123!

First, awesome job! I’ve played it for a while and I really enjoyed it :smiley:

Here is just some things that I think you could change:

  1. Control the input field to accept only the numbers between 1-20;

  2. When the reset button is pressed, clear the input field;

Tip: Consider using the React in your next apps, because it really helps you in the development of more complex projects

I defined html and body css to max-height 100vh, maybe that’s the problem. But I don’t understand why it doesn’t just work on my device. Still, I’ll check. Thanks.

  1. Control the input field to accept only the numbers between 1-20;
  2. When the reset button is pressed, clear the input field;

Thanks a lot for your feedback, man!

Tip: Consider using the React in your next apps, because it really helps you in the development of more complex projects

My goal is to learn React and React Native to also start developing native apps for mobile, but I have been studying programming for a short time, about 4 months. I started from scratch, without even knowing how to write an html tag. I spent a lot of time playing around with just HTML and CSS and i’ve been studying JavaScript just for a month, so I still don’t feel comfortable enough to learn a framework yet. When I am a little more proficient in the language, I move on to React! Thanks again man.

PS: Are you a fellow Brazilian? Your name seems like a Portuguese/Brazilian name to me.

1 Like

Hello everyone!!! I made the changes that you guys suggested!

  • Removed the secret number from the console log
  • Added increment/decrement buttons for better UX on mobile
  • Now the input clears automatically after the user wins/loses/resets the game
  • Inverted the position of the GUESS/RESET buttons (It’s easier to press ‘guess’ in mobile now)
  • Fixed the bug when you guess the number right and sets a new highscore, the message overlaps the score.

You can check the new version here.

The only thing I was unable to do was to limit the input range to be between 1 and 20. I read in the MDN that the <input> tag has attributes of min and max, but even after defining attributes, the user can still type numbers outside that range. Does anyone know a better way to solve this?

Those max and min attributes on the input won’t prevent someone from entering numbers outside that range. But if that input was within a <form>, the browser wouldn’t allow submitting the form.

You can use JavaScript to control the inputs, by attaching an 'input' event listener. If someone enters a number below 0, set the input’s value to 0. If someone enters a number above 20, set the input’s value to 20.