Bina Laman Web Pemasa Pomodoro-tutorial css-php.cn

Bina Laman Web Pemasa Pomodoro

王林

Lepaskan： 2024-08-25 20:31:36

asal

388 orang telah melayarinya

Build a Pomodoro Timer Website

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

Salin selepas log masuk

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:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Pomodoro-Timer
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web untuk menggunakan Pemasa Pomodoro.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Mulakan pemasa dengan mengklik butang "Mula".
Berhenti atau tetapkan semula pemasa mengikut keperluan menggunakan butang "Berhenti" dan "Tetapkan Semula".
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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pomodoro Timer</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <h1 class="title">Pomodoro Timer</h1>
      <p class="timer" id="timer">25:00</p>
      <div class="button-wrapper">
        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <button id="reset">Reset</button>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!