Module 4 - Assignment 4 - (1 week)

Let’s write a little bit of Javascript programming code to practice what we’ve learned! Woohoo! :-)

Time to complete: About 30 minutes.

Summary: In this assignment, you are going to loop over an array of names and print out either a hello or goodbye to that name to the browser console. If the name starts with a letter j or J, you are to print out Goodbye JSomeName. If the name starts with any other letter, you are to print out Hello SomeName.

However, in order to do that printing you will have to use 2 externally provided libraries whose code is not 100% ready to be used. Using the things we’ve learned in this module, your job will be to fix the code in those libraries.

You will get some starter code to work with where all the steps of what you need to do are clearly spelled out for you.

Here is what you will need to do in order to complete the assignment:

  1. (If you haven’t already) Create a GitHub.com account and a repository that you will use for this class.

  2. (If you haven’t already) Follow the Development Setup Video (beginning of Module 1) instructions on how to create a repository and set it up such that you can host and view your finished web pages on GitHub Pages, i.e., GitHub.io domain name. You will need to provide that URL for your Canvas submission.

  3. Create a folder in your repository that will serve as a container folder for your solution to this assignment. You can call it whatever you want. For example, module4-solution or mod4_solution, etc.

  4. You will need to download the starter files for this project and copy them into your solution container folder (e.g., into module4-solution). Since assignments and starter code get updated from time to time, don’t assume that you have the latest version already on your system. The best way to ensure that you are working with the very latest starter code is either git clone the fullstack-course4 repository into a new directory OR, if you’ve already done ‘git clone’ previously, you can simply open up your command prompt (cmd on Windows or Terminal on Mac), navigate to the folder where the fullstack-course4 repository was previously cloned into and do: git pull.

    This will update your local copy of the repository with whatever changes have been made since the last update.

    As a reminder, the full repository URL is: https://github.com/jhu-ep-coursera/fullstack-course4

  5. Once the local repository on your system is up to date, YOU HAVE A CHOICE! If you want a slightly more challenging assignment, use the code in the “harder” folder as your starting point. If you want a slightly less challenging assignment, use the code in the “easier” folder as your starting point. The difference between the two starting points is that in the “easier” starting point, there are a few steps that are already completed for you.

    • Harder: If you want a slightly more challenging assignment, copy all the contents of the fullstack-course4/assignments/assignment4/assignment4-solution-starter/harder folder into your newly created solutions container folder for this assignment, e.g., ‘module4-solution’.

  1. When you are continuously working on the assignment, use Browser Sync and keep Chrome open to the Console tab of the Chrome Developer Tools. You will likely see errors there to start with. Follow the steps outlined in the starter code and those errors should go away by the time you finish the last step. If you still see errors at that point or you are not seeing the output you’re supposed to see, you probably made a mistake somewhere, so look into that and investigate.

  2. In addition to the regular requirements, research how Array.prototype.map function works.

    a. Add another method called speakSimple into the SpeakGoodBye.js and SpeakHello.js that is externally exposed just like the speak method is. The speakSimple method should not use console.log, but instead should simply return the greeting concatenated to the passed in name argument.

    b. In the main script.js, use the map function to create an array based on the names array. This array will contain the greetings based on the names with the same rules as implemented previously. The function passed into the map function should not be an inline function, i.e., separate it into its own named function and pass it into the map function as a value.

    The end result should be that the list prints out twice in the browser console after you complete this part.

  3. (Bonus/Optional) In addition to the previous requirements, research how Array.prototype.reduce function works. (Psst.. Once you learn how to use it and do it a couple of times, the power of this function will blow you away. You will want to use it everywhere. Yes, it’s that cool! Don’t say I didn’t warn you! You’re welcome. 😆)

    a. You already implemented speakSimple method at this point. You will use that method in this part as well.

    b. In the main script.js, use the reduce function to create 2 separate arrays: one with all the ‘hello’ greetings and another with all the good bye greetings. Then, loop over each array (obviously separately) and print out the greetings to the console with console.log. You are required to use {hello: [], bye: []} as your initialValue. (Kind of a hint, isn’t it?)

    The end result should be that the list prints out 3 times. The 3rd time, it will print each group of greetings separately (‘hello’ and ‘good bye’).

Submission

Submit the assignment on Canvas with the following information:

1) GitHub.com link to your repository (do NOT share this link or your GitHub username with the class)

2) GitHub.io link to the deployed solution.

3) Make sure to check that your deployed assignment works as you intended it to.

Refer to the Syllabus for more info on the assignment submission process.

Due date

Assignment is due next Tuesday at 11:59pm (1-week assignment). Check Canvas for the exact date.