Pug is a template engine that works with JavaScript libraries and frameworks. It simplifies the process of writing HTML by reducing traditional HTML syntax. Among all of this features it also provide support for CASE statement to handle different scenario. In this article, we will learn about CASE statement, it’s syntax with example.
Case Statement in Pug :
Case statement in Pug is a shorthand of Switch-case statement in JavaScript. It allows you to handle multiple conditions in a more readable and organized manner. Based on specific condition, it executes a block of code. In a Pug Case statement, fallback only happens if the block is completely missing. If we like to not output anything in a specific case then we can use -break keyword.
Syntax of Case Statements in Pug:
case variable
when value1
// Code block for value1
when value2
// Code block for value2
// ... additional cases
default
// Code block for default case
Features of Case Statements
- It supports variable, conditionals and loops directly in the template to generate dynamic content.
- It can be easily used with Node.js frameworks like Express.js.
- It uses Indentation to define the structure of HTML.
- It reduces the traditional HTML syntax.
- It supports reusable components through mixins.
- It supports use of inline JavaScript.
Steps to Setup Pug Template Engine
Step 1: Create a Node.js application using the following command:
npm init
Step 2: Install required Dependencies
npm i pug express
The updated dependencies in package.json file will look like:
"dependencies": {
"express": "^4.18.2",
"pug": "^3.0.2"
}
Example: This example demonstrate the use of Case Statement in Pug
- index.js (root) : This file creates a basic API to send and receive requests
- index.pug (views directory) : This file creates a basic template with Case Statements
//File path: /index.js (root) // Import required modules const express = require( 'express' );
const path = require( 'path' );
// Create an Express application const app = express(); // Define the port for the server to listen on const port = 3000; // Set Pug as the view engine app.set( 'view engine' , 'pug' );
// Set the views directory to 'views' in the current directory app.set( 'views' , path.join(__dirname, 'views' ));
// Define a route to render the Pug template when the root path is accessed app.get( '/' , (req, res) => {
// Render the Pug template named 'index' and pass the data
res.render( 'index' );
}); // Start the server and listen on the specified port app.listen(port, () => { // Display a message when the server starts successfully
console.log(`Server is running at http: //localhost:${port}`);
}); |
//File path: views/index.pug html head
// Set the title of the HTML page
title Pug Case Statement Example
// Internal CSS styles for the page
style.
h1 {
color: green;
}
body
// Display the main heading of the page
h1 GeeksForGeeks | Pug Case Statements Example
//Set value of dayNumber variable
- const dayNumber = 3
// Case statement to determine the day of the week
case dayNumber
when 1
H3 It's Monday.
when 2
H3 It's Tuesday.
when 3
H3 It's Wednesday.
when 4
H3 It's Thursday.
when 5
H3 It's Friday.
when 6
H3 It's Saturday.
when 7
H3 It's Sunday.
default
H3 Invalid day number. Please enter a number between 1 and 7.
|
To run the application use the following command:
node index.js
Output: Now go to http://localhost:3000 in your browser: