For the final day of the 3rd session of ng-club at the Roosevelt School in Melrose, MA we are going to do a coding challenge. The goal is to be the first person to add code to a simple JavaScript web app so that you can chat with other students.

The instructor (Jeff) will go over everything before showing you this page. Once you get here, you are on your own until someone wins the challenge. So, everything you need to know will be in this blog post.

Follow these steps:

  1. First, click here to get the StackBlitz template for this challenge
  2. Second, go to the JavaScript file in your project
  3. You will see a comment in the JavaScript file that says “Below here is where you should add your code”. In the blank spaces below that message (i.e. line 7) you will need to add code that wires up a keyup event listener on the input text box that has a class called “inputBoxText” such that the keyup event listener is set to the function called “onKeyUp”.

Once you have done this correctly, you should be able to type your name and a message into the input boxes and then hit RETURN and the message will be posted to everyone.

Here are a few hints:

  • Remember that you first need to get a reference to the input box by using the document.querySelector() function and passing in the name of the input class (i.e. inputBoxText). You can look further down in your JavaScript code for examples of how this function should look. For example: var myVariable = document.querySelector('.someClassNameHere');
  • Once you have a reference to the input (you should have set it to a variable), then use the addEventListener() function on that variable to assign the onKeyUp function for the keyup event. It should look something like this: myVariable.addEventListener('keyup', onKeyUp);
  • You should only have to enter two lines of code to make this work. The first line is using document.querySelector() and the second line is using addEventListener().

Again, if you did this correctly, you should be able to type in a message into the input box, hit return and everyone should see it. Good luck!

Categories: Coding Club

Jeff Whelpley

CTO at GetHuman, Google Developer Expert, AI and Angular Boston meetup organizer

Leave a Reply

Your email address will not be published. Required fields are marked *