Forem: Mooseshark

Super Basic Intro to Using HTML and JavaScript Together

Mooseshark — Tue, 07 Nov 2023 03:12:53 +0000

One of the biggest problems I, and I think a lot of new developers have come across while learning web development is a disjointed understanding of how HTML and JavaScript work together. Many tutorials focus on one or the other and it can lead to some confusion around how to actually use HTML and JavaScript together to create apps and web pages. This tutorial will go in depth to break down a very simple project. We'll make a small Rock, Paper, Scissors game that takes user input, determines the outcome of the selections, and prints the result to the user.

Prerequisites for this Tutorial

While the point of this is to be as beginner friendly as possible, the focus is much more on using HTML and JavaScript together, and less on HTML and JavaScript basics. I think an extremely introductory level of skill should be had beforehand. Doing the HTML and JavaScript courses someplace like Codecademy would be ideal and would provide enough knowledge to follow along without much issue. You should also have something to write code in. An IDE like VSCode is best, but something like Notepad will be fine. If you're reading this, then you probably already have a web browser, so no concerns there. Or you are a Technomancer, in which case you can probably disregard this tutorial.

Throughout I’ll be including example images where relevant. If you're coding along with this tutorial, you should be seeing similar results to the images, though they will be few and far between once we reach the JavaScript portion of the tutorial.

With that, Let's Begin with HTML

We'll start with the most basic of basic things, an empty HTML page. Open your code writing app of choice and let's create a new file and call it rps.html. This will be what holds all of our HTML for our Rock, Paper, Scissors game. Inside we'll be adding <html>, <head> and <body> tags to get started.

Our <html> tags will encase everything we need for our game. <head> is where you'd normally be adding a title, and little more info about our game. We're going to forgo adding things to the <head> in the interested of simplicity in this tutorial. <body> will house our game inputs and results.

<html>
<head>

</head>

<body>

</body>
</html>

You can open this page by navigating to where you've saved your .html file and double clicking it. If it doesn't open in your default web browser, try right clicking and selecting an Open With option or dragging and dropping it into your browser. We'll be looking at this page a lot as we go so it's worthwhile to keep it open in your browser.

Let's Jump Right In to Making a Game

Now, this isn't going to get too fancy. We want to keep it simple and easy to understand. Rock, Paper, Scissors doesn't require a complex set up. We need a way for two players to make a selection and not much else. Because of that, we're opting for a way to make that selection easy, a <form> with two <select> fields. Our <select> fields will have three options (Rock, Paper, Scissors) each and there's 2 of them for the typical player count of Rock, Paper, Scissors.

Inside our <body> tags, let's create a form with opening and closing

tags. Our form tags are going to create a nice organizational element to hold our select fields, their labels and our button input we'll eventually add.

<form>
</form>

In-between our <form> tags, we are going to add our <select> fields. These are going to be made up of three elements: a <label> to show what the select field is for, a to create the drop down list portions of our select field, and some <option> tags to give us something to select in the field.

We'll start by creating our first select field for Player 1. Let's make opening and closing <label> tags.

<label></label>

Since we want this label to be for player one, let's slap that in-between the two tags so we know who's selecting what. Of course, feel free to call your players or selections whatever you want. We'll be keeping it pretty generic here to make it easy to follow.

<label>Player 1: </label>

Next, let's start our select field proper with some opening and closing select tags. We're going to stack anything we'll need to add more elements to for some easy formatting.

<select>
</select>

Our select field is pretty barren, and we're going to need something to reference when we get to the JavaScript portion of things, so let's add an id attribute to it. Your id attribute can be anything, but we want it to be descriptive so we know what we're looking at, so let's call it player1.

<select id="player1">
</select>

Now that we have an id on our select field, we need to go back and amend our <label>. We're going to add a for attribute to the label. The for attribute lets us say what element the label is for by referencing that element's id. Since this is for our element with the id of player1, we'll add the for attribute as such.

<label for="player1">Player 1: </label>

Now we can finish off our select field with some options. Inside the <select> tags, we're going to add three options. Each option uses its own <option> opening and closing tags. These tags will have a value attribute attached to them, and inside the tags, we'll put some text to say what we want them to say. Let's make an example with Rock.

