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).
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.
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.
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.
Control the input field to accept only the numbers between 1-20;
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.
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.