title: Custom Countdown jQuery with data attributes
body: <p>I have been trying to create a smallest jquery for displaying Countdown.
  I tried using other snippets like <a href="http://keith-wood.name/countdown.html" rel="nofollow">keith-wood script</a> But problem is that it has a huge jquery. I want to create a variables in the jquery which call be pulled through data attributes and displays then elements. What am looking is to create a less weight jquery without using thirdparty scripts.</p>
  
  <p><strong>Tricky Part</strong></p>
  
  <p>I need a bit tricky system that If I remove <code>weeks</code> block then I want the next block with days should automatically convert those weeks into days and add in the days block. So, the 2 days will show 366 which is (52 Weeks = 364 Days) + 2 Days. Check in the Demo for the days out put to understand.</p>
  
  <p>I have added the data attributes in HTML where I want to fetch the variables from the jquery and generate the output in the HTML blocks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.at-cd-timer{
    clear:both;
    position: relative;
    margin:30px 0;
  }
  .at-cd-inner {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .at-cd-inner:hover {
    text-decoration: none;
  }
  .at-cd-block {
    display: table-cell;
  }
  .at-cd-block-inner {
    display: block;
    margin:1px 1px 0 0;
    padding:20px;
    background-color:#dddddd;
  }
  .at-cd-time { 
    display: block;
    font-size:30px;
    line-height: 1em;
    color:inherit;
    text-decoration: none;
  }
  .at-cd-timelabel {
    display: block;
    text-transform:uppercase;
    color:inherit;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .aligncenter { text-align: center; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="at-countdown-timer aligncenter" data-maximum="5" data-interval="1000" data-minute="0" data-hour="0" data-day="14" data-month="4" data-year="2017"&gt;
  
    &lt;span class="at-cd-inner"&gt;
  
        &lt;span class="at-cd-block at-cd-weeks"&gt;
              &lt;span class="at-cd-block-inner"&gt;
                  &lt;span class="at-cd-time"&gt;52&lt;/span&gt;
                  &lt;span class="at-dc-timelabel"&gt;Weeks&lt;/span&gt;
              &lt;/span&gt;
         &lt;/span&gt;
          &lt;span class="at-cd-block at-cd-days"&gt;
              &lt;span class="at-cd-block-inner"&gt;
                  &lt;span class="at-cd-time"&gt;2&lt;/span&gt;
                  &lt;span class="at-cd-timelabel"&gt;Days&lt;/span&gt;
              &lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="at-cd-block at-cd-hours"&gt;
              &lt;span class="at-cd-block-inner"&gt;
                  &lt;span class="at-cd-time"&gt;10&lt;/span&gt;
                  &lt;span class="at-cd-timelabel"&gt;Hours&lt;/span&gt;
              &lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="at-cd-block at-cd-minutes"&gt;
              &lt;span class="at-cd-block-inner"&gt;
                  &lt;span class="at-cd-time"&gt;49&lt;/span&gt;
                  &lt;span class="at-cd-timelabel"&gt;Minutes&lt;/span&gt;
              &lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="at-cd-block at-cd-seconds"&gt;
              &lt;span class="at-cd-block-inner"&gt;
                  &lt;span class="at-cd-time"&gt;35&lt;/span&gt;
                  &lt;span class="at-cd-timelabel"&gt;Seconds&lt;/span&gt;
              &lt;/span&gt;
          &lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  
  If the Week block is removed then the result should automatically take
  
  &lt;div class="at-countdown-timer aligncenter" data-maximum="5" data-interval="1000" data-minute="0" data-hour="0" data-day="14" data-month="4" data-year="2017"&gt;
    &lt;span class="at-cd-inner"&gt;
  
  
          &lt;span class="at-cd-block at-cd-days"&gt;
              &lt;span class="at-cd-block-inner"&gt;
                  &lt;span class="at-cd-time"&gt;366&lt;/span&gt;
                  &lt;span class="at-cd-timelabel"&gt;Days&lt;/span&gt;
              &lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="at-cd-block at-cd-hours"&gt;
              &lt;span class="at-cd-block-inner"&gt;
                  &lt;span class="at-cd-time"&gt;10&lt;/span&gt;
                  &lt;span class="at-cd-timelabel"&gt;Hours&lt;/span&gt;
              &lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="at-cd-block at-cd-minutes"&gt;
              &lt;span class="at-cd-block-inner"&gt;
                  &lt;span class="at-cd-time"&gt;49&lt;/span&gt;
                  &lt;span class="at-cd-timelabel"&gt;Minutes&lt;/span&gt;
              &lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="at-cd-block at-cd-seconds"&gt;
              &lt;span class="at-cd-block-inner"&gt;
                  &lt;span class="at-cd-time"&gt;35&lt;/span&gt;
                  &lt;span class="at-cd-timelabel"&gt;Seconds&lt;/span&gt;
              &lt;/span&gt;
          &lt;/span&gt;
      &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>