First and foremost we enjoyed working on this project and learned a great deal about implementing javascript functionality into this Number-Guesser game. The basis of the game is that two users can guess a number between 1 and 100, with the ability for the users to add custom ranges for increased intensity of play.
We started off by wireframing the project and planning out the beginning stages of setting up our HTML skeleton. We decided that we would place a header at the top of the page and then divide the body of the page into two halves; left-tile, and right-tile. We then proceeded to break the left-tile into 3 vertical block sections; the set range section, the game info section, and the guesses section. We reserved the right-tile of the page to handle the player cards. We then proceeded to plan out all of our elements that would go into each section.
After wireframing we began to build the HTML skeleton and planned out which elements to implement in each section, and we also started assigning some id's and classes to particular elements that we would need to call on in the future. We tried our best to properly format the HTML and to use semantic tags wherever possible.
Next we proceeded to style our HTML elements to get our game page to mostly match the comp that we were provided by our instructors. During this process we utilized the CSS flex property to move all of our containers and various inputs to get them where we ultimately wanted them to go. We also added various colors, paddings, margins, and font sizes/weights, to various elements to match our comp.
After fiddling around with our CSS for awhile we started implementing JavaScript into our game. We started by declaring a large number of variables at the top of our JS page to utilize in functions going forward. We built in a function so that the users can set a custom range and have it display lower on the page in the current range section. We also built in functionality so that their current guesses are displayed at the bottom of the page. Those guesses also have messages built in to be associated with their guess; i.e. "that's too high, that's too low, or Boom! for a correct guess. We also built in a lot of functionality to display error messages if a users guess is out of the range or if they didn't enter something into a particular field.
Overall we took a lot of pleasure in working on this project and learned a ton about implementing Javascript!
