In this activity, you will build a command-line tool that generates an HTML portfolio page from user input.
Your application should prompt the user for information like their name, location, bio, LinkedIn URL, and GitHub URL. Feel free to add any additional prompts you think of.
An HTML document containing the information collected from the prompts should be constructed and written to the file system. Be sure to add some CSS styling to the document.
You’ll need the following tools and technologies to accomplish this:
fs for writing to the file system.
inquirer for collecting user input.
String template literals for generating a string version of the HTML document before it is written to the file system.
Promises for handling asynchronous behavior.
It might be a good idea to start building out the HTML skeleton in a real HTML file. Once you’re happy with the HTML file’s appearance in the browser, you can copy and paste its contents into a string template literal. Then you can write a function to insert the user input into the appropriate places in the HTML string before writing it to the file system.
async/await and try/catch to control the flow of our asynchronous code?const inquirer = require('inquirer');
const fs = require('fs');
const util = require('util');
const writeFileAsync = util.promisify(fs.writeFile);
const promptUser = () =>
inquirer.prompt([
{
type: 'input',
name: 'name',
message: 'What is your name?',
},
{
type: 'input',
name: 'location',
message: 'Where are you from?',
},
{
type: 'input',
name: 'hobby',
message: 'What is your favorite hobby?',
},
{
type: 'input',
name: 'food',
message: 'What is your favorite food?',
},
{
type: 'input',
name: 'github',
message: 'Enter your GitHub Username',
},
{
type: 'input',
name: 'linkedin',
message: 'Enter your LinkedIn URL.',
},
]);
const generateHTML = (answers) =>
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Hi! My name is ${answers.name}</h1>
<p class="lead">I am from ${answers.location}.</p>
<h3>Example heading <span class="badge badge-secondary">Contact Me</span></h3>
<ul class="list-group">
<li class="list-group-item">My GitHub username is ${answers.github}</li>
<li class="list-group-item">LinkedIn: ${answers.linkedin}</li>
</ul>
</div>
</div>
</body>
</html>`;
promptUser()
.then((answers) => writeFileAsync('index.html', generateHTML(answers)))
.then(() => console.log('Successfully wrote to index.html'))
.catch((err) => console.error(err));
{
"name": "mini-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"inquirer": "^6.3.1"
}
}