javascript week 4 assignment

Instantly share code, notes, and snippets.

evalynechristie / index.html

• Download ZIP
• Star ( 0 ) 0 You must be signed in to star a gist
• Fork ( 0 ) 0 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs
• Save evalynechristie/a2680cf1a4554b39bdc10291f37288a1 to your computer and use it in GitHub Desktop.

Interactivity with JavaScript - Week 4 - Homework

A Pen by evalynechristie on CodePen .

Week 4 - Hello JavaScript

Javascript core i - 1.

Mentor Notes

What we will learn today?

Install Node

Hello world, string concatenation, function parameters, nested functions.

Please make sure you've forked the js-exercises repo at the start of the class. This is the repo we will use during the class, and for homework.

Windows and Mac users

Download the installer (.msi or .pkg) from https://nodejs.org/en/download

Linux (Ubuntu) users

Run the following commands in your terminal:

Source: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions

A note on security: This will require you to enter a password. Don't execute a script on your terminal if you don't trust its source, especially if they use the sudo command to get admin access to your machine.

2. Test installation

Go to your terminal and run the command: node -v .

You should get the node version printed on your terminal. For example, v8.9.3 .

There are some tools that will help you to write code. One of these, Prettier , formats your code, making it easier for you and others to read.

1. Install prettier

• In Visual Studio open the extensions panel (see https://code.visualstudio.com/docs/editor/extension-gallery#_browse-and-install-extensions )
• Search for Prettier - Code formatter
• Click install on the top result

2. Enable formatting on save

• In Visual Studio open the settings file (see https://code.visualstudio.com/docs/getstarted/settings#_creating-user-and-workspace-settings )
• Search for editor format
• Set editor.formatOnSave and editor.formatOnPaste to true

It is programming tradition that the first thing you do in any language is make it output 'Hello world!'.

We'll do this in JavaScript, using a command called console.log() .

Inside of exercise.js there's a line of code that will print "Hello world!".

1. Run the program

• Open a terminal window
• Change directory to this folder ( cd week-1/C-hello-world )
• Run the program using node ( node exercise.js )

2. Experiment

• Try to console.log() something different. For example, 'Hello World. I just started learning JavaScript!'.
• Try to console.log() several things at once.
• What happens when you get rid of the quote marks?
• What happens when you console.log() just a number without quotes?

When you write code, you'll want to create shortcuts to data values so you can don't have to write out the same value every time.

We can use variable to create a reference to a value.

The program above will print "Hello world" to the console. Notice how it uses the value assigned to the variable greeting .

• Add a variable greeting to exercise.js (make sure it comes before the console.log)
• Print your greeting to the console 3 times

Remember: to run this exercise you must change directory to the D-variables . If you already have a terminal window open for the previous exercise you can do this by running the command cd ../D-variables .

Expected result

In programming there are different types of data. You've used one data type already: string .

Computers recognise strings as a sequence of characters but to humans, strings are simply lines of text.

Notice that strings are always wrapped inside of quote marks . We do this so that the computer knows when the string starts and ends.

You can check that the data is a string by using the typeof operator:

• Write a program that logs a message and its type

You can add two strings together using the plus operator ( + ):

• Write a program that logs a message with a greeting and your name

The next data type we will learn is number .

Unlike strings, numbers do not need to be wrapped in quotes.

You can use mathematical operators to caclulate numbers:

• Create two variables numberOfStudents and numberOfMentors
• Log a message that displays the total number of students and mentors

Numbers can be integers (whole numbers) or floats (numbers with a decimal).

Floats can be rounded to the nearest whole number using the Math.round function:

• Using the variables provided in the exercise calculate the percentage of mentors and students in the group

Functions are blocks of code that can do a task as many times as you ask it to. They take an input and return an output.

Here's a function that doubles a number:

To use the function we need to: a) call it with an input and b) assign the returned value to a variable

• Complete the function in exercise.js so that it halves the input
• Try calling the function more than once with some different numbers

Remember to use the return keyword to get a value out of the function

• Complete the function in exercise2.js so that it triples the input

The input given to a function is called a parameter .

