建立關註今日的網站-css教學-PHP中文網

Build a Focus on Today Website

介紹

開發者們大家好！我很高興分享我的最新項目：Focus on Day應用程式。該專案非常適合想要追蹤日常重點並確保他們掌控任務的人。這是使用 HTML、CSS 和 JavaScript 來增強前端開發技能的好方法，同時創建強大且具有視覺吸引力的生產力工具。

項目概況

Focus on Day是一款 Web 應用程序，旨在幫助用戶專注於日常任務。憑藉乾淨且用戶友好的介面，它允許用戶設定每日焦點並追蹤他們全天的進度。此專案示範如何使用現代 Web 開發技術創建實用的生產力工具。

特徵

使用者友善的介面：該應用程式具有簡單直覺的設計，使用戶可以輕鬆設定和管理他們的日常焦點。
響應式設計：應用程式完全響應式，在桌面和行動裝置上提供最佳的觀看體驗。
任務管理：使用者可以設定當天的重點並追蹤他們實現目標的進度。

使用的技術

HTML：提供 Focus on Day 應用程式的結構。
CSS：設定應用程式的樣式以建立乾淨且響應式的設計。
JavaScript：管理互動元素，包括任務管理和進度追蹤。

專案結構

以下是項目結構的概述：

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

登入後複製

index.html：包含 Focus on Day 應用程式的 HTML 結構。
style.css：包含 CSS 樣式以創造引人入勝且響應式的設計。
script.js：管理互動元素，例如設定任務和追蹤進度。

安裝

要開始該項目，請按照以下步驟操作：

複製儲存庫：

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

登入後複製

開啟專案目錄:
```
cd Focus-on-Day
```
登入後複製
運行項目:
- 在 Web 瀏覽器中開啟 index.html 檔案以查看 Focus on Day 應用程式。

用法

在網頁瀏覽器中開啟應用程式。
透過在輸入欄位中輸入任務或目標來設定您的日常重點。
在一天的工作中追蹤您的進度。
根據需要更新或改變您的焦點。

程式碼說明

超文本標記語言

index.html 檔案定義 Focus on Day 應用程式的結構，包括用於設定焦點和顯示進度的輸入欄位。這是一個片段：

       Focus on Day 
   Focus on Day
   
  
  Made with ❤️ by Abhishek Gurjar

登入後複製

CSS

style.css 檔案對 Focus on Day 應用程式進行樣式設置，確保其具有視覺吸引力和響應能力。以下是一些關鍵樣式：

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

登入後複製

JavaScript

script.js 檔案包含設定和清除每日焦點的功能。這是一個簡單的示範片段：

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 = ''; });

登入後複製