JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<h1>Kod för Google Maps</h1>
<div class="box" id="gmaps-box">
<input class="googleInput" id="gmaps-input" type="text" value="" placeholder="Klistra in inbäddningskod" />
<button class="googleSubmit" id="gmaps-submit">Generera kod</button>
</div>
<div class="scriptContainer" id="gmaps-container">
</div>
<button class="resetSubmit" id="gmaps-submit">
Generera ny kod?
</button>

CSS

body {
  background-color: .eee;
  text-align: center;
  margin-top: 150px;
}
.googleInput {
  padding: 10px;
  width: 500px;
  height: 50px;
}

.googleSubmit,
.resetSubmit {
  height: 70px;
  padding: 0 10px;
  display: none;
}

.googleInput,
.googleSubmit,
.resetSubmit,
.scriptContainer,
h1 {
  font-size: 20px;
  font-family: Helvetica, Arial, sans-serif;
}

.resetSubmit{
  margin-top: 30px;
}

.scriptContainer {
  display: none;
  padding: 40px;
  background-color: .fff;
}

JavaScript

jQuery("#gmaps-input").bind('paste keydown keypress', function() {
  if (jQuery("#gmaps-input").val().length >= 12){
    jQuery('#gmaps-submit').fadeIn();
  } else {
  	jQuery('#gmaps-submit').hide();
  }
});
jQuery('#gmaps-submit').click(function(){
  var googleID = jQuery('#gmaps-input').val();
	googleID = googleID.substring(googleID.indexOf('src') + 5);
  googleID = googleID.substring(0, googleID.indexOf('"'));
  var str = googleID;

  function htmlEncode(str) 
  {
      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }
  function displayHTML(html)
  {
      jQuery('#gmaps-container').html( htmlEncode( html ) );
  }
  console.log( str );
  displayHTML( str );
  jQuery('#gmaps-container').fadeIn();
  jQuery('#gmaps-box').fadeOut('fast');
  jQuery('#gmaps-submit').fadeIn();
});
jQuery('#gmaps-submit').click(function(){
	jQuery(this).fadeOut('fast');
  jQuery('#gmaps-container').fadeOut('fast');
  jQuery('#gmaps-box').fadeIn();
});