Assignment 0: Tell Us About Yourself

Assignment by Michael

Due Tue Apr 11 11:59pm PT

Submissions not accepted after Tue Apr 11 11:59pm PT (no grace period).

In this assignment, you will first set up your development environment for the course, then answer a few questions so we can get to know you a bit. This assignment isn't intended to take very long, but we recommend getting started early so that you can get help if you encounter any issues with setting up your environment.

Step 1: Setup your development environment

First, follow these instructions to set up your development environment and verify that it is working correctly.

Step 2: Download and run the starter code

This step will be the same for all assignments.

Download the starter code and extract the .zip file's contents.
Open your command line and navigate to the extracted assign0 directory (i.e. the directory containing a package.json file).
Run npm install to install the packages required to run the web server.
Run npm start to start the web server. You should see a message saying that the server has started.

Your web server is now running. Point your browser to localhost:1930. You should see the assignment page. This confirms that your environment is all set up! (You might briefly see an error message on the page.while it loads the JavaScript. The error should disappear quickly; if it persists, follow the instructions on screen to try to identify the issue.)

Directory structure of the starter files: Here's a quick overview of the files and folders in the assign0 directory. This will largely be the same for other assignments.

lib: Contains code that we provide. You will not have to modify any files in this folder.
package.json: Defines information about the project, such as its dependencies. You won't have to manually edit this file. For your final project, you may add dependencies using npm, and these will be added to package.json automatically.
public: Contains the files served to your browser by the web server. For the first part of the course, all of the files you will edit will be in this folder. This assignment contains two files, index.html (which you won't have to edit) and survey.js (where you will fill in your answers).
server.js: The code to run the web server. You won't have to edit this until we start working on server-side JavaScript, later in the course.
node_modules and package-lock.json: These don't exist at first, but are created when you first run npm install. They contain the dependencies themselves and information about what was installed. You neither will need to nor should you edit them. It is safe to delete them and rerun npm install (useful if copying/zipping the folder, as node_modules can be quite large).

Step 3: Fill out the survey

The page that loads is quite bare. Rather than interact with the page itself, we will focus on using the JavaScript console.

To open the console, either press F12 to open the DevTools panel and choose Console, or press Ctrl+Shift+J (on Windows and Linux) or Command+Option+J (on Mac) to open the console directly.

You should see a message in the console that the page has loaded, followed by a warning that an answer is missing. (You may also see a message that the browser couldn't load favicon.ico. It is safe to ignore that message.)

To fill in your answers, use your text editor to open the survey.js file in the public folder. The file is structured as a series of variable assignments, with each variable currently having the value TODO. Fill in your answers by replacing the TODOs, using the comments above each variable as a guide to what we're asking.

When you save survey.js, the browser should automatically refresh. The console message should change, pointing out any answers that are still missing. (It can be hard to tell that the page has refreshed; if you're not sure, you can enable "Persist log" by clicking on the gear icon in the top right of the console to prevent the console from clearing on refresh.)

Once you have filled in all your answers, the console message should change. It will show you your answers in the form of a JavaScript object. You can expand the object by clicking on it.

There will also be an instruction to call saveAnswers(). This is a final check to make sure everything is working as expected. Type saveAnswers() in the console, press Enter, and you should see a message that, "You're all set!" You should also see that a file called answers.json has been created in your assign0 folder, containing the answers object.

What's happening here? There are a few moving parts in play here. We wanted to test a few different parts of the environment setup to try to reduce the issues that might come up later. You don't need to understand the inner workings here, but if you are interested, here's an overview:

The logic for the page is contained in lib/client/assignment.js. This script will import your survey.js. It doesn't use the import syntax we will show in lecture because we don't want syntax errors in survey.js to stop the script from running.
The script goes through the variables in survey.js and collects them all into an object. It stores that object in a variable so saveAnswers can read them.
saveAnswers makes an HTTP request to the Node.js server, sending the object of responses. The code for the server, in lib/server/assignment.js, takes that object and writes it to answers.json.
- Note that the web browser and client code can't directly write to a file on your hard drive. That is why we use a "round trip" of asking the server to do this write. (We also want to test that the server is able to respond to the request and write the file.)

Submitting

Once you have filled in the survey and the code has created answers.json, follow these steps to submit to Paperless. These steps will generally be the same for all assignments.

Stop your web server by pressing Control+C in your terminal.
Delete the node_modules folder. If you submit it, your submission may take a very long time or fail. (If you want to run your server again after this, you can run npm install again to get it back.)
Navigate to Paperless and submit your assign0 folder for Assignment 0: Tell Us About Yourself.
Paperless will check that your submission includes your answers.json as well as your public/survey.js.

You're done!

Getting Help

If you encounter any issues while setting up your environment or working on the assignment, please post on Ed or stop by office hours.