ts programowanie

const clockDisplay = document.querySelector(".box__clock__time") as HTMLElement;
const dateDisplay = document.querySelector(".box__clock__date") as HTMLElement;
const canvas = document.querySelector('#clock') as HTMLCanvasElement;
canvas.width = canvas.height = 200;

const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
const timezoneSelect = document.querySelector(".box__clock_timezone-select") as HTMLSelectElement;

function updateClock() {
  const date = new Date();
  const selectedTimezone = timezoneSelect.value as string;

  const dateOptions: Intl.DateTimeFormatOptions = {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    timeZone: selectedTimezone,
  };

  const timeOptions: Intl.DateTimeFormatOptions = {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
    timeZone: selectedTimezone,
  };

  const dateString = date.toLocaleDateString('en-US', dateOptions).replace(/\//g, '.');
  const timeString = date.toLocaleTimeString('en-US', timeOptions);
  const [hours, minutes, seconds] = timeString.split(':').map(num => parseInt(num, 10));

  dateDisplay.innerHTML = dateString;
  clockDisplay.innerHTML = timeString;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = 80;

  ctx.translate(centerX, centerY);

  const hourAngle = (hours % 12) / 12 * 2 * Math.PI + minutes / 60 * 2 * Math.PI / 12;
  const hourHandLength = radius * 0.5;

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(Math.sin(hourAngle) * hourHandLength, -Math.cos(hourAngle) * hourHandLength);
  ctx.lineWidth = 3;
  ctx.stroke();

  const minuteAngle = minutes / 60 * 2 * Math.PI;
  const minuteHandLength = radius * 0.9;

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(Math.sin(minuteAngle) * minuteHandLength, -Math.cos(minuteAngle) * minuteHandLength);
  ctx.strokeStyle = '#FFFFFF';
  ctx.stroke();

  const secondAngle = seconds / 60 * 2 * Math.PI;
  const secondHandLength = radius * 1;

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(Math.sin(secondAngle) * secondHandLength, -Math.cos(secondAngle) * secondHandLength);
  ctx.strokeStyle = '#FFFFFF';
  ctx.stroke();

  ctx.translate(-centerX, -centerY);

  ctx.font = '16px Montserrat';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  ctx.beginPath();
  ctx.fillStyle = "white";
  const offset = 10;
  for (let i = 1; i <= 12; i++) {
    const angle = i / 12 * 2 * Math.PI;
    const numberX = centerX + Math.sin(angle) * radius + offset;
    const numberY = centerY - Math.cos(angle) * radius - 3;

    ctx.fillText('.', numberX, numberY);
  }

}

updateClock();
setInterval(updateClock, 1000);
























const display = document.querySelector('.box__stopwatch__display') as HTMLSpanElement;
const startButton = document.querySelector('.box__stopwatch__button--start') as HTMLButtonElement;
const stopButton = document.querySelector('.box__stopwatch__button--stop') as HTMLButtonElement;
const resetButton = document.querySelector('.box__stopwatch__button--reset') as HTMLButtonElement;

let startTime: number = 0;
let elapsedTime: number = 0;
let timerId: number;

const formatTime = (time: number): string => {
  const minutes = Math.floor(time / 60000);
  const seconds = ((time % 60000) / 1000).toFixed(0);
  const milliseconds = (time % 1000).toFixed(0).toString().padStart(3, '0');
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds}`;
}


const updateDisplay = () => {
  elapsedTime = Date.now() - startTime;
  display.textContent = formatTime(elapsedTime);
}

const startTimer = () => {
  startTime = Date.now() - elapsedTime;
  timerId = setInterval(updateDisplay, 10);
}

function stopTimer() {
  clearInterval(timerId);
}

const resetTimer = () => {
  clearInterval(timerId);
  elapsedTime = 0;
  display.textContent = '00:00.00';
}

startButton.addEventListener('click', startTimer);
stopButton.addEventListener('click', stopTimer);
resetButton.addEventListener('click', resetTimer);