Register to get access to free programming courses with interactive exercises

Conditional constructions HTML: Preprocessor Pug

When developing a product, rarely is all code written wholly sequentially, with no branching off. There are situations where, depending on certain settings or user actions, a particular piece of code must be executed.

Conditional constructs or conditional expressions are used in programming to create such branches. What can be considered branching? Imagine that a user enters their profile page. Depending on whether they are logged in or not, the following action will take place:

  • If the user is logged in: display the profile page.
  • If the user is not logged in: display the login page.

How do I make this into code? If you're already familiar with programming, you'll know what we're talking about. We need to determine:

  1. The conditional construct
  2. The condition on which the branching occurs.
  3. Code blocks for conditions.

There is a new term, “condition”, on this list. What is it? A condition is any expression that can be reduced to either true or false. For example, the expression 2 + 2 = 4 is true, but 2 + 5 = 1 is not. Depending on this condition, the corresponding block of code will be executed.

- const isLogin = true;

.container
  .row
    .col
      if isLogin == true
        section.profile
          h1 Welcome!
      else
        section.registration
          h1 Please register!

Result if isLogin variable is true:

<div class="container">
  <div class="row">
    <div class="col">
      <section class="profile">
        <h1>Welcome!</h1>
      </section>
    </div>
  </div>
</div>

Result if isLogin variable is false:

<div class="container">
  <div class="row">
    <div class="col">
      <section class="registration">
        <h1>Please register!</h1>
      </section>
    </div>
  </div>
</div>

Since the if construct checks whether an expression is true or false you don't need to have a comparison with both true and false. This code will work in exactly the same way:

if isLogin
  .profile
    h1 Welcome!
else
  .registration
    h1 Please register!

Let's look at another example. The user object contains several fields: first name, last name, username. If the first name and surname are given, print them, otherwise print the username.

-
  const user = {
    name: 'Hexlet',
    surname: 'McCoderson',
    login: 'hexlet-code',
  }

section.user-profile
  p.name
    if user.name && user.surname
      | #{user.name} #{user.surname}
    else
      | #{user.login}
<section class="user-profile">
  <p class="name">Hexlet McCoderson</p>
</section>

Important: Pay attention to the declaration of the object. The - symbol and the object itself are located on different lines. You can write multiline JavaScript code in this way. This is useful for creating objects, functions, loops, and so on.


In the previous examples, the main emphasis was on the existence of one object or another. Conditional constructs can check absolutely any expression:

-
  const titles = {
    home: "Home Page",
    product: "Our products",
  }

- const url = 'home';

doctype
html(lang="en")
  head
    if url == 'home'
      title= titles.home
    else if url == 'product'
      title= titles.product
    else
      title No such page :(
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Homepage</title>
  </head>
</html>

During product development, a situation may arise where you need to check if a statement is false, not true. This can be a user check to see if they are an administrator when logging into the management page. In this case, you need to check whether the user is an administrator or not. If the user doesn't have the necessary rights, then you should show them an error message. This problem can be solved with a negative condition:

- const isAdmin = false;

if isAdmin == false
  h1 Not authorized to view page
else
  h1 Welcome

Such a comparison may be redundant, since a conditional construct implies a check to see if something is true, rather than false. There are two ways to make the code cleaner:

  1. Use the logical negation operator, !. In this case, the result of the expression is calculated, and then its value is inverted. If it was true, it will become false and vice versa. The construct will look like this:: if !isAdmin. Since the isAdmin variable is false, the value is converted to true through negation.
  2. The unless construct. Unlike if, unless checks if a condition is false.
- const isAdmin = false;

unless isAdmin
  h1 Not authorized to view page
else
  h1 Welcome
<h1>Not authorized to view page</h1>

Additional assignment

This project has a file structure:

├── include/
│   ├── head.pug
├── index.pug
├── product.pug

Inside the index.pug and product.pug files there is a title variable with a unique page description. The head.pug file contains the <head> section of the pages. Using file connections and a conditional construct, insert a unique description in the head.pug file. If the value of the title variable is empty, the pre-prepared text is output.

Example page:

<!doctype html>
<html>
  <head>
    <title>Site homepage</title>
  </head>
</html>

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
Layout Designer icon
Profession
Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.