rdevans87/OOP_TeamProfileGenerator
Object Oriented Programming: Team Profile Generator
OOP_TeamProfileGenerator
Description
10 Object-Oriented Programming: Team Profile Generator
This is a Node.js command-line application that takes in information about employees on a software engineering team, then generates an HTML webpage that displays summaries for each person. A unit test was written for every part of the code and ensure that it passes each test.
Link to GitHub repository: Team Profile Generator
Link to walkthrough video: TPG demo Video
Table of Contents
- User Story
- Mock Up
- Demo
- Acceptance Criteria
- Installation
- Usage
- Demo
- Directory Structure
- Tests
- Grading Requirements
- Submitted for Review
- Questions
- License
User Story
AS A manager
I WANT to generate a webpage that displays my team's basic info
SO THAT I have quick access to their emails and GitHub profilesMock Up
The following image shows a mock-up of the generated HTML’s appearance and functionality. HTML webpage titled “My Team” features five boxes listing employee names, titles, and other key info
Demo
Link to walkthrough video demosonstrating the functionality of the Team Profile Generator and all tests passing: Team Profile Generator Demo)
- The walkthrough video shows all four tests passing from the command line.
- The walkthrough video demonstrates how a user would invoke the application from the command line.
- The walkthrough video demonstrates how a user would enter responses to all of the prompts in the application.
- The walkthrough video demonstrates a generated HTML file that matches the user input.
Acceptance Criteria
GIVEN a command-line application that accepts user input
WHEN I am prompted for my team members and their information
THEN an HTML file is generated that displays a nicely formatted team roster based on user input
WHEN I click on an email address in the HTML
THEN my default email program opens and populates the TO field of the email with the address
WHEN I click on the GitHub username
THEN that GitHub profile opens in a new tab
WHEN I start the application
THEN I am prompted to enter the team manager’s name, employee ID, email address, and office number
WHEN I enter the team manager’s name, employee ID, email address, and office number
THEN I am presented with a menu with the option to add an engineer or an intern or to finish building my team
WHEN I select the engineer option
THEN I am prompted to enter the engineer’s name, ID, email, and GitHub username, and I am taken back to the menu
WHEN I select the intern option
THEN I am prompted to enter the intern’s name, ID, email, and school, and I am taken back to the menu
WHEN I decide to finish building my team
THEN I exit the application, and the HTML is generatedInstallation
-
Open
terminalwindow after fork.npm init -yto create a package.son file to store your dependenices. -
npm i to install your NPM package manager and required dependencies.
-
npm i
inquirerto interact with the user via the command-line. -
npm i
figletto implement FIGfont spec in Javascript. -
npm i
chalkfor terminal string styling of Logo. -
npm i Jest for running user tests for command prompts.
Usage
-
Invoke the application by using the following command:
node index.js -
With the application invoked, you'll be prompted to answer a series of questions from the command line to generate a
Team Profilefor your project. -
Each question will pertain to a specific
Team Member's Profileyou're creating. Answer each prompt forManager,Engineer,Intern,Employee. -
Hit Enter after answering each question to continue to the next prompt. When all the prompts are completed, you will receive an alert
Team Profile Generator Complete. -
A
sample.htmlfile will automatically generate inside the explorer window of your project directory within thesamplefolder. -
Your
sample.htmlshould contain a similar structure as the [#mock-up] shown above with a header displayingmy teamand four individual cards for eachemployee. -
Each employee card will have a
name,role, &email. Engineer cards will include agithub username. Intern cards will display theschoolwhich they are currently attending. -
Please feel free to make changes to the styling or employee roles as needed, but do not make changes to the html file structure or javascript files unless you'd like to make a contribution.
Directory Structure
__tests__/ // jest tests
Employee.test.js
Engineer.test.js
Intern.test.js
Manager.test.js
dist/ // rendered output (HTML) and CSS style sheet
lib/ // classes
src/ // template helper code
index.js // runs the applicationThe application includes Employee, Manager, Engineer, and Intern classes.
Employee parent class with the following properties and methods:
-
name,id,email,getName(),getId(),getEmail() -
getRole()—returns'Employee'
The other three classes extend Employee.
Employee's properties and methods, Manager have the following:
-
officeNumber -
getRole()—overridden to return'Manager'
Employee's properties and methods, Engineer have the following:
-
github—GitHub username -
getGithub() -
getRole()—overridden to return'Engineer'
Employee's properties and methods, Intern have the following:
-
school -
getSchool() -
getRole()—overridden to return'Intern'
Tests
-
Using the Jest package for a suite of unit tests.
-
The following tests for
Employee,Manager,Engineer, andInternclasses (in the_tests_directory) ALL pass.
Manager Test:
test("Set Office Number from constructor", () => {
const testValue = 0;
const emp = new Manager("Johnny", 0, "johnny@fmail.com", testValue);
expect(emp.officeNumber).toBe(testValue);
});
Engineer Test:
test("Set GitHub Account from constructor", () => {
const testValue = "GitHub"
const emp = new Engineer("Bobby", 4, "https://github.com/fgithubaccount", testValue);
expect(emp.github).toBe(testValue);
});
Employee Test:
test("new Employee created", () => {
const emp = new Employee();
expect(typeof(emp)).toBe("object");
});
Intern Test:
test("get school from constructor", () => {
const testValue = "The Ohio State University";
const emp = new Intern("Ali", 4, "ali@fmail.com", testValue);
});
Grading Requirements
- Deliverables: 15%
- Walkthrough Video: 32%
- Technical Acceptance Criteria: 40%
- Repository Quality: 13%
Submitted for Review
- A walkthrough video that demonstrates the functionality of the application and passing tests.
- A sample HTML file generated using your application.
- The URL of the GitHub repository, with a unique name and a readme describing the project.
Questions
Email: rdevans87@gmail.com
Github: rdevans87

