Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>State Picture</title>

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://dan-janes.com/auto/jquery.autocomplete.css"/>
    <script src="http://dan-janes.com/auto/jquery.autocomplete.js"></script>


    <script>
    $(document).ready(function(){

        //Action after clicking the submit button
        $("#submit").click(function(){
         picture();
        });

        $("#clear").click(function(){
            $("#testInput").val("");
            $("#stateName").text("");
            $("#stateImage").css("opacity", 0);
        });

    });

    //List of states and a link for a picture
    var stateLinks = {};
    stateLinks["Alabama"]=["http://farm4.staticflickr.com/3315/3493269235_5b0c4dd147_b.jpg"],stateLinks["Alaska"]=["http://farm7.staticflickr.com/6171/6167391543_395a7cabfd_b.jpg"],stateLinks['Arizona']=["http://twistedsifter.files.wordpress.com/2013/06/horseshoe-bend-colorado-river-page-arizona.jpg?w=800&h=533"],stateLinks['Arkansas']=["http://farm8.staticflickr.com/7222/7162348533_e22659abdc_c.jpg"],stateLinks['California']=["http://twistedsifter.files.wordpress.com/2013/06/entrance-to-yosemite-national-park-california.jpg?w=800&h=458"],stateLinks['Colorado']=["http://twistedsifter.files.wordpress.com/2013/06/maroon-bells-colorado.jpg?w=800&h=542"],stateLinks['Connecticut']=["http://farm4.staticflickr.com/3163/2969846449_1f1c5074be_b.jpg"],stateLinks['Delaware']=["http://farm9.staticflickr.com/8165/7681131130_e841708a3c_c.jpg"],stateLinks['Florida']=["http://farm9.staticflickr.com/8380/8455214639_ab78574ff9_c.jpg"],stateLinks['Georgia']=["http://twistedsifter.files.wordpress.com/2013/06/wormsloe-historic-site-savannah-georgia.jpg?w=800&h=545"],stateLinks['Hawaii']=["http://twistedsifter.files.wordpress.com/2013/05/waipio-valley-big-island-hawaii.jpg?w=800&h=600"],stateLinks['Idaho']=["http://farm7.staticflickr.com/6057/6269071201_81d21022ac_b.jpg"],stateLinks['Illinois']=["http://farm8.staticflickr.com/7097/7178843225_d74d32657e_c.jpg"],stateLinks['Indiana']=["http://farm9.staticflickr.com/8300/7859255586_e8e1e47842_c.jpg"],stateLinks['Iowa']=["http://farm1.staticflickr.com/25/36411509_5ecd60a4fc_o.jpg"],stateLinks['Kansas']=["http://farm5.staticflickr.com/4027/4321272698_76be4bcaf1_b.jpg"],stateLinks['Kentucky']=["http://farm3.staticflickr.com/2281/1562780066_32008a405c_b.jpg"],stateLinks['Louisiana']=["http://farm8.staticflickr.com/7045/7031210389_6bef4ae9bc_c.jpg"],stateLinks['Maine']=["http://farm5.staticflickr.com/4112/5203739827_08915f854b_b.jpg"],stateLinks['Maryland']=["http://farm7.staticflickr.com/6156/6224556383_643ed0f1f1_b.jpg"],stateLinks['Massachusetts']=["http://farm5.staticflickr.com/4111/5197931483_4379098352_b.jpg"],stateLinks['Michigan']=["http://farm2.staticflickr.com/1231/1085868030_23cdf5c679_o.jpg"],stateLinks['Minnesota']=["http://farm9.staticflickr.com/8012/7271823370_e99f293e7c_c.jpg"],stateLinks['Mississippi']=["http://farm4.staticflickr.com/3268/2702785760_110cbf3c0d_b.jpg"],stateLinks['Missouri']=["http://farm2.staticflickr.com/1402/5166380422_d8d0cae0f1_b.jpg"],stateLinks['Montana']=["http://twistedsifter.files.wordpress.com/2013/06/glacier-national-park-montana.jpg?w=800&h=541"],stateLinks['Nebraska']=["http://farm4.staticflickr.com/3767/8867385642_8db96f018c_c.jpg"],stateLinks['Nevada']=["http://farm7.staticflickr.com/6126/5932469664_5b389681a6_b.jpg"],stateLinks["New Hampshire"]=["http://farm7.staticflickr.com/6090/6067580851_a7ed5007c4_b.jpg"],stateLinks["New Jersey"]=["http://farm4.staticflickr.com/3213/2708577920_fea57755f7_b.jpg"],stateLinks["New Mexico"]=["http://farm4.staticflickr.com/3239/2718938320_f36dbb3d10_b.jpg"],stateLinks["New York"]=["http://farm7.staticflickr.com/6057/6288866486_6a4fafa6a8_b.jpg"],stateLinks["North Carolina"]=["http://farm9.staticflickr.com/8298/7788058782_9bfe48fe7a_c.jpg"],stateLinks["North Dakota"]=["http://farm7.staticflickr.com/6030/5955699443_0d62351a56_b.jpg"],stateLinks['Ohio']=["http://farm1.staticflickr.com/129/319680203_f501d5dfff_b.jpg"],stateLinks['Oklahoma']=["http://farm4.staticflickr.com/3055/3061730684_82dc237d91_o.jpg"],stateLinks['Oregon']=["http://farm9.staticflickr.com/8124/8659687313_188700238c_c.jpg"],stateLinks['Pennsylvania']=["http://twistedsifter.files.wordpress.com/2013/05/meandering-pine-creek-gorge-tioga-county-pa-usa.jpg?w=800&h=600"],stateLinks["Rhode Island"]=["http://farm5.staticflickr.com/4055/4625663071_47c512d0b9_o.jpg"],stateLinks["South Carolina"]=["http://farm8.staticflickr.com/7352/9117886026_ae6691a748_c.jpg"],stateLinks["South Dakota"]=["http://farm4.staticflickr.com/3785/8851975530_0c4a4601fc_c.jpg"],stateLinks['Tennessee']=["http://farm7.staticflickr.com/6053/6276617383_07882897a4_b.jpg"],stateLinks['Texas']=["http://twistedsifter.files.wordpress.com/2012/04/hamilton-pool-nature-preserve-austin-texas.jpg?w=800&h=532"],stateLinks['Utah']=["http://twistedsifter.files.wordpress.com/2013/06/thors-hammer-bryce-cannon-utah.jpg?w=800&h=533"],stateLinks['Vermont']=["http://farm9.staticflickr.com/8033/8049951568_bd2e2ca153_c.jpg"],stateLinks['Virginia']=["http://farm1.staticflickr.com/15/19482666_3a5c4fe9c7_o.jpg"],stateLinks['Washington']=["http://farm4.staticflickr.com/3252/2800384628_6674d97339_b.jpg"],stateLinks["West Virginia"]=["http://farm9.staticflickr.com/8050/8084791478_52cb88982b_c.jpg"],stateLinks['Wisconsin']=["http://farm4.staticflickr.com/3658/3361259425_8feaed2975_b.jpg"],stateLinks['Wyoming']=["http://twistedsifter.files.wordpress.com/2013/06/john-moulton-barn-mormon-row-grand-tetons-wyoming.jpg?w=800&h=598"];

    //List of states for auto complete plug-in
    var states = [
        'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia',
        'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa',
        'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland',
        'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
        'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico', 'New York', 'North Carolina',
        'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
        'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
        'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington',
        'West Virginia', 'Wisconsin', 'Wyoming'
    ];

    //Main function in
    function picture(){
        var stateInpt = $('#testInput').val();

        //loops through states[]
        for (i=0; i< states.length; i++){


            //tries to find a match with stateInpt and the current value in states[]
            if(states[i].localeCompare(stateInpt)==0){
                //test function to see what int it found
                //document.getElementById("right").innerHTML=i;

                $("#stateName").text(stateInpt);

                //updates the <img> with the new link for the scr

                document.getElementById("stateImage").src=stateLinks[stateInpt];

                $("#stateImage").css("opacity", 1);
                                                     }
                                        }

                    }

    $(function() {
        $("#testInput").autocomplete({
            source:[states],
            minLength:2

        });

    });


    </script>
    <style>
        h2{
            text-align: center;
        }

        img{
            display: block;
            margin-left: auto;
            margin-right: auto;

        }

        .show{opacity: 1;}
        .hide{opacity: 0;}
    </style>

</head>

<h1>Welcome to State Picture</h1>
<h4>Please type in a state and click submit. A photo from your selected state will appear</h4>

<input type="form" name="testInput" id="testInput">

<button id="submit" type="button">Submit</button>
<button id="clear">Clear</button>
<br><br>

<!--
 <p id="test"> </p>
-->
<h2 id="stateName"> </h2>


<img id="stateImage" scr=" ">

</body>


<script>


</script>

</html>