Create a User Blocking project using HTML CSS & JavaScript Last Updated : 22 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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:Prerequisites:HTMLCSSJavaScriptApproach: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 stylingWhen 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 More infoAdvertise with us Next Article Create a User Blocking project using HTML CSS & JavaScript A ashufacebsjmb Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League JavaScript-Projects Geeks Premier League 2023 +1 More Similar Reads Create a User Polls Project using HTML CSS & JavaScript Creating a user polls project has various valuable purposes, including gathering feedback, engaging users, personalizing content, fostering community, conducting research, A/B testing, and improving the user experience. Clear objectives are crucial, and in this example, we focus on collecting data o 3 min read Create a Single Page Application using HTML CSS & JavaScript In this article, we are going to design and build a cool and user-friendly single-page application (SPA) using just HTML, CSS, and JavaScript. A single-page application contains multiple pages which can be navigated or visited without loading the page every time. This makes things faster and more in 4 min read Create a Pomodoro Timer using HTML CSS and JavaScript In this article, we will see how to design Pomodoro Timer with the help of HTML CSS, and JavaScript. The Pomodoro Technique is a time management method that involves breaking your work into focused intervals, typically 25 minutes, followed by short breaks. After completing four cycles, take a longer 3 min read Create a Health Tracker using HTML CSS & JavaScript In this article, we will see how we can create a health tracker using HTML, CSS, and JavaScript.Here, we have provided the user with three inputs i.e. input water intake, exercise duration, and blood sugar levels. The user can input these daily and then the provided data is stored in the localStorag 5 min read How to Create a GitHub Profile Search using HTML CSS and JavaScript ? In this article, we will be developing an interactive GitHub Profile Search application using HTML, CSS, and JavaScript Language. In this application, there is a search bar where users can enter the username that they want to view. After entering the username, an API call is been triggered, and the 4 min read Create an Image Background Remover App Using HTML CSS & JavaScript Building an Image Background Remover using HTML, CSS, and JavaScript demonstrates the power of combining these technologies to create interactive and user-friendly applications. The clean design and intuitive features make this tool not only functional but also enjoyable for users to interact with. 3 min read Dynamic Resume Creator using HTML CSS and JavaScript Creating a well-structured and professional resume can be time-consuming and difficult for many job seekers. Challenges like formatting, organizing details, and making the resume stand out are common. To solve this issue, a Resume Creator project was developed to simplify the process by offering an 5 min read Create a Contact Form using HTML CSS & JavaScript A contact form is a web form used to collect user information and messages, facilitating communication between visitors and site owners. It is essential for feedback, inquiries, and support. Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation and submission 3 min read Create a Bookmark Landing Page using HTML CSS and JavaScript In this article, we are going to implement a Bookmark Landing Page using HTML, CSS, and JavaScript. Users can effortlessly add, manage, and remove bookmarks, resulting in a tidy digital library for their favorite websites. Bookmarking the Landing Page refers to a web page or website where the users 4 min read Create a Prime Number Finder using HTML CSS and JavaScript In this article, we will see how to create a Prime Number Finder using HTML, CSS, and JavaScript. The main objective of this project is to allow users to input a number and check if it is a prime number or not. Prime numbers are those, that can only be divided by 1 and themselves. We'll develop a ba 3 min read Like