JSFiddle - React, Tailwind, and code Playground

by rhewitt

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Chesapeake Bay Nutria Eradication Sightings Map</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="CSS/style.css"/>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css"/>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    
    </head>
    <body>
        <div id="map_canvas"></div>
    </body>
</html>

CSS

h1, h2, h3 {
font: Georgia, Serif;
}

html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}
form {
    margin:0;
    padding:0;
    text-align:right;
}
fieldset {
    clear:both;
    font-family: Helvetica;
    font-size: .8em;
    font-weight: bold;
    color:#182886;
    border: 2px solid #182886;
    white-space: nowrap;
    background-color:#FFFFED;
}
form p{
    margin:.25em;
    padding:.2em;
}
label {
    margin-right:.4em;
    margin-left:.4em;
    margin-bottom:0;
}
input {
    padding:0;
    margin-right: 0 .4em 0 0;
}
textarea{
    width:17em;
    height:5em;
    margin:.4em .4em 0 0;
    padding:0;
}
#submitBtn {
    float:right;
    margin:.2em .4em .2em 0;
    padding:.3em;
}
#dos{
    float:left;
    margin-left:.5em;
}
#formDiv {
    overflow:auto;
}
.error {
    color: 'red';
    padding:0;
    margin:0 .4em 0 0;
}

p.error {
    margin:.25em;
}
textarea.error{
    margin:.4em .4em 0 0;
    padding:0;
}
.valid {
    padding:0;
    margin:0 .4em 0 0;
}
.hide{
    display:hide;
}
.clear{
    clear:both;
}

JavaScript

// Global Variables
var map, markerWindow, newMarker, contentString;

function resizeWindow() {
    markerWindow.setContent(document.getElementById('innerWindow'));
}

// Google Maps info window form submit

$('.submitBtn').click(function(e){
    e.preventDefault();
    postSighting();        
});
function postSighting() {
    // jQuery Validate
    $('#htmlForm').validate({
        rules: {
            contact: {
                required: true,
                email: true
            },
            phone: {
                required: true
            },
            date: {
                required: true,
                date: true
            },
            lat: {
                required: true
            },
            lng: {
                required: true
            },
            desc: {
                required: true
            },
        },
        messages: {
            desc: 'Please be descriptive!'
        },
        errorPlacement: function(error, element) {
            error.appendTo($('#' + element.attr('id') + 'P'));
            if (element.attr('id') == 'desc') {
                error.css({
                    text_align: 'center',
                    color: 'red',
                    paddingRight: 45,
                });
                resizeWindow();
                return false;

            } else {
                error.css({
                    color: 'red',
                    paddingRight: 18,
                });
                resizeWindow();
                return false;
            }
        }
    });

    //jQuery ajax form submit
    var contact = $('input#contact').val(),
        phone = $('input#phone').val(),
        date = $('input#datepicker').val(),
        lat = $('input#lat').val(),
        lng = $('input#lng').val(),
        desc = $('textarea#desc').val();
    var dataString = "contact=" + contact + '&phone=' + phone + "&date=" + date + "&lat=" + lat + "&lng=" + lng + "&desc=" + desc;
    $.ajax({
        type: "POST",
  ...