![]() This is where we have some JavaScript to ensure the number we enter is processed, compared to the answer value, and the appropriate results are generated and displayed in the scrollable results area. There are some other visual elements like the picture of a hamburger and the game title itself that round out all of the interesting parts that we see:ĭigging deeper, beneath the UI is the game logic itself. We didn't enter a guess at all and left the input blank.Our guess is correct and the game restarts.If we start with the UI, the primary elements are the input field where we enter our guess and a scrollable results area below where we see whether: If you want to see one way of solving this, check out Kirupa's video and article below:īefore we write the first line of code, it is helpful to take a step back and think about what is going on in this game. Please explain your problem in detail and one of the many helpful forum members will help you out. If you are stuck and need help, please ask on the forums. We want to make this a fun learning activity. Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges. Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message: To claim it, head over to the forums and respond in the Guess the Number Game topic. Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection: The rest of the content is what you will add entirely on your own! Getting Your Badge The HTML you see here is just the bare minimum content needed to help us get our web page up and running. If you prefer developing locally in your favorite code editor (like Visual Studio Code), create a new HTML document and copy/paste the following boilerplate/starting content into it: You may want to open the pen in a new window if you want more space to code your solution or bring up the Console to see the output. See the Pen Coding Exercises Start by Kirupa Chinnathambi ( CodePen. ![]() The easiest way is to fork the following Codepen pen and start adding your modifications: Seems like a fun and simple game, right? What you are going to do in this exercise is re-create this game. The idea is that, with each answer on where your guess falls, you can narrow down on the correct answer until you eventually guess the correct answer exactly: With that information, you make another guess to get closer to the answer. For every number you guess, if you didn't guess the number correctly, you will be told whether your guess is greater than or less than the actual number the game has in mind. The rules of this game are straightforward. Your goal is to guess the number the game has in mind. Your browser does not support inline frames or is currently configured not to display inline frames.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |