Làm ứng dụng tính tuổi đơn giản bằng HTML, CSS và Javascript

byHiju Blog -
0
Làm ứng dụng tính tuổi đơn giản bằng HTML, CSS và Javascript

Chào bạn,

Hôm nay, chúng ta sẽ khám phá một hướng dẫn thú vị về lập trình web, trong đó chúng ta sẽ tạo ra một ứng dụng tính tuổi đơn giản bằng HTML, CSS và JavaScript. Đây là một ví dụ cơ bản nhưng thú vị về cách bạn có thể sử dụng những công cụ này để tạo ra các ứng dụng web tùy chỉnh để phục vụ mục
đích cụ thể của bạn.

Ứng dụng tính tuổi này sẽ cho phép người dùng nhập thông tin về ngày tháng năm sinh của họ, sau đó tính toán và hiển thị tuổi hiện tại dựa trên thông tin đó. Chúng ta sẽ sử dụng HTML để xây dựng giao diện người dùng, CSS để thiết kế trang web của mình và JavaScript để thực hiện tính toán.

Không cần kiến thức lập trình nâng cao, chúng ta sẽ đi từng bước một để tạo ra ứng dụng này. Hãy sẵn sàng khám phá và học cách tạo ứng dụng tính tuổi đơn giản và hữu ích bằng HTML, CSS và JavaScript cùng chúng tôi!

Các bài viết liên quan:

Bước 1: Thêm 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 rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="calculator">
        <h1>Javascript <br><span>Age Calculator</span></h1>
        <div class="inputBox">
          <input type="date" id="date" date-format="DD MMMM YYYY">
          <button onclick="calculateAge()">Calculate</button>
        </div>
        <p id="text"></p>
      </div>
    </div>
  </body>
  <script src="main.js"></script>
</html>

Bước 2: Thêm CSS


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.container {
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #4203a9, #90bafc);
    color: #fff;
    padding: 10px;
}

.calculator {
    width: 100%;
    max-width: 600px;
    margin-left: 10%;
    margin-top: 10%;
}

.calculator h1 {
    font-size: 60px;
}

.calculator h1 span {
    color: #FFC436;
}

.inputBox {
    margin: 40px 0;
    padding: 35px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
}

.inputBox input {
    flex: 1;
    margin-right: 20px;
    padding: 14px 20px;
    border: none;
    outline: none;
    font-size: 18px;
    border-radius: 5px;
    position: relative;
}

.inputBox button {
    background: #ffff76;
    border: none;
    outline: none;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 500;
    color: #333;
    cursor: pointer;
}

#text {
    font-size: 16px;
    color: #48f848;
}

Bước 3: Thêm Javascript

const inputDate = document.querySelector('#date');
inputDate.max = new Date().toISOString().split('T')[0];

const text = document.querySelector('#text');

function calculateAge() {
    const birthDate = new Date(inputDate.value);

    let d1 = birthDate.getDate()
    let m1 = birthDate.getMonth() + 1;
    let y1 = birthDate.getFullYear();

    const today = new Date();

    let d2 = today.getDate()
    let m2 = today.getMonth() + 1;
    let y2 = today.getFullYear();

    let d3, m3, y3;

    y3 = y2 - y1;
    
    if (m2 >= m1) {
        m3 = m2 - m1;
    } else {
        y3--;
        m3 = 12 + m2 - m1;
    }

    if (d2 >= d1) {
        d3 = d2 - d1;
    } else {
        m3--;
        d3 = new Date(y1, m1, 0).getDate() + d2 - d1;
    }

    if (m3 < 0) {
        m3 = 11;
        y3--;
    }

    text.innerHTML = `You are ${y3} years, ${m3} months and ${d3} days old.`;
}

Full tutorial:

Hoàn thành

Cuối cùng, chúng ta đã hoàn thành hướng dẫn về cách tạo một ứng dụng tính tuổi đơn giản bằng HTML, CSS và JavaScript. Hy vọng rằng bạn đã tận hưởng quá trình học và đã thu được kiến thức cơ bản về lập trình web trong quá trình này.

Ứng dụng tính tuổi là một ví dụ rất tốt về cách bạn có thể sáng tạo và xây dựng các ứng dụng web đơn giản để phục vụ mục đích cụ thể của bạn. Hãy sử dụng kiến thức bạn đã học để mở rộng và tùy chỉnh ứng dụng này hoặc để tạo ra những dự án mới và thú vị.

Nếu bạn còn bất kỳ câu hỏi nào hoặc muốn chia sẻ kết quả của mình, xin vui lòng liên hệ hoặc để lại bình luận. Chúng tôi luôn sẵn sàng hỗ trợ và lắng nghe ý kiến của bạn.

Chúc mọi người thành công trong việc tiếp tục học tập và phát triển kỹ năng lập trình web của mình. Hẹn gặp lại trong những hướng dẫn và dự án tương lai!
Tags

Hiju Blog

I'm HiJu

You may like these posts

Post a Comment

Previous Post Next Post