JSFiddle - React, Tailwind, and code Playground

by johnsonjo4531

HTML

<p>
 Drag the below link to your bookmarks bar to create a codeforces link to the USU list or create your own list link below with the form.
</p>
<a href="javascript:window.location.href = window.location.href + (function addParam (url) { return ((url.indexOf('?') > -1) ? '&' :'?') + 'list=d369d9492f6950cca3b8b1d47ee459f2'; })(window.location.href)">USU CodeForces List</a>
<p>
  <div>
    Name of link
  </div>
  <input type='text' id="link-name" value="USU CodeForces List" />
</p>

<p>
  <div>
    Name of param
  </div>
  <input type='text' id="param-name" value="list" />
</p>

<p>
  <div>
    Value of param
  </div>
  <input type='text' id="param-val" value="d369d9492f6950cca3b8b1d47ee459f2" />
</p>

<input id='submit' type='submit' value="Create" />

CSS

a {
  margin: 10px;
}

JavaScript

document.getElementById('submit').addEventListener('click', () => {
	let lname = document.getElementById("link-name").value;
  let pname = document.getElementById("param-name").value;
  let val = document.getElementById("param-val").value;
  let a = document.createElement("a");
  a.setAttribute('href', `javascript:window.location.href = window.location.href + (function addParam (url) { return ((url.indexOf('?') > -1) ? '&' :'?') + '${pname}=${val}'; })(window.location.href)`);
  a.appendChild(document.createTextNode(lname));
  document.body.appendChild(a);
});