JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div id='qtimer' class="quiz_timer" width="300px" height="300px" >
    
</div>

CSS

.qt_alarm {
    animation:qt_kfalarm 0.6s ease 0s 5;
}

.pause_button, .play_button {
    visibility:hidden;
}
.qtimer.playing:hover .pause_button,.qtimer.paused:hover .play_button {
    visibility:visible;
}

.qt_alaram_vib:hover .pause_button, .qt_alaram_vib:hover .play_button {
     visibility:hidden !important;   
}

@keyframes qt_kfalarm {
  from { r: 100px;  stroke-opacity: 1; } 
  to   { r : 110px; stroke-opacity: 0;} 
}
@keyframes qt_opalarm {
  from {stroke-opacity: 1; fill-opacity:1 } 
  to   {stroke-opacity: 0; fill-opacity:0} 
}


.qt_alarm_vib {
    animation-delay: 0s;
    animation-duration: 1s;
    animation-name: alarm_vib;
    animation-iteration-count: 3;
    animation-timing-function: linear;
}
.qt_alarm_vib_op {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-name: fillOpacity1;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@keyframes fillOpacity1 { 
    0% {
        fill-opacity: 1;
        stroke-opacity: 1;
    }
    50% {
        fill-opacity: 1;
        stroke-opacity: 1;
    }
    100% {
        fill-opacity: 0;
        stroke-opacity: 0;
    }
}
@-webkit-keyframes alarm_vib {
    0%, 100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15) rotate3d(0, 0, 1, 5deg);
        transform: scale3d(1.15, 1.15, 1.15) rotate3d(0, 0, 1, 5deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15) rotate3d(0, 0, 1, -5deg);
        transform: scale3d(1.15, 1.15, 1.15) rotate3d(0, 0, 1, -5deg)
    }
}
@keyframes alarm_vib {
    0%, 100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform:...

JavaScript

/*

FEATURES:
- Timer
- Alram
 */
/*

FEATURES:
- Timer
- Alram
 */
(function($, window) {
  "use strict";
  var QuizTimer, defaults, pluginName,saveTimers,supportsHtml5Storage,completeCircle;
  pluginName = "quiztimer";
  saveTimers = [];
   $.fn.toMilliSec = function() {
        var time=0;
        if(typeof this.prop('hour') != 'undefined') {
          time = this.prop('hour') * 60  * 60 * 1000 ;
        }
        if(typeof this.prop('min')  != 'undefined') {
          time += this.prop('min') * 60 * 1000;
        }
        if(typeof this.prop('sec')  != 'undefined') {
          time += this.prop('sec') * 1000; 
        }
        if(typeof this.prop('milli')  != 'undefined') {
          time += this.prop('milli'); 
        }       
        return  time;
  };
 $.fn.toTime = function(millisec) {
        var time={};
        time.hour = Math.floor((millisec / (60 *60 * 1000)) % 60);
        time.min = Math.floor((millisec / (60 * 1000)) % 60);
        time.sec = Math.floor((millisec / 1000) % 60);
      time.milli = Math.floor(millisec % 1000);
        return  time;
  }; 
 completeCircle = 359.98;
 defaults = {
    namespace: "formsaveStorage",
    webStorage: "localStorage",
    maxItems: 100,
    useOnlyNS:false,
    useStorage:true,
    circleRadius: 100,
    circelOffset:20,
    iteration:1,
    textStyle:'font-size:24px; font-family:Arial;',
    showAlarm:true,
    iterationCompletedAlarm:true,
    completedAlarmMessage:"Time Completed",
    textOffset: {x:14,y:8},
    alarmInterval:'3',// this is in seconds
    playTimerAudio:true,
    playAlarmAudio:true,
    timerAudioTag: null,
    alarmAudioTag: null,
    showPlayButtons:true,
    svgClass:'qtimer',    
    time: {
      hour:0,
      min:0,
      sec:30,
    },
    startat: {
      hour:0,
      min:0,
      sec:0,
    },
    alarms: [
        {time:{hour:0,min:0,sec:15},message:"Half Time"},
    ],
    hsl: {
      col_H : 120,
      col_S:95,
      col_L:48,
    },
    keyAttributes: ["tagName",...