Since the POST request is required to handle all increments of image clicks, a annotation is created for a function clicker() that returns a string with the updated click value. If you want to expand on this project and save all the point increments overtime, consider adding a database to the project later on. The counter variable is initialized at the beginning, which means that the total point cache resets once the application process is killed. The annotation marks the request handler required to build and provide the RESTful web service during runtime. This file is essential for serving data and REST ednpoints.Ĭreate a file named CatRestController.java and copy and paste the following code: Build the REST controllerĪs mentioned in the previous section, a few HTTP requests are necessary for the flow of this clicker game. This requires the game application to make a GET request and retrieve the last recorded counter before the user increments it by clicking. Here's an example of the expected HTML page at the end of the article:Īn optional addition to this clicker game is to have the document body display a total count once the page is freshly loaded for the user, such as when the URL is shared to another user or opened in a new tab. This POST request will be discussed further in the Controller later. This element is represented on the DOM as the text element and will be manipulated in JavaScript. Notice that total is used to store the totalCount element from the DOM, similar to the catpic. The catpic image is retrieved from the document in the JavaScript portion so that an onclick event function can be attached to the image. The image is given an id so that it can be retrieved from the Document Object Model (DOM). This clicker game will be simple and only display an image that responds to user clicking events, but feel free to change it up as you wish.Ĭopy and paste the following code to the cat.html file:īe sure to replace with the path name for the image you uploaded in the src/main/resources/static subfolder. This will be a fun section for those who enjoy using JavaScript to make their websites interactive. This file will be rendered from the helloCat() method in the web controller. The /static subfolder is a location for all static assets to be used and referenced throughout this project.įind the src/main/resources/templates subfolder and create a new file named cat.html. Go ahead and place a picture of a cat in the src/main/resources/static subfolder. A text response in string format is then created to store the response value of how many times, or total amount the image was clicked. Whenever the image is clicked, a counter should increment by one and display the counter dynamically. The objective of this clicker game is to make a POST request whenever the user clicks on the cat picture. The WebController has a helloCat() method that returns a string referencing the path name for the HTML template page that will be rendered.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |