JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<h1>Kod för Google Analytics</h1>
<div class="box" id="ganalytics-box">
<input class="googleInput" id="ganalytics-input" type="text" value="" placeholder="Skriv in ID för Google Analytics" />
<button class="googleSubmit" id="ganalytics-submit">Generera kod</button>
</div>
<div class="scriptContainer" id="ganalytics-container">
</div>
<button class="resetSubmit" id="ganalytics-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("#ganalytics-input").bind('paste keydown keypress', function() {
	  if (jQuery("#ganalytics-input").val().length === 12){
		jQuery('#ganalytics-submit').fadeIn();
	  } else {
		jQuery('#ganalytics-submit').hide();
	  }
	});
	jQuery('#ganalytics-submit').click(function(){
	  var googleID = jQuery('#ganalytics-input').val();
	  var scriptStringStart = "<script src='\/\/cdn.axiell.com/arena/google-analytics.js type='text\/javascript'><\/script><script>gsAnalytics('";
	  var scriptStringEnd = "');<\/script>";
	  var str = scriptStringStart + googleID + scriptStringEnd;

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