ES6 | ES 2015 Template Strings

Template Literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

by Ben Graham

HTML

<div class="container">
  <a href="https://vimeo.com/ondemand/occytheoccumentary" target="_blank">Watch The Occumentary on Vimeo</a>
</div>

SCSS

$bgColor: rgb(0, 126, 248);
$text: #e6e6e6;
 html, body {
   height: 100%;
 }
.container {
  display: flex;
  background: $bgColor;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
p , a {
  display: flex;
  color: $text;
  flex-basis: 20%;
  font-size: 30px;
  width: 70%;
  display:inline-block;
  margin-top: 0px;
}

@media (max-width: 800px){
  p , a {
    font-size: 20px;
    }
}

Babel + JSX

document.body.onload = one;

var firstName = 'Jack';
var lastName = 'McCoy';
var legend = 'Mark Occhilupo'
var a = '19';
var b = 99;


function one() {
  var newParagraph = document.createElement("p");
  var newContent = document.createTextNode(`The Occumentary is a surf documentary on the legendary ${legend} produced by ${firstName} ${lastName}. ${legend} won the ${a + b} ASP world title.`);
newParagraph.appendChild(newContent);

  var currentContainer = document.querySelector(".container");
  currentContainer.prepend(newParagraph);
}