JavaScript - Conditionals

Sometimes, we only want code to run if a condition is met. For example, if a user is not already registered, show them the “Create an account” button. If the user is already registered, show them the “Sign in” button. To take a different path in our code based on some information, we use something called a conditional.

Checking for Empty Values

What happens if you don’t type in any values and you click the button? Uh-oh. Our code will still run, but the user sees a very broken and unknown future. We need to check that the user actually typed in values for all fields before we calculate their future. Any time we want to take a different path in our code based on a condition, we need to use a conditional. Below, you can see an example of a conditional that changes the response based on a user’s age.

var age = 17;

if (age < 18) {
console.log(“You aren’t old enough to vote yet!”);
} else if (age == 18) {
console.log(“It’s your first chance to vote. Make sure you are registered!”);
} else {
console.log(“You can vote! Hooray!”);
}

Try It: Conditionals

In this starter replit, we have a similar setup to our almost-MASH app.

Within the showResponse function, write a conditional statement to check for a value for the input field.
If the current value for firstName is an empty string (""), show the user a response message that says, “Please complete all fields before continuing.”
If there is a value for the name input field, continue with the “thank you for registering” message.
Finished? Make a second input field for lastName and check that both first name and last name are completed before showing the response message. (Hint: The symbol || represents OR in JavaScript code. We can check two conditions using the || symbol between the conditions. You can find the pipe symbol above your return key on your keyboard.)

Update Your MASH App

Next, we will use a conditional in our MASH app to check that the user has completed all fields before continuing.

Conditionals in your MASH App

Back in your MASH app, find the showFuture function and write a conditional to check for empty values in any of the arrays. Hint: You will need to use the array method .includes() to check if any elements in the array match a given value.

If any of the arrays include an empty string (“”), change the value of the future variable to be a message asking the user to complete all fields and try again.
If all fields are complete, the rest of our code should run, ending with the future variable reassigned to the future that was chosen.

Need help? At this point, your project should look something like this.

JavaScript - Conditionals Summary

Conditional statements allow us to take different paths in our code based on information.
Conditionals are very common for verifying whether or not a user has completed all fields.

Next Section: CSS - Styles