<section class="generateForm">
<h3>Hobaica Links</h3>
<p>Enter Full Name & Tracking Number</p>
<div style="display: flex; gap: 1em; flex-wrap: wrap;" class="input-fields">
<textarea placeholder="Full Name" id="name"></textarea>
<textarea placeholder="Tracking #" id="tracking"></textarea>
</div>
<button onclick="displayUrl()" class="se-widget-button hypercore-button hbBtn hbBtn--orange">Generate Link<fa-icon icon="caret-right" family="solid"></fa-icon></button>
<!-- <button onclick="clearData()" class="se-widget-button hypercore-button hbBtn hbBtn--orange">Clear All<fa-icon icon="caret-right" family="solid"></fa-icon></button> -->
<p style="color:#2176ff; font-weight: 600; font-size: 1.5em;">New Link Below</p>
<p id="output"></p>
</section>
<style>
button{
margin: 1em 15px 1em 0px !important;
}
button:hover{
cursor:pointer !important;
}
textarea {
height: 100px;
width: 220px;
line-height: 1.8;
}
</style>
<script>
function displayUrl(){
const techUrl = new URL("https://www.hobaica.com/referrals");
const names = document.querySelector("#name").value.split(/\r?\n/);
const tracking = document.querySelector("#tracking").value.split(/\r?\n/);
names.forEach((entry, index) => {
techUrl.searchParams.set("full-name", entry);
techUrl.searchParams.set("tracking-number", tracking [index]);
if (entry){
document.getElementById("output").innerHTML += techUrl + "</p><p>";
document.querySelector("#name").value = '';
document.querySelector("#tracking").value = '';
console.log(entry);
}
else{
document.getElementById("output").innerHTML = "Please fill in required fields";
}
})
}
// function clearData()
// {
// document.querySelector("#name").value = '';
// document.querySelector("#tracking").value = '';
// document.getElementById("output").innerHTML = "";
// }
</script>
