Skip to content

Commit 5c50038

Browse files
Abirpal202049Abirpal202049
authored
Merge pull request #28 from DragonUncaged/Digital_Clock
Digital clock
2 parents 8205b21 + 8c3bef5 commit 5c50038

File tree

5 files changed

+131
-0
lines changed

5 files changed

+131
-0
lines changed

‎Clock/Digital_Clock/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1+
# Digital Clock
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
8+
![](https://github.com/DragonUncaged/frontend-html-css-js/blob/Digital_Clock/Clock/Digital_Clock/assets/Digital-clock-demo.gif)
9+
=======
110

‎Clock/Digital_Clock/assets/Digital-clock-demo.gif

3.39 MB
Loading

‎Clock/Digital_Clock/code/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Glassmorphism Digital Clock Design</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<section class="background-square">
12+
<div class="clock">
13+
<div class="container">
14+
<h2 id="hour">00</h2>
15+
<h2 class="dot">:</h2>
16+
<h2 id="minute">00</h2>
17+
<h2 class="dot">:</h2>
18+
<h2 id="seconds">00</h2>
19+
<span id="ampm">AM</span>
20+
</div>
21+
</div>
22+
</section>
23+
<script src="index.js"></script>
24+
</body>
25+
</html>

‎Clock/Digital_Clock/code/index.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function clock(){
2+
const hour = document.getElementById("hour");
3+
const minute = document.getElementById("minute");
4+
const seconds = document.getElementById("seconds");
5+
const ampm = document.getElementById("ampm");
6+
7+
let h = new Date().getHours();
8+
let m = new Date().getMinutes();
9+
let s = new Date().getSeconds();
10+
var am = "AM";
11+
if (h>12){
12+
h = h-12;
13+
var am = "PM";
14+
}
15+
16+
hour.innerHTML = h;
17+
minute.innerHTML = m;
18+
seconds.innerHTML = s;
19+
ampm.innerHTML = am;
20+
21+
}
22+
var interval = setInterval(clock,1000)

‎Clock/Digital_Clock/code/style.css

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
2+
3+
.background-square{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
9+
position: relative;
10+
width: 100vw;
11+
height: 100vh;
12+
background: black;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}
17+
.background-square::before{
18+
content: "";
19+
position: fixed;
20+
width: 584px;
21+
height: 255px;
22+
border-radius: 10px;
23+
background-color: #00DBDE;
24+
background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
25+
animation: animate 2s ease-in-out infinite;
26+
}
27+
28+
@keyframes animate{
29+
0%,100%{
30+
transform: translateY(20px);
31+
}
32+
50%{
33+
transform: translateY(-20px);
34+
}
35+
}
36+
.clock{
37+
position: relative;
38+
width: 700px;
39+
height: 250px;
40+
background: rgba(255,255,255,0.05);
41+
box-shadow: 0 15px 25px rgba(0,0,0,0.1);
42+
z-index: 1000;
43+
border-radius: 20px;
44+
border: 1px solid rgba(255,255,255,0.1);
45+
backdrop-filter: blur(20px);
46+
}
47+
.clock .container{
48+
display: flex;
49+
justify-content: center;
50+
align-items: center;
51+
height: 100%;
52+
}
53+
.clock .container h2{
54+
font-size: 6em;
55+
color: #fff;
56+
}
57+
.clock .container h2:nth-child(odd){
58+
padding: 5px 15px;
59+
border-radius: 10px;
60+
background: rgba(255,255,255,0.05);
61+
box-shadow: 0 15px 25px rgba(0,0,0,0.2);
62+
margin: 0 10px;
63+
border-bottom: 1px solid rgba(255,255,255,0.1);
64+
border-right: 1px solid rgba(255,255,255,0.1);
65+
}
66+
.clock .container h2#seconds{
67+
color: red;
68+
}
69+
#ampm{
70+
position: relative;
71+
top: -50px;
72+
font-size: 2em;
73+
color: #fff;
74+
font-weight: 700;
75+
}

0 commit comments

Comments
 (0)