<option value="Rock">Rock</select>

You can see we made the value and the display text the same. The value could be anything you want to represent someone picking Rock (a number, letter, different words), but we are going to stick with Rock in order to make use of the value later in our JavaScript.

We can now add the options for Paper and Scissors in the same way. At the end, we'll have a little select field snippet that looks something like this:

<label for="player1">Player 1: </label>
  <select id="player1">
    <option value="Rock">Rock</option>
    <option value="Paper">Paper</option>
    <option value="Scissors">Scissors</option>
  </select>

We've created a first player, but we still need a second. After all, playing Rock, Paper, Scissors with only one person is about as fun as simulating it on a computer with two drop down menus. We're going to do what developers have been trying to do for decades and make our lives easier by just copying and pasting Player 1, and changing a few things so that we have a Player 2.

Almost everything is identical, but we need to update our for, id, and label text to reference 2 instead of 1.

<label for="player2">Player 2: </label>
  <select id="player2">
    <option value="Rock">Rock</option>
    <option value="Paper">Paper</option>
    <option value="Scissors">Scissors</option>
  </select>

Well, we did it! We have two players to play the game. But we need one more thing before we can move on to our JavaScript and be done with our

We're going to need to create a button to submit our choices in order to determine who will come out as victorious in our high stakes Rock, Paper, Scissors simulator.

Time to Make Our Form Capable of Doing Work

Forms are special in that we could assign an action attribute to our form and create an <input> to submit our form to that action, but we're going to keep it a little simpler than that. Instead we are going to create an <input> with a few attributes. We'll need a type, a value, and also an event called onclick.

Let's start with the small stuff, the attributes. <input> is a little unique in that we can give it a type and depending on that type it can be and do different things. We could make text fields and number fields or checkboxes or a vast assortment of things and they all have different properties to them. However, we want to submit a form and for that, we're going to want to click a button. So, big shock, we're going to give our <input> a type of button.

<input type="button">

We also want our <input> to say something so the user knows clicking it is required to play. A value attribute will let us add some text to our button and spruce it up a bit. Since this is Rock, Paper, Scissors, I think it's appropriate to call that value "Shoot!". Feel free to put whatever you like as your value. It is strictly visual in this case and won't impact how the game functions. I will be referring to it as the "Shoot!" button throughout this tutorial. Afterwards you'll end up with something like this:

<input type="button" value="Shoot!">

Now I mentioned one other thing we need and that's an event known as onclick. But what is an onclick event? It's kind of exactly what it sounds like. It's an event that triggers when you click on an element. In this case, our button is what's being clicked on and the event we're going to be firing is the JavaScript code we'll write. An onclick event can execute code in a variety of ways, but what we'll be focusing on is probably the most common, calling a function.

We haven't written any JavaScript code just yet, so we don't even know what we're going to be calling our function. Well, we're going to cheat a little. We know we're playing a game, so we're going to continue to keep it simple and call it playGame().

<input type="button" value="Shoot!" onclick="playGame()">

Now, if you look at your form in a web browser, you'll notice things are looking a little cramped. Let's space it out a bit with a few break tags (<br>) after each closing </select> tag. It'll add a new line between our elements and make things look a bit nicer

</select>
<!--- here for break tags --->
<br>
<br>

With all said and done, we should have our full form complete. That means we have everything we need to start playing with JavaScript and making our game do something. You're full HTML file should look something like this at this point

<html>
<head>
</head>

<body>
  <form>
    <label for="player1">Player 1: </label>
      <select id="player1">
        <option value="Rock">Rock</option>
        <option value="Paper">Paper</option>
        <option value="Scissors">Scissors</option>
      </select>
    <br>
    <br>
    <label for="player2">Player 2: </label>
      <select id="player2">
        <option value="Rock">Rock</option>
        <option value="Paper">Paper</option>
        <option value="Scissors">Scissors</option>
       </select>
    <br>
    <br>
    <input type="button" value="Shoot!" onclick="playGame();">
  </form>
</body>
</html>

Time to Make a Game Playable with JavaScript

First things first, we're going to need a new JavaScript file. Let's make a new file in the same directory as our HTML file and call it rps.js. Go ahead and open it up if it's not already open and we'll add our first bit of JavaScript.

