JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<div id="zip-search">
    <p class="note">
        <span>Note:</span>
        <span>
            This service is only for the City of Los Angeles. Please enter your ZIP to confirm availability:
        </span>
    </p>
    
    <div class="input-group">
        <input type="text" name="zip-search" id="input-zip" maxlength="5" placeholder="90210" />
        <button id="check-zip">Check ZIP</button>
    </div>
    
    <div id="zip-results">
        <p class="msg success">Good News!</p>
        <p class="msg failure">Sorry, that ZIP is not eligible.</p>
        <p class="msg invalid">
            Please enter 5 digit numbers.
        </p>
    </div>
    
</div>

CSS

body {
    font-family: Arial;
}

#zip-search {
    background-color: #f1f1f1;
    color: #666;
    border-radius: 4px;
    padding: 1em;
}

#zip-search .note {
    overflow: hidden;
    margin: 0;
}

#zip-search span {
    float: left;
    width: 85%;
}

#zip-search span:first-child {
    width: 15%;
}

#zip-search .input-group {
    margin: 1em auto;
    width: 100%;
    max-width: 370px;
}

#zip-search input {
    border: 2px solid #e5e5e5;
    border-radius: 4px;
    font-size: 18px;
    font-weight: normal;
    padding: 0.35em;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

#zip-search input:focus {
    outline: 0;
    border-color: #54b247;
}

#zip-search button {
    border: 1px solid #eee;
    color: #666;
    padding: 0.55em 1.5em;
    border-radius: 4px;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    background-color: #54b247;
    color: #fff;
    vertical-align: middle;
}

#zip-results .msg {
    display: none;
}

JavaScript

$(function() {
	var inputZip = $('#input-zip'),
    	checkZip = $('#check-zip'),
       resultMsg = $('#zip-results .msg'),
         invalid = $('#zip-results .invalid'),
         goodZip = $('#zip-results .success'),
          badZip = $('#zip-results .failure'),
    	zipArray = [
        	'90001','90002','90003','90004','90005','90006','90007','90008','90010'
        ];
    
    $(checkZip).on('click', function() {
        if (inputZip.val() != '' && !isNaN(inputZip.val()) && inputZip.val().length > 4) {
            if($.inArray(inputZip.val(), zipArray) != -1) {
                $(resultMsg).hide();
                $(goodZip).show();
            }
            else {
                $(resultMsg).hide();
                $(badZip).show();
            }
        }
        else {
            $(resultMsg).hide();
            $(invalid).show();
        }
    });
});