Javascript Analog and Digital Clock

Javascript Analog and Digital Clock

HTML

<div class="container">
  <div class="clock">
    <div class="wrapper">
    <div class="hours"></div>
    </div>
    <div class="wrapper">
      <div class="minutes"></div>
    </div>
    <div class="wrapper">
      <div class="seconds"></div>
    </div>
    <div class="wrapper">
      <div class="time">
      <span class="hoursCount">10</span>
      <span class="seperator">:</span>
      <span class="minutesCount">10</span>
      <span class="seperator">:</span>
      <span class="secondsCount">10</span>
      <span class="seperator"></span>
      <span class="meri">AM</span>
    </div>
    </div>
  </div>
</div>

SCSS

@import url("https://fonts.googleapis.com/css?family=Oswald");
* {
  font-family: "Oswald", sans-serif;
}
$backgroundColor: #010e1f;
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
body {
  background-color: $backgroundColor;
}
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
* {
  box-sizing: border-box;
}
.clock {
  position: relative;
  height: rem(220px);
  width: rem(220px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 2px solid darken($backgroundColor, 2%);
    border-radius:rem(500px);
    &:nth-child(1) {
      height: 100%;
      width: 100%;
      z-index: 1;
    }
    &:nth-child(2) {
      height: 90%;
      width: 90%;
      z-index: 2;
    }
    &:nth-child(3) {
      height: 80%;
      width: 80%;
      z-index: 3;
    }
    &:nth-child(4) {
      height: 70%;
      width: 70%;
      z-index: 4;
      background-color: #010e1f;
    }
  }
  .hours,
  .minutes,
  .seconds,
  .time {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
    border-radius:rem(500px);
  }
  .time {
    height: 70%;
    width: 70%;
    z-index: 4;
    display: inline-flex;
    font-size: rem(20px);
    justify-content: center;
    align-items: center;
    span {
      color: #ffffff;
      display: inline-block;
      text-align: center;
      opacity: 1;
      &:not(.seperator) {
        width: rem(26px);
      }
    }
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Oswald");
* {
  font-family: "Oswald", sans-serif;
}

body {
  background-color: #010e1f;
}

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
}

.clock {
  position: relative;
  height: 13.75rem;
  width: 13.75rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.clock .wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 2px solid #010a15;
  border-radius: 31.25rem;
}
.clock .wrapper:nth-child(1) {
  height: 100%;
  width: 100%;
  z-index: 1;
}
.clock .wrapper:nth-child(2) {
  height: 90%;
  width: 90%;
  z-index: 2;
}
.clock .wrapper:nth-child(3) {
  height: 80%;
  width: 80%;
  z-index: 3;
}
.clock .wrapper:nth-child(4) {
  height: 70%;
  width: 70%;
  z-index: 4;
  background-color: #010e1f;
}
.clock .hours,
.clock .minutes,
.clock .seconds,
.clock .time {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
  border-radius: 31.25rem;
}
.clock .time {
  height: 70%;
  width: 70%;
  z-index: 4;
  display: inline-flex;
  font-size: 1.25rem;
  justify-content: center;
  align-items: center;
}
.clock .time span {
  color: #ffffff;
  display: inline-block;
  text-align: center;
  opacity: 1;
}
.clock .time span:not(.seperator) {
  width: 1.625rem;
}

JAVASCRIPT

/*
* Included Jquery
*/
$(document).ready(function(){
  
  
  $(".clock").each(function(index,clock){
    var hoursHandler = $(clock).find(".hours");
    var minutesHandler = $(clock).find(".minutes");
    var secondsHandler = $(clock).find(".seconds");
    var hoursCount = $(clock).find(".hoursCount");
    var minutesCount = $(clock).find(".minutesCount");
    var secondsCount = $(clock).find(".secondsCount");
    var meri = $(clock).find(".meri");
  
    setInterval(function(){
      var date = new DateObj();
       $(hoursHandler).css({
        "background-image":"conic-gradient(#f86098,#faa87c "+ date.getInfo().hours * 30+"deg,#010a19 "+date.getInfo().hours * 30+"deg)"
      });
      $(minutesHandler).css({
        "background-image":"conic-gradient(#3ed5fe,#5597ff "+ date.getInfo().minutes * 6 +"deg,#010a19 "+ date.getInfo().minutes * 6 +"deg)"
      });
      $(secondsHandler).css({
        "background-image":"conic-gradient(#f85940,#fbba2a "+ date.getInfo().seconds * 6 +"deg,#010a19 "+ date.getInfo().seconds * 6 +"deg)"
      });
      $(hoursCount).text(date.getInfo().hours);
      $(minutesCount).text(date.getInfo().minutes);
      $(secondsCount).text(date.getInfo().seconds);
      $(meri).text(date.getInfo().meri);
      
    },1000);
  
  });
  
  function DateObj(){
    this.date = new Date();
  }
  DateObj.prototype.getInfo = function(){
    return {
      hours:this.date.getHours() % 12,
      minutes:this.date.getMinutes(),
      seconds:this.date.getSeconds(),
      meri:this.date.getHours() < 12 ? "AM": "PM"
    }
  }
  
  


  
});

 

Add a Comment

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