What is the different types of Case Statement in Pug Template Engine ?

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

Javascript

//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}`);
});

HTML

//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: