Skip to main content

Analog Clock

#html code==>>
<!DOCTYPE html>
<html lang="en">
<head>
    <link href='E:\html\testpro\style.css' rel='stylesheet'>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clock</title>
</head>
<body>
    <div class="box">
        <div class="clock">
            <div class="hand" id='hr'></div>
            <div class="hand" id='min'></div>
            <div class="hand" id='sec'></div>
            <div class="point"></div>
        </div>
        <img src="C:\Users\Pratik\Pictures\Screenshots\clock.png" alt="clock">
    </div>
    <script src="E:\html\testpro\script.js" rel='text/js'></script>
</body>
</html>

#css code==>>
body{
    background-color: skyblue;
}

.box{
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.clock{
    position: absolute;
    border-radius: 50%;
    width: 350px;
    height: 350px;
    background: radial-gradient(150px,#f5e664,#e9c709);
    z-index: -10;
    border: 10px solid #e09807;
    box-shadow: 0 -8px 8px rgba(255,255,255,0.05),
                inset 0 -8px 8px rgba(255,255,255,0.05),
                0 8px 8px rgba(0,0,0,0.3),
                inset 0 8px 8px rgba(0,0,0,0.3);
    padding: 20px;
}

.clock: before{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 47%;
    left: 47%;
    background-color: #000;
    border-radius: 50%;
    z-index: 1;
}
.clock .hand{
    position: relative;
    background-color: #000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transform-origin: bottom;
}

#hr{
    width: 10px;
    height: 80px;
    top: 26%;
    left: 48%;
}
#min{
    width: 7px;
    height: 110px;
    top: -5%;
    left: 49%;
}
#sec{
    width: 4px;
    height: 140px;
    top: -45%;
    left: 49%;
}

#js code==>>
var hour = document.getElementById('hr');
var min = document.getElementById('min');
var sec = document.getElementById('sec');

var timenow = setInterval(time, 1000);
function time(){
    var date =  new Date();

    let h = date.getHours();
    let m = date.getMinutes();
    let s = date.getSeconds();

    let cal_hr = (h*30) + (m/2);
    let cal_min = (m*6) + (s/10);
    let cal_sec = s*6;

    hour.style.transform = 'rotate(' + cal_hr + 'deg)';
    min.style.transform = 'rotate(' + cal_min + 'deg)';
    sec.style.transform = 'rotate(' + cal_sec + 'deg)';
}

time();






To see how it works: click here

Code for Digital Clock: click here

Labels:

Comments

Post a Comment

Popular posts from this blog

Stock Market using Python

 "The stock market is a device for transferring money from the impatient to the patient." - Warren Buffett Today we'll look into few ways for accessing the stock market. And we'll do this using Python ! Now, as we know that there are 2 stock exchange in India; BSE and NSE So we'll get the data from both! To begin with let's access the data from BSE first. (P.S: I certainly like the 2nd and the 3rd method to access stock market!) * So, to import the BSE data we need to " pip install bsedata ". => And then import the module, => Create an object to store the Driver Class => Then we need to do " getQuote('script_code')" where we need to provide a script code of a company which we need to access. Just like here we have given; => And from here we can see that the script code was for the company named "V-MART". But we can't remember all the script code hence we need to download this script file from the BSE websi...
Post a Comment
Read more

Predicting whether the bank will give loan to its customers based on their credit score (Logistic Regression)

"The best thing about data is that it tells a story." - Naveen Jain Today let's have a look at another machine learning model know as Logistic Regression. Logistic Regression is a statistical model where the outcome is predicted as binary such as YES or NO, based on the previous/train_dataset. ( Please open the images in a new tab or try to zoom-in ) import required models read your dataframe visualize your dataset create Logistic Regression model split your data into train and test dataset fit your train dataset into the regression model predict future values visualize your predicted values Github link for pdf:  click here
Post a Comment
Read more

Slicing in Python

  * Let's first understand how a slicing is been done-- Consider a string namely==>> string = 'python_developer!' If we print this then-- #  Output: python_developer! >> Now lets do some slicing here-- print (string[0:17:2]) >> Then the-- # Output: pto_eeoe! >> Lets see how it works-- So basically the print statement is in the form of  print(string[a:b:c]) >>  Now here   --           a: Starting position b: Ending position c: Steps taken >> If we take out length of the given string then-- print (len(string)) # Output: 17 * The total length of the given string is 17. Therefore in our given problem the string will be printed from 0 index to 16 index and would take 2 steps. >> Hence the output-- # Output: pto_eeoe! >> Now the print statement that we have used here is-- print (string[0:17:2]) >> We can also use-- print (string[:17:2]) >> It will give the same output-- ...
Post a Comment
Read more