[OLD] Link Lister & Text Merger

let width= '140px'; //change if needed
let b=[
`title>>>url`,
`title>>>url`,
`title>>>url`,
];

let b1= [], b2= [];
for (let i=0; i<b.length; i++) {
if (b[i].includes('>>>')){
let split = b[i].split('>>>');
b1.push(split[0]);
b2.push(split[1]);}}

let a= document.createElement('div');
    a.id= 'bmlist';
    document.body.appendChild(a);

let menu = document.createElement('span');
    menu.innerHTML = '❌';
    a.appendChild(menu);

function kd (x,y) {
let link = document.createElement('a');
    link.href= x;
    link.textContent= y;
    link.target= '_blank';
    a.appendChild(link);}

for(let i=0; i<b1.length; i++){
kd(b2[i],b1[i]);}

let c= document.querySelector('#bmlist');
    c.style.top= '10px';
    c.style.left= '10px';
    c.style.width= width;
    c.style.textAlign= 'left';
    c.style.position= 'fixed';
    c.style.zIndex= '10123456';
    c.style.boxSizing= 'border-box';
    c.style.visibility= 'visible';

let d= document.querySelector('#bmlist span');
    d.style.textAlign= 'center';
    d.style.border= '1px solid red';

let e= document.querySelectorAll('#bmlist a');
for (let i=0; i<e.length; i++){
    e[i].style.display= 'inline-block';
    e[i].style.border= '1px solid fuchsia';
    e[i].style.boxSizing= 'border-box';
    e[i].style.padding= '4px 0 4px 10px';
    e[i].style.background= 'black';
    e[i].style.color= 'white';
    e[i].style.width= '100%';
    e[i].style.font= '14px arial';
    e[i].style.textDecoration= 'none';}

d.onclick= function() {
for(let i=0; i<e.length; i++){
if (e[i].style.display==('none'))
e[i].style.display= 'inline-block';
else e[i].style.display= 'none'; }};


/*-----------------------------------------------------------------------------------------------------------*/

<!DOCTYPE html>
<html lang="en">
<head>
<style>
input{
background:black;
color: white;
border: 1px solid green;
}
</style>
</head>
<body>
<div>
<span>Start</span>
<form   id="begin" rows="1" cols="8">
<textarea rows="1" cols="8"></textarea></form>

<span>Joiner</span>
<form   id="middle">
<textarea rows="1" cols="8"></textarea></form>

<span>End</span>
<form id="end">
<textarea rows="1" cols="8"></textarea></form>
</div>

<br>
<br>

<div    style="clear:both">
<h3>List of Titles<h3>
<form id="titles">
<textarea rows="20" cols="70"></textarea>
</form><br>

<h3>List Of URLs<h3>
<form id="urls" onsubmit="KD();return false;">
 <textarea rows="20" cols="70"></textarea>
 <input type="submit">
</form><br>

<h3>Result<h3>
<form id="result">
 <textarea rows="30" cols="70" readonly></textarea>
</form>
</div>

<script>
let a= document.querySelector('#titles textarea'),
    b= document.querySelector('#urls textarea'),
    c= document.querySelector('#result textarea'),
    d= document.querySelector('#begin textarea'),
    e= document.querySelector('#middle textarea'),
    f= document.querySelector('#end textarea');

//---------PLACEHOLDER--CONFIGURATION-------
let aPH=`Paste a list of your Titles here,
separated by linebreaks. Example:
Title 1
Title 2
Title 3`; //@@@@@@@@@@@@@@@@@@@

a.placeholder= aPH;
a.onfocus= function() {a.placeholder='';}
a.onblur= function() {a.placeholder=aPH;};

let bPH=`Paste a list of your URLs here,
separated by linebreaks. Example:
URL 1
URL 2
URL 3`; //@@@@@@@@@@@@@@@@@@@

b.placeholder=bPH;
b.onfocus= function() {b.placeholder='';}
b.onblur= function() {b.placeholder=bPH;}

//----------------ERROR--ALERTING------------------
let er1= '*ERROR*',
er2= `There were some potential errors in your input:
- The Tite/URL list is empty
- The Title/URL list contains extra linebreak(s)
- The amount of Titles > the amount of URLs`,
er3= `Oops! Your input contains backticks \`
This can cause problems, and
has therefore been escaped by \\\``;


//-----------------MAIN--FUNCTION-----------------
let bt= false;

function kd(x,y,z) {
c.textContent='';
let a1= a.value.split('\n'),
    b1= b.value.split('\n'),
    merged= [];

for (let i=0; i<a1.length; i++) {
  if (a1[i]=='') a1[i]=er1;
  if (b1[i]=='') b1[i]=er1;
  if (b1[i]==0) b1[i]=er1;
  if (b1[i]==undefined) b1[i]=er1;
  if (a1[i].includes('`')){ bt= true;
  a1[i]=a1[i].replace(/`/g,'\\`');}
  if (b1[i].includes('`')){ bt= true;
  b1[i]=b1[i].replace(/`/g,'\`');}

merged.push(`${x+a1[i]+y+b1[i]+z}`);

let result = document.createTextNode(merged[i]+'\n');
c.appendChild(result);
}
}

//----------FUNCTION--W/--PARAMETER----------------
d.value='`';
e.value='>>>';
f.value='`,'; //@@@@@@@@@@@@@@@@@@@

function KD() {
let X=d.value, Y=e.value, Z=f.value;
kd(X,Y,Z);
if (bt==true) alert(er3);
if (c.textContent.includes(er1)) alert (er2);
}
</script>
</body>
</html>