【100sites #005】Drawer

Posted by Eason Chang on 2016-02-15

Drawer - 簡單抽數字

Github

Live Demo

螢幕快照 2016-02-16 上午1.47.27.png

今天搬回新竹,實在沒多少時間寫程式,於是就寫了一個簡單卻實用的小抽籤程式。

目前寫出來的功能很簡單,使用者輸入最小值和最大值,點擊按鈕後就能抽到一個隨機數字。

框架上只使用到了JQuery和Bootstrap,我最愛的兩個框架。

之後有時間會加上更多功能,如:不同的抽籤模式、轉盤動畫等。

以下是程式碼:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<title>Drawer</title>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>

<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Drawer!</h1>
<h2>Pick One:</h2>
<div class="form-inline">
From <input type="number" class="form-control" id="minimum" placeholder="Minimum">
To <input type="number" class="form-control" id="maximum" placeholder="Maximum">
<button class="btn btn-primary" id="pickone">Pick one!</button>
<div class="panel panel-info" id="result-panel">
<div class="panel-body" id="result-body">
Choose your Max and Min, I will give you a number!
</div>
</div>
</div>
</div>
</div>


</body>
<script src="drawer.js"></script>
</html>
drawer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$(document).ready(function(){

pickone_btn = $("#pickone");
result_panel = $("#result-panel"); // style of result panel, used to change result panel style
result_body = $("#result-body"); // body of result panel, used to display result
max_fld = $("#maximum"); // maximum input field
min_fld = $("#minimum"); // minimum input field

pickone_btn.click(function(){

var min = parseInt(min_fld.val());
var max = parseInt(max_fld.val());

// if the input is invalid (empty or not number)
if(isNaN(min) || isNaN(max)) {
result_body.html("I need both MIN and MAX!");
// set style to danger(red)
result_panel.addClass("panel-danger");
result_panel.removeClass("panel-info");
result_panel.removeClass("panel-success");
return;
}

if(min > max){
// interchange min & max
var tmp = min;
min = max;
max = tmp;
// interchange value of input fields
max_fld.val(max);
min_fld.val(min);
}

var result = Math.floor(Math.random()*(max-min+1) + min);
result_body.html("You got <b>"+result+"</b> !");
// set style to success(green)
result_panel.addClass("panel-success");
result_panel.removeClass("panel-info");
result_panel.removeClass("panel-danger");
});

});