document.addEventListener('DOMContentLoaded', function() {
//this is the code for english language
var maindiv=document.getElementById("tab-call-to-action-english");
var rowDiv=maindiv.querySelector(".row");
rowDiv.style.position="relative";
if (rowDiv){
var secondchild=rowDiv.children[1];
secondchild.style.backgroundColor="white";
secondchild.classList.add('col-md-5');
secondchild.style.borderRadius="20px";
// var paragraph=document.createElement('p');
// paragraph.textContent="Preview Page";
// paragraph.style.color="black";
// secondchild.appendChild(paragraph);
var ctaImage = document.getElementById('CTA_ctaTranslationEn_image_file');
var output=document.createElement('img');
// img.src = 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';
secondchild.appendChild(output);
ctaImage.onchange=evt=>{
const [file] = ctaImage.files
output.src = URL.createObjectURL(file)
output.style.height = '300px';
output.style.width="600px";
}
// alert(ctaImage.placeholder);
if (ctaImage.placeholder){
output.src='uploads/'+ctaImage.placeholder;
output.style.height = '300px';
output.style.width="600px";
}
const source = document.getElementById('CTA_ctaTranslationEn_title');
const result =document.createElement('h4');
result.style.color='black';
result.style.textAlign="center";
const inputHandler = function(e) {
result.innerText = e.target.value;
}
if (source.value){
result.innerText=source.value;
}
source.addEventListener('input', inputHandler);
secondchild.appendChild(result);
const sourceDesc = document.getElementById('CTA_ctaTranslationEn_description');
const resultDesc =document.createElement('p');
if (sourceDesc.value){
resultDesc.innerText=sourceDesc.value;
}
resultDesc.style.color='black';
const inputHandlerDesc = function(e) {
resultDesc.innerText = e.target.value;
}
sourceDesc.addEventListener('input', inputHandlerDesc);
secondchild.appendChild(resultDesc);
const sourceLabel = document.getElementById('CTA_ctaTranslationEn_button_label');
const resultLabel =document.createElement('a');
const sourceLink=document.getElementById("CTA_ctaTranslationEn_button_link");
if (sourceLabel.value){
resultLabel.innerText=sourceLabel.value;
resultLabel.style.display="inline-block";
resultLabel.style.color="white";
resultLabel.style.width="200px";
resultLabel.style.height="50px";
resultLabel.style.textAlign="center";
resultLabel.style.backgroundColor="black";
}
const inputHandlerLabel = function(e) {
resultLabel.innerText = e.target.value;
resultLabel.style.display="inline-block";
resultLabel.style.color="white";
resultLabel.style.width="200px";
resultLabel.style.height="50px";
resultLabel.style.textAlign="center";
resultLabel.style.backgroundColor="black";
}
const inputHandLink=function (e){
resultLabel.href=e.target.value;
}
if (sourceLink.value){
resultLabel.href=sourceLink.value;
}
sourceLabel.addEventListener('input', inputHandlerLabel);
sourceLink.addEventListener('input',inputHandLink);
secondchild.appendChild(resultLabel);
}
//this is the code for german language
var maindivDe=document.getElementById("tab-call-to-action-german");
var rowDivDe=maindivDe.querySelector(".row");
if (rowDivDe){
var secondchildDe=rowDivDe.children[1];
secondchildDe.classList.add('col-md-5');
secondchildDe.style.backgroundColor="white";
secondchildDe.style.borderRadius="20px";
var ctaImageDe = document.getElementById('CTA_ctaTranslationDe_image_file');
var outputDe=document.createElement('img');
// img.src = 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';
ctaImageDe.onchange=evt=>{
const [file] = ctaImageDe.files
outputDe.src = URL.createObjectURL(file)
outputDe.style.height = '300px';
outputDe.style.width="600px";
}
secondchildDe.appendChild(outputDe);
const sourceDe = document.getElementById('CTA_ctaTranslationDe_title');
const resultDe =document.createElement('h4');
resultDe.style.color='black';
resultDe.style.textAlign="center";
const inputHandlerDe = function(e) {
resultDe.innerText = e.target.value;
}
sourceDe.addEventListener('input', inputHandlerDe);
secondchildDe.appendChild(resultDe);
const sourceDescDe = document.getElementById('CTA_ctaTranslationDe_description');
const resultDescDe =document.createElement('p');
resultDescDe.style.color='black';
const inputHandlerDescDe = function(e) {
resultDescDe.innerText = e.target.value;
}
sourceDescDe.addEventListener('input', inputHandlerDescDe);
secondchildDe.appendChild(resultDescDe);
const sourceLabelDe = document.getElementById('CTA_ctaTranslationDe_button_label');
const resultLabelDe =document.createElement('a');
const sourceLinkDe=document.getElementById("CTA_ctaTranslationDe_button_link");
const inputHandlerLabelDe = function(e) {
resultLabelDe.innerText = e.target.value;
resultLabelDe.style.display="inline-block";
resultLabelDe.style.color="white";
resultLabelDe.style.width="200px";
resultLabelDe.style.height="50px";
resultLabelDe.style.textAlign="center";
resultLabelDe.style.backgroundColor="black";
}
const inputHandLinkDe=function (e){
resultLabelDe.href=e.target.value;
}
sourceLabelDe.addEventListener('input', inputHandlerLabelDe);
sourceLinkDe.addEventListener('input',inputHandLinkDe);
secondchildDe.appendChild(resultLabelDe);
}
});
