AmmarYasserAllaithy/WBS.css

## WBS.css
* {
	box-sizing: border-box;
}

*:not(ol),
.abstract {
	padding: 0;
	margin: 0;
}

body {
	padding: 1em !important;
	color: #223;
	font-family: Laila, Gotu;
}

.header,
.phase-title {
	text-align: center;
	margin-bottom: 1rem;
}

.header {
	cursor: pointer;
}

sup {
	border-bottom: 1px solid;
}

a {
	text-decoration: none;
}

.container {
	display: flex;
	justify-content: space-between;
	padding: 0.25em;
}

ol {
	padding-left: 1.4em;
}

.sub-phase ol {
	list-style: none;
}

.phase {
	width: 25%;
	margin: 0.5em;
	padding: 0.75em 1em;
	border-radius: 10px;
	box-shadow: 0 0 10px #0002;
}

.phase-title,
.sub-phase-title {
	display: block;
	border-bottom: 1px solid #0002;
}

.sub-phase-title {
	font-weight: bold;
}

.li {
	padding: 5px 10px;
}

.phase > ol > .li {
	margin: 1em;
	border-radius: 10px;
	border: none !important;
}

.li:hover {
	background: #00000009;
}

.li.bordered {
	border-left: 1px solid #0002;
}

.li.bordered:not(:last-of-type) {
	border-bottom: 1px solid #0002;
}

/* Wide View */
.wide {
	display: block;
}

.wide .phase {
	width: 94%;
	margin: 1em auto;
	overflow: auto;
}

.wide .phase > ol {
	display: flex;
	justify-content: space-around;
}

## WBS.html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>WBS</title>

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Laila">
	<link rel="stylesheet" href="WBS.css">
</head>

<body>
	<h1 class="header">Work Breakdown Structure <sup>WBS</sup></h1>

	<section class="container"></section>

	<script src="WBS.js"></script>
</body>

</html>

## WBS.js
const create = (tag, cls, html) => {
    const el = document.createElement(tag)

    if (cls != undefined)
        if (cls instanceof Array)
            cls.forEach(c => el.classList.add(c))
        else el.classList.add(cls)

    if (html != undefined) el.innerHTML = html

    return el
}

class Phase {
    constructor(name) {
        this.name = name
        this.cls = 'phase'

        this.phaseEl = create('section', this.cls)
        this.titleEl = create('h2', 'phase-title', this.name)
        this.listEl = create('ol')
    }

    create() {
        this.phaseEl.appendChild(this.titleEl)
        this.phaseEl.appendChild(this.listEl)

        return this.phaseEl
    }

    addItem(name) {
        this.listEl.appendChild(create('li', ['li', 'bordered'], name))

        return this
    }

    addPhase(phase) {
        if (phase instanceof Phase) {

            const phaseEl = create('li', ['li', 'bordered', 'sub-phase'])

            phaseEl.appendChild(create('span', 'sub-phase-title', phase.name))
            phaseEl.appendChild(phase.listEl)

            this.listEl.appendChild(phaseEl)

        } else console.error(phase + " isn't instanceof Phase")

        return this
    }
}

// Administration Phase
const administrationPhase = new Phase('Administration')
    .addPhase(new Phase('Develop Policies and Procedures')
        .addItem('Develop Corrective Procedures')
        .addPhase(new Phase('Develop Maintenance <a href="https://en.wikipedia.org/wiki/Standard_operating_procedure" target="blank">SOP</a><br><sup>Standard Operating Procedure<sup>')
            .addItem('Planning')
            .addItem('Financial')
            .addItem('Supervision'))
        .addItem('Work Structure'))

    .addPhase(new Phase('New Course')
        .addPhase(new Phase('Trainers')
            .addPhase(new Phase('Selection')
                .addItem('Job post')
                .addItem('Registeration')
                .addItem('Interview')))
        .addPhase(new Phase('Trainee')
            .addPhase(new Phase('Selection')
                .addItem('Registeration')
                .addItem('Exam')
                .addItem('Interview'))))

    .addPhase(new Phase('Evaluation / Tracking Progress')
        .addPhase(new Phase('Feedback')
            .addItem('Survey')
            .addItem('Paper application / Checklist'))
        .addPhase(new Phase('Exams')
            .addItem('Oral / Interactive')
            .addItem('On Paper')))

    .addPhase(new Phase('Troubleshooting')
        .addItem('Collect problems')
        .addItem('Contact Experts'))


// Advertisements Phase
const advertisementsPhase = new Phase('Advertisements')
    .addItem('Official Website')

    .addPhase(new Phase('Media')
        .addItem('Facebook')
        .addItem('Twitter')
        .addItem('LinkedIn')
        .addItem('Wuzzuf'))

    .addPhase(new Phase('Recommendation')
        .addItem('Friend')
        .addItem('Collegue')
        .addItem('Head / Doctor'))

    .addPhase(new Phase('Events')
        .addItem('Online')
        .addItem('On-site'))


// Materials Phase
const materialsPhase = new Phase('Materials')
    .addPhase(new Phase('Curriculums')
        .addPhase(new Phase('Soft')
            .addItem('PPT')
            .addItem('PDF')
            .addItem('Audio')
            .addItem('Video'))
        .addPhase(new Phase('Hard')
            .addItem('Handouts')
            .addItem('Work Books')
            .addItem('Work Sheets')))

    .addPhase(new Phase('Interactive')
        .addItem('Quizzes')
        .addItem('Practices')
        .addItem('Exams'))

    .addItem('References')


// Resources Phase
const resourcesPhase = new Phase('Resources')
    .addPhase(new Phase('Course developer')
        .addItem('Develop instructional materials')
        .addItem('Find new strategies to train students (instructors)')
        .addItem('Implement multiple evaluation strategies'))

    .addPhase(new Phase('Subject matter experts')
        .addItem('Developing certification exams'))

    .addItem('Instructors / Trainers')


// Logistics Phase
const logisticsPhase = new Phase('Logistics')
    .addPhase(new Phase('Location room')
        .addItem('Chairs')
        .addItem('Tables')
        .addItem('Air conditioner'))

    .addPhase(new Phase('Computer equipments')
        .addItem('Server')
        .addItem('Laptops')
        .addItem('Network')
        .addItem('Printer'))

    .addPhase(new Phase('Parking')
        .addItem('Camera')
        .addItem('Car wash'))

    .addPhase(new Phase('Presentation Media')
        .addItem('Microphone')
        .addItem('Speaker')
        .addItem('Projector / Data-show'))


const container = document.querySelector(".container")

container.appendChild(administrationPhase.create())
container.appendChild(advertisementsPhase.create())
container.appendChild(materialsPhase.create())
container.appendChild(resourcesPhase.create())
container.appendChild(logisticsPhase.create())

