Title: Generate the HTML file

[kitchen-boy]

Description

• Build HTML template
• Generate HTML file

[kitchen-boy]

Create a new Git branch:

• Branch off the develop branch to create a new feature branch for this GitHub issue.

  Create an HTML template:

• Create a function that accepts the command line arguments as input & create HTML code with it.

  Generate the HTML File:

• Use a built-in Node.js library that allows us to create a file on the computer.

  Modularize the code:

• We'll take some of the code and put it into another file so that we can keep the application nice & organized.

  Save progress with Git:

• Make sure to close this GitHub issue.

[kitchen-boy]

9.2.4 Create an HTML Template:

Template Literals - With ES6, we can use a feature called template literals to embed JavaScript expressions into the string. Template literals are enclosed by backticks (`) instead of double or single quotes.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

const generatePage = (userName, githubName) => Name: ${userName}, Github: ${githubName};

• With template literals, we can wrap the string in backticks(`) and interpolate the variables with the ${} syntax.

Multi-line Strings - Template literals allow us to do easily something that would be difficult with regular strings: multi-line text.

• To do this, simply enter a keyboard return in the template literal wherever you want a line break to occur, just as you would do if you were entering a line break in a word processor. const generatePage = (userName, githubName) => { return Name: ${userName} GitHub: ${githubName} ; };

Destructuring Assignment:

• Now that we've created a function that can receive input and display the data dynamically, the next step is to collect command-line arguments as we did before and feed them into the generatePage() function to create a string with the user input.

const profileDataArgs = process.argv.slice(2, process.argv.length);

• Now we have our profileDataArgs array again, which holds the user command-line arguments.
• We'll want to extract those arguments and store them into distinct variables. One way to do this is to use the array index with the following expressions.

const name = profileDataArgs[0]; const github = profileDataArgs[1];*/

• Alternatively, we can use an ES6 feature called assignment destructuring. In basic terms, it assigns elements of an array to variable names in a single expression, as shown here:

const [name, github] = profileDataArgs;

Summary

Completed a function that receives the command-line arguments and inserts them in a HTML template literal.

Next, output this string into a file that can be opened in the browser.

[kitchen-boy]

9.2.5 Generate the HTML File

• create an HTML file using that HTML template literal.
• The file system is considered a module in Node.js's core library.
• A module can be a function, a class, an object, or simple variables. Whatever its form, a module is a reusable piece of code that can be imported to anywhere it's needed.
• In order to use the fs module, we need the following statement at the top of the JavaScript file. Add this statement to the top of the app.js file:

const fs = require('fs');

*The require statement is a built-in function that's globally available in Node.js. It allows the app.js file to access the fs module's functions through the fs assignment.

fs.writeFile()

• this function can create multiple file types, including TXT, PDF, HTML, JSON, etc.
• The fs.writeFile() function definition has three arguments. The first argument is the name of the file that's being created. The next argument is the data that will write onto the file, in this case the HTML template literal. The last parameter is a callback function that will be used for error handling.

fs.writeFile('index.html', generatePage(name, github), err => { if (err) throw err;

console.log('Portfolio complete! Check out index.html to see the output!'); });

[kitchen-boy]

9.2.6 Modularize the Code:

• refactor code for app.js.
• clean up this file using Node.js's modular system.
• • To do so, we'll remove the generatePage() function from the app.js file.
• Create a new folder called src and place it in the root directory of the project. Inside this folder, create a file called page-template.js.
• First, cut (not copy) the entire generatePage() function from app.js and paste it into page-template.js. Next, at the bottom of page-template.js, add the following expression:

module.exports = generatePage;

• In order to use functions from one module inside another, we use the related statements and . In the source file that has the functions we want to make available to other files, we use at its bottom. In the destination file(s) that we want to receive those exported functions, we put at the top.

• So, because we added the statement at the end of the file (with set to our <generatePage()> function), we can now use the statement to include <generatePage()> at the top of the file.

• Go to the file to add the following statement just below the <const fs = require('fs');> statement:

const generatePage = require('./src/page-template.js');

• With this statement, the object in the assignment will be reassigned to the variable in the file. Note here that the variable name is arbitrary; however, the relative path to include the file must be exact.

Summary:

• Created new portfolio webpage successfully.
• Modularized app by moving the HTML generator into its own file.
• app.js file is cleaner & easier to understand.