Bina Fokus pada Laman Web Hari Ini-tutorial css-php.cn

Bina Fokus pada Laman Web Hari Ini

WBOY

Lepaskan： 2024-09-03 12:46:56

asal

464 orang telah melayarinya

Build a Focus on Today Website

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya: aplikasi Fokus pada Hari. Projek ini sesuai untuk mereka yang ingin menjejaki fokus harian mereka dan memastikan mereka sentiasa menyelesaikan tugas mereka. Ini cara yang bagus untuk meningkatkan kemahiran pembangunan bahagian hadapan anda menggunakan HTML, CSS dan JavaScript sambil mencipta alat produktiviti yang berfungsi dan menarik secara visual.

Gambaran Keseluruhan Projek

Fokus pada Hari ialah aplikasi web yang direka untuk membantu pengguna kekal fokus pada tugas harian mereka. Dengan antara muka yang bersih dan mesra pengguna, ia membolehkan pengguna menetapkan fokus harian dan menjejaki kemajuan mereka sepanjang hari. Projek ini menunjukkan cara mencipta alat produktiviti praktikal menggunakan teknik pembangunan web moden.

Ciri-ciri

Antara Muka Mesra Pengguna: Aplikasi ini mempunyai reka bentuk yang ringkas dan intuitif, memudahkan pengguna menetapkan dan mengurus fokus harian mereka.
Reka Bentuk Responsif: Aplikasi ini responsif sepenuhnya, memberikan pengalaman tontonan yang optimum pada kedua-dua peranti desktop dan mudah alih.
Pengurusan Tugas: Pengguna boleh menetapkan fokus mereka untuk hari itu dan menjejaki kemajuan mereka semasa mereka berusaha ke arah mencapai matlamat mereka.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk aplikasi Fokus pada Hari.
CSS: Menggayakan aplikasi untuk mencipta reka bentuk yang bersih dan responsif.
JavaScript: Mengurus elemen interaktif, termasuk pengurusan tugasan dan penjejakan kemajuan.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

Focus-on-Day/
├── index.html
├── style.css
└── script.js

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk aplikasi Fokus pada Hari.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk yang menarik dan responsif.
script.js: Mengurus elemen interaktif, seperti menetapkan tugas dan menjejak kemajuan.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

git clone https://github.com/abhishekgurjar-in/Focus-on-Day.git

Salin selepas log masuk

Buka direktori projek:
```
cd Focus-on-Day
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web untuk melihat aplikasi Focus on Day.

Penggunaan

Buka aplikasi dalam penyemak imbas web.
Tetapkan fokus harian anda dengan memasukkan tugas atau matlamat dalam medan input.
Jejak kemajuan anda sambil anda bekerja sepanjang hari.
Kemas kini atau tukar fokus anda mengikut keperluan.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur aplikasi Fokus pada Hari, termasuk medan input untuk menetapkan fokus dan memaparkan kemajuan. Berikut adalah coretan:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
    <title>Focus on Day</title>
  </head>
  <body>
    <div class="container">
      <h1>Focus on Day</h1>
      <input type="text" id="focusInput" placeholder="Enter your focus for today..." />
      <button id="setFocusButton">Set Focus</button>
      <div id="focusDisplay"></div>
      <button id="clearFocusButton">Clear Focus</button>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Salin selepas log masuk

CSS

Fail style.css menggayakan aplikasi Focus on Day, memastikan ia menarik secara visual dan responsif. Di bawah ialah beberapa gaya utama:

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  margin-bottom: 20px;
  font-size: 24px;
}

input[type="text"] {
  padding: 10px;
  width: 80%;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

#focusDisplay {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.footer {
  margin-top: 20px;
  color: #333;
}

Salin selepas log masuk

JavaScript

Fail script.js mengandungi fungsi untuk menetapkan dan mengosongkan fokus harian. Berikut ialah coretan ringkas untuk demonstrasi:

document.getElementById('setFocusButton').addEventListener('click', function() {
  const focusInput = document.getElementById('focusInput').value;
  if (focusInput) {
    document.getElementById('focusDisplay').innerText = `Today's Focus: ${focusInput}`;
    document.getElementById('focusInput').value = '';
  }
});

document.getElementById('clearFocusButton').addEventListener('click', function() {
  document.getElementById('focusDisplay').innerText = '';
});

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Focus on Day di sini.

Kesimpulan

Membina aplikasi Fokus pada Hari merupakan pengalaman yang hebat dalam mencipta alat produktiviti yang mudah tetapi berkesan. Projek ini menekankan kepentingan pengurusan tugas dalam kekal fokus dan mencapai matlamat harian. Dengan menggunakan HTML, CSS dan JavaScript, kami telah membangunkan aplikasi yang membantu pengguna mengekalkan fokus mereka pada landasan sepanjang hari. Saya harap projek ini memberi inspirasi kepada anda untuk membina alat produktiviti anda sendiri. Selamat mengekod!