How to create a alarm clock UI in JavaScript

How to create a alarm clock UI in JavaScript ; this code uses basic JavaScript to provide functionality to the time sliders.

See the Pen How to create a alarm clock UI in JavaScript by scanfcode (@scanfcode) on CodePen.


How to create a alarm clock UI in JavaScript

HTML

<div class="animate11" id='r1'>
  <div class="in_cnt">
     <span id='span1'>6</span><br>
       <input type="range" id='range1' name="points" min="1" max="12" value="6" orient=vertical oninput="input_range_val(this.id,'span1')">
  </div>
  <div class="in_cnt">
     <span id='span2'>00</span><br>
     <input type="range" id="range2" name="points" min="00" max="60" value="00" orient=vertical oninput="input_range_val(this.id,'span2')">
  </div>
  <div class="in_cnt">
    <span id='span3'>AM</span><br>
    <input type="range" id='range3' name="points" min="1" max="2" value="1"  orient=vertical oninput="input_range_val(this.id,'span3')">
  </div>
</div>

CSS

.animate11
{
  background:#80bfff;
  padding:4%;
  height:200px;width:300px;
}
.in_cnt
{
  display:inline;
  float:left;
  width:100px;
  text-align:center;
  color:#fff;
  font-size:22px;
}
/ * style for input range */
input[type="range"]
{
  width:10px;height:150px;
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}

/ * style for input range  thumb -cross browser*/

/* chorme */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px; 
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
/* Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
/* IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
#span3 
{
 color:#ffff00;
}

NOTE:
To display a range input vertically use CSS property
writing-mode: bt-lr; for IE browser
-webkit-appearance: slider-vertical; for Chrome browser
and simply add the attribute orient=vertical for Firefox browsers.

Script

function input_range_val(id,id1)
{
   var x = document.getElementById(id).value;
   document.getElementById(id1).innerHTML = x;
   if(id=="range2" && x==0)
   { document.getElementById(id1).innerHTML = "00";}
   if(id=="range3")
   { 
    if(x==1)
    {
      document.getElementById('span3').innerHTML = "AM";
      document.getElementById('span3').style.color="#ffff00";
      document.getElementById('r1').style.background="#80bfff";
    }
    else{ 
      document.getElementById('span3').innerHTML = "PM";
      document.getElementById('span3').style.color="#0099ff";
      document.getElementById('r1').style.background="#000066";
    }
   }
}

Leave a Reply

Your email address will not be published. Required fields are marked *