JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div id="video-show"></div>

CSS

div{
    display: block;
    height: 50px;
    width: 50px;
    background: #ccc;
    transition: .3s;
}
.mark-1{
    background: red;
}
.mark-2{
    background: purple;
}
.mark-3{
    background: blue;
}
.mark-4{
    background: green;
}
.mark-5{
    background: yellow;
}
.mark-end{
    background: orange;
}

JavaScript

var homeElement = $("#video-show");
var homeStages = [
    {mark: 2, class: "mark-1"},
    {mark: 4, class: "mark-2"},
    {mark: 6, class: "mark-3"},
    {mark: 8, class: "mark-4"},
    {mark: 10, class: "mark-5"},
    {mark: 12, class: "mark-end"},
];
timeCycle(homeElement,homeStages);

function timeCycle(element, stages){
    var currentStage = 0,
        nextStage = stages[0],
        amountStages = stages.length;
        seconds = 0,
        videoLength = 14,
        secTimer = setInterval(function(){
            seconds++;
        }, 1000),
        videoChecker = setInterval(function(){
            if(nextStage.mark <= seconds){
                currentStage++;
                element.addClass(nextStage.class);
                nextStage = stages[currentStage];
                console.log("nextStage "+currentStage);
            }
            if(currentStage >= amountStages){
                clearInterval(videoChecker);
                clearInterval(seconds);
                return true;
            }
            console.log("still working")
        }, 300);
}