Conditional "If", "else if" and "else".
Conditional statements in JavaScript, such as the "if", "else" y "else if"allow you to make decisions in your code based on certain conditions. Here is a brief and easy to understand explanation:
if: The "if" is used to execute a block of code only if a condition is true. The basic structure is as follows:
if (condition) {
// code to execute if condition is true
}
else: The else is used in conjunction with the if to execute an alternative code block when the if condition is false. The basic structure is as follows:
if (condition) {
// code to execute if condition is true
} else {
// code to execute if condition is false
}
else if: The else if is used when you want to test multiple conditions in order. You can have as many else if statements as you need. The basic structure is as follows:
if (condition1) {
// code to execute if condition1 is true
} else if (condition2) {
// code to execute if condition2 is true
} else {
// code to execute if none of the above conditions is true
}
The program will evaluate the conditions in order. If the first condition is true, its corresponding code block will be executed and the other conditions will be ignored. If the first condition is false, the second condition will be evaluated and so on. If none of the above conditions is true, the code block inside the final else will be executed.
These conditional statements allow you to control the flow of your program and make decisions based on different situations.
Examples:
Building a theme to activate the dark mode on a website.
let mode = "ninja";
let color = "ghostWhite";
let image = "/img/light-icon.png";
let label = "Light Mode";
if (mode === "dark") {
color = "darkSlateBlue";
image = "/img/dark-icon.png";
label = "Dark Mode";
} else if (mode === "light") {
mode = "ghostWhite";
image = "/img/light-icon.png";
label = "Light Mode";
} else {
color = "dimGray";
image = "/img/ninja-icon.png";
label = "Ninja Mode";
}
console.log(label);
Help in different languages
Using conditionals to translate a message according to the current language setting
let message = "";
let language = "Arabic";
if (language === "English") {
message = "Thank you";
} else if (language === "Spanish") {
message = "Gracias";
} else if (language === "German") {
message = "Danke";
} else {
message = "We don't support " + language;
}
console.log(message);
Vacation booking website
Create a page for vacationers, complementing a vacation booking website.
const beds = 6;
const reviewScore = 4.78;
const costPerNight = 140;
const pool = true;
const country = "Italy";
const minBeds = 5;
const minReviewScore = 3.5;
const maxCostPerNight = 150;
const needPool = true;
const inCountry = "Italy";
let match = true;
let saving;
let message;
if (beds < minBeds) {
match = false;
}
if (reviewScore maxCostPerNight) {
match = false;
} else {
saving = maxCostPerNight - costPerNight;
}
if (match) {
message = "This property is a match!";
if (saving) {
message = message + " It is $" + saving + " cheaper than your maximum.";
}
}
if (match) {
document.getElementById('message').innerText = message;
} else {
document.getElementById('message').innerText =.
"Sorry, this property is not suitable.";
}
const listItemArray = document.querySelectorAll("li");
listItemArray[0].innerHTML = "Beds: " + beds;
listItemArray[1].innerHTML = "Review Score: " + reviewScore;
listItemArray[2].innerHTML = "Cost: " + costPerNight;
listItemArray[3].innerHTML = "Pool: " + ((pool) ? "Yes" : "No");
listItemArray[4].innerHTML = "Location: " + country;
listItemArray[5].innerHTML = "Minimum beds: " + minBeds;
listItemArray[6].innerHTML = "Minimum Review Score: " + minReviewScore;
listItemArray[7].innerHTML = "Maximum Cost: " + maxCostPerNight;.
body {
font-family: 'Gill Sans', sans-serif;
padding: 4px 24px;
}
h1 {
color: seagreen;
}
h2 {
font-size: 18px;
}
#message {
background-color: seagreen;
padding: 8px 10px;
color: white;
border-radius: 4px;
}
<!doctype html>
<html>
<head>
<title>Vacationista Search</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Vacationista Search</h1>
<p id="message"></p>
<h2>Listing Details</h2>
<ul>
<li>Beds: 6</li>
<li>Review Score: 4.78</li>
<li>Cost ($ per night): 150</li>
<li>Pool: Yes</li>
<li>Location: Spain</li>
</ul>
<h2>Your Requirements</h2>
<ul>
<li>Minimum Beds: 5</li>
<li>Minimum Review Score: 3.5</li>
<li>Maximum Cost ($ per night): 160</li>
<li>Must Have Pool: No</li>
<li>Location: No preference</li>
</ul>
<script src="script.js"></script>
</body>
</html>
Movie tickets
Using conditionals to find out the correct ticket price for different guests.
let member_number = 23287;
let age = 27;
let price;
if (age >= 65) {
price = 5;
} else if (age 0);
if (isMember) {
console.log("Welcome back!");
price *= 0.8;
}
console.log("Ticket Price: $ " + price);
