CS 351 Spring 2020 Homework 5

Node, NPM, Templates (Nunjucks)

Dr. Greg M. Bernstein

Due Friday, February 28th, 2020 by 11:59PM, 50 points.

General Instructions

In this homework

Create and Use a new Branch hw5

We will create a new git branch called hw5 (starting from your ‘hw3’ branch) for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 4. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw5. Review the section on submission for using push with a new branch.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.


Question 1. (10 pts) {.Question} Node, NPM, JSON

Node.js, package.json, installing nunjucks, directory layout. Directory structure is important.

(a) Install node.js. Report the version number here.

(b) Create package.json

Within your clubProject directory create a package.json file by one of the methods recommended in in the course slides. Be sure to commit this file to Git. Write the approach that you used to create the package.json file here.

(c) JSON

What does the acronym JSON stand for?

(d) JSON Syntax

Which of the following are valid JSON?

  1. {name: "Dr. B", course: "Web stuff"}
  2. {"name": "Dr. B", "course": "Web stuff"}
  3. {name: "Dr. B", course: "Web stuff", fun: true}
  4. {name: "Dr. B", course: "Web stuff", fun: "true"}
  5. [1, 2, 3, "A", "B", "C"]

(e) JSON Usage

Where might you want to use JSON besides the package.json configuration file? Give an example.

(d) Directory Structure

Within the clubProject directory create the following directories and move your previous content to them as instructed (or just make up new content):

  • content directory: You will move your raw HTML files here.

  • output directory: You will move web site assets such as CSS files and images to this directory. These may be put in subdirectories within the output directory. Our template code will also place generated files here.

  • views directory: We will put our newly designed templates here.

My project directory structure looks like this:

Commit your changes.

(e) Adjust .gitignore

Add/modify the following lines in your .gitignore file:

# Ignore generated html from the template engine

# dependencies, change to ignore all node_modules dirs

(f) Install nunjucks.

In the clubProject directory use the command npm install --save nunjucks. This can take a while. Do not commit until you have adjusted the .gitignore file in the previous step. You should never commit the node_modules directory to git. Write down the version number of nunjucks that you installed here.

Question 2. (10 pts) {.Question} First Template, Update File

(a) Example Template and Run

Create a simple starting views/base.njk template like that shown in the course slides, e.g.,

Show your base.njk template here.

(b) Strip boilerplate from index HTML file

Remove all the tags and such from your index.html HTML file that are already in the base.njk file, e.g., <html>, <head>, <main>. We are just working with the one HTML file here and will do the rest in the next problem after we get things working.

(c) Create a program to run the template engine

Create a runIt.js file in your clubProject directory to read in one of the content files and render it with the template engine. My code looks like:

(d) Example Page and Directory Structure

Get the index.html file to “render” correctly in the output directory and take a screen shot of it. Commit all the files except node_modules and others to be ignored. I get something like:

Example page
Example page

Question 3. (20 pts)

Extend program to process all your content files (remember to remove the HTML boilerplate from those files), use `include mechanism for navigation menu and add meta-data (title).

(a) Create a List of Content and corresponding meta data.

My list of files in the content directory along with their corresponding meta data looks like: (put your list here)

I put this in a file renderList.json for processing.

(b) Create a file with just the basic navigation information.

For my site I created the following and put it in the views\nav.html file.

(c) Update your template

Your template should now include the navigation menu and use the title meta data. see the course slides.

(d) Remove HTML boilerplate

For all the other files in your club’s content directory remove all the HTML “boilerplate”. This should be almost everything including and outside of <main>. However you still need any JavaScript on your pages to work so move any <script> tags as appropriate so that they are still in the “content” file.

(e) Update your runIt.js to process all files and create your site.

Make sure your site works locally at this point. There should be no broken links. You must have your own content on each page, at least an <h2>! Take a screen shot of your output directory. I get something like:

Question 4. (10 pts) {.Question} Drop Down Navigation

(a) “Lock” the menu position

Use CSS to make your site menu always visible no matter where the user scrolls. Show your CSS modification here and show me a screenshot. I get something like:

Locked Menu
Locked Menu

(b) Hide Menu and Clickable

Use CSS to hide the menu, add something (whatever you like but you can keep it simple) to be clickable and that will open the menu when clicked. Take a screenshot. I did something like:

Minimized menu
Minimized menu

(c) JavaScript and CSS

Use JavaScript and CSS to respond to clicks by opening the menu, i.e., making the hidden menu visible. Do no worry about making this perfect or pretty. You will want to add this JavaScript to all your pages (Hint: add to existing template after getting it to work).

(d) Deployment

Deploy your generated website to a server and give the URL here.