JSFiddle - React, Tailwind, and code Playground

by Alexis Rodriguez

HTML

<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
 </head>
<body>
<h1>
<b>Weather Now</b>
</h1>
<p>Find your local weather</p>

<form>
  <input id="search" type="text" name="search" placeholder="Search..">
</form>

</body>

CSS

input[type=text] {
    width: 150px;
    box-sizing: border-box;
    border: 4px solid #dedae8;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}

JavaScript

var cache = {};
    $( "#search" ).autocomplete({
      minLength: 2,
      source: function( request, response ) {
        var term = request.term;
        
 
        $.getJSON( "http://autocomplete.wunderground.com/aq?query=" + term, {}, function( data, status, xhr ) {
          response( data );
        });
      }
    });


//ajax
$.ajax({
url : Weather,
dataType : "json",
success : function(data) {
}
});

//capturing and handling events

//form validation

//DOM element creation, deletion or modification