JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<h1>
URL für Triple-Display erstellen
</h1>
<fieldset id="urls">
<legend>URL-Komponenten</legend>
<label class="base">
  <div>Container-Seite für Triple-Display:</div>
  <input type="url" value="file:///C:/my/folder/tripledisplay.html">
</label>
<label class="imgref"><div>Bildquelle 1:</div><input type="url"></label>
<label class="imgref"><div>Bildquelle 2:</div><input type="url"></label>
<label class="imgref"><div>Bildquelle 3:</div><input type="url"></label>
</fieldset>
<fieldset id="urls">
<legend>URL für die Triple-Display Seite</legend>
<output id="result">adsada</output>
</fieldset>

CSS

body {
  max-width: 60em;
  margin: 1em auto;
  padding: 0 0.5em;
}
fieldset {
  padding: 0.3em 1em;
}
label {
  display: block;
  padding: 0.3em 0;
}
label span {
  padding: 0 0.5em;
  width: 5.5em;
}
label input[type=url], output {
  width: 100%;
  font: 1rem sans-serif;
}

#result {
  display: block; 
  overflow: hidden;
  width: 100%;
  word-wrap: break-word;   
  overflow-wrap: break-word;
  word-break: break-all;}

JavaScript

let urlInput = document.getElementById("urls");
let result = document.getElementById("result");

urlInput.addEventListener("input", function(e) {
   let baseUrl = urlInput.querySelector("label.base input").value;
   let urls = urlInput.querySelectorAll("label.imgref input");
   let params = [];
   for (let i=0; i<urls.length; i++) {
      params.push(`target${i+1}=${encodeURIComponent(urls[i].value)}`);
   }
   result.textContent = baseUrl + "?" + params.join("&");
});