Compass Clock
This example shows current date time in compass clock format. In order to perform this task reasonably well, we will need to modify the App.js file and also the App.css file. Both of these files are in the root of the src folder.
This is an example of class component. State data is defined using a constructor, which is a special method that is invoked when a new object is created using the class.
src\App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(){
super()
this.state=({
year:2019,
M_month:'Mar',
month:1,
day:1,
week:1,
hour:12,
Minute:1,
second:1,
Zodiac:'Aries, Taurus, Gemini, Cancer, Leo, Virgo, Libra, Scorpio, Sagittarius, Capricorn, Aquarius, Pisces'.split(','),
M_months:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec"],
})
}
componentWillMount(){
setInterval(()=>{
let time= new Date()
this.setState({
year:this.state.Zodiac[time.getUTCFullYear()%12],
M_month:this.state.M_months[time.getUTCMonth()],
month:time.getMonth()+1,
day:time.getDate(),
week:time.getDay(),
hour:time.getHours(),
Minute:time.getMinutes(),
second:time.getSeconds()
})
},1000)
}
array = length => Array.from({length}).map((v, k) => k).map(x=>x+1);
addPreZero = num =>{
if(num>=10)return num
return '0'+num
}
render() {
return (
<div className="App">
<header className="App-header">
<div className='msg'>
<div className='year'>
<span>
{this.state.year}</span> / Year
</div>
</div>
<div className='M_month'>
{`${this.state.M_month}`}
</div>
<div className='box'>
{this.array(12).map((x,index)=>{
return (
<div key={index} className={`month item ${index===(this.state.month-1)?"active":""}`} style={{transform: `rotate(${index*30-30*(this.state.month-1)}deg)`}}>
{`${x} month`}
</div>
)
})}
{this.array(30).map((x,index)=>{
return (
<div key={index} className={`day item ${index===(this.state.day-1)?"active":""}`} style={{transform: `rotate(${index*12-12*(this.state.day-1)}deg)`}}>
{`${x} day`}
</div>
)
})}
{this.array(7).map((x,index)=>{
return (
<div key={index}
className={`week item ${index===(this.state.week-1)?"active":""}`}
style={{transform: `rotate(${index*(360/21)-(360/21)*(this.state.week-1)}deg)`}}>
{`week ${x}`}
</div>
)
})}
{this.array(24).map((x,index)=>{
return (
<div key={index}
className={`hour item ${index===(this.state.hour-1)?"active":""}`}
style={{transform: `rotate(${index*(360/24)-(360/24)*(this.state.hour-1)}deg)`}}>
{`${x} hr`}
</div>
)
})}
{this.array(60).map((x,index)=>{
return (
<div key={index}
className={`Minute item ${index===(this.state.Minute-1)?"active":""}`}
style={{transform: `rotate(${index*(360/60)-(360/60)*(this.state.Minute-1)}deg)`}}>
{`${x} min`}
</div>
)
})}
{this.array(60).map((x,index)=>{
return (
<div key={index}
className={`second item ${index===(this.state.second-1)?"active":""}`}
style={{transform: `rotate(${index*(360/60)-(360/60)*(this.state.second-1)}deg)`}}>
{`${x} sec`}
</div>
)
})}
</div>
</header>
</div>
);
}
}
export default App;
src\App.css
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(8px + 1vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.App-header{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
}
.box{
position: relative;
width: 1px;
height: 1px;
transition: all .5s;
}
.item{
position: absolute;
right: 0;
top: -1rem;
text-align: right;
line-height: 2rem;
opacity: .5;
transition: all .5s;
}
.item.active{
opacity: 1;
font-size:1.4rem;
}
.month{
width: 200px;
right: -100px;
}
.day{
width: 480px;
right: -240px;
}
.week{
width: 360px;
right: -180px;
}
.hour{
width: 600px;
right: -300px;
}
.Minute{
width: 800px;
right: -400px;
}
.second{
width: 960px;
right: -480px;
}
.msg{
position: absolute;
left: 2rem;
top: 2rem;
text-align: left;
line-height: 2rem;
width: 300px;
}
.msg div{
opacity: .8;
}
.msg .year{
margin-bottom: 1rem;
opacity: 1;
}
.msg .year span{
font-size: 2rem;
}
.M_month{
position: absolute;
right: 2rem;
bottom: 2rem;
font-size: 2rem;
}