Conditional element loading in No-Code - Mini Project: Build & Apply

Conditional Element Loading

📖 Scenario: You are creating a simple webpage that shows a welcome message only if the user is logged in. This is common on websites where some content is visible only to signed-in users.

🎯 Goal: Build a webpage structure that conditionally shows a welcome message element only when a variable isLoggedIn is true.

📋 What You'll Learn

Create a variable called isLoggedIn and set it to True

Create a variable called welcomeMessage with the text 'Welcome back!'

Use a conditional statement to check if isLoggedIn is true

If true, create an HTML element <div> with the welcomeMessage text inside

💡 Why This Matters

🌍 Real World

Websites often show or hide parts of the page depending on whether a user is logged in. This project simulates that by conditionally creating a welcome message element.

💼 Career

Understanding conditional element loading is important for web developers and designers to create dynamic, user-friendly websites.

1

Create the login status variable

Create a variable called isLoggedIn and set it to True to represent that the user is logged in.

No-Code

# Your code here

Need a hint?

Use a simple assignment statement to create the variable isLoggedIn and set it to True.

2

Create the welcome message variable

Create a variable called welcomeMessage and set it to the string 'Welcome back!'.

No-Code

isLoggedIn = True
# Your code here

Need a hint?

Assign the text 'Welcome back!' to the variable welcomeMessage.

3

Add the conditional check

Write an if statement that checks if isLoggedIn is True.

No-Code

isLoggedIn = True
welcomeMessage = 'Welcome back!'
# Your code here

Need a hint?

Use an if statement to check the value of isLoggedIn.

4

Create the conditional HTML element

Inside the if isLoggedIn: block, create a string variable called welcomeDiv that contains the HTML <div> element with the welcomeMessage text inside it.

No-Code

isLoggedIn = True
welcomeMessage = 'Welcome back!'
if isLoggedIn:
    # Your code here

Need a hint?

Use an f-string to insert the welcomeMessage inside the <div> tags and assign it to welcomeDiv.