Membina Laman Web Kalkulator Umur-tutorial css-php.cn

Membina Laman Web Kalkulator Umur

王林

Lepaskan： 2024-08-10 06:44:03

asal

934 orang telah melayarinya

Building a Age Calculator Website

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

Salin selepas log masuk

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:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Age-Calculator
```
Salin selepas log masuk
Jalankan projek:
- Anda boleh sama ada menjalankannya pada pelayan setempat atau hanya membuka fail index.html dalam penyemak imbas web.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Masukkan tarikh lahir anda menggunakan input pemilih tarikh.
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:

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!