Skip to main content

How To Create A Simple Analog Clock

 How To Create A Simple Analog Clock

#JAVA #CSS #HTML #coding #tutorial

First you will need to include javascript, Html and CSS codes in your text editor as follows;
Lets first add HTML CODES as below;
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>

After you have inserted the Html code in your text editor you will have now to edit Css code using embedded style, where by the css codes are inserted in between <style> </style>tags, which are normally placed in between <head></head> tags of a html file. The css codes are used to apply formatting to the whole clock . Therefore the CSS codes will be inserted as follows;

body{
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background-color: gray;
}

.clock{
width: 300px;
height: 300px;
border-radius: 50%;
background-size: cover;
background-image: url("https://i.posting.cc/hjVspvcJ/clock.png");
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 -15px 15px 0px brown;
inset o -15px 15px gray, 0.15px 15px(0,0,0, 0.3),inset 0 15px 15px(0, 0, 0, 0.3);
}

.clock::before{
content: " ";
width: 15px;
height: 15px;
position: absolute;
background-color: #fff;
border-radius: 50%;
z-index: 1000;
}
.hr::before{
content: " ";
width: 8px;
height: 80px;

background-color: #ff1o5e;
border-radius: 5px;
z-index: 100;
}
.mn::before{
content: " ";
width: 6px;
height: 90px;

background-color: red;
border-radius: 5px;
z-index: 11;
}
.sc::before{
content: " ";
width: 2px;
height: 140px;

background-color: #fff;
border-radius: 5px;
z-index: 10;
}

.hour, .min, .sec{
position: absolute;
}

.hr{
width: 160px;
height: 160px;
}
.mn{
width: 230px;
height: 230px;
}
.sc{
width: 180px;
height: 180px;
}
.hr, .mn,.sc{
display: flex;
justify-content: center;
}

After you have successfully added the css and html codes, the last step you will now have to add the javascript codes in your html tags, where by they are enclosed in between <script></script>tags, which are normally inserted in between <html></html> tags anywhere in within the html file. Therefore the javascript codes are are inserted as follows;

<script>
const deg=6;
const hr=documnet: queryselector("#hr");
const mn=documnet: queryselector("#mn");
const sc=documnet: queryselector("#sc");
setInterval(()=>{
let day=new Date();
let hh=day.getHours()*30;
let mm=day.getMinutes()*deg;
let ss=day.getSeconds()*deg;
hr.style.transform='rotateZ(${hh + mm/12}deg);
mn.style.transform='rotateZ(${mm}deg);
sc.style.transform='rotateZ(${ss}deg);
});
</script>
Labels:

Comments

Post a Comment

Popular posts from this blog

Cyber Attack Countermeasures : Module 4

 Cyber Attack Countermeasures :  Module 4 Quiz #cyber #quiz #coursera #exam #module #answers 1 . Question 1 CBC mode cryptography involves which of the following? 1 / 1  point Mediation of overt channels Mediation of covert channels Auditing of overt channels Auditing of covert channels None of the above Correct Correct! CBC mode is specifically designed to close covert communication channels in block encryption algorithms. 2 . Question 2 Which is a true statement? 1 / 1  point Conventional crypto scales perfectly well Conventional crypto scales poorly to large groups Conventional crypto does not need to scale All of the above Correct Correct! The symmetric key based method inherent in conventional cryptography does not scale well to large groups. 3 . Question 3 Public Key Cryptography involves which of the following? 1 / 1  point Publicly known secret keys Publicly known private keys Publicly known public keys All of the above ...
Post a Comment
Read more

Cyber Attack Countermeasures : Module 2 Quiz

Cyber Attack Countermeasures: Module 2 Quiz #cyber #quiz #course #era #answer #module 1 . Question 1 “Identification” in the process of authentication involves which of the following? 1 / 1  point Typing a password Keying in a passphrase Typing in User ID and password Typing in User ID None of the above Correct Correct! The definition of identification involves providing a user’s ID (identification). 2 . Question 2 Which of the following statements is true? 1 / 1  point Identifiers are secret Identifiers are not secret Identifiers are the secret part of authentication All of the above Correct Correct! Identifiers for users are generally not viewed by security experts as being secret. 3 . Question 3 Which of the following is not a good candidate for use as a proof factor in the authentication process? 1 / 1  point Making sure the User ID is correct Typing in a correct password Confirming location, regardless of the country you are in The move...
Post a Comment
Read more

Rectangular Microstrip Patch Antenna

Microstrip is a type of electrical transmission line which can be fabricated using printed circuit board technology, and is used to convey microwave-frequency signals. It consists of a conducting strip separated from a ground plane by a dielectric layer known as the substrate. The most commonly employed microstrip antenna is a rectangular patch which looks like a truncated  microstrip  transmission line. It is approximately of one-half wavelength long. When air is used as the dielectric substrate, the length of the rectangular microstrip antenna is approximately one-half of a free-space  wavelength . As the antenna is loaded with a dielectric as its substrate, the length of the antenna decreases as the relative  dielectric constant  of the substrate increases. The resonant length of the antenna is slightly shorter because of the extended electric "fringing fields" which increase the electrical length of the antenna slightly. An early model of the microst...
Read more