Skip to main content

How To Make A Digital Clock Using HTML CSS & JS With Glowing Effect

Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of successful.









                                        [ HTML FILE ]

<!DOCTYPE html>
<!-- Created By CodingBihar -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Digital Clock with Glowing Effect | CodingBihar</title>
<link rel="stylesheet" href="file:///storage/emulated/0/Android/data/com.teejay.trebedit/files/TrebEdit%20user%20files/style.css">
   </head>
   <body>
      <div class="wrapper">
         <div class="display">
            <div id="time"></div>
         </div>
         <span></span>
         <span></span>
      </div>
      <script>
         setInterval(()=>{
           const time = document.querySelector(".display #time");
           let date = new Date();
           let hours = date.getHours();
           let minutes = date.getMinutes();
           let seconds = date.getSeconds();
           let day_night = "AM";
           if(hours > 12){
             day_night = "PM";
             hours = hours - 12;
           }
           if(seconds < 10){
             seconds = "0" + seconds;
           }
           if(minutes < 10){
             minutes = "0" + minutes;
           }
           if(hours < 10){
             hours = "0" + hours;
           }
           time.textContent = hours + ":" + minutes + ":" + seconds + " "+ day_night;
         });
      </script>
   </body>
</html>





                                  [ CSS FILE ]
    *{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
.wrapper{
  height: 100px;
  width: 360px;
  position: relative;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  border-radius: 10px;
  cursor: default;
  animation: animate 1.5s linear infinite;
}
.wrapper .display,
.wrapper span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper .display{
  z-index: 999;
  height: 85px;
  width: 345px;
  background: #1b1b1b;
  border-radius: 6px;
  text-align: center;
}
.display #time{
  line-height: 85px;
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate 1.5s linear infinite;
}
@keyframes animate {
  100%{
    filter: hue-rotate(360deg);
  }
}
.wrapper span{
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background: inherit;
}
.wrapper span:first-child{
  filter: blur(7px);
}
.wrapper span:last-child{
  filter: blur(20px);
}





        


Popular posts from this blog

Typing Speed Test Game in HTML CSS & JS

        Typing Speed Test Game in HTML CSS & JS Typing :> Stimulate your mind as you test your typing speed with this standard English paragraph typing test. Watch your typing speed and accuracy increase as you learn about a variety of new topics! Over 40 typing test selections available. If you don't like a test prompt, you can get a different (random) prompt with the "change test" button - or select a specific paragraph to type from the list below. To find out how fast you type, just start typing in the blank textbox on the right of the test prompt. You will see your progress, including errors on the left side as you type. In order to complete the test and save your score, you need to get 100% accuracy. You can fix errors as you go, or correct them at the end with the help of the spell checker.                  <HTML> + (JS) <!DOCTYPE html> <html lang="en" dir="ltr">   <head...
Read more

How To Make A Glassmorphism Calculator Using HTML CSS & Vanilla Javascript

HOW TO MAKE A GLASSMORPHISM CALCULATOR USING                         HTML CSS & VANILLA JAVASCRIPT Calculator: The first solid-state electronic calculator was created in the early 1960s. Pocket-sized devices became available in the 1970s, especially after the Intel 4004, the first microprocessor, was developed by Intel for the Japanese calculator company Busicom. They later became used commonly within the petroleum industry(oil and gas) In this post, we will create a simple calculator for use on the web with the help of HTML, CSS, and javascript                                           [ HTML ] <!DOCTYPE html> <html lang="en"> <head> <!-- Designed By Coding Bihar -->  <meta charset="UTF-8">     <title>Calculator Example | Coding Bihar </title> ...
Read more