We're going to start by creating a new function. A function is just a snippet of code that lets us set up some repeatable steps for our application to execute. In our situation, we are writing the steps that allow our game to be playable, but functions are a very powerful tool and let us repeat actions without the need to rewrite them over and over again. Each time we want to perform an action, we can just call our function. In our HTML file, we already set up what the name of our function should be in our onclick event so we can go ahead add that function to our JS file using the function keyword like so:

function playGame(){
}

Great! We have some JavaScript. Now what? Well, we're going to do something that's not always necessary, but for the purposes of learning, let's just test our onclick event and see if it works.

For some basic testing, let's add a console.log() to our function so we can print some text to our console and see the onclick event in action.

function playGame(){
  console.log('testing our game');
}

So, what does a console.log() do? Well, it prints out information. In our current situation, we just want to make sure the function is working when we click our button. To do so, we just added a bit of text as a string to the function call. When we click our Shoot! button, we should see that text print out in the browsers development console.

Oh, and what is a development console? It's just part of the development tool kit that's available on virtually every browser. To open it (at least on a keyboard with function keys), you can just simply press the F12 key and select the Console tab if it's not already selected. If you don't have an F12 key, you can usually right click on the page and select Inspect and then select the Console tab. Alternatively, you may have to check the options available on your browser and look for something along the lines of Development Tools or Dev Tools.

If you haven't already, open your rps.html file in your default browser, open the development console, and let's try running the game by making two selections and clicking the Shoot! button.

And… oh noooo! It didn't work. So, what happened? I expect that you got something along the lines of:

No problem! Nothing to worry about. We got this error because we did not link our JavaScript file to our HTML file. Let's take care of that now and then talk about errors and how we can decipher them.

Let's go back to our rps.html file and add a <script> tag. We can add this in a couple locations, the <head>, or the <body>. While adding to the <head> works and in our case isn't going to cause any issues, best practice is to add JavaScript <script> tags at the bottom of the <body>, just before the closing </body> tag.

<script></script>
</body>

We're going to add two attributes to our <script> tag. We want to specify a type, which in this case will be text/javascript, and we want to add a source attribute (src) to point to the JavaScript file we created based on the path from the HTML file. In our case, we will link directly to rps.js because it should be in the same directory as rps.html.

<script type="text/javascript" src="rps.js"></script>

Now let's go back to the web browser, refresh, and try clicking the Shoot! button again. This time we should see the text from our console.log() in the console.

Success! You should now see something along the lines of this:

Let's take a slight detour and do a quick breakdown on the error we received.

This first part is letting us know what's wrong. We got an error and that error is that playGame is not defined. It's not defined because according to our HTML page, that function doesn't exist.

We know that the HTML page is looking for that function and can't find it because we specifically told it to use a function called playGame in our onclick event. We know the error is happening as a result of that onclick event because HTMLInputElement.onclick is saying the error happens on this html element, on it's onclick event. (rps.html:23:75) is saying, "Hey, the error is in your rps.html file at line 23, 75 spaces from the start of that line. Sometimes, the spaces into the line aren't super important to troubleshooting, but the line number is almost always helpful for tracking down a problem.

How do we know that, based on this error, we need to add a tag for our JavaScript file? Really, it's something that will come with experience. If you get that error, and you use what we just discussed to determine where it's happening, it'll be easy to search for what the cause is online. For us, we could determine that our onclick event is looking for our function and saying it's undefined. With that knowledge, we could search the world wide web for something like, "onclick event throws error function is not defined", and we'll likely come across a post on stackoverflow or somewhere where someone has asked a similar or the same question and we can go through answers and try to determine what we are missing and what's wrong.

It's a bit frustrating and it's not ideal, but it's also a big part of current development and utilizing resources like this to resolve issues is something you'll be doing throughout your development career.

Now, Back To Our Show

That was a big ol' side quest from our tutorial, but it's an important thing to understand and utilize. You'll be seeing a lot of errors and some of them aren't going to be very helpful at all. The more you experience and resolve the more likely you are to spend less time on them in the future.

Let's get this show back on the road. We have some select fields in our HTML file, and those fields have values that we want. Not only do we want them, but we want them at the ready to be used as much as we need, and that means we need them set to a variable. Let's create our first variable, assign it a value, then talk through what it is exactly that we're doing.