A function can take more than one parameter:

When you write a function (sometimes called declaring a function ) you assign names to the parameters inside of the parentheses ( () ). Parameters can be called anything.

This function is exactly the same as the on above:

• Write a function that multiplies two numbers together
• From scratch, write a function that divides two numbers
• Write a function that takes a name (a string) and returns a greeting
• Write a function that adds two numbers together
• Call the function, passing 13 and 124 as parameters, and assigning the returned value to a variable sum
• Write a function that takes a name (a string) and an age (a number) and returns a greeting (a string)

Functions are very powerful.

• You can write more than one line of code inside of functions.
• You can use variables inside of functions.
• You can call other functions inside of functions!
• In exercise.js write a program that displays the percentage of students and mentors in the group
• The percentage should be rounded to the nearest whole number (use a search engine to find out how to this with JavaScript)
• You should have one function that calculates the percentage, and one function that creates a message

Consider: should your percentage function do the rounding, or should it be done when the greeting is created?

• In exercise2.js you have been provided with the names of some mentors. Write a program that logs a shouty greeting to each one.
• Your program should include a function that spells their name in uppercase, and a function that creates a shouty greeting.
• Log each greeting to the console.
• The repo that you have forked during this class contains few challenges - solve all the pending exercises in week-1 and week-1-practise in JavaScript!

results matching " "

No results matching " ".

Week 4 Section: JavaScript Animations and the DOM

Today's agenda, quickcheck: breaking down a ui spec.

How to add to the DOM

Section Exercises

Note: HW2 is out! Start this assignment early

Section Goals

By the end of this section, you should be able to:

• Know how to create a DOM element and add it to a parent node
• Know how to add/remove classes with classList.add and classList.remove (more on this tomorrow!)
• Identify when and how to use different timer functions
• Have a strategy for tackling a full UI specification with different events and response types (hint: start breaking down the event flow on paper first!)
• Have a better understanding of when to use module-global variables and constants in your JS and how to decompose your program cleanly into functions.

Today, we will take what we've learned about JavaScript, events, the DOM, and animations to implement a game for a user to guess the correct number of Skittles in a jar having a certain color.

On a blank piece of paper, answer the following questions:

• What elements in this demo should be listening to different events?
• For each of those elements, what events are they listening to?
• For each of those events, what behavior do you see happen as a result?

Back to the DOM Tree

The elements of a page are nested into a tree-like structure of objects

Creating New Nodes

Note: Merely creating an element does not add it to the page

You must add the new element as a child of an existing element on the page...

Adding/Removing Nodes to the DOM

When you have a parent DOM node, you can add or remove a child DOM node using the following functions.

Every DOM element object has these methods:

Exercise 1: (Back to) Skittles!

Given this starter skittles.html (and skittles.css ), we will implement a "game" to fill a jar with Skittles and let a user see how quickly they can guess the correct number of Skittles in the with a certain color.

The Skittle Rainbow (Provided in CSS)

• There are 9 possible Skittle colors, each corresponding to a class in the provied CSS: "red", "green", "blue", "purple", "gray", "mediumaquamarine", "pikachuyellow", "blanchedalmond", and "tomato". The class for each of these colors will change the font color of the #color span (in the h1) and the background color of a .skittle element.
• For each game, the value of the selected radio button determines how many colors are considered, and one of these colors should be used as the color to guess.

Filling the Skittles Jar

When a user clicks the "Start" button:

• The jar should be filled with a random number of Skittles (new div elements having a class of "skittle") between 1 and 154. Each Skittle should be given a random color class using the colors considered in the current game.
• The #color span (in the h1) should have as text (and a class) one of colors used in the game - that random color will be the Skittle color to guess a count for in the jar.
• The #game-ui should be displayed and the #game-setup should be hidden, along with the #new-game button.

Guessing the Skittle Count

A user can input numbers in the input box to guess how many Skittles of the current color are in the jar.

If they guess incorrectly, a 2-second message appears in the #results paragraph saying whether they guessed too high or too low, then is cleared. Their current guess count should be incremented by 1. If the user gives a negative number, this temporary message should be "You must enter a non-negative guess!"

