Bina Laman Web Pemasa Pomodoro

pengenalan

Helo, pembangun! Saya sangat teruja untuk memperkenalkan projek terbaharu saya: Pemasa Pomodoro. Projek ini sesuai untuk sesiapa sahaja yang ingin meningkatkan kemahiran pengurusan masa mereka atau mengamalkan pembangunan bahagian hadapan mereka. Pemasa Pomodoro ialah alat ringkas namun berkuasa yang direka untuk membantu anda memecahkan kerja anda ke dalam selang masa fokus, meningkatkan produktiviti dan mengekalkan fokus sepanjang hari.

Gambaran Keseluruhan Projek

Pemasa Pomodoro ialah aplikasi berasaskan web yang membolehkan pengguna menetapkan pemasa untuk sesi kerja terfokus, biasanya 25 minit, diikuti dengan rehat pendek. Projek ini menunjukkan cara membuat pemasa berfungsi menggunakan JavaScript, bersama-sama antara muka pengguna yang bersih dan responsif dengan HTML dan CSS.

Ciri-ciri

• Antara Muka Pemasa Mudah: Reka bentuk minimalis yang memaparkan pemasa undur dan kawalan.
• Mula, Hentikan, Tetapkan Semula: Pengguna boleh memulakan, menghentikan dan menetapkan semula pemasa dengan butang yang mudah digunakan.
• Makluman Pemberitahuan: Makluman dicetuskan apabila pemasa mencapai sifar, menandakan sesi tamat.

Teknologi yang Digunakan

• HTML: Menyediakan struktur untuk Pemasa Pomodoro.
• CSS: Menggayakan pemasa, memastikan reka bentuk yang bersih dan moden.
• JavaScript: Melaksanakan fungsi teras pemasa, termasuk logik kira detik dan interaksi pengguna.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

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

• index.html: Mengandungi struktur HTML untuk Pemasa Pomodoro.
• style.css: Termasuk gaya CSS untuk reka bentuk yang menarik secara visual dan responsif.
• script.js: Mengurus kefungsian pemasa, termasuk kira detik dan interaksi pengguna.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

1. Klon repositori:
   

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

2. Buka direktori projek:
   

   cd Pomodoro-Timer
   

3. Jalankan projek:

   • Buka fail index.html dalam penyemak imbas web untuk menggunakan Pemasa Pomodoro.

Penggunaan

1. Buka tapak web dalam penyemak imbas web.
2. Mulakan pemasa dengan mengklik butang "Mula".
3. Berhenti atau tetapkan semula pemasa mengikut keperluan menggunakan butang "Berhenti" dan "Tetapkan Semula".
4. Fokus pada kerja anda sehingga pemasa mencapai sifar, kemudian berehat sebentar sebelum memulakan sesi seterusnya.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Pemasa Pomodoro, termasuk pengepala, paparan pemasa dan butang kawalan. Berikut adalah coretan:

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

Fail style.css menggayakan Pemasa Pomodoro, memastikan ia menarik secara visual dan responsif. Di bawah ialah beberapa gaya utama:

.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;
}

JavaScript

Fail script.js mengandungi logik untuk Pemasa Pomodoro, termasuk mekanisme kira detik dan mengendalikan interaksi pengguna. Berikut ialah coretan:

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);

Demo Langsung

Anda boleh melihat demo langsung projek Pemasa Pomodoro di sini.

Kesimpulan

Membina Pemasa Pomodoro ialah pengalaman yang bermanfaat yang membolehkan saya mempraktikkan kemahiran bahagian hadapan yang penting seperti HTML, CSS dan JavaScript. Projek ini ialah alat yang hebat untuk meningkatkan produktiviti, dan saya harap ia memberi inspirasi kepada anda untuk mencipta alatan anda sendiri untuk pengurusan masa yang lebih baik. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan pembelajaran berterusan saya dalam pembangunan bahagian hadapan, dengan tumpuan untuk mencipta aplikasi web yang praktikal dan interaktif.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Pemasa Pomodoro. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!