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.
ThePomodoro Timerialah 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 dengan antara muka pengguna yang bersih dan responsif dengan HTML dan CSS.
Berikut ialah gambaran keseluruhan struktur projek:
Pomodoro-Timer/ ├── index.html ├── style.css └── script.js
Untuk memulakan projek, ikut langkah berikut:
Klon repositori:
git clone https://github.com/abhishekgurjar-in/Pomodoro-Timer.git
Buka direktori projek:
cd Pomodoro-Timer
Jalankan projek:
Fail index.html mentakrifkan struktur Pemasa Pomodoro, termasuk pengepala, paparan pemasa dan butang kawalan. Berikut adalah coretan:
Pomodoro Timer Pomodoro Timer
25:00
Fail style.css menggayakan Pemasa Pomodoro, memastikan ia menarik secara visual dan responsif. Di bawah adalah 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; }
Fail script.js mengandungi logik untuk Pemasa Pomodoro, termasuk mekanisme kira detik dan mengendalikan interaksi pengguna. Berikut adalah 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);
Anda boleh melihat demo langsung projek Pemasa Pomodoro di sini.
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!
Projek ini dibangunkan sebagai sebahagian daripada perjalanan pembelajaran berterusan saya dalam pembangunan bahagian hadapan, dengan tumpuan untuk mencipta aplikasi web yang praktikal dan interaktif.
Atas ialah kandungan terperinci Bina Laman Web Pemasa Pomodoro. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!