Skip to content

Instantly share code, notes, and snippets.

@AmmarYasserAllaithy

AmmarYasserAllaithy/WBS.css

Last active January 5, 2021 10:25
Show Gist options
  • Save AmmarYasserAllaithy/c99fc1d6a53fd2e293b847d7491e3e42 to your computer and use it in GitHub Desktop.
Save AmmarYasserAllaithy/c99fc1d6a53fd2e293b847d7491e3e42 to your computer and use it in GitHub Desktop.
Download ZIP
Work Breakdown Structure - Project Management - NTI
Raw
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;
}
Raw
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>
Raw
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")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment