JSFiddle - React, Tailwind, and code Playground

by ncubica

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<form>
<fieldset>
  <label>Description:</label>
  <textarea class='f-descritpion'></textarea>
  <span class='hint'>Describe the intention of this group</span>
</fieldset>
<fieldset>
  <label>Lat:</label>  
  <input type="text" class='f-lat' /> 
  <label>Long:</label>
  <input type="text" class='f-long' />
  <span class='hint'>get coordinates <a href="http://www.latlong.net/" target="_blank">here &raquo;</a></span>
</fieldset>
<fieldset>
  <label>Category:</label>
  <input type="text" class='f-category' />
  <span class="hint">this could be: regional, finance, technology, etc</span>
</fieldset>
<fieldset>
  <label>Group:</label>
  <input type="text" class='f-group' />
  <span class="hint">this could be: north-america, europe, asia, other, etc</span>
</fieldset>
<button type="submit">Create meta description</button>
</form>
<hr/>
<div class='f-result'></div>

CSS

body{
  font-family:"helvetia","tahoma";
  color:#666;
}
fieldset {
  border:1px solid #EEE;
  margin-bottom:10px;
}

.hint {
  font-size:12px; 
  color:#BBB;
  display:block;
  width:100%;
  padding:5px;
}

textarea {
  width:90%;
  padding:10px;
  min-height:100px;
}

.f-result{
  border:1px solid #EEE;
  min-height:100px;
  width:100%;
}

JavaScript

$(document).on("submit","form",(event)=> {
	event.preventDefault();
  $('.f-result').html("");
  let description = $(".f-descritpion").val();
  let lat = $(".f-lat").val();
  let long = $(".f-long").val();
  let category = $(".f-category").val();
  let group = $(".f-group").val();
  if(description && lat && long && category && group) {
    const template = `${description} [[!"lat":"${lat}", "long":"${long}","category":"${category}","group":"${group}"]]`; 
    try {
      const description = template;
      const metadata = description.substring(description.indexOf("[[!"), description.indexOf("]]")+2);
      const descriptionClean = description.replace(metadata, "");
      const metadataJSONStr = metadata.replace("[[!","{").replace("]]","}");     
      JSON.parse(metadataJSONStr);
      $('.f-result').html(`<span style='color:green'>Good kitty 😺 everything seems ok: <br> ------- <br></span> ${template}`);
      return;
    }catch(e) {
    	$('.f-result').html(`<span style='color:red'>Bad kitty 🙀 something went wrong!</span> ${template}`);
    }
    return;
  }
  
  $('.f-result').html(`<span style='color:red'>Bad kitty 🙀 all fields are required!</span>`);
});