Full page demo: https://codepen.io/sparlos/full/OKRVKe

Source code: https://codepen.io/sparlos/pen/OKRVKe?editors=1010

Here is the project that I would have created had I taken the Vue JS Crash Course! It uses only Vue features that we learned here in the course. It does use some more advanced CSS and JavaScript, as well as external resources like the YouTube iframe API and the ionicons icon pack!

The project itself is a recreation of a TV and it's various states, but I took it one step further (as I am known to do!). The app actually loads in a 24/7 music livestream using the YouTube iframe api. When the user triggers a channel switch, a few things happen. A Vue method first changes the "channel" property in it's data object which is then used to load in a different YouTube livestream based on an array of YouTube video IDs, also held in the data object. The way the volume is changed works in a similar fashion.

I hope you think it's cool, I may actually flesh this out into a real app because it's something that I myself might actually use. Hope you think it's cool!

Stephen Sparling

Creatively exploring web technology.

97

--