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

首頁

web前端

css教學

建立關註今日的網站

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 03, 2024 pm 12:46 PM

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 應用程式的結構，包括用於設定焦點和顯示進度的輸入欄位。這是一個片段：


  
    <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>
  
  
    <div class="container">
      <h1 id="Focus-on-Day">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>

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