Paramwebinfo Academy | Website & Digital Marketing Training

Tutorials Details

How to Use the Ternary Operator in JavaScript: Tutorial with Code Example

December 19, 2024

What is the Ternary Operator?

The Ternary Operator in JavaScript is a shorthand way of writing simple if...else statements. It is also known as the conditional operator and provides a more concise and readable alternative to writing multiple lines of code. It can be especially useful when you want to assign a value based on a condition or simply want to evaluate a condition and execute one of two actions.

Syntax:

condition ? expression1 : expression2;

condition is the expression that is evaluated.
If condition is true, expression1 is executed.
If condition is false, expression2 is executed.

The ternary operator is often used for conditional assignments or for executing simple conditional operations. Here's a basic structure:

let result = (condition) ? 'True case' : 'False case';

HTML, CSS, and JS Example

HTML(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ternary Operator Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Check Age</h1>
<input type="number" id="ageInput" placeholder="Enter your age" />
<button id="checkAgeBtn">Check</button>
<div id="message"></div>
</div>

CSS(style.css)

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.container {
text-align: center;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

input {
padding: 10px;
font-size: 16px;
width: 200px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#message {
margin-top: 20px;
font-size: 18px;
padding: 10px;
border-radius: 5px;
}

JavaScript Code with Ternary Operator(script.js)

// Select elements
const ageInput = document.getElementById('ageInput');
const checkAgeBtn = document.getElementById('checkAgeBtn');
const messageDiv = document.getElementById('message');

// Event listener for the button
checkAgeBtn.addEventListener('click', function() {
const age = Number(ageInput.value);

// Use the ternary operator to check if the user is an adult
const message = age >= 18
? 'You are an adult. Enjoy the freedom!'
: 'You are a minor. Stay safe and enjoy your youth!';

// Display the message and change background color based on age
messageDiv.textContent = message;

// Change background color using ternary operator
document.body.style.backgroundColor = age >= 18 ? '#d4edda' : '#f8d7da';
});

How It Works:

HTML Structure:
- An input field (<input>) allows the user to enter their age.
- A button (<button>) is used to trigger the check.
- A <div> displays the result message, and its content and background color change based on the input.
CSS:
- The page is styled to be clean and centered.
- The button changes color when hovered over, adding some interactive style to the page.
JavaScript:
- The script listens for a click on the button.
- When clicked, it retrieves the value entered in the input field.
- The ternary operator checks if the user’s age is 18 or more. It shows a message and changes the background color based on whether the condition is true or false.