document.querySelector(".header").onclick = () => container.classList.toggle("wide")
	* {
	box-sizing: border-box;
	}

	*:not(ol),
	.abstract {
	padding: 0;
	margin: 0;
	}

	body {
	padding: 1em !important;
	color: #223;
	font-family: Laila, Gotu;
	}

	.header,
	.phase-title {
	text-align: center;
	margin-bottom: 1rem;
	}

	.header {
	cursor: pointer;
	}

	sup {
	border-bottom: 1px solid;
	}

	a {
	text-decoration: none;
	}

	.container {
	display: flex;
	justify-content: space-between;
	padding: 0.25em;
	}

	ol {
	padding-left: 1.4em;
	}

	.sub-phase ol {
	list-style: none;
	}

	.phase {
	width: 25%;
	margin: 0.5em;
	padding: 0.75em 1em;
	border-radius: 10px;
	box-shadow: 0 0 10px #0002;
	}

	.phase-title,
	.sub-phase-title {
	display: block;
	border-bottom: 1px solid #0002;
	}

	.sub-phase-title {
	font-weight: bold;
	}

	.li {
	padding: 5px 10px;
	}

	.phase > ol > .li {
	margin: 1em;
	border-radius: 10px;
	border: none !important;
	}

	.li:hover {
	background: #00000009;
	}

	.li.bordered {
	border-left: 1px solid #0002;
	}

	.li.bordered:not(:last-of-type) {
	border-bottom: 1px solid #0002;
	}

	/* Wide View */
	.wide {
	display: block;
	}

	.wide .phase {
	width: 94%;
	margin: 1em auto;
	overflow: auto;
	}

	.wide .phase > ol {
	display: flex;
	justify-content: space-around;
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>WBS</title>

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Laila">
	<link rel="stylesheet" href="WBS.css">
	</head>

	<body>
	<h1 class="header">Work Breakdown Structure <sup>WBS</sup></h1>

	<section class="container"></section>

	<script src="WBS.js"></script>
	</body>

	</html>
	const create = (tag, cls, html) => {
	const el = document.createElement(tag)

	if (cls != undefined)
	if (cls instanceof Array)
	cls.forEach(c => el.classList.add(c))
	else el.classList.add(cls)

	if (html != undefined) el.innerHTML = html

	return el
	}

	class Phase {
	constructor(name) {
	this.name = name
	this.cls = 'phase'

	this.phaseEl = create('section', this.cls)
	this.titleEl = create('h2', 'phase-title', this.name)
	this.listEl = create('ol')
	}

	create() {
	this.phaseEl.appendChild(this.titleEl)
	this.phaseEl.appendChild(this.listEl)

	return this.phaseEl
	}

	addItem(name) {
	this.listEl.appendChild(create('li', ['li', 'bordered'], name))

	return this
	}

	addPhase(phase) {
	if (phase instanceof Phase) {

	const phaseEl = create('li', ['li', 'bordered', 'sub-phase'])

	phaseEl.appendChild(create('span', 'sub-phase-title', phase.name))
	phaseEl.appendChild(phase.listEl)

	this.listEl.appendChild(phaseEl)

	} else console.error(phase + " isn't instanceof Phase")

	return this
	}
	}

	// Administration Phase
	const administrationPhase = new Phase('Administration')
	.addPhase(new Phase('Develop Policies and Procedures')
	.addItem('Develop Corrective Procedures')
	.addPhase(new Phase('Develop Maintenance <a href="https://en.wikipedia.org/wiki/Standard_operating_procedure" target="blank">SOP</a><br><sup>Standard Operating Procedure<sup>')
	.addItem('Planning')
	.addItem('Financial')
	.addItem('Supervision'))
	.addItem('Work Structure'))

	.addPhase(new Phase('New Course')
	.addPhase(new Phase('Trainers')
	.addPhase(new Phase('Selection')
	.addItem('Job post')
	.addItem('Registeration')
	.addItem('Interview')))
	.addPhase(new Phase('Trainee')
	.addPhase(new Phase('Selection')
	.addItem('Registeration')
	.addItem('Exam')
	.addItem('Interview'))))

	.addPhase(new Phase('Evaluation / Tracking Progress')
	.addPhase(new Phase('Feedback')
	.addItem('Survey')
	.addItem('Paper application / Checklist'))
	.addPhase(new Phase('Exams')
	.addItem('Oral / Interactive')
	.addItem('On Paper')))

	.addPhase(new Phase('Troubleshooting')
	.addItem('Collect problems')
	.addItem('Contact Experts'))


	// Advertisements Phase
	const advertisementsPhase = new Phase('Advertisements')
	.addItem('Official Website')

	.addPhase(new Phase('Media')
	.addItem('Facebook')
	.addItem('Twitter')
	.addItem('LinkedIn')
	.addItem('Wuzzuf'))

	.addPhase(new Phase('Recommendation')
	.addItem('Friend')
	.addItem('Collegue')
	.addItem('Head / Doctor'))

	.addPhase(new Phase('Events')
	.addItem('Online')
	.addItem('On-site'))


	// Materials Phase
	const materialsPhase = new Phase('Materials')
	.addPhase(new Phase('Curriculums')
	.addPhase(new Phase('Soft')
	.addItem('PPT')
	.addItem('PDF')
	.addItem('Audio')
	.addItem('Video'))
	.addPhase(new Phase('Hard')
	.addItem('Handouts')
	.addItem('Work Books')
	.addItem('Work Sheets')))

	.addPhase(new Phase('Interactive')
	.addItem('Quizzes')
	.addItem('Practices')
	.addItem('Exams'))

	.addItem('References')


	// Resources Phase
	const resourcesPhase = new Phase('Resources')
	.addPhase(new Phase('Course developer')
	.addItem('Develop instructional materials')
	.addItem('Find new strategies to train students (instructors)')
	.addItem('Implement multiple evaluation strategies'))

	.addPhase(new Phase('Subject matter experts')
	.addItem('Developing certification exams'))

	.addItem('Instructors / Trainers')


	// Logistics Phase
	const logisticsPhase = new Phase('Logistics')
	.addPhase(new Phase('Location room')
	.addItem('Chairs')
	.addItem('Tables')
	.addItem('Air conditioner'))

	.addPhase(new Phase('Computer equipments')
	.addItem('Server')
	.addItem('Laptops')
	.addItem('Network')
	.addItem('Printer'))

	.addPhase(new Phase('Parking')
	.addItem('Camera')
	.addItem('Car wash'))

	.addPhase(new Phase('Presentation Media')
	.addItem('Microphone')
	.addItem('Speaker')
	.addItem('Projector / Data-show'))


	const container = document.querySelector(".container")

	container.appendChild(administrationPhase.create())
	container.appendChild(advertisementsPhase.create())
	container.appendChild(materialsPhase.create())
	container.appendChild(resourcesPhase.create())
	container.appendChild(logisticsPhase.create())

	document.querySelector(".header").onclick = () => container.classList.toggle("wide")