JSFiddle - React, Tailwind, and code Playground

by FGRibreau

HTML

<div>
  <div>
    <textarea id="url" cols="30" rows="10"></textarea>  
  </div>
  <div>
    <img src="about:blank" id="rendering_gg">
    <img src="about:blank" id="rendering_ic_prod">
    <img src="about:blank" id="rendering_ic_dev">
  </div>
  <div>
    <textarea id="outputUrl" cols="30" rows="10"></textarea>  
  </div>
</div>

CSS

*{
box-sizing:border-box;
padding:0;
margin:0;
}

div{
  width:90vw;
  margin:0 auto;
  height:30vh;
}
div > div{
   width: 100%;
   overflow:auto;
}

textarea {
  outline:1px solid #000;
  border:0px;
  width:100%;
  height:100%;
  font-size:1rem;
  font-family:monospace;
}

img{
}

JavaScript

const IC_DEV = /http:\/\/localhost\:8080\/chart\?/;
const IC_PROD = /https?:\/\/image-charts\.com\/chart\?/;
const GG_PROD = /https?:\/\/chart\.apis\.google\.com\/chart\?/;


function removeEnv(url){
return url.replace(IC_DEV, '').replace(IC_PROD, '').replace(GG_PROD, '') ;
}

function update(){
	const initialValue = this.value;
  const removeCR = (val) => val.split('\n').join('');
  const format = (val) => val.split('&').join('\n&');
	
  const url = removeCR(removeCR(this.value));
	const formattedUrl = format(url);
  
  
  this.value = formattedUrl;
  

  $('#rendering_gg').attr('src', GG_PROD + removeEnv(url));
  $('#rendering_ic_prod').attr('src', IC_PROD + removeEnv(url));
  $('#rendering_ic_dev').attr('src', IC_DEV + removeEnv(url));
  
  $('#outputUrl').val(encodeURI(url));
  
  
}

$('#url').on('keyup', update);