let player1 = document.getElementById('player1').value;

You're probably at least familiar with variables and variable keywords, but we'll do a deep dive on this one and break out each piece.

let is our keyword for defining a variable that we plan to potentially overwrite or we expect the value of it to change at some point.
player1 is the name of our variable. We've called it player1 to match with our first select field for Player 1.
= to say we are setting player1 equal to something.
document is generally the page that the JavaScript is running on. In this case, our HTML page is the document.
.getElementById('player1') is a built-in function for document that allows us to search our HTML page for an element based on its id attribute. In this case, the element we are looking for is our first select field for Player 1. We gave that field an id attribute of player1. So, we are referencing that id and using it to get us the element so that way we can retrieve information from it.
.value gives us the value of the element. In this case, value is the value of the option we selected in the select field.
; to close out the JS line. While potentially not necessary, it is still good practice to include.

Now that we've broken down how we plan to get a value from our select field, try doing the same for Player 2.

At this point, our JavaScript file should look something like this:

function playGame(){
  let player1 = document.getElementById('player1').value;
  let player2 = document.getElementById('player2').value;

  console.log('testing our game');
}

Looking Pretty Good

We're off to a good start here. Now we have access to the values from our select fields. That means we can do something with them, right? It suuuure does. Now, we can work out our win conditions and add a little text to say who comes out on top.

First, let's add one more variable. We'll call it result and we'll set it equal to an empty string using two single quotes ('').

let result = '';

Adding Some Conditional Logic

OK, let's get deep into this and figure out how to figure out who wins in a game of rock, paper, scissors. If you don't know the rules, no worries. It's pretty simple. Rock beats scissors, scissors beats paper, paper beats rock. That's it. Not a whole lot to the game really.

So how do we choose the best way to determine our win conditions?

MENTAL EXERCISE TIME!!!!!!

Yep, this is a tutorial about using JavaScript with HTML, but maybe we can expand the JavaScript part a bit more. No need to write any code or anything. But, before continuing, maybe take a minute to consider how you would approach this problem programmatically. Think of the possible win/lose combinations for rock, paper, scissors and consider how you would approach logically figuring out who wins each game. The important thing is that even if your solution is different than below, it can still be correct. Lots of problems have multiple solutions and you may come up with a good way to solve this on your own. You can also consider that not every solution would work for each situation. Don't worry if you're not sure. No harm in not coming up with anything and no harm in not having a full solution. You can always come back to this step and try out other solutions when we're done, or even expand on what we write in the tutorial.

For Now…

We're going to go with my favorite solution, the short and easy route. We'll just use a few if/else if/else conditional statements and try to keep things nice and clean. We really only care about two types of conditions: a tie, and player1 winning. If our game doesn't result in either of those conditions, then we can assume player2 is the winner. With that logic, we don't need to overcomplicate our comparisons.

Let's start with our first condition. We'll start with an if statement which lets us make some comparison and determine if the logic makes sense. We can use some really simple logic that says if the value of player1 equals (represented by two equals signs ==) the value of player2 then the game is a tie.

This is where we'll first get to use our result variable as well. When we defined result, we created it as a placeholder with the value of an empty string. We can now assign it a new value that we would like to use to display the results of the game. We'll do this similarly to how we initially defined it, but without the let keyword. And now we'll also set it to a string value that will mean something to our player, like 'Tie!'.

We should come up with something like this:

if (player1 == player2) {
  result = 'Tie!';
}

A Quick Test

Before we continue on with our logical steps, let's reutilize some existing code and test that our conditional statement is working as expected. In the console.log() we already have in our function, remove the text 'testing our game' and replace it with our result variable.

Now, refresh your browser, make sure your console is open, and select the same value for player1 and player2 and press the Shoot! button. You should see Tie! in your console window if your if conditional statement is working properly.

But What Else

Let's continue on our journey to logical conclusion by skipping a bunch of steps in favor of pairing up the if conditions best partner in crime, an else condition. With an else condition we're basically saying that any logic not caught by the if must make the else statement the true statement. In our case, and temporarily to the benefit of player2, our else condition is going to say that player2, for a few brief fleeting moments (unless you decide to skip testing this code change), wins if the game isn't a tie.

