JSFiddle - React, Tailwind, and code Playground

by Diya_Khan

HTML

<div class="timelineFrame">
    <div id="dvTimeLine" class="dvTimeLine">  
                   
    </div>    
</div>

   
<input type="button" value="Click Me" onclick="generateHtml();" />

CSS

.timelineFrame
{
    width:460px;      
    border: 2px solid #878787;    
    background-color: #DDDDDD;
    /*overflow:hidden;*/
}

.dvTimeLine {
    /*width:450px;*/
    height: 305px;         
    display:inline-block;
    white-space:nowrap;
    border-radius: 5px;
}
.upperdiv
{
    height:250px;
    width:50px;
}
.maindiv
{
    height:25px;
}
.bar
{
    width:55px;
    height:300px;
    float:left;
    
}
.slots
{
    width:50px;
    height:25px;
    float:left;
    border:#000 1px solid;
    display:inline-block;
}
.event
{
 width:50px;
 height:250px;    
    float:left;
}

JavaScript

function generateHtml()
{
    var obj = document.getElementById('dvTimeLine');    
    var str;
    var html = "<div class='bar'><div id='upperdiv'><span class='event'>Event</span></div>";
    var innerhtml = '';
     obj.innerHTML = new Date();
    var d;
    for(var i=1900;i <= 2099 ; i++)
    {
        for(var j=0;j<=12;j++)
        {
            for(var k=0;k<=24;k++)
            {    
                str = "<div class='slots'>" + i + "</div></div>";
                innerhtml += html + str;
                d = new Date();
            }
        }
    }
    obj.innerHTML += '<br />' +  d;      
    obj.innerHTML += innerhtml;
}