BitwiseOperations/index.html at main · azmuth13/BitwiseOperations · 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
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Cool Bitwise Operation</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <h1>Bitwise Operation</h1>
  <div class="info"><p>In digital computer programming, a bitwise operation operates on one or more bit patterns or binary numerals at the level of their individual bits.</p></p><p>It is a fast, simple action directly supported by the processor, and is used to manipulate values for comparisons and calculations.</p>
</div>
  <div class="row">
    <p class="label">Input 1</p>
    <div class="byte1">
      <div class="circle" bit="0" bit-value="false">
      </div>
      <div class="circle active" bit="1" bit-value="true">
      </div>
      <div class="circle active" bit="2" bit-value="true">
      </div>
      <div class="circle active" bit="3" bit-value="true">
      </div>
      <div class="circle" bit="4" bit-value="false">
      </div>
      <div class="circle" bit="5" bit-value="false">
      </div>
      <div class="circle active" bit="6" bit-value="true">
      </div>
      <div class="circle active" bit="7" bit-value="true">
      </div>
    </div>
  </div>

  <div class="row">
    <p class="label">Input 2</p>
    <div class="byte2">
      <div class="circle" bit="0" bit-value="false">
      </div>
      <div class="circle active" bit="1" bit-value="true">
      </div>
      <div class="circle" bit="2" bit-value="false">
      </div>
      <div class="circle" bit="3" bit-value="false">
      </div>
      <div class="circle active" bit="4" bit-value="true">
      </div>
      <div class="circle" bit="5" bit-value="false">
      </div>
      <div class="circle" bit="6" bit-value="false">
      </div>
      <div class="circle" bit="7" bit-value="false">
      </div>
    </div>
  </div>
  <div class="row">
    <p class="label">Operation</p>
    <div class="operations">
      <span class="operation and selected" explain-text="A bitwise AND takes two equal-length binary representations and performs the logical AND operation on each pair of the corresponding bits, by multiplying them. Thus, if both bits in the compared position are 1, the bit in the resulting binary representation is 1 (1 × 1 = 1); otherwise, the result is 0 (1 × 0 = 0 and 0 × 0 = 0).">AND</span>
      <span class="operation or" explain-text="A bitwise OR takes two bit patterns of equal length and performs the logical inclusive OR operation on each pair of corresponding bits. The result in each position is 0 if both bits are 0, while otherwise the result is 1.">OR</span>
      <span class="operation xor" explain-text="A bitwise XOR takes two bit patterns of equal length and performs the logical exclusive OR operation on each pair of corresponding bits. The result in each position is 1 if only the first bit is 1 or only the second bit is 1, but will be 0 if both are 0 or both are 1. In this we perform the comparison of two bits, being 1 if the two bits are different, and 0 if they are the same.">XOR</span>
      <span class="operation not" explain-text="The bitwise NOT, or complement, is a unary operation that performs logical negation on each bit, forming the ones' complement of the given binary value. Bits that are 0 become 1, and those that are 1 become 0.">NOT</span>
    </div>
  </div>
  <div class="row">
    <p class="label">Result</p>
    <div class="result">
      <div class="circle" bit="0" bit-value="false">
      </div>
      <div class="circle" bit="1" bit-value="false">
      </div>
      <div class="circle" bit="2" bit-value="false">
      </div>
      <div class="circle" bit="3" bit-value="false">
      </div>
      <div class="circle" bit="4" bit-value="false">
      </div>
      <div class="circle" bit="5" bit-value="false">
      </div>
      <div class="circle" bit="6" bit-value="false">
      </div>
      <div class="circle" bit="7" bit-value="false">
      </div>
    </div>
    <div class="row">
      <p class="label">Explanation:</p>
      <div class="info"><span class="explanation"></span></div>
    </div>
  </div>

  <p class="credit">SURAJ KUMAR<br>
    <a target="_blank" href="https://en.wikipedia.org/wiki/Bitwise_operation">Info source</a>
    <a href="https://github.com/azmuth13">GitHub</a>
  </p>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>