An important side note, an if can exist without an else but, not the other way around.

To append an else to our if we just simply write else after our closing curly brace (}) for the if conditional, and add a new opening and closing curly brace for the contents of the else to reside in.

We'll also add some new text for our result variable to be set to. Seems fitting we say that result is equal to 'Player 2 Wins!'.

When we're done we'll have something like this:

if (player1 == player2) {
  result = 'Tie!';
} else {
  result = 'Player 2 Wins!';
}

Continuing Logic

Now we can finish off our little logic block here with a fancy bit of else if conditional statements. There's work like adding another if condition into the mix before our final else condition and we can use them to check if player1 should be the winner given a certain selection from each player.

In our else if statements we need to know a bit more information than we did in our if statement. We need to know what player1 and player2 selected, and more importantly, we need to know if player1 selected something that will beat player2. Luckily, we know the rules to rock, paper, scissors, so we can simply check if each player selected a specific value that would result in player1 being the winner.

We'll do this by checking two statements and determining if they are both true. If both are true then we'll be able to conclude that player1 is the winner. Let's walk through the win condition for if player1 picks Rock.

We'll start similar to our else condition by appending else if after the closing curly brace (}) of our if conditional. Now we'll need to add opening and closing parentheses after else if, just like with our if conditional. Inside those parentheses is where we'll write our conditional logic.

In this instance, we know that we want to check if player1 picked Rock. we can do so by checking that our value for player1 equals the string 'Rock'. If it does, then that means our first statement is true, which is what we want.

Now we need to add an additional condition into the mix. To do so we're going to use a conditional operator for AND. It looks like && and says that an entire statement is true if each of the statements separated by the && operator are true.

Next, we need to know that player2 would need to pick something that would lose to Rock, so they would have picked Scissors. We'll essentially be doing the same check we did for player1, but for player2 and making sure they selected 'Scissors'.

Now outside of the parentheses, we can add our open and closing curly braces to house our result which will be us similarly setting the result variable to something like 'Player 1 Wins!'.

In the end you'll have something that looks a bit like this:

else if (player1 == 'Rock' && player2 == 'Scissors') {
  result = 'Player 1 Wins!';
}

And The Logical Conclusion

We're moving ever so close to being done with the logic portion of this. Now we just need to write two more else if conditions to follow up our first one. One where player1 picks Paper and player2 picks Rock and one for when player1 picks Scissors and player2 picks Paper. I'll let you write these two out on your own, but below will be what your function should look like so far. When you're done, go ahead and try a few games with the console window open. Since we still have our console.log(result); code at the bottom of our function, you should be able to see the game in action.

function playGame(){
  let player1 = document.getElementById('player1').value;
  let player2 = document.getElementById('player2').value;
  let result = '';

  if (player1 == player2) {
    result = 'Tie!';
  } else if (player1 == 'Rock' && player2 == 'Scissors') {
    result = 'Player 1 Wins!';
  } else if (player1 == 'Paper' && player2 == 'Rock') {
    result = 'Player 1 Wins!';
  } else if (player1 == 'Scissors' && player2 == 'Paper') {
    result = 'Player 1 Wins!';
  } else {
    result = 'Player 2 Wins!';
  }

  console.log(result);
}

Displaying a Win to Players

Now we have a functioning game. You're making selections in HTML and then using JavaScript to figure out some logic and print out who's the game winner in the console. But, people don't tend to go to the console window looking for information. They want to see results up on the screen, so that's what we're going to make our code do.

Back to HTML

We're going to start by going back to our HTML page. We want to add a little placeholder element where we can display our result.

Under the closing tag for form (</form>), put a space for us to add our new tag to hold our result value. For simplicity, we're going to use an <h2> tag. We want our result to be large and visible. We could do this in a variety of other ways, but in the interest of keeping it simple, we'll let that tag handle all that for us.

Inside our <h2> tag we'll need to include an id attribute just like we did with our <select> fields. We'll set our id to resultEl since it's the element we want to use to display our result.

In the end, your HTML should just have this one additional line between the closing <form> tag and the <script> tag, like this:

</form>
<h2 id="result"></h2>
<script type="text/javascript" src="tmp.js"></script>

And Back to the JavaScript

Yep, that's it. That's all the HTML we'll need to add. Now things are going to get a bit more tricky and we're going to actually be manipulating our HTML with JavaScript.

First things first, we no longer need console.log(result); in our code. We can go ahead and remove that, since soon we’ll be seeing our results printed on the screen and won’t need the console for displaying them.

We're going to start with adding two additional variables. We need a variable to get our result element from our HTML, the same way we got the elements for player1 and player2. We'll just need to get that element by its id attribute, resultEl.

Next we need an element to hold an HTML element we're going to let JavaScript create for us using a function similar to how we used document.getElementById(). For now we can just call it resultTextNode and we don't need to assign it a value.

Your two new variables should be fairly similar to this:

let resultEl = document.getElementById('resultEl');
let resultTextNode;

Creating a TextNode

Now that we have our variables we can use Javascript to create some things, display some things, and also, remove some things. We'll start by making a new text node. We'll need this in order to display the text we've been assigning to result. To do so, we're going to just set our new variable, resultTextNode, equal to document.createTextNode(result).

That should result in a bit of code like this at the bottom of your JavaScript file:

resultTextNode = document.createTextNode(result);

Displaying Our Text Node

This is the moment we've been leading up to. The reason we previously spent all those minutes creating a placeholder. It's time to display our result to the player. This part gets a little complicated and I'm going to be keeping it relatively simple for the sake of this tutorial, but know that attributes of DOM elements can also have child elements and they can nest relatively deep. We're just going to scratch the surface here, but it's something you'll definitely be encountering going forward and something you'll slowly learn to manage, understand, and manipulate.

To display our result value, we are going to take our resultEl element and append our resultTextNode to it as a child. In our case, this is going to be really simple and smooth. JavaScript has us covered with an appendChild() function for our element.

We should end up with a tiny snippet like so at the bottom of the JavaScript file under everything else:

resultEl.appendChild(resultTextNode);

Go ahead and test it out, then we'll have one final hurdle to tackle.

One Last Problem to Solve

So, if your testing went as good as I expect, you've noticed that the results don't go away and in fact, they keep getting added onto each other. Not to worry, We have a semi-simple solution that will clear this up no problem.

Our issue is that we are not removing the old text node before appending a new one. So we just keep on appending new children to our little placeholder and making a sloppy mess for our player.

Well just like how we can append a child, we can also remove a child. This is another one of those problems that may have multiple solutions. Ours is not going to be the most sophisticated, but it will work for our scenario. More complex sites will likely require more complex solutions. Just something to keep in mind as we wrap up.

Our resultEl element has a fancy attribute on it called firstChild. That firstChild in our case will be our resultTextNode if we've appended it to resultEl already. Otherwise, firstChild is nothing. We want to do two things, check if there's a firstChild, then, if there is, remove it before we try to append a new child to our resultEl element.

The first part is a simple if condition where we just want to know if resultEl.firstChild contains anything. Checking if (resultEl.firstChild) {} will return true if there is a child, and false if there is not.

If we get a true result, then we want to remove that child. We can do so similarly to how we appended a child with a function called removeChild(). This gets a little awkward though. We can't just do removeChild(resultTextNode) because resultTextNode is now a different value.

We have a few options. We can save the old value to another variable that we set at some point so that way we can reference it when the time comes. However, we can also simply reference the old value as resultEl.firstChild since that's what we want to remove.

We end up with a funky little snippet of code that looks about like this:

resultTextNode = document.createTextNode(result);

if (resultEl.firstChild) {
  resultEl.removeChild(resultEl.firstChild);
}

resultEl.appendChild(resultTextNode);

Now you should be able to go back and test again and see that the result is successfully cleared each round.

That's It

And that's it. That's the whole tutorial. It's a lot of words for just a little bit of code, but that's what programming is all about. Taking something complicated and making something simple with it. Hopefully this gives a bit of understanding on how HTML and JavaScript work together to make web pages and applications function, and how the two can work together to create interesting experiences for a user, or in our case, player.

Below I'll include the full HTML and JavaScript code in case you missed anything or something about your code just isn't working right and you need to compare it with the finished product. Now that you have something functional, why not improve it. Change the inputs, add some CSS to the mix, add new options, anything you want to do. The best way to learn is to explore and try to find what's possible!

