For this week’s assignment the main goal was to practice “add event listener” and “get element by id” by creating a self portrait with video and audio implementation in javascript. I started the process by finding a video that would represent myself in a good way and the project evolved from there.
The first functionality that I focused on was to be able to play the video on the screen, and I added a button to play and pause with toggle functionality. After I was able to implement those interactions I decided to try to change the text that was being displayed on the button, this was for sure the most difficult part of the assignment because I had to do research in many different elements that I wasn’t used to implement.
The next step was to apply some styles using css, I didn’t want to invest too much time on that because I wanted to focus on practicing more javascript therefore the visual components are simple.
Moreover, I wanted to find a way to only show the video when the button was pressed and change the background image when the video was playing and at the same time enable the functionality to hide the video and the background image, but making sure that the video was paused while it was hidden.
The final result is a self portrait that demonstrates in a very accurate way how happy I get whenever I have ice cream in my hands.
Code documentation:
