ncatalin
11/5/2017 - 4:25 PM

Template JavaScript

JavaScript ES6 / ES2015 Tutorials from Brad Traversy

style.css
content_copyfile_download
body{
  font-family: arial;
  font-size:18px;
  color:#333;
  margin:0;
  padding:0;
}

header{
  height:130px;
  padding-top:40px;
  background:#f4f4f4;
  text-align: center;
  border-bottom:#333 3px solid;
}

h1#heading{
  margin:0;
  padding:0;
}

#container{
  width:960px;
  margin:20px auto;
  padding:20px;
  overflow:auto;
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Learning ES6</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <header>
      <h1 id="heading">Learning ES6</h1>
      <p>With Brad Traversy</p>
    </header>
    <div id="container">
      <div id="template"></div>
    </div>

    <script src="./main.js"></script>
  </body>
</html>
main.js
content_copyfile_download
"use strict"

let name = 'John';

function makeUppercase(word){
  return word.toUpperCase();
}

let template =
`<h1>${makeUppercase('Hello')}, ${name}</h1>
<p>This is a simple template in JavaScript</p>`;

document.getElementById('template').innerHTML = template;