Live (turn on volume): https://emilylin-itp.github.io/live-web/wk1/self_1_code/index.html

Code: https://github.com/emilylin-itp/live-web/tree/gh-pages/wk1/self_1_code

—

Assignment: “Using HTML5’s video or audio tags along with JavaScript, create an interactive self portrait.”

This self portrait is meant to reflect an old school tv, with the letters of my names acting as buttons for different channels. The eyes (equipped with plus and minus signs) are the volume control for this “tv set.”  The nose acts as the power button, as it brings you to the “home” page which is just tv static. When you click on that letter, the colors of all the other letters and shape will change to that page’s color.

These videos are all shows/clips I love and could spend hours watching.

—

Helpful Resources:

• https://www.html5rocks.com/en/tutorials/masking/adobe/
• https://en.wikipedia.org/wiki/DOM_events
• https://www.w3schools.com/jsref/obj_window.asp
• https://keepvid.pro/
• https://css-tricks.com/change-color-of-svg-on-hover/
• https://stackoverflow.com/questions/27140952/how-to-change-video-source-onclick
• https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_src
• https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_volume
• https://www.w3schools.com/jsref/met_win_clearinterval.asp
• https://stackoverflow.com/questions/7942452/javascript-slowly-decrease-volume-of-audio-element

Helpful Command Lines:

npm -g install forever
forever start httpserver.js
forever list