Skip to content

Commit

Permalink
Merge pull request #46 from verreauxblack/AnalogClock-Javascript
Browse files Browse the repository at this point in the history 
#14 AnalogClock using Javascript is completed
  • Loading branch information
@KejariwalAyush
KejariwalAyush authored Oct 20, 2021
2 parents 23892da + e1e025d commit 5cd65e6
Show file tree
Hide file tree
Showing 4 changed files with 362 additions and 0 deletions.
Binary file added AnalogClock/Javascript/DigitalNumbers-Regular.woff
View file
Binary file not shown.
73 changes: 73 additions & 0 deletions AnalogClock/Javascript/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
var hourHand = document.getElementById('hourHand');
var minuteHand = document.getElementById('minuteHand');
var secondHand = document.getElementById('secondHand');

var day = document.getElementById('day');

function initClock(){
var date = new Date();
var hour = date.getHours() % 12;
var minute = date.getMinutes();
var second = date.getSeconds();


var hourDeg = (hour * 30) + (0.5 * minute); // every hour, 30 deg. 30 / 60
var minuteDeg = (minute * 6) + (0.1 * second); // every mintue, 6 deg. 6/60
var secondDeg = second * 6 ; // 360 /60

hourHand.style.transform = 'rotate(' + hourDeg + 'deg)';
minuteHand.style.transform = 'rotate(' + minuteDeg + 'deg)';
secondHand.style.transform = 'rotate(' + secondDeg + 'deg)';


setTimeout(initClock, 1000);
};

function initDate(){
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

day = (day < 10) ? "0" + day : day;
month = (month < 10) ? "0" + month : month;

var Date1 = day + ":" + month + ":" + year;

document.getElementById("day").innerText = Date1;
document.getElementById("day").textContent = Date1;

setTimeout(initDate, 1000);
};

initClock();
initDate();

const degree = "40deg";
const sec = 700;

document.getElementById("-+").addEventListener("click",()=>{
document.getElementById("clock").style.transform="rotate3d(1,-1,0,"+degree+")";
setTimeout(() => {
document.getElementById("clock").style.removeProperty("transform");
}, sec);
});

document.getElementById("++").addEventListener("click",()=>{
document.getElementById("clock").style.transform="rotate3d(1,1,0,"+degree+")";
setTimeout(() => {
document.getElementById("clock").style.removeProperty("transform");
}, sec);
});
document.getElementById("--").addEventListener("click",()=>{
document.getElementById("clock").style.transform="rotate3d(-1,-1,0,"+degree+")";
setTimeout(() => {
document.getElementById("clock").style.removeProperty("transform");
}, sec);
});
document.getElementById("+-").addEventListener("click",()=>{
document.getElementById("clock").style.transform="rotate3d(-1,1,0,"+degree+")";
setTimeout(() => {
document.getElementById("clock").style.removeProperty("transform");
}, sec);
});
59 changes: 59 additions & 0 deletions AnalogClock/Javascript/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Analog Clock</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<meta name="keywords" content="clock, analog, animated, verreauxblack, analogclock, cssart, css, css clock"/>
<meta name="title" content="CSS ART">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="language" content="English">
<meta name="author" content="RAJ">
<meta name="description" content="These arts are coded by new Css artist RAJ">

<!-- OG meta tag -->
<meta property="og:title" content="Analog Clock">
<meta property="og:site_name" content="css art by RAJ">
<meta property="og:url" content="cssart.verreauxblack.biz/analogClock">
<meta property="og:description" content="CSS ART by RAJ, I have included a few CSS animations.">
<meta property="og:type" content="website">
<meta property="og:image"
content="https://raw.githubusercontent.com/verreauxblack/CSS_Art/master/pic/OG_image/analog-clock.png">

<!-- twitter OG meta tag -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@verreauxblack">
<meta name="twitter:description" content="CSS ART by RAJ, I have included a few CSS animations.">
<meta name="twitter:title" content="Analog Clock">
<meta name="twitter:image"
content="https://raw.githubusercontent.com/verreauxblack/CSS_Art/master/pic/OG_image/analog-clock.png">


</head>
<body>
<div class="container">

