年齢計算ウェブサイトの構築-CSSチュートリアル-php.cn

年齢計算ウェブサイトの構築

王林

リリース： 2024-08-10 06:44:03

オリジナル

934 人が閲覧しました

Building a Age Calculator Website

導入

開発者の皆さん、こんにちは！今日は、私が最近完了したプロジェクト、年齢計算機を共有できることを嬉しく思います。このプロジェクトでは、ユーザーが生年月日に基づいて正確な年齢を計算し、その結果を明確で使いやすいインターフェイスで提供することができます。これは、実用的なものを構築しながら、JavaScript、特に日付と時刻の関数の操作を練習するのに最適な方法です。

プロジェクト概要

年齢計算機は、ユーザーが現在の年齢を年、月、日で簡単に確認できるように設計されています。ユーザーは生年月日を入力するだけで、ボタンをクリックするだけで年齢が表示されます。このプロジェクトは、日付の処理とインタラクティブな Web アプリケーションの構築のスキルを向上させたい開発者に最適です。

特徴

日付入力: ユーザーは正確に入力するために日付ピッカーを使用して生年月日を入力できます。
年齢計算: アプリケーションはユーザーの正確な年齢を日数まで計算します。
レスポンシブデザイン: このツールはレスポンシブになるように設計されており、さまざまなデバイスや画面サイズでもスムーズに動作します。

使用されている技術

HTML: Web ページ上のコンテンツの構造化に使用されます。
CSS: Web ページのスタイルを設定し、さまざまなデバイスで応答できるようにするために適用されます。
JavaScript: 年齢計算ロジックの処理と DOM の更新のために実装されています。

プロジェクトの構造

プロジェクトの構造を簡単に見てみましょう:

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

ログイン後にコピー

index.html: Web ページの HTML 構造が含まれます。
style.css: レスポンシブデザインルールを含む CSS スタイルを保持します。
script.js: JavaScript を使用してページの動的側面を管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/Age-Calculator.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Age-Calculator
```
ログイン後にコピー
プロジェクトを実行します:
- ローカルサーバー上で実行することも、単純に Web ブラウザでindex.html ファイルを開くこともできます。

使用法

Web ブラウザで Web サイトを開きます。
日付選択入力を使用して生年月日を入力します。
「年齢を計算する」ボタンをクリックすると、画面に正確な年齢が表示されます。

コードの説明

HTML

index.html ファイルには、入力フォームや計算された年齢が表示されるセクションなど、Web ページの構造が含まれています。以下は HTML コードのスニペットです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Age Calculator</title>
  <link href="https://fonts.googleapis.com/css?family=Manrope:200,300,regular,500,600,700,800" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>
<body>
  <div class="header">
    <h1>Age Calculator</h1>
  </div>

  <div class="container">
    <div class="form">
      <p id="birth">Enter your date of birth</p>
      <input type="date" id="birthday" name="birthday">
      <button id="btn">Calculate Age</button>
      <p id="result">Your age is 21 years old</p>
    </div>
  </div>

  <div class="footer">
    <p>Made with ❤️ by Abhishek Gurjar</p>
  </div>
</body>
</html>

ログイン後にコピー

CSS

style.css ファイルには、Web ページの視覚的魅力と応答性を保証するスタイルが含まれています。以下にいくつかの主要なスタイルを示します:

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

ログイン後にコピー

JavaScript

script.js ファイルは年齢計算ロジックを管理し、Web ページ上の結果を更新します。以下は 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);

ログイン後にコピー

ライブデモ

ここで年齢計算機のライブデモをチェックできます。

結論

この Age Calculator の構築は、日付の操作とインタラクティブな Web アプリケーションの構築についての理解を深めることができた、やりがいのある経験でした。このプロジェクトがあなた自身の学習の旅に有益で洞察力があると感じていただければ幸いです。自由にコードを調べて、ニーズに合わせて調整してください。コーディングを楽しんでください!