http://imanas.shanghai.nyu.edu/~zc1151/commLab/week3/index.html
Here is the link to the page I made with the two pictures of the cat. I found an additional picture of cat on Google and set it as the default picture. At the top, I set three buttons, with respective functions of: turning left, turning right, and changing captions. At the bottom is a text box where the captions will be shown.
To implement the function of turning left or right, I firstly assigned an id to the image tag. In the javascript document, I call the document.getDocumentById function and change its binding url to be the image of cat facing left or right. I also change the caption that is bind with the image, so that when you click on the “Boobie left” or “Boobie right” button, not only does the image change to the cat facing left or right, but the caption below change to different ones.
For the third button, changing caption, I find it interesting if I can randomly change the captions by clicking the button for several times. In the JavaScript document, I created a list with several phrases, and using a scaled Math.random() function to decide which one of the phrase to present on the screen. I learned about the Math.random function and the Math.floor function from google. When clicking on the changing caption button, the random function will bump a random choice from the number range and check the list of phrases for the one with corresponding index, and assign it to be the content of HTML through the document.getDocumentById.innerHTML function.
Lastly, I added some CSS to format the web page and styled the buttons and text box.
During the process, I ran into problems with setting font-weights and aligning items. With Professor Ann’s help, I was able to figure out that the alignment of the item might be influenced by the length of the containing text. If the text is too long and the size of the item is not big enough, the specific item might appear unaligned with others. For the Font-size problem, Professor Ann suggested that it might be the problem of using an unidentified font-family, and directed me to the site of Google Font-family.