The aim of this project was to build a command-line application that dynamically generates a HTML webpage, based upon a user’s input.
The project brief specified that the generated webpage should display a software engineering team, with the following members:
- Manager (essential)
- Engineer(s) (optional)
- Intern(s) (optional)
The user should first be prompted to enter the Manager’s details, including their name, id, email and office number. They should then be prompted to add an engineer, intern or finish and generate the webpage. If the user opts to add an engineer, they should be prompted for the engineer’s GitHub username (as well as their name, id and email). Whereas if the user adds an intern, they should be prompted for the intern’s university (as well as their name, id and email).
The starter code included a template for the generated webpage, as well as tests on the classes. All tests were required to pass.
Although not explicitly stated in the project brief, the starter code implied that the application should be invoked by using the following command: node index.js and should make use of the Inquirer package (for user input) and the Jest package (for testing).
In relation to node.js, the application makes use of node’s file system module, path module and util module.
The javascript files have been commented throughout with pseudocode (breaking the project into tasks). Comments have also been added to explain the functionality of the code and highlight changes that have been made to the starter code.
If you haven’t already, please download node.js to your machine before proceeding with the installation instructions.
- Clone this repository to your machine
- Navigate to the root of the newly cloned directory
- Open your terminal
- In the terminal, run
npm i - The application is now ready to be used and is invoked using the command
node index.js
The user installs and invokes the application as above. Once invoked, the application asks the user a series of prompts:
- Requests information about the Manager (i.e. name, id, email and office number)
- Asks the user if they would like to add an engineer, an intern or finish and generate the webpage:
- If add an engineer is selected, requests information about this employee (i.e. name, id, email and GitHub username)
- If add an intern is selected, requests information about this employee (i.e. name, id, email and university)
- Upon entering the employee’s details, asks the user if they would like to add (another) engineer, intern or finish and generate the webpage.
- When finish is selected, a confirmation message is displayed in the terminal and the user is instructed to check the output directory.
Validation is included on each prompt to ensure the user’s answers are satisfactory (e.g. not left blank; a number where required etc).
The user’s answers to these prompts become the content of the generated webpage (via classes).
When the user selects to finish and generate the webpage, an output directory is created and an HTML file (with the generated content) is created within this directory. (Note: if an output directory already exists, the creating of this directory is skipped).
A walkthrough video, demonstrating the invoking of the application, the answering of the user prompts and a generated html file is accessible via the link.
An example html file generated by the application is included in this repository. This generated webpage displays as follows (on a resolution of 1400px):
The application uses the Jest package for unit testing on each of the classes. At the time of publishing this README, all tests pass:
- Navigate to the root of the application’s directory
- Open your terminal
- In the terminal, run
npm test
- Starter code (including tests): edX (2023)
- Design resources in generated webpage: Freepik (no date), Google Fonts (no date)
- All other credits are cited in the code comments and referenced below.
Select the badge or visit the LICENSE.txt (above) for more information.
Code written by Code0Em (email/ GitHub).
edX (2023) Build new skills. Advance your career.
Freepik (no date) Create great designs, faster.
Google Fonts (no date) Google Fonts.
LaunchCode Education (no date) 13.4. Exporting Modules.
Node.js (no date) Working with folders in Node.js.
Xpert Learning Assistant (2024) (accessed via Virtual Learning Environment).