# 【100sites #005】Drawer
- Canonical: https://easonchang.com/posts/100sites-005-drawer
- Date: 2016-02-15T17:49:00.000Z
- Language: en
- Translation: AI-assisted, from the zh-TW original
# Drawer - Simple Number Drawing
[Github](https://github.com/eason-dev/100sites/tree/gh-pages/005_Drawer)
[Live Demo](http://kamigami55.github.io/100sites/005_Drawer/)
I moved back to Hsinchu today and really didn't have much time to code, so I wrote a simple but practical little number-drawing program.
The feature so far is very basic: the user enters a minimum and a maximum, clicks the button, and gets a random number.
For frameworks I only used JQuery and Bootstrap, my two favorites.
I'll add more features when I have time, like different drawing modes and a spinning-wheel animation.
Here's the code:
```html index.html
Drawer
Drawer!
Pick One:
From
To
Choose your Max and Min, I will give you a number!
```
```javascript drawer.js
$(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 " + result + " !");
// set style to success(green)
result_panel.addClass("panel-success");
result_panel.removeClass("panel-info");
result_panel.removeClass("panel-danger");
});
});
```