18
ajit555
7y

If you are teaching a newbie HTML and basic JS using ES6/ES2015 features, the "Hello World" app probably would be:

<!-- index.html -->
<html>
<body>

<div id='container'>
<h2> Enter a Name and Hit The Button</h2>
<input id='name'>
<button id='change-name'>Say Hello</button>
<h3 id='name-display'></h3>
</div>

<script type='module' src="./index.js"></script>

</body>

</html>

//index.js

import {sayHello} from './hello.js';

let displayArea = document.getElementById('name-display');
let input = document.getElementById('name');
let button = document.getElementById('change-name');

button.addEventListener('click', () => {
//displayArea.innerHTML = "Hello World"
displayArea.innerHTML = sayHello(input.value);
});

//hello.js

export const sayHello = (name='World') => {
return `Hello ${name}`;
};

Source: https://github.com/benmccormick/...

Comments
Add Comment