Untitled

require('../styles/styles.scss');

import Employee from './Employee.js';
import Teacher from './Teacher.js';
import Developer from './Developer.js';
import CEO from './CEO.js';
import Item from './Item.js';

var $ = require('jquery');

// udi
var udi = new CEO("Udi", "Cinephile", "CEO");
var udiItem = new Item(udi);
udiItem.renderContainer();

// rani
var rani = new Developer("rani", "Jaggling", "Developer");
var raniItem = new Item(rani);
raniItem.renderContainer();

import Employee from './Employee.js';

export default class CEO extends Employee {
    constructor(name, skill, title){
        super(name, skill, title="CEO")
    }
    fireEveryone(){
        console.log(this.name + " has fired EVERYONE!");
    }
}

import Employee from './Employee.js';

export default class Developer extends Employee {
    constructor(name, skill, title){
        super(name, skill, title="Developer");
    }
    pushCode(){
        console.log(this.name + " has pushed some code.");
    }
}

export default class Employee {
    constructor(name, skill, title){
        this.name = name;
        this.skill = skill;
        this.title = title;
    }

    sayHello(){
        console.log(this.name + " said hello");
    }

    checkIn(){
        console.log(new Date());
    }
}

var id = 0;
var $ = require('jquery');

export default class Item{
    constructor(user){
        this.id = this.getId();
        this.name = user.name;
        this.skill = user.skill;
        this.title = user.title;
    }

    renderContainer(){
        var $container = $(`
            <dl class="employee">

            </dl>
        `);

        this.container = $container;

        this.renderDetails();
        $('.content').append($container);

    }

    renderDetails(){
        var $details = $(`

        <p>
            <dt>ID: </dt>
            <dd>${this.id}</dd>
        </p>
        <p>
            <dt>Name: </dt>
            <dd>${this.name}</dd>
        </p>
        <p>
            <dt>Skill: </dt>
            <dd>${this.skill}</dd>
        </p>
        <p>
            <dt>Title: </dt>
            <dd>${this.title}</dd>
        </p>

        `);
        this.container.find(".employee").html($details);
        // $('.content').append($details);  //works fine with no need of renderContainer()
    }

    getId(){
        return id++;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <div class="content">
        <!-- template comes here -->
    </div>
</body>
</html>