Logo

dev-resources.site

for different kinds of informations.

Convert Decimal to Binary for IOT Product With Vue.js

Published at
1/7/2021
Categories
javascript
vue
decimal
numbers
Author
bryanvieta
Categories
4 categories in total
javascript
open
vue
open
decimal
open
numbers
open
Author
10 person written this
bryanvieta
open
Convert Decimal to Binary for IOT Product With Vue.js

I just made a recent Internet of things product for a company using Raspberry pi. It is a safe locker that opens with a correct decimal number. My client wanted to convert decimal to binary number and then save that to the database. When the user sends a query to change the password, the server should convert binary to decimal and show that to the user for updating.

I have used Bcrypt earlier but this was a new experience for me. However, I managed to find a code to convert decimal to binary online but I have to make many changes in the code to make it work correctly for the bigger numbers.

For this app, I used Vue.js in the front-end and Node.js for the back-end and IOT connection. Most of the code is Vanilla.js. Vue.js and Node.js are for just a few operations.

For the decimal to binary and again binary to decimal conversion, I have used Vue.js and axios to send data to the back-end. Here is the code:

Decimal to binary code:

var xx = document.getElementById("input").value;
var xy = parseInt(xx);
  var xz = xy.toString(2);
    document.getElementById("demo").innerHTML = xz;
Enter fullscreen mode Exit fullscreen mode

I found the above code online, this code returns the correct answer only for 16 characters long input. In case, you insert an input that is longer than 16 characters then you get the wrong answer.

To solve this problem, I used Bignumber.js. This is a great Javascript library to perform the arithmetic operations more precisely. To get the correct answers for more than 16 characters, you need to use Bignumber.js. Here is the code:

Vue.js Code with Bignumber.js:

dectobin() {
      var x = new BigNumber(this.text_value, 10)
    var dectobin = x.toString(2);
    this.ans = dectobin;
            },
Enter fullscreen mode Exit fullscreen mode

In the above code, dectobin() function is called at the click event on the button. Apart from that, this.text_value is used to get the value from the user input. toString is an in-built javascript function to get the binary value of a number.

Vue.js code for binary to decimal:

bintodec() {
      var cc = new BigNumber(this.text_value, 2);
       this.ans = cc;
     },
Enter fullscreen mode Exit fullscreen mode

Just like the above operation, bintodec() function is also called at the click event from the user. Again, text_value is the value updated by the user.

So, above is the simple code for decimal to binary conversion. I spend almost one day to understand the concept of bignumber and binary numbers. If you are also dealing with such numbers then I hope this code helps you! Demo

numbers Article's
29 articles in total
Favicon
Leetcode โ€” 3289. The Two Sneaky Numbers of Digitville
Favicon
Master Number Conversions with Ease: From Binary to Hexadecimal & More!
Favicon
Leetcode โ€” 2769. Find the Maximum Achievable Number
Favicon
Leetcode โ€” 3190. Find Minimum Operations to Make All Elements Divisible by Three
Favicon
Floating Point Representation (IEEE 754 ISSUE)
Favicon
Error in Javascript
Favicon
Million day archivio
Favicon
Exploring the Mystical Language of Numbers.
Favicon
How to Check if a Value is Within a Range of Numbers in JavaScript
Favicon
BINARY NUMBERS
Favicon
Prime Numbers โ€“ Definition with Examples
Favicon
Generator Random Numbers
Favicon
Binary representation of numbers
Favicon
Get all separate digits of a number (TypeScript)
Favicon
The fascinating diagonals of Pascal's Triangle
Favicon
Convert long numbers to string
Favicon
Patterns in the multiples of 2, 5, 10 and 3
Favicon
Your startup & the conspiracy of numbers
Favicon
Teaching the computers to write number names using JavaScript
Favicon
Learn Bash by making a game
Favicon
Convert Decimal to Binary for IOT Product With Vue.js
Favicon
Hunt some strange numbers with Python.
Favicon
Generate unique (non-repeating) random numbers
Favicon
Developer 2021 - Projections based from Stack Overflow's 2020 Developer Survey
Favicon
Learn Python: Numbers
Favicon
Find Valid Phone Numbers, Anywhere!
Favicon
Quick vim tips to generate and increment numbers
Favicon
What is the type of NaN?
Favicon
Recreating Excelโ€™s ISNUMBER in a Numbers Spreadsheet

Featured ones: