Lab on JS Arrays, Functions and other Good Stuff!
Index Cards Game, and more
lab11 folder. It contains the
lab11JS.js documents, as well as the folder
- Define and call several JS functions
- Start working with JS arrays
- Read from input elements
- Modify the html page itself using js
This is the w3schools page on arrays.
Exercise 1: The Index Cards game
indexCardsGame folder. You will see it contains an
images sub-folder, and three documents:
indexCards.html: Open it, examine it and view it. You will add a bit of code here.
indexCards.css: No need to change it.
Add some html code in the
indexCards.html file, so that the page shows five "question mark" images.
indexCards.js file add the definition of the function which is called from within the
This function should reveal the image after it was clicked, and also show the corresponding comment on the page.
Once this part is working, you can try to hide all the open images the moment a new image is clicked. This way only one image will be revealed at any time.
Exercise 2: v2 of Which Day was I born?
In this exercise you will write a new version of this task from your recent homework, that uses arrays. You will get to appreciate how shorter the code can become!
The helper dayNameEnglishAndFrench() function
Define a function named
dayNameEnglishAndFrench() which takes an integer n (from 0 to 6) as input, and returns
a string that contains the name of the corresponding week day in both english and french.
In the body of this function you need to set up two arrays:
- one to contain the names of the days in english, like "Sunday", "Monday", etc, and
- one to contain the names in french, like "Dimanche", Lundi", etc
The main function
Define a function that will be called when the user clicks on the
Tell me button.
In this function, that has been started for you in
lab11JS.js, you will gather the
information from the user, use it to create the right Date object, extract the day the user
was born, and then use the helper function to get the name of the week day. Finally,
present a nice message on the console and the html page itself.