HTML

<html>
<head>
</head>

<body>
  <form>
    <label for="player1">Player 1: </label>
        <select id="player1">
        <option value="Rock">Rock</option>
        <option value="Paper">Paper</option>
        <option value="Scissors">Scissors</option>
      </select>
      <br>
      <br>
    <label for="player2">Player 2: </label>
        <select id="player2">
        <option value="Rock">Rock</option>
        <option value="Paper">Paper</option>
        <option value="Scissors">Scissors</option>
      </select>
      <br>
      <br>
    <input type="button" value="Shoot!" onclick="playGame();">
  </form>
  <h2 id="resultEl"></h2>
    <script type="text/javascript" src="tmp.js"></script>
</body>
</html>

JavaScript

function playGame(){
  let player1 = document.getElementById('player1').value;
  let player2 = document.getElementById('player2').value;
  let resultEl = document.getElementById('resultEl');
  let resultTextNode;
  let result = '';

  if (player1 == player2) {
    result = 'Tie!';
  } else if (player1 == 'Rock' && player2 == 'Scissors') {
    result = 'Player 1 Wins!';
  } else if (player1 == 'Paper' && player2 == 'Rock') {
    result = 'Player 1 Wins!';
  } else if (player1 == 'Scissors' && player2 == 'Paper') {
    result = 'Player 1 Wins!';
  } else {
    result = 'Player 2 Wins!';
  }

  resultTextNode = document.createTextNode(result);

  if (resultEl.firstChild) {
    resultEl.removeChild(resultEl.firstChild);
  }

  resultEl.appendChild(resultTextNode);
}

Studying with Leetcode

Mooseshark — Tue, 18 Aug 2020 00:28:56 +0000

Last year I had the opportunity to interview with Google. I never expected they would pick me for a technical interview when I applied. I just assumed it would be a "well, at least I tried" type of scenario. To say I was shocked would be an understatement. It left me with one big hurdle to make it over that I hadn't had to deal with yet, whiteboarding. I'd been a developer for almost 6 years at the time. I didn't need to whiteboard for my job, so I never really thought about it. I quickly got to work studying and testing myself with practice problems from leetcode.com. In that time, I came up with a solid way to study, that allowed me to test my own knowledge, and expand upon what I already knew simply by solving leetcode problems.

What I'll Cover

I'm going to go over everything you'll need to follow along with my process and teach yourself while solving problems. First, I'll cover my set up for solving problems and taking notes. Next We'll discuss the challenge question, and potential scenarios that whiteboarding may cover. We'll talk about the submission and potential re-submission of your personal answers, and then go into ways to expand your knowledge through Google searches and learning from other peoples solutions.

Setting Up for Studying

My setup may be different than what you'll need to do depending on the language you choose to solve problems with. I like to use JavaScript as it's the language I'm most familiar with.

I start by choosing a leetcode problem. Obviously, we need a problem to solve before we can start solving it. For this exercise, I chose the problem that has the highest clear rate on the site, just to keep things simple. I suggest choosing a variety of questions while studying in order to give yourself a lot of different information to study.

Then, I create a new HTML file with just a head and body in it, and I link to a newly created JavaScript file where I'll write my test functions. In the JS file, I'll copy the problem question, and set up an example set of data, then call it inside of a console.log() so I can view my results in the console. It makes for a quick and easy set up, and I don't have to run my tests or make a bunch of submissions on leetcode itself. It also allows me to use comments to make notes on my work for further studying in the future. Typically, I'll keep notes in comments in the .JS file and I'll save previous work just so I know what I did and why. You may opt to take notes a different way and I suggest you do what works best for you.

Finding a Solution

The first thing I try to do is mimic an interview scenario where I'd be solving a whiteboarding problem. That means, no Google, no books, no personal notes, no material to help whatsoever. I try to come up with my own solution based on my brain and my brain alone. I want to try to solve the problem to the best of my ability at the time. It doesn't have to be the best solution, but I try to get something down without searching. Typically, I'll put a time limit on this though. If I don't have a working example in 30 minutes or so, I'll move on from this step and start googling. If I have an idea but can't finalize it, Google will usually help me bring it home. For this problem I was able to come up with a quick and easy solution luckily.

