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="90001" />
        <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'),
      markerIcon = $('.icon-location'),
         invalid = $('#zip-results .invalid'),
         goodZip = $('#zip-results .success'),
          badZip = $('#zip-results .failure'),
        zipArray = ['90001','90002','90003','90004','90005','90006','90007','90008','90010','90011','90012','90013','90014','90015','90016','90017','90018','90019','90020','90021','90023','90024','90025','90026','90027','90028','90029','90031','90032','90033','90034','90035','90036','90037','90038','90039','90041','90042','90043','90044','90045','90046','90047','90048','90049','90056','90057','90058','90059','90061','90062','90063','90064','90065','90066','90067','90068','90069','90071','90077','90274','90290','90291','90292','90293','90501','90502','90710','90731','90732','90744','91040','91042','91303','91304','91306','91307','91311','91316','91324','91325','91326','91330','91331','91335','91342','91343','91344','91345','91352','91356','91364','91367','91401','91402','91403','91405','91406','91411','91423','91436','91601','91602','91604','91605','91606','91607'];
        
    $('#input-zip').on('keyup', function(e) {
        if(e.which == 13) {
            validateInput();
        }
    });
    
    $(checkZip).on('click', function() {
        validateInput();
    });
    
    $('.dismiss').on('click', function() {
        $(this).parent().fadeOut();
    });
    
    function validateInput(){
        if (inputZip.val() != '' && !isNaN(inputZip.val()) && inputZip.val().length > 4) {
            if($.inArray(inputZip.val(), zipArray) != -1) {
                $(resultMsg).hide();
                $(markerIcon).hide();
                $('.available').fadeIn();
                $(goodZip).fadeIn();
            }
            else {
                $(resultMsg).hide();
                $(markerIcon).hide();
                $('.unavailable').fadeIn();
               ...