Skip to content

Instantly share code, notes, and snippets.

@iNawaR1

iNawaR1/JavaScript

Created November 3, 2022 16:08
Show Gist options
  • Save iNawaR1/a3490ec2cad80265cc6a819d4dee3fbe to your computer and use it in GitHub Desktop.
Save iNawaR1/a3490ec2cad80265cc6a819d4dee3fbe to your computer and use it in GitHub Desktop.
Download ZIP
This is a simple number system calculator website: number-system-calculator.netlify.app
Raw
css
.btn-hover,.buttons,.credit,.formcontrol,.input{text-align:center}.btn-hover,.btn-hover:hover{moz-transition:all .4s ease-in-out}.btn01,.btn02{justify-content:center}.credit{color:#006400}input[type=text]{-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;border:1px solid;color:#green;width:200px;height:30px;padding-left:10px}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.buttons{margin:10%}.btn-hover{width:200px;font-size:16px;font-weight:600;color:#fff;cursor:pointer;margin:20px;height:55px;border:none;background-size:300% 100%;border-radius:50px;-o-transition:.4s ease-in-out;-webkit-transition:.4s ease-in-out;transition:.4s ease-in-out}.btn01,.btn02,.result,.txt{background:rgba(0,0,0,.5)}.btn-hover:hover{background-position:100% 0;-o-transition:.4s ease-in-out;-webkit-transition:.4s ease-in-out;transition:.4s ease-in-out}.btn-hover:focus{outline:0}.btn-hover.color-1{background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(49,196,190,.75)}.btn-hover.color-2{background-image:linear-gradient(to right,#f5ce62,#e43603,#fa7199,#e85a19);box-shadow:0 4px 15px 0 rgba(229,66,10,.75)}.btn-hover.color-3{background-image:linear-gradient(to right,#667eea,#764ba2,#6b8dd6,#8e37d7);box-shadow:0 4px 15px 0 rgba(116,79,168,.75)}.btn-hover.color-4{background-image:linear-gradient(to right,#fc6076,#ff9a44,#ef9d43,#e75516);box-shadow:0 4px 15px 0 rgba(252,104,110,.75)}.btn-hover.color-5{background-image:linear-gradient(to right,#0ba360,#3cba92,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(23,168,108,.75)}.btn-hover.color-6{background-image:linear-gradient(to right,#009245,#fcee21,#00a8c5,#d9e021);box-shadow:0 4px 15px 0 rgba(83,176,57,.75)}.btn-hover.color-7{background-image:linear-gradient(to right,#6253e1,#852d91,#a3a1ff,#f24645);box-shadow:0 4px 15px 0 rgba(126,52,161,.75)}.btn-hover.color-8{background-image:linear-gradient(to right,#29323c,#485563,#2b5876,#4e4376);box-shadow:0 4px 15px 0 rgba(45,54,65,.75)}.btn-hover.color-9{background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed);box-shadow:0 4px 15px 0 rgba(65,132,234,.75)}.btn-hover.color-10{background-image:linear-gradient(to right,#ed6ea0,#ec8c69,#f7186a ,#fbb03b);box-shadow:0 4px 15px 0 rgba(236,116,149,.75)}.btn-hover.color-11{background-image:linear-gradient(to right,#eb3941,#f15e64,#e14e53,#e2373f);box-shadow:0 5px 15px rgba(242,97,103,.4)}.txt{padding:30px;border-top-left-radius:20px;border-top-right-radius:20px}.btn01{padding:20px}.btn02{display:flex;margin-left:100px;margin-right:100px;padding:20px 20px 40px}.result{justify-content:center;border-bottom-left-radius:10px;border-bottom-right-radius:10px}// Presentational html,body{margin:0;padding:0}html{height:100%}body{min-height:100%;color:#fff;background-color:#fd940a;background-image:radial-gradient(circle,#f9a72b 0,#fa9026 70%,#fb6c1f 100%)}
Raw
html
<a href="https://gist.github.com/iNawaR1"class="sticky" target="_blank"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="40px" y="40px" width="" height="25" viewBox="70 70" enable-background="new 0 0 50 50" xml:space="preserve"><path id="github" fill="#ffffff" d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></svg></svg></a><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Binary to decimal</title> <div class="container mt-5 txt"> <div class="input"> <label class="text-white col-sm-6 col-form-div>" class="col-sm-6"> <input type="text" id="text" placeholder="Enter a value..."> </div> </div> </div> <div class=" container text-center btn01"> <div class="row row-cols-2 row-cols-lg-3 g-4"> <div class="col"> <button class="btn-hover color-1" onclick="BinToDec()">BINARY TO DECIMAL</button> </div> <div class="col"> <button class="btn-hover color-4" onclick="BinToHex()">BINARY TO HEXADECIMAL</button> </div> <div class="col"> <button class="btn-hover color-1" onclick="DecToBin()">DECIMAL TO BINARY</button> </div> <div class="col"> <button class="btn-hover color-4" onclick="DecToHex()">DECIMAL TO HEXADECIMAL</button> </div> <div class="col"> <button class="btn-hover color-1" onclick="HexToDec()">HEXADECIMAL TO DECIMAL</button> </div> <div class="col"> <button class="btn-hover color-4" onclick="HexToBin()">HEXADECIMAL TO BINARY</button> </div> </div> </div> <div class="result container text-center py-5"> <h3 class="text-white" id="result"></h3> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="js/logic.js"></script></body></html>
Raw
JavaScript
var text=document.getElementById("text"),rest=document.getElementById("result"),number="",numberI=0;function BinToDec(){numberI=0;var e=number="",n=1;if(number=text.value,numberI=parseInt(number),isNaN(numberI))rest.innerHTML="Something is wrong";else{numberI=0;for(var r=number.length-1;0<=r;r--)e=number.charAt(r),numberI+=parseInt(e)*n,n*=2;rest.innerHTML=numberI}}function BinToHex(){var e,n=1,r="",u=" ";if(number="",numberI=0,number=text.value,numberI=parseInt(number),isNaN(numberI))rest.innerHTML="Something is wrong";else{for(numberI=0;number.length%4!=0;)number="0"+number;for(var m=number.length-4;0<=m;m-=4){for(var b=(r=number.substr(m,4)).length-1;0<=b;b--)e=r.charAt(b),numberI+=parseInt(e)*n,n*=2,console;numberI<10&&(u=numberI+u),10==numberI&&(u="A"+u),11==numberI&&(u="B"+u),12==numberI&&(u="C"+u),13==numberI&&(u="D"+u),14==numberI&&(u="E"+u),15==numberI&&(u="F"+u),n=1,numberI=0}rest.innerHTML=u}}function DecToBin(){var e="";if(number="",numberI=0,number=text.value,numberI=parseInt(number),isNaN(numberI))rest.innerHTML="Something is wrong";else if(0<numberI){for(;0<numberI;)e=parseInt(numberI%2)+e,numberI=parseInt(numberI/2);rest.innerHTML=e}else rest.innerHTML="0"}function DecToHex(){var e="";if(number="",numberI=0,number=text.value,numberI=parseInt(number),isNaN(numberI))rest.innerHTML="Something is wrong";else if(0<numberI){for(;0<numberI;)numberI%16<10?e=parseInt(numberI%16)+e:numberI%16==10?e="A"+e:numberI%16==11?e="B"+e:numberI%16==12?e="C"+e:numberI%16==13?e="D"+e:numberI%16==14?e="E"+e:numberI%16==15&&(e="F"+e),numberI=parseInt(numberI/16);rest.innerHTML=e}else rest.innerHTML="0"}function HexToDec(){for(var e=number="",n=numberI=0,r=(number=text.value).length-1;0<=r;r--)"A"==(e=number.charAt(r))?e="10":"B"==e?e="11":"C"==e?e="12":"D"==e?e="13":"E"==e?e="14":"F"==e&&(e="15"),numberI+=parseInt(e)*Math.pow(16,n),n++;rest.innerHTML=numberI}function HexToBin(){for(var e="",n=number="",r=(numberI=0,(number=text.value).length-1);0<=r;r--)"A"==(n=number.charAt(r))?e="1010":"B"==n?e="1011":"C"==n?e="1100":"D"==n?e="1101":"E"==n?e="1110":"F"==n?e="1111":"9"==n?e="1001":"8"==n?e="1000":"7"==n?e="0111":"6"==n?e="0110":"5"==n?e="0101":"4"==n?e="0100":"3"==n?e="0011":"2"==n?e="0010":"1"==n?e="0001":"0"==n&&(e="0000"),numberI=e+numberI;rest.innerHTML=numberI}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment