[Hack Time] Tạo ứng dụng Yes/No Selector bằng JavaScript thuần và jquery ( tạm gọi là tung đồng xu )
Chào cả nhà, mình mới biết đến kipalog một thời gian không dài, tuy nhiên thực sự kiến thức mà mình nhận được từ các bài viết trên kipalog thực sự rất hữu ích và rất nhiều bài viết/bài dịch khiến mình há hốc mồm và ngộ ra nhiều chân lý, dù mình không thực sự giỏi code nhưng mình cũng muốn có dịp ...
Chào cả nhà, mình mới biết đến kipalog một thời gian không dài, tuy nhiên thực sự kiến thức mà mình nhận được từ các bài viết trên kipalog thực sự rất hữu ích và rất nhiều bài viết/bài dịch khiến mình há hốc mồm và ngộ ra nhiều chân lý, dù mình không thực sự giỏi code nhưng mình cũng muốn có dịp viết một bài nào đấy để chia sẻ kiến thức, để nhận lại những góp ý qua đó tự cải thiện kỹ năng và cũng là cơ hội để giúp mình tập viết lách, và dễ nhớ hơn.
Cái tên Hack Time này mình giữ nguyên của @LongNguyen1, đây là bạn cùng lớp của mình, và cũng là bài viết đầu tiên mình đọc trên trang này, mình thấy ý tưởng của Long rất hay và mỗi tuần mình hi vọng sẽ có một ý tưởng mới, dù nó nhỏ thôi nhưng có ý nghĩa nhất định nào đó và bắt tay vào làm, mình trích dẫn lại định nghĩa của cậu ấy.
Lúc mình định làm app này là lúc mình đang có sự phân vân về việc có tỏ tình với một cô gái mà mình thích hay chờ dịp khác, tất nhiên những lựa chọn sẽ là Có, hoặc Không. Mình có thể tung đồng xu để lấy tạm một kết quả, nhưng khi chóng vánh như vậy lại mất hay, mình muốn tung nhiều lần đồng xu theo số lượng mình muốn ( 3 lần, 10 lần... ) và đếm số Yes và số No cái nào nhiều hơn thì đổi sang màu đó.
Hình dung sơ qua về chức năng của app
- Thay vì Random theo ý trời thì mình muốn người dùng được tác động vào kết quả, Các giá trị Yes/No thay đổi liên tục với tốc độ do mình thiết lập, Khi nhấn Button "Random" nó sẽ dừng lại, lưu giá trị đó và thống kê.
- Có button Reset để người dùng muốn làm lại không cần reload trình duyệt, các bộ đếm và giá trị trở lại vạch xuất phát
- Khung tổng kết sẽ đổi màu theo sự áp đảo của Yes hay No để người dùng nhìn phát biết luôn đáp án.
Demo ảnh
Demo online
Những function cần học
- Hàm giúp lặp một hành động mãi mãi với thời gian tự chọn ( cho sự thay đổi của đồng xu )
- Hàm thêm một dòng mới vào bảng ( Dùng để thêm tổng kết giá trị )
- Hàm giúp xóa hoàn toàn nội dung trong một ID trong DOM HTML ( Cho việc reset bảng )
- Hàm thay đổi class của một id ( Cho việc đổi màu của bộ đếm tùy theo kết quả )
- Bootstrap để nhìn giao diện cho nó bắt mắt, css một tí để dễ nhìn hơn.
Nghe qua thì khá đơn giản đúng không nào, bắt đầu làm thôi, mình code ngay trên
Cuối bài viết là link
Cài đặt thư viện cần thiết
Mình dùng mỗi jquery và bootstrap, các bạn có thể chèn ngay vào html
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
Trước tiên là phần giao diện
File Html để bố trí các button cũng như các bảng cần thiết
<body>
<center>
<div class="form-group">
<button class="btn btn-primary" type="submit" id="submit">Random</button>
<button class="btn btn-danger" type="button" id="reset">Reset</button>
</div>
<div class="value">
<h1 id="random"></h1>
</div>
</center>
<div class="row">
<div id="alert" class="alert alert-info">
<label>summarize:</label>
<p id="times"></p>
<p id="countNo"></p>
<p id="countYes"></p>
</div>
</div>
<table class="table table-striped table-hover" id="result">
<thead>
<tr>
<th>Time(s)</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</body>
</html>
- Đồng xu mình sẽ hiện ở <h1 id="random"></h1>, lát sẽ css cho nó giống đồng xu hơn 1 tẹo.
- Bảng thống kê kết quả mình sẽ chia ra <thead> và <tbody> theo chuẩn của bootstrap, , các bạn có thể để ý mình đã thêm một cặp <tr></tr> trong tbody rồi, vì lát mình sẽ dùng hàm chèn dòng vào bảng ở sau cặp <tr></tr> cuối cùng, đặt để định hướng cho nó chèn vào <tbody> cho nó đẹp.
- Ngoài ra mình chọn hàm empty() để xóa toàn bộ nội dung trong cặp thẻ <tbody> sau khi reset, vì vậy nếu nhấn nút reset thì cặp này cũng mất theo và kể từ đó các dòng mới sẽ chèn lên sau cặp<tr></tr> cuối cùng đang ở trên <thead> rất mất thẩm mĩ và vô dụng luôn chức năng reset sau đó ( vì chả còn gì ở tbody nữa để reset ), nên sau khi xóa mình sẽ append trở lại một cặp <tr></tr> khác vào trong <tbody.
- Phần có id là alert sẽ là chỗ mình đặt bộ đếm, class của nó mặc định là màu xanh ( alert-info của bootstrap ), mình sẽ cho nó thay đổi thành đỏ danger và xanh success tùy theo yes hay no nhiều hơn.
Css riêng
#yes {
color: green;
font-weight: bold;
}
#no {
color: red;
font-weight: bold;
}
h1 #yes {
color: green;
font-weight: bold;
border-radius: 50%;
border: 3px solid green;
padding: 20px;
awidth: 100px;
height: 100px;
display: table-cell;
text-align: center;
}
.value {
display: table;
}
h1 #no {
color: red;
font-weight: bold;
border-radius: 50%;
border: 3px solid red;
padding: 20px;
awidth: 100px;
height: 100px;
display: table-cell;
text-align: center;
}
#random {
text-align: center;
}
.row {
margin: 50px;
}
#countYes, #countNo, #times {
float: right;
margin: 0 0 10px 10px;
}
}
Đại khái là yes mình cho màu xanh, no thì cho màu đỏ, phần đồng xu thêm border-radius:50% để nó bo tròn lại, ngoài ra là sửa vài thứ lặt vặt.
Cái này mới là chính, Javascript
Đây chỉ là phần main của ứng dụng, mình nói qua một tí về ý tưởng, link full source mình đã để ở cuối bài.
$(document).ready(function () {
var randomizer = new Randomizer(100, $('#random'));
randomizer.start();
window.randomizer = randomizer;
});
$("#submit").click(function (e) {
e.preventDefault();
var randomizer = window.randomizer;
if (randomizer.getIsRunning()) {
randomizer.stop();
randomizer.counting();
randomizer.exportCounting();
randomizer.changeColorBox();
randomizer.addResult();
} else {
randomizer.start();
}
});
$('#reset').click(function (e) {
e.preventDefault();
var randomizer = window.randomizer;
randomizer.clearCounting();
randomizer.clearTable();
});
Đâu tiên mình sinh ra một đối tượng tên Randomizer, nó sẽ làm nhiệm vụ chạy cho yes no luân phiên xuất hiện trong thời gian 100ms, và nơi mà yes/no xuất hiện là thẻ có id #random. Ngay khi vào ứng dụng thì mình cho chạy luôn hàm start() để Yes No thay đổi và chỉ chờ mình dừng lại.
-
Sự kiện click vào nút Random:
- Nếu nó đang chạy thì lần lượt làm các thao tác: dừng lại, lấy kết quả, xuất kết quả vào khung Summersize, thay đổi màu của khung Summerize, thêm giá trị đó vào bảng.
- Nếu nó đang dừng thì mình sẽ cho nó chạy tiếp lượt tiếp theo.
-
Sự kiện click vào nút Reset :
- Xóa bộ đếm ( Gồm reset giá trị và reset HTML )
- Xóa nội dung trong bảng ( Xóa toàn bộ trong tbody và sinh ra cặp <tr></tr> mới ).
Đây là link live demo, full source mà mình đã thực hiện :
Kiến thức của mình còn non nên rất mong nhận được những phản hồi góp ý của các bạn, cũng như mong các bạn cùng tham gia phong trào này, chỉ là những ứng dụng nhỏ thôi nhưng lại có thể tạo nên một cái gì đó thú vị và thiết thực, cảm ơn các bạn đã đọc bài viết này :D .
