Membina Laman Web Kalkulator Umur

pengenalan

Helo, rakan pembangun! Hari ini, saya teruja untuk berkongsi projek yang baru saya siapkan: Kalkulator Umur. Projek ini membolehkan pengguna mengira umur tepat mereka berdasarkan tarikh lahir mereka, memberikan hasil dalam antara muka yang jelas dan mesra pengguna. Ini cara yang bagus untuk berlatih menggunakan JavaScript, terutamanya dengan fungsi tarikh dan masa, sambil membina sesuatu yang praktikal.

Gambaran Keseluruhan Projek

Kalkulator Umur direka untuk memberi pengguna cara mudah untuk mengetahui umur semasa mereka dalam tahun, bulan dan hari. Pengguna hanya memasukkan tarikh lahir mereka, dan dengan klik butang, umur mereka dipaparkan. Projek ini sesuai untuk pembangun yang ingin meningkatkan kemahiran mereka dalam mengendalikan tarikh dan membina aplikasi web interaktif.

Ciri-ciri

• Input Tarikh: Pengguna boleh memasukkan tarikh lahir mereka menggunakan pemilih tarikh untuk input yang tepat.
• Pengiraan Umur: Aplikasi mengira umur sebenar pengguna, hingga bilangan hari.
• Reka Bentuk Responsif: Alat ini direka bentuk untuk responsif, memastikan ia berfungsi dengan lancar pada peranti dan saiz skrin yang berbeza.

Teknologi yang Digunakan

• HTML: Digunakan untuk menstruktur kandungan pada halaman web.
• CSS: Digunakan untuk menggayakan halaman web dan memastikan ia responsif merentas pelbagai peranti.
• JavaScript: Dilaksanakan untuk mengendalikan logik pengiraan umur dan mengemas kini DOM.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

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

• index.html: Mengandungi struktur HTML halaman web.
• style.css: Memegang gaya CSS, termasuk peraturan reka bentuk responsif.
• script.js: Menguruskan aspek dinamik halaman menggunakan JavaScript.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

1. Klon repositori:
   

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

2. Buka direktori projek:
   

   cd Age-Calculator
   

3. Jalankan projek:

   • Anda boleh sama ada menjalankannya pada pelayan setempat atau hanya membuka fail index.html dalam penyemak imbas web.

Penggunaan

1. Buka tapak web dalam penyemak imbas web.
2. Masukkan tarikh lahir anda menggunakan input pemilih tarikh.
3. Klik butang "Kira Umur" untuk melihat umur tepat anda dipaparkan pada skrin.

Penerangan Kod

HTML

Fail index.html mengandungi struktur halaman web, termasuk borang input dan bahagian di mana umur yang dikira dipaparkan. Di bawah ialah coretan kod 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

Fail style.css mengandungi gaya yang memastikan halaman web menarik secara visual dan responsif. Berikut ialah beberapa gaya utama:

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

Fail script.js mengurus logik pengiraan umur dan mengemas kini keputusan pada halaman web. Di bawah ialah coretan kod 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);

Demo Langsung

Anda boleh melihat demo langsung Kalkulator Umur di sini.

Kesimpulan

Membina Kalkulator Umur ini merupakan pengalaman yang bermanfaat yang membolehkan saya memperdalam pemahaman saya tentang bekerja dengan tarikh dan membina aplikasi web interaktif. Saya harap anda mendapati projek ini berguna dan berwawasan untuk perjalanan pembelajaran anda sendiri. Jangan ragu untuk meneroka kod dan menyesuaikannya dengan keperluan anda. Selamat mengekod!

Kredit

Projek ini diilhamkan oleh keperluan untuk alat pengiraan umur yang mudah dan berkesan.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Membina Laman Web Kalkulator Umur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!