JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<form action="" class="form">
    <input type="text" class="timeInput" placeholder="Time" />
    <input type="text" class="youtubeLinkInput" placeholder="Youtube link" />
    <button>Set</button>
 </form>

<div class="youtubeIframeSpace"></div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font: inherit;
}

body {
    font: 15px/1.5 helvetica;
    background-color: #4679BD;
}

form {
    max-width: 300px;
margin: 47px auto;
padding: 13px;
}

input,
button {
display: inline-block;
width: 100%;
border: 0;
padding: .5em .5em .46em;
margin-bottom: .5em;
    outline: none;
}

input {
}

button {
    color: #FFF;
    cursor: pointer;
    background-color: #B6B6B6;
}

JavaScript

var $ = document.querySelector.bind(document);

function doAt( callback, timestring ) {
    var timeout;
    
    if ( timestring.length < 5 ) 
        timestring = 0 + timestring;
    
    function _alarm() {
        var d = new Date();
            h = d.getHours(),
            m = d.getMinutes();

        if ( h+':'+m == timestring ) {
            callback();
            return;
        }
        
        timeout = setTimeout(_alarm, 5000);
    }
    
    _alarm();
    
    return {
        clear: function () {
            clearTimeout(timeout);
        }
    };
}

function youtubeLinkToYoutubeIframe( link ) {
    var vid_id = link.substring(link.indexOf('watch?v=') + 8);
    return '<iframe width="560" height="315" src="//www.youtube.com/embed/' + vid_id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>';
}

(function () {
    var form = $('.form'),
        time = $('.timeInput'),
        youtube = $('.youtubeLinkInput');
    
    form.addEventListener('submit', function ( e ) {
        
        doAt(function () {
            document.body.innerHTML(youtubeLinkToYoutubeIframe(youtube.value));
        }, time.value);
        
        e.preventDefault();
        
    }, false);
})();