🇺🇸

【100sites #005】Drawer

Published on
Currently displaying Chinese version content. This article doesn't have a English version yet. Please stay tuned!

​
Drawer - 簡單抽數字

Github

Live Demo

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

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

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

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

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

以下是程式碼：

<!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>

$(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')
  })
})