binaryCounter/index.html at master · BirkdaleHigh/binaryCounter · GitHub

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Binary Counter</title>
  <style>
    html,body{height: 100%;margin: 0;}
    body,.circle{
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      font-family: Optima, 'Segoe UI', sans-serif;
      background: #F9F9F9;
      color: #2F2935;
    }
    .digram{
      display: flex;
      width: 960px;
      justify-content: space-between;
      flex-direction: row-reverse;
    }
    .circle{
      width: 100px;
      height: 100px;
      border-radius: 50px;
      font-size: 50px;
      background: #556270;
      color: #556270;
    }
    .circle.active{
      background: #C7F464;
    }
    .current{font-size: 50px;}
    .control input{width:300px;margin:15px 15px 0;}
    .control >*:focus{outline: none;}
    .control >*:active{background: #C7F464;}
    .button{
      display: inline-block;
      width: 130px;
      margin: 0;
      padding: 5px;
      text-align: center;
      border: 0;
    }
    .hide{ display: none; }
    i.icon{
      font-style: normal;
      font-size: 3em;
      display: inline-block;
      line-height: 0;
      vertical-align: middle;
    }
    .bg-info{ background-color: #556270; }
    .bg-success{ background-color: #C7F464; }
    .bg-attention{ background-color: #4ECDC4; }
    .bg-warn{ background-color: #FF6B6B; }
    .bg-fail{ background-color: #C44D58; }
  </style>
</head>
<body>
 <h1>Numbers In Binary</h1>
 <h2 class="current">0</h2>
  <div class="digram">
    <div class="circle">1</div>
    <div class="circle">2</div>
    <div class="circle">4</div>
    <div class="circle">8</div>
    <div class="circle">16</div>
    <div class="circle">32</div>
    <div class="circle">64</div>
    <div class="circle">128</div>
  </div>
  <div class="control">
    <label for="speed">Count speed (delay: <span id="delay"></span>)</label> <br>
    <button class="button bg-attention hide" id="step">Step <i class="icon">&#10145;</i></button>
    <button class="button" name="low" for="speed">Stopped</button>
    <input style="direction: rtl" type="range" name="speed" min="100" max="2000" value="200" step="100">
    <button class="button" name="high" for="speed">Fastest</button>
  </div>
  <script>
    var timerID
    var count = 0
    var bits = [1,2,4,8,16,32,64,128]
    var el = document.querySelectorAll('.circle')
    var current = document.querySelector('.current')
    var speedLow = document.querySelector("button[name='low']")
    var speedHigh = document.querySelector("button[name='high']")
    var speedRange = document.querySelector("input[name='speed']")
    var stepCount = document.querySelector("#step")
    var delay = document.querySelector("#delay")

    var updateTimer = function(){
      clearInterval(timerID)
      timerID = window.setInterval(update, speedRange.value)
      if(speedRange.value === speedRange.max){
        clearInterval(timerID)
        timerID = null
      }
      reveal(timerID, speedLow, stepCount)
      delay.innerHTML = speedRange.value === speedRange.max ? '&#8734; ms' : speedRange.value + ' ms'
    }

    var reveal = function(watch, show, hide){
      if(watch){
        hide ? hide.style.display = 'none' : null
        show ? show.style.display = 'inline-block' : null
      } else {
        hide ? hide.style.display = 'inline-block' : null
        show ? show.style.display = 'none' : null
      }
    }

    var update = function() {

      bits.forEach(function(flag, index){
        // Mask the count value with the flag of the bit position we're looking for
        if(count & flag){
          el[index].classList.add('active')
        } else {
          el[index].classList.remove('active')
        }
      })

      // Display the counted value
      current.innerHTML = count
      count++

      // Reset overflowing the 8bit display.
      if(count > 255){
        count = 0
      }

    }

    speedRange.addEventListener("input", updateTimer)
    speedRange.addEventListener("change", updateTimer)

    speedHigh.addEventListener("click", function(){
      speedRange.value = speedRange.min
      updateTimer()
    })
    speedLow.addEventListener("click", function(){
      speedRange.value = speedRange.max
      updateTimer()
    })
    stepCount.addEventListener("click", update)

    // Start adding up
    updateTimer()

  </script>
</body>
</html>