A rock paper scissors web app. The intent was to create a 2-player game that mimicked the real-life gameplay of RPS as much as possible. My vision was clear: something simple, lightweight, slick, and stylish. I didn’t want to mess with the rules of the game; I just wanted to do one thing really really well.
Below I’ll show you random snippets of information I learned and used.
Understanding the DOM was very important in this app. The DOM is a data representation of the objects in the HTML. The document loaded in your browser is represented by a document object model. Moreover, it is a “tree structure” representation created by the browser that enables the HTML structure to be easily accessed by programming languages. The DOM is not a part of the JavaScript language, it’s constructed by the browser and it represents the document as nodes(elements in the DOM).
Objects in JavaScript are a complex topic, objects are like containers. You can store data in them, or, like in the case of the Math object, you can store functionality like the random function. Functions in JavaScript can be thought of as a piece of code which returns some other type of value. Functions can be identified by the parentheses that come after them (). In the case of Math.floor, what's returned is a random decimal number between 0 and 1.0. But what we want is a whole number. In that case we will use const randomNumber = Math.floor(Math.random() * 3). This will return a whole number (0,1 or 2), as we have 3 options: Rock, Paper or Scissors.
Now we have 3 options for each opponent , they can win, lose or they can draw.
I created icons to represent each one of the choices in the game, and then adding event listeners to each of those icons in order to register the user’s choice in each round.
I learned a lot about CSS styling and even figured out how to make this fun background.
The main difference between “==” and “===” operator is that formerly compares variable by making type correction e.g. if you compare a number with a string with numeric literal, == allows that, but === doesn’t allow that, because it not only checks the value but also type of two variable, if two variables are not of the same type “===” return false, while “==” return true.
Above you can see I used the preventDefault() event method. The default behavior of a form is to try and submit the form data based on a defined action causing a redirect. We don’t need to define an action. The result, however, is that the form redirects to the current page, causing a refresh. By using event.preventDefault(), we stop this behavior from happening, this speeds up response time
What is returned by a fetch? Fetch retrieves data; specifically it returns a promise. The Fetch API provides a fetch () method defined on the window object, which you can use to perform requests. This method returns a Promise that you can use to retrieve the response of the request.
What is a promise? A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved. A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.
Two then() blocks, both contain a callback function that will run if the previous operation is successful, and each callback receives as input the result of the previous successful operation, so you can go forward and do something else to it. Each .then() block returns another promise, meaning that you can chain multiple .then() blocks onto each other, so multiple asynchronous operations can be made to run in order, one after another.
fetch(url)
.then(process)
.then(save)
.catch(handleErrors)
;
An arrow function is ‘anonymous’ which means it can’t be called back or used again. Only used when you need to use a function one time. With arrow functions the ‘this’ keyword always represents the object that defined the arrow function.
This. represents the parent of what the function is being called in. When it hits game.save(), it is pushed to the array.
