100 Days CSS Challenge - #010 Watch

100-days-css-challenge-010-watch.markdown

100 Days CSS Challenge - #010 Watch

A Pen by Anushka Raj on CodePen.

License.

index.html

  <div class="frame">
    <div class="center">
      <div class="shield">
          <svg class="stoper" viewBox="0 0 200 200" class="svg-4" >
              <path d="0 0 202 202" stroke="blue"
    stroke-width="5" fill="none" />
          <circle cx="100", cy="100", r = "85"></circle>
            </svg>
        <div class="subShield">
          <div class="clock">
              <div class="clock__date"></div>
              <div class="clock__time"></div>
              <div class="clock__info">
                <div class="info__heart"> 
                  <div class="heart">&#9829</div>
                  <div class="pulse">81</div>
                </div>
                <div class="info__calories">1248 KCAL</div>
              </div>
          </div>         
        </div>
      </div>
    </div>
  </div>

script.js

const date=document.querySelector(".clock__date");
const time=document.querySelector(".clock__time");
const subShield=document.querySelector(".subShield");

const printDots=()=>{
  for(let i=0;i<60;i++){
  let dot=document.createElement("div");
  dot.classList.add("subShield__dot")
  dot.style.transform=`rotate(${360/60*i}deg) translateX(80px) `
  subShield.appendChild(dot)
  }
  
}


printDots();

const getData=()=>{
  let now=new Date();
  let arr=now.toString().split(" ");
  date.textContent=`${arr[0]} ${arr[1]} ${arr[2]} ${arr[3]}`;
  time.innerHTML=`${arr[4].split(":")[0]}:${arr[4].split(":")[1]}<span>${arr[4].split(":")[2]}</span>`;
}

const heartChange=()=>{
  let ratio=Math.round(Math.random()*(110 - 50) + 50)
  const circle=document.querySelector("circle")
  const heart=document.querySelector(".heart");
  const pulse=document.querySelector(".pulse");
  pulse.textContent=ratio;
  heart.style.animationDuration=`${60/ratio}s`;
  circle.style.animationDuration=`${60/ratio}s`
}
setInterval(getData,1000)
setInterval(heartChange,5000)

style.scss

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #c6ffdd;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.shield{
  width: 200px;
  height: 200px;
  background-color: #242424;
  border-radius:100%;
  border:10px solid #3A3A3A;
}
.stoper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.subShield{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-51%,-51%);
  width: 160px;
  height: 160px;
  border-radius: 100%;  
}

.subShield__dot{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:100%;
  background-color:#fff;
  top:50%;
  left:50%;
  box-shadow: 0px 0px 2px 0px rgba(255,255,255,0.75);
}
circle {  
  stroke: #3D5AFE;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 625;
  animation: stoper 0.7s linear infinite;
  transform-origin: center center;
  transform: rotate(-90deg);
}
.clock{
  font-family: 'Open Sans';
  font-size: 13px;
  transition:0.3s;
  color:#ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;  
  width: 110px;
  justify-content: space-around;
  align-items: center;
}
.clock__time{  
  font-size:40px;
}
.clock__time>span{
  font-size:20px;
  vertical-align: text-top;
 
}

.clock__info{
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.info__heart{
  display:flex;
  width: 27px;
  justify-content: space-between;
 
}
.heart{
  color:#ff0000;
  text-shadow: 0px 0px 2px #ff0000;
  transform-origin:center;
  animation:heartBeat 0.74s infinite ease;
  line-height: 100%
}

@keyframes heartBeat{
  from{
    transform:scale(0.5)
  }
  to{
    transform:scale(1)
  }
}

@keyframes stoper {
	from {
		stroke-dashoffset: 625;
		transform: rotate(-90deg) scaleY(1);
	}
	50% {
		stroke-dashoffset: 0;
		transform: rotate(-90deg) scaleY(1);
	}
	50.001% {
		transform: rotate(-90deg) scaleY(-1);
	}
	to {
		stroke-dashoffset: 625;
		transform: rotate(-90deg) scaleY(-1);
	}
}