script.js

const container = document.querySelector('.clock-container');

container.style.position= 'absolute';
container.style.display= 'flex';
container.style.top = '0%';
container.style.left = '88%';
container.style.justifyContent = 'center';
container.style.alignItems = 'center';


const clockButton = document.getElementById('clock');

clockButton.style.position = 'relative';
clockButton.style.backgroundColor = 'black';
clockButton.style.color = 'white';
clockButton.style.borderRadius = '50%';
clockButton.style.fontSize = '10px';
clockButton.style.padding = '10px 20px';


// css styling for the stopwatch//

// body element//

const element = document.querySelector('body');
element.style.backgroundColor = 'black';
element.style.fontFamily = 'Franklin Gothic Medium, Arial Narrow, Arial, sans-serif';
element.style.display = 'flex';
element.style.justifyContent = 'center';
element.style.alignItems = 'center';

// create h1 element//

const heading = document.createElement('h1');

heading.innerText = 'Stopwatch';

heading.style.color = 'gray';
heading.style.fontSize = '17px';
heading.style.textAlign = 'center';
heading.style.position = 'absolute';
heading.style.top = '15%';

heading.addEventListener(('mouseover'), () => {
    heading.style.color = 'white';
    heading.style.transition = '1s ease-in-out';
    heading.style.fontWeight = '700';
    heading.style.cursor = 'pointer';
});

heading.addEventListener(('mouseout'), () => {
    heading.style.color = 'gray';
    heading.style.transition = '1s ease-in-out';
    heading.style.fontWeight = '400';
})

document.body.appendChild(heading);

//Stopwatch//

const stop = document.getElementById('Stopwatch');
stop.style.color = 'white'
stop.style.fontSize = '80px';

// watch element//

const watchElement = document.querySelector('.watch');
watchElement.style.textAlign = 'center';
watchElement.style.position = 'relative';
watchElement.style.top = '160px';
watchElement.style.borderRadius = '10px';
watchElement.style.width = '100vh';
watchElement.style.padding = '10px 20px 10px 20px';
watchElement.style.boxShadow = 'rgba(255, 255, 255, 0.56) 0px 22px 70px 4px';


// button element//

const buttonElement = document.querySelectorAll('button');

buttonElement.forEach((button) => {
    button.style.padding = '10px 30px';
    button.style.margin = '20px';
    button.style.fontSize = '15px';
    button.style.borderRadius = '5px';
    button.style.border = 'none';
    button.style.cursor = 'pointer';
    button.style.fontWeight = '600';
    button.style.fontfamily = 'Franklin Gothic Medium, Arial Narrow, Arial, sans-serif';
})

buttonElement.forEach((button) => {
    button.addEventListener(('mouseover'), () => {
        button.style.color = 'black';
        button.style.transform = 'scale(1.1)';
        button.style.transition = '1s ease-in-out';
    });

    button.addEventListener(('mouseout'), () => {
        button.style.backgroundColor = '';
        button.style.color = '';
        button.style.transform = 'scale(1)';
        button.style.transition = '1s ease-in-out';
    });
});

// css styling end here//


//functionality of the stopwatch//

let hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
let intervalId;
let isRunning = false;

function updateDisplay() {
    const display = document.getElementById('Stopwatch');
    display.innerText = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(3, '0')}`;
}

function startWatch() {
    if (!isRunning) {
        isRunning = true;
        intervalId = setInterval(() => {
            milliseconds += 10;
            if (milliseconds === 1000) {
                milliseconds = 0;
                seconds++;
            }
            if (seconds === 60) {
                seconds = 0;
                minutes++;
            }
            if (minutes === 60) {
                minutes = 0;
                hours++;
            }
            updateDisplay();
        }, 10);
    }
}

function Stopwatch() {
    if (isRunning) {
        clearInterval(intervalId);
        isRunning = false;
    }
}

function resetwatch() {
    clearInterval(intervalId);
    hours = 0;
    minutes = 0;
    seconds = 0;
    milliseconds = 0;
    isRunning = false;
    updateDisplay();
}

document.getElementById('start').addEventListener('click', startWatch);

document.getElementById('stop').addEventListener('click', Stopwatch);

document.getElementById('reset').addEventListener('click', resetwatch);