Hide menu

Assignment 2

The second assignment in this course is divided into two parts. The first is to complete certain exercises on Codecademy. The second is to create a web page with an interactive slideshow.

You will use JavaScript to manipulate existing HTML and to enable user interaction on a web page. You will also learn how to hunt bugs in your code using the web browser.

Submit your completed assignment before the deadline. Submission instructions can be found on the main assignment page.

Learning outcomes

After this lab assignment, you should have gained knowledge about the following:

  • JavaScript syntax
  • variables in JavaScript
  • control structures in JavaScript
  • loops in JavaScript
  • how to define and call functions, both named and anonymous
  • how to use web browser tools to debug your code
  • how to manipulate HTMl and CSS using JavaScript
  • how a JavaScript is loaded on a web page and where to place the <script> tag

Part 1: Codecademy

  • Each group member should register a user at Codecademy (free).
  • In the Learn JavaScript course, complete the following sections:
    • Introduction to JavaScript, “Introduction to JavaScript” and “Variables”
    • Control Flow: “Control flow”
    • Functions and Scope: “Functions”, “Scope”
    • Arrays and Loops: “Arrays”, “Loops”
  • After completing the exercises, show your TA your result page.

Part 2: Slideshow

Important note: Since the purpose of this assignment is to understand the basics of “pure” JavaScript, do not use frameworks such as jQuery.

Prepare your HTML and CSS

Create a web page (HTML and CSS) that looks like the mockup below. You can use the images in this zip-file in your slideshow, or you can use your own.

Assignment 2, mockup 1

Slideshow - 15 points

Make the slideshow interactive! Implement the following interaction using a combination of JavaScript, HTML and CSS:

  1. Make the left and right triangles react when the user hovers above them with the mouse cursor. You could e.g. change the opacity, the color, the size etc.
  2. Change the shape of the mouse cursor into a hand - this helps the user understand that he or she can click on a triangle.
  3. Change the image shown in the middle square when the user clicks on the buttons. The slideshow should loop, i.e. when the user clicks “show next image” and the last image is being shown, the slideshow should look and show the first image.

Try to make the script easy to modify so that more/less images can easily be added or removed.

Slideshow - 20 and 25 points

Add a semi-opaque box that contains the title or a description of the currently shown image. See mockup below. Thumbnails are not required for 20 points.

Assignment 3, mockup 3

Slideshow 25 points

The 25 point challange is to add thumbnails of all the images in the slideshow below the main slideshow image. A highlight (e.g. a white frame or a change in opacity etc) should be added to the image that is currently shown. See the mockup below.

Assignment 2, mockup 2

Clicking on one of the thumbnails should select and display the image represented by the thumbnail.

Extra extra (optional - for fun) challange

Only show the text-box previously created when the user mouses over the main slideshow image.

Updated by: Jody Foo
Last updated: 2017-10-29