JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
</head>

<body>


<form name="myForm" action="" method="GET">
  Enter a name: 
  <input type="text" name="myname" value="JONATHAN MONTGOMERY"><br><br>
  County:  <input type="text" name="county" value="GWINNETT COUNTY"><br><br>
  Date:  <input type="text" name="date" value="Nov 24 2023"><br><br>
  <img src="https://res.cloudinary.com/shirly-dam/image/upload/$date_!Nov.%2024%252C%202023!,$name_!AAAAAAAA%20JONATHAN%20MONTGOMERY!,$county_!GWINNETT%20COUNTY!/g_auto/w_500,y_-140,l_text:arial_35:$(name),co_black,e_distort:arc:140/w_450,y_140,l_text:Arial_40:$(county),co_black,e_distort:arc:-140/l_text:Arial_30:$(date),y_60/2010-georgia-notary-round-with-expiration-hcb_hcwzam.png" name="myimg"/>
  <br><br>
  <input type="button" name="button" value="Create for web" onClick="CreateWebURL(this.form)">
</form>
 
</body>

</html>

JavaScript

function CreateWebURL(form)
{
   var name = form.myname.value;
    var county = form.county.value;
    var date = form.date.value;
    var hiname = -192;
    var hicounty = 180;//145 for large
    var wname = 150;
    var arcname = 35;
    var wcounty = 250;
    var arccounty = -80;
     if (name.length >= 10) {
      hiname = -140;
   		wname = 500;
      arcname = 140;
     }
      if (county.length >= 10) {
      hicounty = 170;
   		wcounty = 350;
      arccounty = -100;
     }
 
  myURL = "https://res.cloudinary.com/shirly-dam/image/upload/$hicounty_"+ hicounty + ",$wcounty_"+wcounty+",$wname_"+wname+",$arcname_"+arcname+",$hiname_"+hiname+",$name_!" + encodeURIComponent(encodeURIComponent(name)) + "!,$county_!"+county+"!,$arccounty_"+arccounty+",$date_!"+encodeURIComponent(encodeURIComponent(date))+"!/g_auto/w_$wname,h_40,y_$hiname,l_text:Arial_40:$(name),e_distort:arc:$arcname,c_scale/w_$wcounty,y_$hicounty,l_text:Arial_40:$(county),co_black,e_distort:arc:$arccounty/l_text:Arial_30:$(date),y_60/2010-georgia-notary-round-with-expiration-hcb_hcwzam.png";
 // alert(myURL)
  form.myimg.src = myURL;
}