Web Design

Conditionals

How to use JS Conditionals

What are conditionals?

Otherwise known as if-else statements, conditionals are the backbone of all code.

If-then statement

If-then is the most common type of conditional. We feed in what’s called a parameter, and the code will check if that parameter is true. If so, it runs what’s inside the block. If it’s false, it either skips or runs the else program. In Javascript when you want to write something in a file, we use document.write(); Below is a basic example:

var firstNum = 1;
var secondNum = 1;
 
if (firstNum == secondNum) { // we use = to give a variable a value and == to see if variables have equal values
document.write(“They are the same!”);
} else {
document.write(“They aren’t the same!”);
 
}

For Loop

We will be using the for loop for a big part of our code. The for loop loops through a section of code for a certain amount of times. Below is an example:

for (var i = 0; i < 5; i++) {
document.write(“I have run this ”+i+”times!”);
}

This code has a lot going on. Inside the for parameter, we create a variable named i with a value of 0. Then, we say, as long as i is less than 5, run this code over and over. But at the end of each loop, using ++ (same as i+1), we increase i by 1. This ensures that the loop ends. This loop will run 5 times, because we start at 0. If you want to start at 1, you can make i = 1, and either change 5 to 6 or make < to <=(less than or equals).

Inside our document.write, we used + to join two Strings and a variable together. Anything within “” is considered a string. But we want to print “I have run this 0(1,2,3,4) times.”. This is done with concatenation symbols, or +.

In scripts.js, let’s start writing our main for loop.

for (var i = 0; i < posts; i++) {
document.write(“”);
}

This code will loop posts amount of times. We set posts = 4, so it will run 4 times. This makes sense because we only want to create as many posts as we have. No more, no less.

Printing the Card

Using this, we can print the card four times. Cut(Copy and Delete) the HTML card from index.html and paste it between the “”. This will give us an error. The error is that within our HTML we have “. Javascript doesn’t like this, so we have to change the “ to \”. This way, the code knows that it will have to print a “, and it’s not the start/end of a String.

document.write("<div style=\"margin-top: 20px;\"></div><div class=\"card\"><div class=\"card-body\"> <h5 class=\"card-title\">Title</h5><h6 class=\"card-subtitle mb-2 text-muted\">Date</h6><p class=\"card-text\">Summary</p><a href=\"#\" class=\"card-link\">View Post</a><a href=\"#\" class=\"card-link\"><i class=\"fas fa-share-square\"></i></a></div><div style=\"margin-bottom: 10px;background: linear-gradient(to right, #00f260, #007aff); width: 100%; height: 10px;\"></div></div>");

Now the issue is that the code doesn’t represent our data. Using the concatenation symbols and our Arrays, let’s replace all of our placeholders with data. This might get a bit confusing, as you will have to close Strings with “, +variable[i]+” and start it back up.

    // for the number of cards, create them. if you add more data, this auto-updates
for (var i = 0; i < title.length; i++) {
		document.write("<div style=\"margin-top: 20px;\"></div><div class=\"card\"><div class=\"card-body\"> <h5 class=\"card-title\">" + title[i] + "</h5><h6 class=\"card-subtitle mb-2 text-muted\">" + dates[i] + "</h6><p class=\"card-text\">" + summaries[i] + "</p><a href=\"https://" + domain + ".neocities.org/post" + links[i] + ".html\" class=\"card-link\">View Post</a><a href=\"" + "sms://&body=https://"+domain+".neocities.org/post" + links[i] + ".html\" class=\"card-link\"><i class=\"fas fa-share-square\"></i></a></div><div style=\"margin-bottom: 10px;background: linear-gradient(to right, " + grads[i] + "); width: 100%; height: 10px;\"></div></div>");
}

Notice for the icon, we gave it a link that started with sms://. This is known as a URL Scheme. Many apps/programs have URL Schemes and accept data. We are feeding in the post URL.

Along with this, we used our domain variable to make the code easier for people to use straight out of the box.

What next?

In the next lesson, we will be going over how to use Functions, which will allow us to call certain parts of our code in different areas, without duplication.

chevron_up