When the user guesses correctly, the game is ended (see next slide for details).

Ending a Game

When the game is ended:

• A message in #results should appear in the format "You guessed correct in SECONDS seconds!", where SECONDS is the number of seconds that passed since the game was started.
• The guess input box should be empty and the "Guess" button should be disabled.
• The text of the #color span should be empty.
• The New Game button should be displayed so the user can see the same view they saw when first visiting the page.

Exercise 1: Solution

Solution: JS

Exercise 2: Dice Roller!

Given this starter dice-roller.html (and dice.css ), we will implement an animated dice-rolling feature to roll a specified number of dice having a selected number of sides.

Running Example

Generating Die

The #dice-area is the container to hold dice - each die should be a div with a "die" class added (this class is implemented for you in the provided CSS).

When the "Roll!" button is clicked, first the input box should be checked for valid input:

• If it is empty or the user gave a negative number, the page should instead alert a message to the user to indicate invalid input.
• Otherwise, the selected value in the text box will be used to determine how many dice to create and add to the #dice-area.

Rolling the Dice

As soon as the dice are added, they should start "rolling" by displaying a random number (based on the number of sides) every 200 ms. Whenever dice are rolling, the dropdown, input box, and "Roll!" elements should be disabled.

Note: You can set the (boolean) disabled attribute for UI elements using the following syntax (assume a button with ID "my-btn" is defined):

Stopping the Rolls

When "Stop Roll!" is clicked, the values of all dice in the container should be added and displayed in the results paragraph and the button should be disabled. The previously-disabled elements should be re-enabled so a user can start a new dice roll (possibly with new number of dice and different die types).

Exercise 2: Solution

Programming in JavaScript – Week 4 Assignment

Using Chrome’s Developer Tools to Debug

This week we’ll work with a JavaScript outside HTML. Starting with the downloadable assignment files, write the JavaScript needed for the application. Using the chapter and lectures as a guide, you’ll use Chrome’s developer tools to find a syntax error and a logic error, set a breakpoint, and step through the Email List application. If you do not have Chrome, you can download it here .

1.     Open the HTML and JavaScript files for the Email List application in the Week 4 zip file.

2.     Run the application in Chrome, enter valid values in all three text boxes, and click on the Join our List button. Then, note that nothing happens.

3.     Open the developer tools and use the Console panel to display the error that caused the problem, as shown in figure 5-5. Then, click the link for the error to find the statement that caused the error.

4.     Switch to your text editor or IDE and fix the code. The correction should be fairly obvious. Then, test the application again with valid values in all three text boxes. This time, an alert dialog box should be displayed with no message.

5.     Click the OK button in the dialog box, and notice that there are no error messages in the Console panel. That’s because a logic error has occurred.

6.     Still in the developer tools, switch to the Sources panel. Then, if necessary, click on the email_list.js file in the Sources pane on the left to display the JavaScript code in the email_list.js file.

7.     Set a breakpoint on the first statement in the joinList ( ) function, as shown in figure 5-5. Then, with valid values still in the three text boxes, click the Join our List button again. The application should stop at the breakpoint.

8.     Use the Step Into button or F11 key to step through the application. At each step, notice the values that are displayed in the local variables pane. Also, hover the mouse over a variable in the JavaScript code to see what its value is.

9.     Experiment with the Step Over and Step Out buttons as you step through the application. When you get to the second if-else statement in the function, watch carefully to see what statements are executed. That should help you determine the cause of the logic error.

10.   Switch to your text editor or IDE and fix the code. Then, test the application with valid data one more time. When the breakpoint is reached, remove it and then continue execution. This time, the application should execute to completion.

11.   Take screenshots of each testing step (minimum of 3), insert into a Word document and save. Be sure your computer date and time are included in the screenshot. Submissions without a timestamp will not be accepted for this exercise. Add comments for each screenshot to discuss each correction. This document needs to be submitted separately from the zip file. Paste corrected JS in document.

12.   Submit application files as a zipped folder so your instructor can run and test the application.

View your assignment rubric .

Copyright 2021 // Grantham University