Monday Motivation is for the people who got this, but don't know they got this yet. At the click of a button, Monday Motivation will pull together a motivational YouTube video at random to help the user get through those days that they're not feeling it.
Tech used: HTML, CSS, JavaScript, Node.js
Using Node.js, we built a server that houses a list of URLs to motivational YouTube videos. On the click of the button, we pull a URL at random and input it into our iframe to display the motivational video selected to the user.
At first, we were thinking of hosting an array of iframes on the server, and then on the click of the button we would drop the iframe into the HTML. We decided that it was not necessary to replace the whole iframe and instead we kept a templated iframe in the HTML and added a new src attribute every time someone clicks the button. This way, we only need to keep an array of URLs instead of an array of iframes, and we would only need to update the src attribute, instead of the whole iframe.
Realizing that the embed URL to a YouTube video is different than the watch URL was the equivalent of someone hiding in a desert. It was hiding in plain sight, but when we realized it, it became one of those "ohhhhh that makes sense" moments.
Take a look at these examples that we have in our portfolios:
Coders And (from Nick Rooney): (https://github.com/nrooney024/coders-and/)
Richmond Custom Woodwork (from Brian Harsha): (https://github.com/harshabc4/RichmondCustomWoodwork)