LGRMLP

index.html

<h2>Magnet Link Generator</h2>

<div class="block">
  <label for="info-hash">Info hash:</label>
  <input id="info-hash" type="text" name="info-hash" />
</div>
<div class="block">
  <label for="trackers">Trackers: <sup>One or more tracker, separated by newlines.</sup></label>
  <textarea id="trackers" name="trackers"></textarea>
</div>
<div class="block">
  <button id="generate-magnet">Create Magnet Link</button>
</div>

<hr />

<p><a href="#" id="magnet-target">Magnet link appears here</a></p>

<p><small>Not intended for purposes of copyright infringement.</small></p>

LGRMLP.markdown

LGRMLP

A Pen by armornick on CodePen.

License.

script.js

var generateMagnetButton = document.getElementById("generate-magnet"),
    infoHashField = document.getElementById("info-hash"),
    trackersField = document.getElementById("trackers"),
    magnetLinkTarget = document.getElementById("magnet-target");

function generateMagnetLink(infoHash, trackers) {
  var result = "magnet:?xt=urn:btih:";
  result += infoHash;
  
  for (var i = 0; i < trackers.length; i++) {
    var tracker = trackers[i].replace(/\//g, '%2F').replace(/\:/g, '%3A');
    result += '&tr=' + tracker;
  }
  
  return result;
}

function generateButtonHandler(e) {
  var infoHashValue = infoHashField.value.trim();
  var trackersList = trackersField.value.split("\n");
  
  var magnetLink = generateMagnetLink(infoHashValue, trackersList);
  
  magnetLinkTarget.innerHTML = magnetLink;
  magnetLinkTarget.href = magnetLink;
}

generateMagnetButton.addEventListener('click', generateButtonHandler)

style.css

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}


body {
  font-family: sans-serif;
  color: #111;
  background-color: #fbfcf7;
  line-height: 1.4;
  
  padding-left: 1em;
}

a, a:hover {
  color: #0074d9;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  padding: 0.4em;
}

.block {
  margin-bottom: 1em;
}

.block label {
  margin-right: 1em;
}

.block textarea {
  display: block;
  width: 85%;
  height: 7em;
}

hr {
  color: #403f4e;
  width: 80%;
}