GLD-DynamicTemplate

by ebottos

HTML

<div class="switchContainer">
  <span id="dtLabel">DEFAULT TEMPLATE</span> &nbsp; &nbsp;
  <label class="switch">
    <input type="checkbox" id="templateCheckbox" checked>
    <span class="slider round"></span>
  </label>
  &nbsp; &nbsp; <span id="ctLabel">CUSTOM TEMPLATE</span>
</div>
<hr />
<div class="header">
  <div class="logo">
    <img src="https://www.completecredit.com.au/wp-content/uploads/2020/04/logo.png" style="width: 250px;" />
  </div>
  <div class="creditcards">
    <img src="https://meekimoney-customer-assets.s3-ap-southeast-2.amazonaws.com/images/payment-logos-visamastercard.png" style="width: 120px;" />
  </div>
  <div class="clear"></div>
</div>

<div id="introductionText">

</div>
<div id="gliderForm">
  <div class="formGroup" id="accountNumber">
    <div class="label">Account No.</div>
    <div class="value"></div>
    <div class="clear"></div>
  </div>
  <div class="formGroup" id="custom2">
    <div class="label"></div>
    <div class="value"></div>
    <div class="clear"></div>
  </div>
  <div class="formGroup" id="custom3">
    <div class="label"></div>
    <div class="value"></div>
    <div class="clear"></div>
  </div>
</div>

CSS

.header {
  padding: 15px 50px;
}

.header .logo {
  float: left;
}

.header .creditcards {
  padding-top: 15px;
  float: right;
}

.clear {
  clear: both;
}

#introductionText {
  text-align: center;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  margin-bottom: 50px;
}

#introductionText h3 {
  font-weight: 500;
}

#introductionText h2 {
  font-size: 30px;
  font-weight: 300;
}

.switchContainer {
  width: 100%;
  text-align: center;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 300;
  line-height: 22px;
}

.switchContainer .bold {
  font-weight: 500;
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}


#gliderForm{
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 300;
  width: calc(100% -24px);
  background-color: #efeff4;
  padding: 18px 12px 50px 12px;
}

#gliderForm .formGroup{
  background-color: #e3e2e8;
  width: calc(100% -24px);
  padding: 18px 12px;
  margin-bottom: 12px;
}

#gliderForm .formGroup .label{
  float: left;
}

#gliderForm .formGroup .value{
  float: right;
  text-align: right;
}

JavaScript

let fields = {
  name: "Lou Jordan",
  amount: 5000,
  account_number: "222222",
  company_name: "Commonwealth Bank of Australia",
  reference: "5353-XXXX-XXXX-5353",
  discount_value: "75%",
  due_date: "23/09/2020",
  custom1_label: "Originated By",
  custom1_value: "Commonwealth Bank Of Australia",
  custom2_label: "Original amount",
  custom2_value: "$20,000.00",
  custom3_label: "Discount offered",
  custom3_value: "75%"
  
}

/**
	Only allowed HTML tags in the template are <h2> <h3> <b> <i> <br> <small>
*/

let customTemplate = `
	<h2>{{name}}</h2>
  <br>
  Your outstanding debt is being managed by Complete Credit Solutions.
  <br>
  The matter relates to a debt that originated with:
  <h3><b>{{company_name}}</h3></b>
  ACCOUNT <br>{{reference}}
  <br><br>
  We are offering a <b>{{discount_value}}</b> discount if the debt is paid in full by {{due_date}}
  <br><br><br>
  To receive this discount, please pay:
  <h2>{{amount}}</h2>
  
`

/** 
	DON'T
  DON'T TOUCH BELOW HERE !!! 
  DON'T
  **/

let defaultTemplate = `
	<h2>{{name}}</h2>
  <br>
  Your outstanding debt is now with Complete Credit Solutions
  <br><br><br>
  Amount
  <h2>{{amount}}</h2>
  {{custom1_label}}
  <h3>{{custom1_value}}</h3>
`

let template = setTemplate(defaultTemplate, customTemplate)
populateFormFields(fields)
render(template,fields)

document.getElementById("templateCheckbox").onclick = function(){
	console.log("getting there ...")
	let template = setTemplate(defaultTemplate, customTemplate)
  
	render(template,fields)
}
  
function render(template, fields){
	const container = document.getElementById("introductionText")
	template = populateTemplate(template, fields)
  if (validateTemplate(template))
    container.innerHTML = template
  else
    container.innerHTML = `<h2>Your template is wroooong!!!</h2>`
}

function populateTemplate(template, fields) {
  const keys = Object.keys(fields)
  for (let i in keys) {
    if (keys[i] == "amount")
      template = template.replace(
       ...