And we can check our results in the console of our browser. I chose to highlight the data set used for testing as well as the result from the solution.

Where to go After Finding a Solution?

For this instance, we're going to assume you solved the problem without needing to look anything up and it's working with the example data from the question. What next?

Typically during whiteboarding interviews, the interviewer will want you to try to solve the problem with additional sets of data. They may also want to know what you would do giving specific data types being passed in or in various scenarios you may encounter in the real world. Since this is JavaScript and arrays can contain anything and in this instance, we are doing math, we should make sure we're checking that only numerical values are being passed in. We should also cover a case where no data is passed in, though in this instance, it should be unneeded as the for loop will have nothing to loop over if the array is empty.

Keep in mind, error handling may or may not be necessary for your submission on leetcode. I've encountered problems that have a lot of test scenarios that cause errors, as well as ones such as this that require no error handling at all.

Submitting the Solution

Now that a test has been written, tested, and retested, it's time to submit it and see how we did.

The first submission was a success! However, sometimes it's worth checking the performance without error handling if it's not required. So, I tested it a few more times.

You can note that there's a difference between runtime and memory for the first and second instances. These are both runs without the error handling. It's important to know that leetcode may give you different results for the same code on different runs. So, don't take these results to heart. Since we're studying to become better developers, it's OK if your code is faster than 100% or 0% of other solutions tested. If you've written a successful submission, you're already doing great, and if you haven't, keep going and you'll get there!

Expanding our Knowledge

So, it's safe to assume that a successful solution has been submitted. If it hasn't, don't worry, we're going to go digging to learn how other people solved the problem. If you didn't solve it on your own or with Google searches, then this is your chance to learn a few different ways to solve the problem so you can write your own answer next time.

My first suggestion is always Google. Or Bing. Or DuckDuckGo. Whoever your favorite search engine is, that's the one you should use. You can search for the title of the question, or some information from the description or anything descriptive enough to lead you down the path of finding someone else who's solved a similar problem. Take a look at solutions, questions, errors people encountered, and the answers they received. All of this information can give you insight into 1. what to expect when presented with this problem and 2. what others have done in order to solve the problem.

The next thing to do is to check the leetcode "Discuss" tab on the question. This will bring you to a list of discussions from other users. Typically, these posts are questions about the problem, but more often than not, people use this area to share their own solutions. Now comes the tricky part, going on the hunt for other solutions that are different from yours. Usually you'll find several different solutions than what you've come up with.

I found this map solution by user trueK.

And this reduce solution from user torilov123

Both resulting in similar performance to mine, with the map solution by trueK being slightly faster at 68ms.

What to do With These Other Solutions?

Now that we have some other solutions that we know are working, what do we do with them? Well, that depends on what solutions you've found. If you understand what others have done, you just didn't think of them yourself, then you move on to the next question. However, let's say in this case, you have no idea what the map function does. In that case, it's back to your trusty search engine to explore this function. Find out how it works. Write some working examples with it. Build a small app using it. Do what works best for you to learn this new function. By better understanding it, you'll better understand how to use it to solve problems in the future, thus expanding your knowledge and learning something new, all from having solved a problem on leetcode.com.

Final Thoughts

Hopefully this gives some insight into how I've been using leetcode to study, and maybe you'll find that this method of studying works great for you as well. It's helped me learn some Computer Science related things I never learned in school, new functions, new sorts, new concepts, and tons of other information about development. For my Google interview, I spent about 4 weeks doing this process every day about 4-7 hours a day and in that time managed to learn a ton of new information. It's a lot of research, a lot of note taking and a whole lot of thinking, but you'll come out learning something new that will help you in the future.

As a disclaimer, I did not get a job at Google, but I was able to answer one of the two whiteboarding problems they presented me with. I was able to land a job later on at another company where I once again had to go through the whiteboarding process. Studying this way really did help improve my skills as a developer and I found myself reading more and challenging myself more frequently because of it. Like all walks of life, some people on leetcode will not be kind to you, but others will offer real friendly and helpful advice. So don't get too distraught if you have a bad experience one day, you'll have many good ones as well.