Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Javascript - Import and Export class examples</title>
    </head>
    <body>
        <h1>Javascript Import and Export class examples</h1>
        <div id="myDiv"></div>
        <button onclick="window.updateScreen()">Do it</button>
        <script type="module">
            import('./main.js').then(module => {
                /* This function is now available on the button onclick */
                window.updateScreen = module.updateScreen;
            });
        </script>
    </body>
</html>

import { Animal } from './animal.js';
import { Human } from './human.js';
import { Dog, Cat } from './pets.js';

const petOwner = new Human('Bob', 'Male', '21/03/19');
const pets = [ new Dog('Riley', petOwner), new Cat('Sherry', petOwner) ];

petOwner.speak();
pets[1].speak();
pets[0].speak();

function updateScreen() {
    let elem = document.getElementById('myDiv');
    elem.textContent = 'HELLO';
}

export { updateScreen };

class Animal {
    constructor(alive, hr) {
        this.isAlive = alive;
        this.heartRate = hr;
    }
}
export { Animal };

import {Animal} from './animal.js';
class Human extends Animal {
    constructor(name, sex, dob) {
        super(true, 60);
        this.name = name;
        this.dob = dob;
        this.sex = sex;
    }
    speak() {
        console.log('Hello');
    }
    get age() {
        return now-dob;
    }
}
export { Human };

import {Animal} from './animal.js';

class Cat extends Animal {
    constructor(name, owner) {
        super(true, 200);
        this.name = name;
        this.owner = owner;
    }
    speak() {
        console.log('Meow');
    }
}

class Dog extends Animal {
    constructor(name, owner) {
        super(true, 120);
        this.name = name;
        this.owner = owner;
    }
    speak() {
        document.getElementById('myDiv').textContent = 'Woof';
    }
}

export { Cat, Dog };