Câu chuyện về Hack time

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à tác giả bài viết đầu tiên mình đọc trên kipalog.com ( Một mạng xã hội dành cho dân IT ) , 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.

hacktime

Ý tưởng

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à , 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 anh

Demo online Tại đây

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 jsfiddle, hướng dẫn dùng cái này thì anh Huy Hoàng Phạm đã chia sẻ rất kỹ ở đây Viết và chia sẻ code online với fiddle.

Cuối bài viết là link jsfiddle .

Yes/No Selector

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><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;
    width: 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;
    width: 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 : http://jsfiddle.net/AndyCrush/ampseuh1/

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 😀 .

Bình luận

Bình luận Facebook

Bài viết liên quan
Filter by
Post Page
Tin Học Lập trình Web Javascript HTML / CSS AngularJS Framework backbone.js framework Thư viện bootstrap jquery library Chia sẻ
Sort by

Viết và chia sẻ code online với fiddle

Trước khi giới thiệu fiddle là gì, mình xin kể các bạn nghe 1 câu chuyện “có thật” sau. Một hôm nọ, khi m
2015-10-26 08:56:51
chuoi

18

20 Font chữ đẹp nhất google font cho thiết kế web và logo

Chắc không ít desgin website biết đến font google xong ở dưới đây tôi xin liệt kêt ra trong hàng trăm font chữ của go
2015-10-22 13:24:45
chuoi

18

Kinh nghiệm thi và phỏng vấn học bổng ĐH FPT ( phần 2 )

Trước mình có viết xong phần 1, liên quan đến kỳ thi
2015-05-06 01:48:07
chuoi

18

Kinh nghiệm thi và phỏng vấn học bổng ĐH FPT ( phần 1 )

Mình hiện là sinh viên năm 3 ĐH FPT, mình vừa kết thúc học kỳ thực tập ở d
2015-05-02 13:46:33
chuoi

18