LinkGen

by Anatoly Kulikov

HTML

<label>
  <span>Текст, который будет отображаться</span>
  <input id="text" type="text">
</label>

<label>
  <span>Ссылка</span>
  <input id="link" type="url">
</label>


<div>Код: <span id="readylink"></span></div>
<div>Превью: <span id="view"></span></div>

SCSS

label {
  display: block;
  margin: 10px 0;
  
  span,
  input {
    display: block;
  }
  
  span {
    margin-bottom: 3px;
  }
}

div {
  display: block;
  margin: 10px 0;
}

JavaScript

const link = document.getElementById('link');
const text = document.getElementById('text');
const readyLink = document.getElementById('readylink');

text.addEventListener('input', () => {
	createLink();
})
link.addEventListener('input', () => {
	createLink();
})

function createLink() {
	readyLink.innerText = `<a href="${link.value}" target="_blank">${text.value}</a>`;
  view.innerHTML = `<a href="${link.value}" target="_blank">${text.value}</a>`;
}