<div id="clock" class="clock">
<div id="day" class="date"></div>
<span class="twelve">12</span>
<span class="three">3</span>
<span class="six">6</span>
<span class="nine">9</span>
<div id="hourHand" class="hourHand"></div>
<div id="minuteHand" class="minuteHand"></div>
<div id="secondHand" class="secondHand"></div>
</div>
<div class="circle">
<div id="-+" class="quarts"></div>
<div id="++" class="quarts"></div>
<div id="--" class="quarts"></div>
<div id="+-" class="quarts"></div>
</div>
</div>
<footer>
<h2> <a href="http://github.com/verreauxblack">@verreauxblack</a></h2>
</footer>
<script src="app.js"></script>
</body>
</html>
230 changes: 230 additions & 0 deletions AnalogClock/Javascript/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@
@font-face {
font-family: 'Digital Numbers Regular';
font-style: normal;
font-weight: normal;
src: local('Digital Numbers Regular'), url('DigitalNumbers-Regular.woff') format('woff');
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root{
--backround-color: rgb(221, 217, 217);
}

body{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container{
--width : 500px;
position: relative;
top: 90px;
height: var(--width);
width: var(--width);
display: flex;
align-items: center;
justify-content: center;
perspective: 1000px;
}

.clock{
--width: 400px;
position: absolute;
height: var(--width);
width: var(--width);
border-radius: 50%;
border: 7px solid black;
display: flex;
align-items: center;
justify-content: center;
z-index: -2;
transform-style: preserve-3d;
transition: transform 1s;
box-shadow: #FFD700;

}


.clock::before{
content: "";
width: 25px;
height: 25px;
border-radius: 50%;
background-color: black;
z-index: 10000;
transform: translateZ(2.5rem);
}

.clock::after{
content: "";
--width: 280px;
position: absolute;
background-color: var(--backround-color);
opacity: .7;
height: var(--width);
width: var(--width);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: -2;

transform: translateZ(-5rem);
}

.clock span{
font-size: 4rem;
padding: 2px;
position: absolute;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}
.twelve,.three,.six,.nine{
position: relative;
transform: translateZ(5rem);
transform-style: preserve-3d;
}
.twelve::after,.three::after,.six::after,.nine::after{
content: "";
position: absolute;
background: white;
top: 0;
left: 0;
right: 0;
z-index: -1;
transform: translateZ(-4rem);
}
.twelve::after{
width: 5rem;
top: 22px;
height: 2rem;
}

.six::after{
left: -10px;
padding: 0;
top: 25px;
width: 4rem;
height: 2rem;
}
.three::after,.nine::after{
padding-bottom: 8px;
left: 5px;
width: 2rem;
height: 4rem;
}
.nine::after{
left: 2px;
}
.twelve{
top: -35px;
padding: 0 5px;
}
.three{
right: -15px;
}

.six{
bottom: -35px;
padding: 0 25px;
}

.nine{
left: -15px;
}

.hourHand,.minuteHand,.secondHand{
transform-style: preserve-3d;
}

.hourHand{
position: absolute;
height: 200px;
display: flex;
justify-content: center;
}

.hourHand::before{
content: "";
position: absolute;
background-color: #FF0000;
width: 10px;
height: 100px;
border-radius: 10px 10px 0 0;
transform: translateZ(2.5rem);
}

.minuteHand{
position: absolute;
height: 280px;
display: flex;
justify-content: center;
}

.minuteHand::before{
content: "";
position: absolute;
background-color: #FF0000;
width: 7px;
height: 150px;
border-radius: 10px 10px 0 0 ;
transform: translateZ(2.5rem);
}

.secondHand{
position: absolute;
height: 350px;
display: flex;
justify-content: center;
}

.secondHand::before{
content: "";
position: absolute;
background-color: #ffee00;
width: 4px;
height: 220px;
border-radius: 10px 10px 0 0 ;
transform: translateZ(2.5rem);
}


.date{
position: absolute;
bottom: 60px;
display: flex;
align-items: center;
justify-content: center;
color: blue;
font-weight: 600;
font-family: 'Digital Numbers Regular';
transform: translateZ(1rem);

}

.circle{
--width:400px;
position: absolute;
width: var(--width);
height: var(--width);
border-radius: 50%;
display: grid;
grid-template: repeat(2, 1fr) /repeat(2, 1fr) ;
overflow: hidden;
}


footer{
margin-top:20vh;
}

footer a{
text-decoration: none;
color: black
}

0 comments on commit 5cd65e6

Please sign in to comment.