Create a User Blocking project using HTML CSS & JavaScript

Last Updated : 23 Jul, 2025

The User Blocking project is a simple application that allows users to block or unblock certain users. It provides a basic interface to add users to a block list and remove them from the list. In this article, we are going to implement the functionality that can block a user by clicking a button and displaying the blocked username below.

Preview Image:

Screenshot-2023-10-26-125439

Prerequisites:

Approach:

  • HTML gives the overall Structure to our Project.
  • CSS provides the required styling.
  • To provide the functionality we use JavaScript.
  • When the "Block" button is clicked, get the input username, trim it, and check if it's not empty and not already blocked. If it's valid, add it to the blockedList. Show alerts for invalid input.
  • we use the displayBlockedList function to dynamically create list items for blocked users with "Unblock" buttons. CSS classes are applied for styling
  • When the "Unblock" button is clicked, remove the user from the blockedList.

Example: This example shows the creation of the user blocking project

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <!-- Link the external CSS stylesheet -->
    <link rel="stylesheet" 
          type="text/css" href="style.css">
</head>
<body>
    <div class="gfg">
        GeeksForGeeks
    </div>
    <h2>User Blocking Application</h2>
    <!-- Input field for entering a username -->
    <input type="text" id="userInput" 
           placeholder="Enter username" 
           autocomplete="off">
    <!-- Button to block a user 
        (calls the blockUser() function) -->
    <button onclick="blockUser()">Block User</button>
    <!-- Unordered list to display the blocked users -->
    <ul id="blockedList"></ul>
    <!-- Link the external JavaScript file -->
    <script src="script.js"></script>
</body>
  
</html>
CSS 
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px; 
}

.gfg{
    padding-bottom: 10px;
    font-size: larger;
    font-weight: bold;
    font-size: 40px;
    color: #308d46;
  }

h2 {
    margin-bottom: 20px; 
}

#userInput {
    padding: 10px;
    margin-bottom: 10px; 
}


/* Style for the button */
button {
    padding: 10px 20px; 
    background-color: #FF5733; 
    color: white; 
    border: none; 
}

.unblockbutton{
    background-color: #24d03e; 
    color: #FFFFFF; 
    padding: 5px 10px; 
    cursor: pointer;
}

/* Hover effect for the button */
button:hover {
    opacity: 0.8; 
    cursor: pointer;
}

/* Style for the unordered list */
ul {
    list-style-type: none; /* Remove the default list styling */
    padding: 0; /* Remove padding from the list */
}

/* Style for list items */
li {
    display: flex; /* Use flexbox to arrange items in a row */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Align items to the right */
    margin-bottom: 10px; /* Add some margin between items */
}
JavaScript 
// Initialize an empty array to 
// store blocked users
const blockedList = [];

// Function to block a user
function blockUser() {

    // Get the input element
    const userInput = 
        document.getElementById('userInput');
        
    // Trim the input value
    const userName = userInput.value.trim();
    
    // Check if the input is not empty and 
    // the user is not already blocked
    if (userName !== '' && !blockedList.includes(userName)) {
    
        // Add the user to the blocked list
        blockedList.push(userName);
        
        // Call the function to display the updated 
        // blocked list
        displayBlockedList();
    }
    else if(blockedList.includes(userName)){
        alert("User already Blocked!")
    }else if(userName == ''){
        alert("Please enter a username!")
    }
    
    // Clear the input field
    userInput.value = '';
}

// Function to display the blocked list
function displayBlockedList() {

    // Get the container for the list
    const listContainer = 
        document.getElementById('blockedList');
        
    // Clear the container
    listContainer.innerHTML = '';
    
    // Iterate through the blockedList and 
    // display each user
    blockedList.forEach(user => {
        const listItem = document.createElement('li');
        listItem.textContent = user;
        listContainer.appendChild(listItem);
    });
}


// Function to unblock a user
function unblockUser(index) {

    // Remove the user from the blockedList array 
    // based on the provided index
    blockedList.splice(index, 1);
    
    // Call the function to display the 
    // updated blocked list
    displayBlockedList();
}

// Function to display the blocked list 
// with an additional unblock button
function displayBlockedList() {

    // Get the container for the list
    const listContainer = 
        document.getElementById('blockedList');
        
    // Clear the container
    listContainer.innerHTML = '';
    
    // Iterate through the blockedList and display 
    // each user with an unblock button
    blockedList.forEach((user, index) => {
        const listItem = document.createElement('li');
        listItem.textContent = user;
        listItem.className = 'blockeduser';
        const unblockButton = 
            document.createElement('button');
        unblockButton.textContent = 'Unblock';
        unblockButton.className = 'unblockbutton';
        unblockButton.onclick = function () {
            unblockUser(index);
        };
        listItem.appendChild(unblockButton);
        listContainer.appendChild(listItem);
    });
}

Output:

Comment

Explore