연령 계산기 웹사이트 구축

소개

안녕하세요, 개발자 여러분! 오늘은 제가 최근 완료한 프로젝트인 나이 계산기를 공유하게 되어 기쁩니다. 이 프로젝트를 통해 사용자는 생년월일을 기준으로 정확한 나이를 계산할 수 있으며 그 결과는 명확하고 사용자 친화적인 인터페이스로 제공됩니다. 실용적인 것을 구축하면서 특히 날짜 및 시간 기능을 사용하여 JavaScript 작업을 연습할 수 있는 좋은 방법입니다.

프로젝트 개요

나이 계산기는 사용자가 현재 나이를 연, 월, 일 단위로 쉽게 확인할 수 있도록 설계되었습니다. 사용자는 생년월일을 입력하고 버튼을 클릭하면 나이가 표시됩니다. 이 프로젝트는 날짜 처리 및 대화형 웹 애플리케이션 구축 기술을 향상시키려는 개발자에게 적합합니다.

특징

• 날짜 입력: 정확한 입력을 위해 날짜 선택기를 이용하여 생년월일을 입력할 수 있습니다.
• 나이 계산: 애플리케이션은 사용자의 정확한 나이를 일수까지 계산합니다.
• 반응형 디자인: 이 도구는 반응형으로 설계되어 다양한 기기와 화면 크기에서 원활하게 작동합니다.

사용된 기술

• HTML: 웹페이지 콘텐츠를 구성하는 데 사용됩니다.
• CSS: 웹페이지 스타일을 지정하고 다양한 기기에서 반응하는지 확인하는 데 적용됩니다.
• JavaScript: 연령 계산 로직을 처리하고 DOM을 업데이트하기 위해 구현되었습니다.

프로젝트 구조

프로젝트 구조를 간단히 살펴보겠습니다.

Age-Calculator/
├── index.html
├── style.css
└── script.js

• index.html: 웹페이지의 HTML 구조를 포함합니다.
• style.css: 반응형 디자인 규칙을 포함한 CSS 스타일을 보유합니다.
• script.js: JavaScript를 사용하여 페이지의 동적 측면을 관리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

1. 저장소 복제:
   

   git clone https://github.com/abhishekgurjar-in/Age-Calculator.git
   

2. 프로젝트 디렉토리 열기:
   

   cd Age-Calculator
   

3. 프로젝트 실행:

   • 로컬 서버에서 실행하거나 간단히 웹 브라우저에서 index.html 파일을 열 수 있습니다.

용법

1. 웹사이트를 엽니다 웹 브라우저에서
2. 생년월일을 입력하세요 날짜 선택기 입력을 사용하세요.
3. "나이 계산" 버튼을 클릭하면 화면에 표시되는 정확한 나이를 확인할 수 있습니다.

코드 설명

HTML

index.html 파일에는 입력 양식과 계산된 연령이 표시되는 섹션을 포함한 웹페이지의 구조가 포함되어 있습니다. 다음은 HTML 코드의 일부입니다:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
  1fc2df4564f5324148703df3b6ed50c1
  4f2fb0231f24e8aef524fc9bf9b9874f
  b2386ffb911b14667cb8f0f91ea547a7Age Calculator6e916e0f7d1e588d4f442bf645aedb2f
  097655f07349bae5bc1e68fdb79ed306
  468dcf7b0ee61aef03af1a1fbe6725fc
  5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
  924ff17625d603f964501dd897c96cc6
    4a249f0d628e2318394fd9b75b4636b1Age Calculator473f0a7621bec819994bb5020d29372a
  16b28748ea4df4d9c2150843fecfba68

  4883ec0eb33c31828b7c767c806e14c7
    6aee8d1285fa83b7a99788e2e8734436
      2b836c77cbbab63c3f9e4b62c3ecc02aEnter your date of birth94b3e26ee717c64999d7867364b1b4a3
      53fcc26495096764d98f5e40e6cb0a78
      0daa849bc639fff17b006ca8cf3a07caCalculate Age65281c5ac262bf6d81768915a4a77ac0
      9369b95c0a54fa14078c71ff87b92a53Your age is 21 years old94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  16b28748ea4df4d9c2150843fecfba68

  ffd6ba4147bda351239915f463e46e38
    e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
  16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

style.css 파일에는 웹페이지가 시각적으로 매력적이고 반응성이 뛰어나도록 하는 스타일이 포함되어 있습니다. 주요 스타일은 다음과 같습니다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Manrope", sans-serif;
  width: 100%;
  height: 100vh;
  background: #2962ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.header {
  margin-bottom: 80px;
  text-align: center;
}
.container {
  background: black;
  color: white;
  width: 600px;
  height: 300px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  font-weight: bold;
  margin: 20px;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  max-width: 300px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  margin: 20px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0062cc;
}

#result {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}


.footer {
  margin: 70px;
  text-align: center;
}
.footer p{
  font-size: 14px;
  font-weight: 400;
}

자바스크립트

script.js 파일은 연령 계산 로직을 관리하고 웹페이지에 결과를 업데이트합니다. 다음은 JavaScript 코드의 일부입니다.

const btnE1 = document.getElementById("btn");
const birthE1 = document.getElementById("birthday");
const resultE1 = document.getElementById("result");

function calculateAge() {
  const birthdayValue = birthE1.value;
  if (birthdayValue === "") {
    alert("Please enter your birthday");
  } else {
    const age = getAge(birthdayValue);
    resultE1.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old.`;
  }
}

function getAge(birthdayValue) {
  const birthdayDate = new Date(birthdayValue);
  const currentDate = new Date();
  let age = currentDate.getFullYear() - birthdayDate.getFullYear();
  const month = currentDate.getMonth() - birthdayDate.getMonth();

  if (
    month < 0 ||
    (month === 0 && currentDate.getDate() < birthdayDate.getDate())
  ) {
    age--;
  }

  return age;
}

btnE1.addEventListener("click", calculateAge);

라이브 데모

나이 계산기의 라이브 데모를 여기에서 확인하실 수 있습니다.

결론

이 연령 계산기를 구축하는 것은 날짜 작업 및 대화형 웹 애플리케이션 구축에 대한 이해를 심화할 수 있는 보람 있는 경험이었습니다. 이 프로젝트가 귀하의 학습 여정에 유용하고 통찰력이 있기를 바랍니다. 자유롭게 코드를 탐색하고 필요에 맞게 조정하세요. 즐거운 코딩하세요!

크레딧

이 프로젝트는 간단하고 효과적인 연령 계산 도구의 필요성에서 영감을 받았습니다.

작가

• 아비셰크 구자르
  • GitHub 프로필

위 내용은 연령 계산기 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!