오늘의 웹사이트에 집중하세요-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

오늘의 웹사이트에 집중하세요

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 03, 2024 pm 12:46 PM

Build a Focus on Today Website

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 Focus on Day 애플리케이션을 공유하게 되어 기쁩니다. 이 프로젝트는 매일의 집중 사항을 추적하고 작업을 완벽하게 수행하려는 사람들에게 이상적입니다. 기능적이고 시각적으로 매력적인 생산성 도구를 만들면서 HTML, CSS 및 JavaScript를 사용하여 프런트엔드 개발 기술을 향상시킬 수 있는 좋은 방법입니다.

프로젝트 개요

집중은 사용자가 일상 업무에 집중할 수 있도록 설계된 웹 애플리케이션입니다. 깔끔하고 사용자 친화적인 인터페이스를 통해 사용자는 매일의 초점을 설정하고 하루 종일 진행 상황을 추적할 수 있습니다. 이 프로젝트는 최신 웹 개발 기술을 사용하여 실용적인 생산성 도구를 만드는 방법을 보여줍니다.

특징

사용자 친화적인 인터페이스: 이 애플리케이션은 간단하고 직관적인 디자인을 갖추고 있어 사용자가 일상의 초점을 쉽게 설정하고 관리할 수 있습니다.
반응형 디자인: 이 애플리케이션은 완벽하게 반응하여 데스크톱과 모바일 장치 모두에서 최적의 보기 환경을 제공합니다.
작업 관리: 사용자는 하루의 집중도를 설정하고 목표 달성을 위해 작업하는 과정을 추적할 수 있습니다.

사용된 기술

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
```
로그인 후 복사
프로젝트 실행:
- Focus on Day 애플리케이션을 보려면 웹 브라우저에서 index.html 파일을 엽니다.

용법

웹 브라우저에서 애플리케이션을 엽니다.
입력 필드에 작업이나 목표를 입력하여 일상 집중을 설정하세요.
하루 종일 작업하면서 진행 상황을 추적하세요.
필요에 따라 초점을 업데이트하거나 변경하세요.

코드 설명

HTML

index.html 파일은 포커스 설정 및 진행 상황 표시를 위한 입력 필드를 포함하여 Focus on Day 애플리케이션의 구조를 정의합니다. 다음은 일부 내용입니다.

<!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>

로그인 후 복사

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

로그인 후 복사

자바스크립트

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

로그인 후 복사

라이브 데모

여기에서 Focus on Day 프로젝트의 라이브 데모를 확인하실 수 있습니다.

결론

Focus on Day 애플리케이션을 구축하는 것은 간단하면서도 효과적인 생산성 도구를 만드는 환상적인 경험이었습니다. 이 프로젝트는 집중력을 유지하고 일일 목표를 달성하는 데 있어 작업 관리의 중요성을 강조합니다. HTML, CSS, JavaScript를 적용하여 사용자가 하루 종일 집중할 수 있도록 돕는 애플리케이션을 개발했습니다. 이 프로젝트가 여러분이 자신만의 생산성 도구를 구축하는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!