JSFiddle - React, Tailwind, and code Playground

HTML

<p>Enter "coupon" in any case or you will receive an error.</p>

<input type="text" id="coupon" /> <input type="button" id="go" value=" go &rarr;" />

<div id="error">&nbsp;</div>

CSS

body, html
{
    margin: 20px;
}

#coupon{display: inline-block; width: 150px;}
#go{padding: 0px 5px 0px 5px;}
#error
{
    border: 1px solid #b1b1b1;
    width: 150px;
    margin-top: 5px;
    display: none;
    color: #F00;
    padding: 10px;
}

JavaScript

if(window.addEventListener)
{
    document.getElementById("go").addEventListener("click", test, false);            
}
else
{
    document.getElementById("go").attachEvent("onclick", test);
}
    
function test()
{
    var e = document.getElementById("error");
    var value = document.getElementById("coupon").value.toLowerCase();
    
    if(value != "coupon")
    {
        e.style.display = "block";
        e.textContent = "Error! Incorrect code";            
    }
    else
    {
        e.style.display = "none";
    }
}