<div id='address'></div>
window.addEventListener('DOMContentLoaded', function() {
  const formatAddress = function (address) {

    // early exit here is address is null
    if (address === null) return ''

    return `
      <address>
          Customer: ${(address.customer) ? `${address.customer}` : ''}<br>
          Street: ${(address.street) ? `${address.street}` : ''}<br>
          Town: ${(address.town) ? `${address.town}` : ''}<br>
          County: ${(address.county) ? `${address.county}` : ''}<br>
          Country: ${(address.country) ? `${address.country}` : ''}<br>
          PostCode: ${(address.postCode) ? `${address.postCode}` : ''}<br>
      </address>
      `
  }
  
  // Note: County missing
  const fredsAddress = {
    customer: 'Fred Flinstone',
    street: '301 Cobblestone Way',
    town: 'Bedrock',
    country: 'USA',
    postCode: '70777'
  }
  
  const addressElem = document.querySelector('#address')
  addressElem.insertAdjacentHTML('afterbegin', formatAddress(fredsAddress))
})





Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.