Digital clock 2.o

 Html code


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Digital clock 2.0</title>

  <link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap" rel="stylesheet">

</head>

<body>

<div class="name">By Dexter🐺</div>

  <div class="container">

    <div class="clock">

      <div class="imports">

        <span id="year"></span> 

       <span id="month"></span

<span class="pm" id="pm_am"></span>

      </div>

      <div class="cont" id="time">

        

      </div>

      <div class="days">

          <span class="day" id="sun">Sun</span>

          <span class="day" id="mon">Mon</span>

          <span class="day" id="tue">Tue</span>

          <span class="day" id="wed">wed</span>

         <span class="day" id="thur">Thur</span>

          <span class="day" id="fri">Fri</span>

          <span class="day" id="sat">Sat</span>

      </div>

    </div>

  </div>

</body>

</html>


CSS codes


body {

  font-family: 'Orbitron', sans-serif;

  background:linear-gradient(to right,#434343,#ff9900,#ff5600)

}

.name {

    position:absolute ;

    font-size:10px;

   transform:scale(0);

    animation:show 2s linear 1;

    animation-fill-mode:forwards;

}

@keyframes show{

from{transform:scale(0);}

to{transform:scale(1);}

}

.container {

  display: flex;

  justify-content: center;

  align-items: center;

}

.day {

  font-size:.8rem;

  font-weight: 700;

}

.cont {

  min-width: 250px;

 

  padding-top: 30px;

  background: #ff9900;

  text-align: center;

  font-size: 60px;

  border: .07rem solid #000;

  padding-bottom: 30px;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  transition:color 1.2s, text-shadow 1s;

  

}

.cont:hover{

  color:#fff;

  text-shadow:3px 3px 3px #000;

}

.clock{

  margin-top:30%;

  

}

.pm {

position:absolute;

right: 8px;

text-transform: uppercase;

}

.imports {

  position: relative;

}

#month {

  position: absolute;

  left:45%;

  

}

#year {

  margin-left: 10px;

}

.days {

  text-align: center;

  margin-top: 5px;

  

}

Js script


window.addEventListener("load",()=>{
  const timeStart=()=>{

 
  const date = new Date();
  let hours =date.getHours();
  let seconds = date.getSeconds();
  let minutes =date.getMinutes();
  let month=date.getMonth();
  let day=date.getDay();
  let pmAm="Am";
  let dateS=date.getDate();
  switch (month) {
    case 0:
      month="Jan "+dateS;
      // code
      break;
    case 1:
      month="Feb "+dateS;
      break;
   case 2:
      month="Mar "+dateS;
      break;
    case 3:
      month="Apr "+dateS;
      break;
    case 4:
      month="May "+dateS;
      break;
    case 5:
      month="Jun "+dateS;
      break;
    case 6:
      month="Jul "+dateS;
      break;
    case 7:
      month="Aug "+dateS;
      break;
    case 8:
      month="Sep "+dateS;
      break;
    case 9:
      month="Oct "+dateS;
      break;
    case 10:
      month="Nov "+dateS;
      break;
    case 11:
      month="Dec "+dateS;
      break;
   
    default:
     
  }
   
let sun=document.querySelector("#sun");
let mon=document.querySelector("#mon");
let tue=document.querySelector("#tue");
let wed=document.querySelector("#wed");
let thur=document.querySelector("#thur");
let fri=document.querySelector("#fri");
let sat=document.querySelector("#sat");
   switch (day) {
     case 0:
       sun.style.color="aqua";
       sun.style.fontSize="1.5rem";
   
       break;
      case 1:
       mon.style.color="aqua";
       mon.style.fontSize="1.5rem";
      
       break;
      case 2:
       tue.style.color="aqua";
       tue.style.fontSize="1.5rem";
      
       break;
      case 3:
       wed.style.color="aqua";
       wed.style.fontSize="1.5rem";
      
       break;
      case 4:
       thur.style.color="aqua";
       thur.style.fontSize="1.5rem";
      
       break;
      case 5:
       fri.style.color="aqua";
       fri.style.fontSize="1.5rem";
      
       break;
       case 6:
       sat.style.color="aqua";
       sat.style.fontSize="1.5rem";
      
       break;

     
      
    
    
     default:
       // code
   }
 
  if(hours>12){
    hours-=12;
    pmAm="Pm";
  }
  if (minutes<10){
    minutes="0"+minutes;
  }
  if(seconds<10){
    seconds="0"+seconds;
  }
 
  document.querySelector("#time").innerHTML=hours+":"+minutes+":"+seconds;
 
  document.querySelector("#pm_am").innerHTML=pmAm;
 
 
  document.querySelector("#year").innerHTML=date.getFullYear();
  document.querySelector("#month").innerHTML=month;
  };
  timeStart();
  setInterval(timeStart,500);
});
alert("Don't forget to upvote 😁😁")
 


Comments

Popular posts from this blog

ಹಿಂದೂಧರ್ಮದ ಕರೆ - ಸ್ವಾಮಿ ವಿವೇಕಾನಂದ

Rainbow loader with html with CSS