Introduction

In today’s digital age, spam and bots are common nuisances that can affect websites and online platforms. To combat this, it’s essential to implement effective anti-spam measures. In this article, we will explore how to create a simple anti-spam button using HTML, CSS, and JavaScript. By following the steps outlined below, you can enhance your website’s security and protect it from automated spam.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript.

Preview:

Simple Anti-Spam Button

Creating the HTML Structure

<h1 id="antispamh1">Simple Anti-Spam Button</h1>
<button id="domaths" onclick="generateRandomAddition()">Are you Robot?🤖</button>
<hr>
<button id="downloadButton" style="display: none;" onclick="hideDownloadButton()"><a href="javascript:void(0)" download>Download🏆</a></button>

In the code above, we have a heading with the ID antispamh1, a button with the ID domaths for the anti-spam check, and another button with the ID downloadButton that will be displayed after the user passes the anti-spam check.

Styling with CSS

To make our anti-spam button visually appealing, we’ll apply some CSS styles. Insert the following CSS code inside the <style> tags within the <head> section of your HTML document:

#antispamh1 {
    color: white;
}

#downloadButton, #domaths {
    background-color: #ff4c60;
    color: white;
    font-size: 17px;
    font-weight: 900;
    padding: 10px;
    border-radius: 50% 20% / 10% 40%;
    border: none;
    cursor: pointer;
    padding: 30px;
}

#downloadButton, #domaths:hover {
    background-color: #ffd15d;
    color: black;
    font-size: 17px;
    font-weight: 900;
    padding: 10px;
    border-radius: 50% 20% / 10% 40%;
    border: none;
    cursor: pointer;
    padding: 30px;
    transition: 1s;
}

The CSS code above applies styles to the antispamh1 ID, downloadButton ID, and domaths ID. It sets the background color, text color, font size, padding, border radius, and cursor style for the buttons.

Implementing JavaScript Functionality

Now let’s add the JavaScript code that will enable the anti-spam functionality. Place the following JavaScript code within the <script> tags in the <head> section of your HTML document:

<script>
    function generateRandomAddition() {
        var num1 = Math.floor(Math.random() * 10) + 1;
        var num2 = Math.floor(Math.random() * 10) + 1;
        var answer = num1 + num2;
        var userInput = parseInt(prompt("How much " + num1 + " + " + num2 + ";"));

        if (userInput === answer) {
            document.getElementById("downloadButton").style.display = "block";
            alert("Correct!");
        } else {
            alert("Nah! 🤖. Try Again.");
        }
    }

    function hideDownloadButton() {
        var downloadButton = document.getElementById("downloadButton");
        downloadButton.style.display = "none";
        downloadButton.removeEventListener("click", hideDownloadButton);
    }
</script>

The JavaScript code above contains two functions. The generateRandomAddition function generates two random numbers, presents an addition question to the user, and checks if their answer matches the correct sum. If the answer is correct, the download button with the ID downloadButton is displayed, and an alert message is shown. Otherwise, an error message is displayed.

The second function, hideDownloadButton, is responsible for hiding the download button when it is clicked. This function removes the event listener for the button click and sets its display to none.

👉 Test Your Code Here 👈

Conclusion

In this article, we learned how to create a simple anti-spam button using HTML, CSS, and JavaScript. By implementing this feature on your website, you can add an extra layer of protection against automated spam and ensure that only legitimate users can proceed with specific actions. Remember to customize the design and functionality according to your specific requirements.

Blog

Free Tools

Creating a Simple Anti-Spam Button with HTML, CSS, and JavaScript