Submit your completed assignment by 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

Assignment points

• 1 point: Complete Part 1, Exercise 1 and Part 2 Exercise 1.
• 2 points: Additionally, complete at least two optional tasks in Part 2.

Part 1: Codecademy

• Each group member should register a user at Codecademy (free).
• In the Learn JavaScript, complete the mandatory lessons (focus on the lessons, not the quiz, article, projects, etc.):

Topic	Lessons	Mandatory
Introduction	Introduction to JavaScript and Variables	No
Conditionals	Conditional Statements	No
Functions	Functions	No
Scope	Scope	Yes
Arrays	Arrays	No
Loops	Loops	Yes
Iterators	Higher-Order Functions & Iterators	Yes
Objects	Objects & Advanced objects	Yes

• Attach screenshots showing that you have completed the required lessons in your group when you submit this assignment in gitlab. Create an html-file in /public/assignment2/codecademy.html where you insert the screenshots.

Update: Note that we encourage every group member to complete the Codecademy exercises, but submitting only one screenshot as proof of completion is enough.

Part 2: Slideshow

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. See e.g. CSS Triangle for tips on how to create triangles using just CSS and HTML. See e.g. UTF8 geometric shapes for tips on how to create triangles using utf8 characters.

• Create a folder for the assignment and a sub-folders for each exercise/task.
• Use Erik Meyer’s CSS reset.

Exercise 1

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.

Restrictions

• Write your JavaScript in a separate file. I.e. not inside you HTML file.
• You are not allowed to any of the HTML event attributes (e.g. onclick). Using these attributes is fine for small scripts, but the point of this assignment is for you to learn things that will help you ahead.
• Instead, add your event handlers in your JavaScript code.

Optional task 1

Add a semi-opaque box that contains the title or a description of the currently shown image. See mockup below.

Optional task 2

• Add thumbnails of all the images in the slideshow below the main slideshow image.
• Add a highlight (e.g. a white frame or a change in opacity etc) to the thumbnail of the image that is currently shown

See the mockup below (if your did not do Optional task 1, there is no need to show the description box).

Optional task 3

• Add functionality so that clicking on one of the thumbnails should select and display the image represented by the thumbnail.

See the mockup below (if your did not do Optional task 1, there is no need to show the description box).