<h1>Planting and Harvest Times</h1>
<div class="container">
<div class="card">
<form class="form-wrap">
<div class="input-field">
<input id='formId' type="text"/>
<label for='formId'>What do you want to grow?</label>
</div>
<a type='button' value='Submit' onClick='submitDetailsForm()' class="btn waves-effect waves-dark">Submit</a>
</form>
<div class="output-wrap">
<h4>Advice:</h4>
<div id="output"><p> </p></div>
</div>
</div>
</div>
/*Downloaded from https://www.codeseek.co/trvswgnr/jquery-growing-advice-dMEBJq */
body {
padding: 0 0 3em;
text-align: center;
}
.input-field label {
left: 0;
}
.card {
padding: 1.5rem;
}
.output-wrap, .form-wrap {
width: 48%;
display: inline-block;
vertical-align: middle;
padding: 0 1rem;
}
.output-wrap h4 {
margin: 0 0 0.5em;;
color: #555;
}
#output {
background: #efefef;
padding: 1em;
border: 1px solid #ddd;
border-radius: 3px
}
#output p {
color: slategrey;
word-wrap: break-word;
font-family: monospace;
letter-spacing: 0.05em;
}
input {
position: relative;
}
.sey-list {
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
z-index: 5;
}
.sey-selected {
background-color: #6BCCC3;
}
.sey-item:hover {
background-color: #eee;
color: #333;
}
/*Downloaded from https://www.codeseek.co/trvswgnr/jquery-growing-advice-dMEBJq */
horsey(document.querySelector('#formId'), {
suggestions: ['tomato', 'lettuce', 'cauliflower', 'celery', 'kale']
});
function submitDetailsForm() {
$("#formId").submit();
}
$("input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
$(this).submit();
}
});
$( "#formId" ).submit(function( event ) {
var formValue = $("#formId").val().toLowerCase();
if ($.inArray(formValue, ['tomato', 'tomatoes']) >= 0) {
$( "#output p" ).text( "Plant in February, Harvest in June" );
} else if ($.inArray(formValue, ['lettuce', 'cauliflower', 'celery', 'kale']) >= 0) {
$( "#output p" ).text( "Plant in March, Harvest in April" );
} else {
$( "#output p" ).text( "Get a job." );
}
event.preventDefault();
});