<!DOCTYPE html>
<html>
<head>
<title>ES6 or ECMAScript 6</title>
<style>
* {
    box-sizing: border-box;
}
input, p {
    font: 18px Calibri;
    width: 90%;
}
input {
    padding: 12px;
    margin: 3px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
input[type=button] { 
    border: solid 1px #0095ff;
    background-color: #0095ff;
    color: #fff;
    cursor: pointer;
}
</style>
</head>

<body>
<div>
    <input type='text' id='name' placeholder='Enter your name' />
    <input type='button' value='Click it' id='bt' onclick='say_hello()' />
</div>

<p id="msg"></p>
</body>

<script>
// Using two ES6 features here, the "let" declaration and the "arrow" (=>) function.

let say_hello = () => {
	let name = document.getElementById('name').value;
    let msg = document.getElementById('msg');
    msg.innerHTML = 'Hello ' + name + ' ☺';
}
</script>
</html>
Table options! ?
  • Rows:
  • Columns:
  • Table Width:
  • (%)

  • Background Color:
  • Text Color:
  • Header Color:

  • Row Highlight
  • Font:
  • Theme:

Table Border

  • Style:
  • Width:
  • px (pixels)
  • Color:
  • Collapse