A Clock Design With Coding

-

 @codingwithbharath


HTML:

<!DOCTYPE html>
<html>

<head> </head>

<body>
    <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>
</body>

</html>


CSS:

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #091921;
}

.clock {
    width: 300px;
    height: 300px;
    background-image: url("https://res.cloudinary.com/da66pcapb/image/upload/v1685789152/Analog-clock-background_wzmd5z.png");
    border-radius: 50%;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
        inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
        inset 0 15px 15px rgba(0, 0, 0, 0.3);
}

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

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

.hr {
    width: 160px;
    height: 160px;
}

.mn {
    width: 190px;
    height: 190px;
}

.sc {
    width: 230px;
    height: 230px;
}

.hr,
.mn,
.sc {
    display: flex;
    justify-content: center;
}

.hr::before {
    content: "";
    width: 8px;
    height: 80px;
    background-color: #06fd2f;
    z-index: 100;
    border-radius: 5px;
}

.mn::before {
    content: "";
    width: 6px;
    height: 90px;
    background-color: rgba(15, 105, 207);
    z-index: 11;
    border-radius: 5px;
}

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


JS

const deg = 6; //360deg / 60(min||sec) => 6
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");

setInterval(() => {
    let day = new Date();
    let hh = day.getHours() * 30; //360deg / 12 hour => 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)`;

});

Comments

Post a Comment

Popular posts from this blog

The Best AWS Institute in Hyderabad - Get Trained and Certified in AWS

-
Image
AWS training and certification in Hyderabad Amazon Web Services (AWS) is the most popular cloud computing platform, used by businesses of all sizes worldwide. AWS provides a wide range of cloud services, including computing, storage, and databases, to help organizations scale and grow efficiently. As more businesses move towards cloud computing, the demand for AWS professionals is on the rise. Therefore, it's crucial to learn AWS and gain expertise in it to stand out in the job market. Why AWS Training and Certification is Essential? AWS offers a range of certifications to validate and recognize the skills and knowledge of cloud professionals. The certifications are divided into different levels, such as foundational, associate, and professional, based on the complexity of the exam. AWS certifications are globally recognized and highly respected by employers, making them an essential requirement for anyone seeking a career in cloud computing. AWS certifications are not only a mark ...
Read more

Digital Marketing Agency: Gateway to Digital Excellence

-
Image
  Digital Marketing Agency: Gateway to Digital Excellence In the vast landscape of The digital marketing agency, where every click counts and every impression matters, there’s a partner that goes beyond the ordinary – Work Fellow. Step into a world where innovation meets strategy, and your business finds its digital home.   Who Are We  As The Digital Marketing Agency Team At Work Fellow, we’re not just a The digital marketing agency; we’re architects of online success, and collaborators in your journey to digital excellence. Our team comprises seasoned experts, each passionate about weaving compelling narratives, creating impactful campaigns, and propelling your brand to new heights. Why Choose Work Fellow As the Digital Marketing Agency: Tailored Strategies:   No two businesses are alike, and neither are our strategies. We take the time to understand your unique needs, goals, and challenges, creating customized plans that are as unique as your brand. Innovative Sol...
Read more