Repository: bhargav-tibadiya/Clock
Branch: main
Commit: c4f07ea453f3
Files: 4
Total size: 3.1 KB
Directory structure:
gitextract_90u2w5lc/
├── .gitattributes
├── index.html
├── script.js
└── style.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
================================================
FILE: index.html
================================================
Clock
================================================
FILE: script.js
================================================
let hour = document.getElementById('hour');
let minute = document.getElementById('minute');
let second = document.getElementById('second');
let ampm = document.getElementById('ampm');
setInterval(()=>{
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
let ap = h >=12 ? "PM" : "AM";
h = h>12 ? h-12:h;
h = h<=9 ? "0"+h:h;
m = m<=9 ? "0"+m:m;
s = s<=9 ? "0"+s:s;
hour.innerText = h;
minute.innerText = m;
second.innerText = s;
ampm.innerText = ap;
});
================================================
FILE: style.css
================================================
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Anton', sans-serif;
}
.wrapper{
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #acbaca;
}
.container{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
}
.clock
{
width: 150px;
height: 150px;
background-color: #c9d5e0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
box-shadow: 20px 20px 20px -10px rgba(0, 0, 0, 0.15),inset 15px 15px 10px rgba(255, 255, 255, 0.5),-15px -15px 35px rgba(255, 255, 255, 0.35), inset -1px -1px 10px rgba(0,0,0,0.2);
}
.bg{
width: 125px;
height: 125px;
background-color: #152b4a;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.15),inset 5px 5px 10px rgba(255, 255, 255, 0.5),-5px -5px 15px rgba(255, 255, 255, 0.35), inset -1px -1px 10px rgba(0,0,0,0.2);
font-size: 62px;
/* font-weight: 800; */
color: white;
letter-spacing: 2px;
}
#hour{
color: #ff2972;
}
#minute{
color: #fee800;
}
#second{
color: transparent;
-webkit-text-stroke: 1px #04fc43;
}
@media only screen and (max-width: 600px) {
.container{
flex-direction: column;
}
}