Pomodoro 타이머 웹사이트 구축

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 포모도로 타이머를 소개하게 되어 기쁩니다. 이 프로젝트는 시간 관리 기술을 향상시키거나 프런트엔드 개발을 연습하려는 모든 사람에게 적합합니다. Pomodoro 타이머는 작업을 집중된 간격으로 나누어 생산성을 향상하고 하루 종일 집중력을 유지할 수 있도록 설계된 간단하면서도 강력한 도구입니다.

프로젝트 개요

포모도로 타이머는 사용자가 집중적인 작업 세션(일반적으로 25분 후 짧은 휴식)에 대한 타이머를 설정할 수 있는 웹 기반 애플리케이션입니다. 이 프로젝트는 HTML 및 CSS를 사용한 깔끔하고 반응성이 뛰어난 사용자 인터페이스와 함께 JavaScript를 사용하여 기능적인 타이머를 만드는 방법을 보여줍니다.

특징

• 간단한 타이머 인터페이스: 카운트다운 타이머와 컨트롤을 표시하는 미니멀한 디자인
• 시작, 중지, 재설정: 사용자는 사용하기 쉬운 버튼으로 타이머를 시작, 중지 및 재설정할 수 있습니다.
• 알림 경고: 타이머가 0에 도달하면 경고가 발생하여 세션 종료를 알립니다.

사용된 기술

• HTML: Pomodoro 타이머의 구조를 제공합니다.
• CSS: 타이머 스타일을 지정하여 깨끗하고 현대적인 디자인을 보장합니다.
• JavaScript: 카운트다운 로직 및 사용자 상호작용을 포함하여 타이머의 핵심 기능을 구현합니다.

프로젝트 구조

프로젝트 구조 개요는 다음과 같습니다.

Pomodoro-Timer/
├── index.html
├── style.css
└── script.js

• index.html: Pomodoro 타이머의 HTML 구조를 포함합니다.
• style.css: 시각적으로 매력적이고 반응성이 뛰어난 디자인을 위한 CSS 스타일을 포함합니다.
• script.js: 카운트다운 및 사용자 상호작용을 포함한 타이머 기능을 관리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

1. 저장소 복제:
   

   git clone https://github.com/abhishekgurjar-in/Pomodoro-Timer.git
   

2. 프로젝트 디렉토리 열기:
   

   cd Pomodoro-Timer
   

3. 프로젝트 실행:

   • 포모도로 타이머를 사용하려면 웹 브라우저에서 index.html 파일을 열어보세요.

용법

1. 웹사이트를 엽니다 웹 브라우저에서
2. 타이머를 시작하세요 "시작" 버튼을 클릭하세요.
3. 필요에 따라 "중지" 및 "재설정" 버튼을 사용하여 타이머를 중지하거나 재설정하세요.
4. 일에 집중하세요 타이머가 0이 될 때까지 잠시 쉬다가 다음 세션을 시작하세요.

코드 설명

HTML

index.html 파일은 헤더, 타이머 표시, 제어 버튼 등 포모도로 타이머의 구조를 정의합니다. 다음은 스니펫입니다.

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Pomodoro Timer6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
      527db218a609cb4e96157e28dc6f988cPomodoro Timer473f0a7621bec819994bb5020d29372a
      38e8f75036b4e9396a1cc6cc0591514e25:0094b3e26ee717c64999d7867364b1b4a3
      60842b9d6c79533b42cd0c6cd7485212
        443c620cf48a4716b774dd4364035d74Start65281c5ac262bf6d81768915a4a77ac0
        a7a60cea450f42b2b97b16a5d74b9609Stop65281c5ac262bf6d81768915a4a77ac0
        2da760dc65e610b23ad3e603d5b03982Reset65281c5ac262bf6d81768915a4a77ac0
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

style.css 파일은 Pomodoro 타이머의 스타일을 지정하여 시각적으로 매력적이고 반응성이 뛰어납니다. 다음은 몇 가지 주요 스타일입니다.

.container {
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
  padding: 20px;
  font-family: "Roboto", sans-serif;
}

.title {
  font-size: 36px;
  margin-bottom: 10px;
  color: #2c3e50;
}

.timer {
  font-size: 72px;
  color: #2c3e50;
}

button {
  font-size: 18px;
  padding: 10px 20px;
  margin: 10px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity 0.3s ease-in-out;
}

button:hover {
  opacity: 0.7;
}

#start {
  background-color: #27ae60;
}

#stop {
  background-color: #c0392b;
}

#reset {
  background-color: #7f8c8d;
}

.footer {
  margin-top: 250px;
  text-align: center;
}

자바스크립트

script.js 파일에는 카운트다운 메커니즘 및 사용자 상호 작용 처리를 포함하여 Pomodoro 타이머에 대한 논리가 포함되어 있습니다. 다음은 일부 내용입니다.

const startEl = document.getElementById("start");
const stopEl = document.getElementById("stop");
const resetEl = document.getElementById("reset");
const timerEl = document.getElementById("timer");

let interval;
let timeLeft = 1500;

function updateTimer() {
  let minutes = Math.floor(timeLeft / 60);
  let seconds = timeLeft % 60;
  let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds
    .toString()
    .padStart(2, "0")}`;

  timerEl.innerHTML = formattedTime;
}

function startTimer() {
  interval = setInterval(() => {
    timeLeft--;
    updateTimer();
    if (timeLeft === 0) {
      clearInterval(interval);
      alert("Time's up!");
      timeLeft = 1500;
      updateTimer();
    }
  }, 1000);
}

function stopTimer() {
  clearInterval(interval);
}

function resetTimer() {
  clearInterval(interval);
  timeLeft = 1500;
  updateTimer();
}

startEl.addEventListener("click", startTimer);
stopEl.addEventListener("click", stopTimer);
resetEl.addEventListener("click", resetTimer);

라이브 데모

여기에서 Pomodoro Timer 프로젝트의 라이브 데모를 확인하실 수 있습니다.

결론

Pomodoro Timer를 구축하는 것은 HTML, CSS, JavaScript와 같은 필수 프런트엔드 기술을 연습할 수 있는 보람 있는 경험이었습니다. 이 프로젝트는 생산성 향상을 위한 훌륭한 도구이며, 더 나은 시간 관리를 위한 자신만의 도구를 만드는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!

크레딧

이 프로젝트는 실용적이고 대화형 웹 애플리케이션을 만드는 데 중점을 두고 프런트 엔드 개발에 대한 지속적인 학습 여정의 일환으로 개발되었습니다.

작가

• 아비셰크 구자르
  • GitHub 프로필

위 내용은 Pomodoro 타이머 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!