1. Yêu cầu
Yêu cầu bài toán là người dùng nhập năm Dương Lịch vào ô input, khi click vào button thì chuyển năm đó sang Âm Lịch. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích thú khi học Javascript.
2. HTML - CSS
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vanilla JS: Solar calendar to Lunar calendar</title> <!-- bootstrap css 4.5.0 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
</head>
<body> <div class="container"> <h2 class="mt-5 mb-3">Chuyển Dương Lịch sang Âm Lịch</h2> <div class="input-group mb-2"> <input type="text" class="form-control" placeholder="Nhập năm dương lịch"> <div class="input-group-append"> <button class="btn btn-primary">Chuyển</button> </div> </div> <p id="result1"></p> <p id="result2"></p> </div> <script> // code javascript </script>
</body>
</html>
3. Hướng giải quyết chính
- Lấy năm Dương Lịch mà người dùng nhập vào
- Bấm đốt ngón tay dễ dàng ta tính ra được năm Âm Lịch ^^
- In kết quả
- Đùa vậy thôi, ta có năm Âm Lịch được tạo ra từ CAN và CHI
- Cách tính CAN thì lấy năm Dương chia lấy dư cho 10, phần dư so sánh bảng dưới
- Cách tính CHI thì lấy năm Dương chia lấy dư cho 12, phần dư so sánh bảng dưới
| Số dư | CAN | CHI |
|---|---|---|
| 0 | Canh | Thân |
| 1 | Tân | Dậu |
| 2 | Nhâm | Tuất |
| 3 | Quý | Hợi |
| 4 | Giáp | Tí |
| 5 | Ất | Sửu |
| 6 | Bính | Dần |
| 7 | Đinh | Mão |
| 8 | Mậu | Thìn |
| 9 | Kỷ | Tỵ |
| 10 | Ngọ | |
| 11 | Mùi |
4. Javascript
- Step 1: Đặt biến để lưu các thẻ html mình cần, ở đây gồm có input để lấy năm người dùng nhập vào, button để click và các thẻ html để in kết quả
- Step 2: Lắng nghe sự kiện click của thẻ button
- Step 3: Lấy năm Dương người dùng nhập vào
solarYear, lưu ý những giá trị này là string nên cần chuyển sang number - Step 4: Viết hàm convert năm Dương sang năm Âm
- Step 5: In kết quả
// step 1
const ipnElement = document.querySelector('input')
const btnElement = document.querySelector('button')
const resultElement1 = document.querySelector('#result1')
const resultElement2 = document.querySelector('#result2') // step 4
function convertYear(solarYear) { let lunarYear, can, chi switch(solarYear % 10) { case 0 : can = 'Canh' ; break case 1 : can = 'Tân' ; break case 2 : can = 'Nhâm' ; break case 3 : can = 'Quí' ; break case 4 : can = 'Giáp' ; break case 5 : can = 'Ất' ; break case 6 : can = 'Bính' ; break case 7 : can = 'Đinh' ; break case 8 : can = 'Mậu' ; break case 9 : can = 'Kỷ' ; break default: can = 'Không' } switch(solarYear % 12) { case 0 : chi = 'Thân'; break case 1 : chi = 'Dậu' ; break case 2 : chi = 'Tuất'; break case 3 : chi = 'Hợi' ; break case 4 : chi = 'Tí' ; break case 5 : chi = 'Sửu' ; break case 6 : chi = 'Dần' ; break case 7 : chi = 'Mão' ; break case 8 : chi = 'Thìn'; break case 9 : chi = 'Tỵ' ; break case 10: chi = 'Ngọ' ; break case 11: chi = 'Mùi' ; break default: chi = 'Biết' } return lunarYear = `${can} ${chi}`
} // step 2
btnElement.addEventListener('click', function() { // step 3 const solarYear = Number(ipnElement.value) // step 5 resultElement1.innerHTML = `Năm dương lịch: <b>${solarYear}</b>` resultElement2.innerHTML = `Năm âm lịch: <b>${convertYear(solarYear)}</b>`
}) 5. Kết quả
6. Yêu cầu nâng cao
Ở trên cơ bản chúng ta đã giải quyết xong bài toán nhưng vẫn còn nhiều thứ cần được hen đồ (handle)
Bug:
- Nhập input: kentrung
- Kết quả: Không Biết
- Nguyên nhân: người dùng nhập không đúng định dạng
- Mong đợi kết quả: Năm không đúng định dạng, vui lòng nhập lại.
Nói chung ở step 4 chúng ta mới chỉ lấy dữ liệu từ input và chuyển nó thành kiểu number để tính toán, sẽ cần có step 4.5 làm nhiệm vụ kiểm tra tính hợp lệ của dữ liệu, không nên tin bất cứ cái gì người dùng nhập vào, đủ các thứ linh tinh hổ lốn, trên rắn dưới nát, thập cẩm lòng mề... Trường hợp nhập đúng năm chỉ là happy case mà thôi.
Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo!