├── README.md ├── script.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # And-Or-Xor 2 | I Just Created This Beautiful And-Or-Xor Visualizer Using HTML, CSS & JavaScript Only . Here You Can See How Logical And(&) , Or(|) and Xor(^) Operators Works... 3 | 4 | # Demo 🦖 5 | https://pb2204.github.io/And-Or-Xor 6 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // AND Button 2 | 3 | function and() { 4 | let number1 = document.getElementById("value1").value; 5 | let number2 = document.getElementById("value2").value; 6 | 7 | let ans = parseInt(number1) & parseInt(number2); 8 | 9 | document.getElementById("answer").value = ans; 10 | } 11 | 12 | // OR Button 13 | 14 | function or() { 15 | let number1 = document.getElementById("value1").value; 16 | let number2 = document.getElementById("value2").value; 17 | 18 | let ans = parseInt(number1) | parseInt(number2); 19 | 20 | document.getElementById("answer").value = ans; 21 | } 22 | 23 | // XOR Button 24 | 25 | function xor() { 26 | let number1 = document.getElementById("value1").value; 27 | let number2 = document.getElementById("value2").value; 28 | 29 | let ans = parseInt(number1) ^ parseInt(number2); 30 | 31 | document.getElementById("answer").value = ans; 32 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | And-Or-Xor 10 | 11 | 12 | 13 |
14 |

AND OR XOR

15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 | 33 |
34 | 37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Stick&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .whole { 9 | height: 100vh; 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | align-items: center; 14 | background: rgb(23, 24, 24); 15 | } 16 | 17 | h1 { 18 | font-family: 'Stick', sans-serif; 19 | color: lightgreen; 20 | margin-bottom: 60px; 21 | font-size: 40px; 22 | } 23 | 24 | .userinput { 25 | height: 30%; 26 | display: flex; 27 | } 28 | 29 | .uservalue1, 30 | .uservalue2 { 31 | display: flex; 32 | flex-direction: column; 33 | position: absolute; 34 | } 35 | 36 | .uservalue1 { 37 | left: 20px; 38 | } 39 | 40 | .uservalue2 { 41 | right: 20px; 42 | } 43 | 44 | .ans { 45 | display: flex; 46 | flex-direction: column; 47 | margin-bottom: 50px; 48 | pointer-events: none; 49 | } 50 | 51 | label { 52 | margin-bottom: 20px; 53 | text-align: center; 54 | color: lightblue; 55 | } 56 | 57 | input { 58 | height: 5vh; 59 | background-color: antiquewhite; 60 | width: 30vw; 61 | font-weight: bold; 62 | font-size: 40px; 63 | outline: none; 64 | border: none; 65 | text-align: center; 66 | border-radius: 15px; 67 | } 68 | 69 | .btn { 70 | height: 15%; 71 | margin-top: 14px; 72 | width: 100%; 73 | display: flex; 74 | justify-content: center; 75 | } 76 | 77 | button { 78 | cursor: pointer; 79 | height: 52%; 80 | width: 28%; 81 | background: #ee1010; 82 | color: #f5f9f9; 83 | font-weight: bold; 84 | font-size: 45px; 85 | margin-left: 15px; 86 | outline: none; 87 | border: none; 88 | border-radius: 90px; 89 | transition: 0.3s ease-in-out all; 90 | } 91 | 92 | button:hover { 93 | background:#f5f9f9; 94 | color: #ee1010; 95 | } 96 | 97 | footer { 98 | text-align: center; 99 | color: lightgreen; 100 | height: 7%; 101 | position: absolute; 102 | bottom: 2px; 103 | font-size: 20px; 104 | } 105 | 106 | span { 107 | color: crimson; 108 | } 109 | 110 | a { 111 | font-family: 'Stick', sans-serif; 112 | text-decoration: none; 113 | color: crimson; 114 | } --------------------------------------------------------------------------------