Create a User Blocking project using HTML CSS & JavaScript

Last Updated : 21 Nov, 2023

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:

blockuser

Suggest improvement

Create a Single Page Application using HTML CSS & JavaScript

Share your thoughts in the comments