<!DOCTYPE html>
<html lang="en">

<head>
    <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>

    <style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --primary-color: #000;
    --secondary-color: #fff;
}
html{
    transition: all 0.5s ease-in;
}
html.dark{
    --primary-color: #fff;
    --secondary-color: #000;
}
html.dark{
    background-color: #111;
    color: var(--primary-color);
}
body{
    font-family: 'roboto', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.toggle{
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: 0;
    border-radius: 4px;
    padding: 8px 12px;
    position: absolute;
    top: 3%;
    left:50%;
    transform: translate(-50%, -3%);
    cursor: pointer;
    
}

.toggle:focus{
    outline: none;
}

.clock-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.clock{
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: #4e4d4d2f;
    border: 2px solid rgb(97, 16, 7);
    box-shadow:  -1px -1px 9px 2px #1616168e;
}

.needle{
    background-color: var(--primary-color);
    position: absolute;
    top: 50%;
    left: 50%;
    height: 65px;
    width: 3px;
    transform-origin:bottom center ;
    transition: all 0.2s ease-in;
    border-radius: 40%;
}

.needle.hour{
    transform: translate(-50%, -100%) rotate(0deg);
}

.needle.minute{
    transform: translate(-50%, -100%) rotate(0deg);
    height: 100px;
}

.needle.second{
    transform: translate(-50%, -100%) rotate(0deg);
    height: 100px;
    background-color: #e74c3c;
}

.clock-dial {
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 230px;
            height: 230px;
        }
        .clock-dial .clock-indicator {
            position: absolute;
            width: 2px;
            height: 6px;
            margin: 113px 114px;
            background-color: rgb(87, 72, 72);
        }
        .clock-indicator:nth-child(1) {
            transform: rotate(30deg) translateY(-113px);
        }
        .clock-indicator:nth-child(2) {
            transform: rotate(60deg) translateY(-113px);
        }
        .clock-indicator:nth-child(3) {
            transform: rotate(90deg) translateY(-113px);
            background-color: rgb(117, 110, 110);
        }
        .clock-indicator:nth-child(4) {
            transform: rotate(120deg) translateY(-113px);
        }
        .clock-indicator:nth-child(5) {
            transform: rotate(150deg) translateY(-113px);
        }
        .clock-indicator:nth-child(6) {
            transform: rotate(180deg) translateY(-113px);
            background-color: #aaa;
        }
        .clock-indicator:nth-child(7) {
            transform: rotate(210deg) translateY(-113px);
        }
        .clock-indicator:nth-child(8) {
            transform: rotate(240deg) translateY(-113px);
        }
        .clock-indicator:nth-child(9) {
            transform: rotate(270deg) translateY(-113px);
            background-color: #aaa;
        }
        .clock-indicator:nth-child(10) {
            transform: rotate(300deg) translateY(-113px);
        }
        .clock-indicator:nth-child(11) {
            transform: rotate(330deg) translateY(-113px);
        }
        .clock-indicator:nth-child(12) {
            transform: rotate(360deg) translateY(-113px);
            background-color: #c00;
        }

.center-point{
    background-color: #e74c3c;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.center-point::after{
    content: '';
    background-color: var(--primary-color);
    width: 5px;
    height: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.time{
    font-size: 60px;
}

.date{
    color: #aaa;
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.date .circle{
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 50%;
    height: 18px;
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 18px;
    transition: all 0.5s ease-in;
    font-size: 12px;
}
        
    </style>
<button class="toggle">Dark mode</button>
    <div class="clock-container">
        <div class="clock">
            <div class="needle hour"></div>
            <div class="needle minute"></div>
            <div class="needle second"></div>
            <div class="center-point"></div>
            <div class="clock-dial">
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
                <div class="clock-indicator"></div>
            </div>
        </div>

        <div class="time"></div>
        <div class="date"><span class="circle"></span></div>
    </div>
</body>
<script>
const hourEl = document.querySelector('.hour');
const minuteEl = document.querySelector('.minute');
const secondEl = document.querySelector('.second');
const timeEl = document.querySelector('.time');
const dateEl = document.querySelector('.date');
const toggle = document.querySelector('.toggle');

const days = ["Sunday", "Monday", "tuesday", "Wednesday", "Thursday", "Friday", "Saterday"];
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

toggle.addEventListener('click', (e) => {
    const html = document.querySelector('html');
    if(html.classList.contains('dark')){
        html.classList.remove('dark')
        e.target.innerHTML = 'Dark mode';
    } else{
        html.classList.add('dark')
        e.target.innerHTML = 'Light mode';
    }
});

function setTime(){
    const time = new Date();
    const month = time.getMonth();
    const day = time.getDay();
    const date = time.getDate();
    const hours = time.getHours();
    const hoursForClock = hours % 12;
    const minutes = time.getMinutes();
    const seconds = time.getSeconds();
    const ampm = hours >= 12 ? 'PM' : 'AM';

    hourEl.style.transform=`translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 11, 0, 360)}deg)`;
    minuteEl.style.transform=`translate(-50%, -100%) rotate(${scale(minutes, 0, 59, 0, 360)}deg)`;
    secondEl.style.transform=`translate(-50%, -100%) rotate(${scale(seconds, 0, 59, 0, 360)}deg)`;

    timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}`: minutes} ${ampm}`;

    dateEl.innerHTML =`${days[day]}, ${months[month]} <span class="circle">${date}</span>`;
}

const scale = (num, in_min, in_max, out_min, Out_max) => {
    return(num - in_min) * (Out_max - out_min) / (in_max -in_min) + out_min;
}

setTime();

setInterval(setTime, 1000);

</script>

</html>
5 Reacties

Bilal op september 26, 2022 om 10:11 am

Wowww I like it so much 🕰
Antwoord
- Sami op september 26, 2022 om 11:58 am
  
  I agree with you
  Antwoord
Samuel op september 26, 2022 om 11:56 am

Great one Keep doing that work
Antwoord
Rashed op september 26, 2022 om 6:53 pm

Amazing website 💯 I like it ! Keep going and good luck.
Antwoord
- admin op september 26, 2022 om 6:59 pm
  
  Thanks everybody I really appreciate it 🙏🏼
  Antwoord