DEV Community: Mallaya

Hexadecimal to decimal converter in JS

Mallaya — Tue, 08 Feb 2022 06:28:28 +0000

It's been one year since I am working on an IOT app and finally the project is going to finish. But still, this project is giving me headaches in different ways.

Just recently, my client wanted me to develop a hexadecimal to decimal converter. I was really bad at these conversions during my school. I used to use the online tools for such conversions and now I had to develop such hexadecimal to decimal tool. So, I did research and study for a day and then started developing it.

I thought it would be great if I share the Javascript code here to develop a hex to the decimal tool then it would be beneficial for those working on such converters.

  function hexadecimaltodecimal() {
      var input_number = document.getElementById("input_value").value;
      var initialconversion = new BigNumber(input_number , 16);
      var finalanswer = initialconversion.toString(10);
      document.getElementById("ans").innerHTML = finalanswer;
     }

In this article, we have used the bignumber.js javascript library that deals with big numbers. If you don't use the library, you might not get the correct answer for large numbers. Copy the following code and paste it into the head tag for bignumber.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bignumber.js/8.0.2/bignumber.min.js" integrity="sha512-7UzDjRNKHpQnkh1Wf1l6i/OPINS9P2DDzTwQNX79JxfbInCXGpgI1RPb3ZD+uTP3O5X7Ke4e0+cxt2TxV7n0qQ==" crossorigin="anonymous"></script>

Is AI responsible for the stock market volatility?

Mallaya — Tue, 21 Dec 2021 12:35:09 +0000

Along with programming, I have developed an interest in the stock market over the past few years. Over the last few days, all the stock markets all over the world including India, the US, the UK, Germany, Japan, and almost every other country are volatile.

Many experts believe this volatility is because of these reasons:

Rise in inflation rate
Interest rate hike from Banks
Increasing fear of Omicron variant
Might be a few regional reasons

But, according to me, this might be a reason:

Many stockbrokers and operators have started using Artificial Intelligence that reads all charts and once a stock hits a certain number, the AI model buys or sells stokes. I feel an Artificial Intelligence robot does not have emotions or human intelligence and when trades, it becomes harsh for the market.

Do share your thoughts, I would like to read what you think ? Does this make a difference?

Do you need programming knowledge to start bitcoin mining?

Mallaya — Tue, 02 Nov 2021 12:25:53 +0000

Considering the profit margins, Many freelancers and business owners have started bitcoin mining over the last few years. Bitcoin mining has increased 428% since September 2020. This shows how it has attracted different people's interest in bitcoin mining.

Do you need programming language knowledge for bitcoin mining?

The simple answer is "No". You do not need any kind of expertise in the field of computer programming. But you need technical knowledge to get started with bitcoin mining. Many of my friends have left their jobs just to make a career in bitcoin mining.

I talked to them about the same. They insisted to gain detailed knowledge about RAM, CPU, and the processor of a computer system. Along with that, electricity is also a requirement. You need 24*7 high electronics.

Read more about bitcoin mining from an expert: https://steemit.com/bitcoinmining/@denzelvieta/an-overview-of-bitcoin-mining-how-does-it-work

Develop a full Binary Converter With Javascript

Mallaya — Thu, 16 Sep 2021 12:41:15 +0000

It has been over six months since I'm working on the IoT project where firstly, I created a binary to the decimal converter and now a binary converter. When I started working on the project I had no idea that I had to create a binary converter that converts binary to hexadecimal, decimal, and octal.

Honestly, I used to find binary translation boring when I was at school. And when I had to develop a binary converter, I found it difficult. So, I decided to share the code of a binary converter here, so that anyone with the need can use it to develop a tool easily.

Yes, you may find the code online especially on StackOverflow. But the code there does not return the correct answer for big numbers. I did not know about this issue with the code until my client drew my attention. So, I have decided to write a code that returns a correct answer for large numbers as well.

A binary converter can be useful to enhance the security of a website or a file. If you prefer to save the passwords in the excel sheet then anyone having access to that file can read and memorize the password. The best solution to hide sensitive data is to use a binary converter. With the help of a binary converter, you can convert the private data into binary.

It is really easy for a machine to read the binary data but it is very difficult for a human to read and memorize the binary. Since it contains just zeros and ones, even a word represented in binary becomes very long and unreadable.

Binary converter:

HTML:

<input type="text" id="text_value1" placeholder="Enter a number or name that you want to convert"/><br><br>
              <button onclick="binarytotextconversion(); bintodecconversion(); bintooctconversion(); bintohexconversion();">Convert</button>
<div id="ans2"></div>
<div id="ans3"></div>
<div id="ans4"></div>

Javascript Function:

  function bintodecconversion() {
    var getinput = document.getElementById("text_value1").value;
      var storeinput = parseInt(getinput)
      var finalans = new BigNumber(parseInt(getinput, 2))
      if (isNaN(finalans)) {
        document.getElementById("ans2").innerHTML = "This number cannot be converted into Decimal";
      } else {
        document.getElementById("ans2").innerHTML = finalans;
      }
    }
    function bintooctconversion() {
    var xxx = document.getElementById("text_value1").value;
    var bintooct = parseInt(xxx, 2).toString(8)
    if (isNaN(bintooct)) {
      document.getElementById("ans3").innerHTML = "This number cannot be converted into Octal";
    } else {
      document.getElementById("ans3").innerHTML = bintooct;
    }
  }
  function bintohexconversion() {
    var getvalue= document.getElementById("text_value1").value;
var processvalue = new BigNumber(conversion, 2)
var hexanswer = processvalue.toString(16)
if (isNaN(hexanswer)) {
document.getElementById("ans4").innerHTML = "This number cannot be converted into Hex";
} else {
document.getElementById("ans4").innerHTML = hexanswer;
}
    }

In the code, I have used the big number javascript library to convert big numbers into decimal, hexadecimal, and octal. If we do not use this library then it becomes difficult for Javascript to perform such conversion. After reading this article, feel free to share anything regarding binary converter with me.

Github: https://github.com/aaryatables/binarytranslator

Convert binary to decimal

Mallaya — Wed, 19 May 2021 13:59:04 +0000

I have just worked on a project where I had to create a binary to decimal converter. For the same project, I developed other binary, hex, and octal conversion tools. For my machine learning project, I developed a binary to decimal converter. My client insisted to develop such to enhance security for the project.

Honestly, considering recent security threats, it is really important to enhance security for an app.

When I came to know about developing this binary to decimal converter, I had no idea who I would do that because I had very little knowledge about this number conversion system. I spent one full day learning about it. For that reason, I thought, sharing code for such conversion can be beneficial for the developer who may work on such a project in the future.

About binary and decimal numbers:

Binary numbers are written in just zeros and ones. They are the 2-bit numbers and all the electronic devices and computer processors can understand binary numbers only. For the last several years, binary numbers have been used by almost all devices.

Decimal numbers are the base-10 numbers. It contains 0 to 9 numbers. After binary numbers, decimals are the most used numbering system right now. Most machine learning, artificial intelligence products, and IoT products use this numbering system.

Why did I need to develop a binary to the decimal converter?

As decimal numbers are represented in 0 to 9 and binary contain zeros and ones. Decimal numbers can easily be read and understood by humans while it is pretty difficult to read the convert binary numbers. For that reason, my client wanted me to develop such a tool.

Javascript code to convert binary to decimal:

function bintodec() {
    var input = document.getElementById("text_value").value;
        var cc = new BigNumber(input, 2);

document.getElementById("ans").innerHTML = cc;
       }

And done! Copy and paste the above code to convert binary to decimal. In this code, I used the Bigumber.js javascript library. If you are dealing with such big numbers, then you need to use Bignumber.js otherwise you might get an error while getting the answer.
So, this is the technique I used to convert binary to decimal. If you have used any other technique for such conversion, then do let me know by dropping a comment. I would love to hear from you.

Develop Dynamic Pagination in Vue.js/Nuxt.js

Mallaya — Mon, 04 Jan 2021 08:39:18 +0000

To develop a dynamic pagination requires you to have basic knowledge about Vue.js and Nuxt.js. You need to have Vue.js or Nuxt.js installed on your computer. Along with that, you need to have a basic knowledge about HTML, CSS, and router-links. I have to tell you that Vue.js has one of the best tutorials.

In this article, we have used w3schools’ CSS material. If you are developing an app with Nuxt.js then you need to add the following code in your Nuxt.config.js file.

script: [
      { src: 'https://code.jquery.com/jquery-3.4.1.slim.min.js', integrity: 'sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n', crossorigin: 'anonymous' },
      { src: 'https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', integrity: 'sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo', crossorigin: 'anonymous' },
      { src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', integrity: 'sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6', crossorigin: 'anonymous' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald'},
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Open Sans'},
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'},
      { rel: 'stylesheet', href: 'https://www.w3schools.com/w3css/4/w3.css'},
      { rel: 'stylesheet', href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', integrity: 'sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh', crossorigin:'anonymous'},
      { rel: 'stylesheet', href: 'https://www.w3schools.com/lib/w3-theme-black.css'}
    ]

And in case you are using Vue.js then update index.html file which is placed at the root.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

Before starting, there are a few Vue.js properties that you need to remember:

Two-way data-binding:

Two-way data binding can be performed with the help of the v-model. You can use the V-model directive to store the values from HTML and you can use that value further in any method. All the v-model values change in real-time, a server does not reload for these directives.

Methods:

Methods are the actions that can be performed on a different object. Here, we are going to use the method to setpage on the button click event.

Computed Property:

In this tutorial, we are going to use computed property heavily. A computed property is used to describe a value that depends on another value. It makes Vue know when to update DOM. For example, in this dynamic pagination, every value depends on the previous value. The current page’s color indirectly depends on the previous page and total pages.

In this tutorial, we have created a list of laptops with different specifications like RAM, Price, storage, operating system, and laptop size. If The following code is going to be the same for both Nuxt.js and Vue.js. We are going to use just one Vue file and you can use the following code to create dynamic pagination.

Let’s dive into the code,

The template tag contains all the basic HTML about laptops, RAM, operating system, and price, there is nothing “Vueish” about it except “V-for”.

You can use the v-for directive to render a list of items based on an array. The V-for directive requires “item in items”, in this case, the first v-for directive is “pageNumber in totalPages” and another v-for directive is “article in paginate” which will get all the information about a laptop. When “currentPage” is 1, the dynamic pagination will start from the first page. As soon as a user clicks on another page, “currentPage" updates to the page number clicked by the user.

Template HTML:

<template lang="html">
  <div class="w3-light-grey">
<div class="w3-content" style="max-width:1600px">
  <div class="w3-row w3-padding w3-border">
    <div class="w3-col l8 s12">
      <div class="w3-container w3-white w3-margin w3-padding-large">
        <div class="w3-justify">
          <h1>Laptops</h1><br><br>
          <div>
          <button v-for="pageNumber in totalPages" :key="pageNumber.id" class="w3-button" v-bind:key="pageNumber" @click="setPage(pageNumber)" :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber - currentPage) > 3)}">{{ pageNumber }} </button>
          </div>
      <div class="container w3-white w3-card" v-for="article in paginate" :key="article._id"><br>
  <div class="row">
    <div class="col-sm-4">
      <img src="~/assets/laptop.jpg" style="width:100px; height:100px">
    </div>
    <div class="col-sm-4">
      <h5><span class="w3-large w3-text-teal">{{ article.title }},</span></h5>
      <span>OS: {{article.os}}</span><br>
      <span>{{article.size}} Inches</span><br>
      <span>{{article.ram}} GB RAM</span><br>
      <span v-if="article.storage >= 1000">{{ article.storage/1000 }} TB Storage,</span>
      <span v-else>{{ article.storage }} GB Storage,</span><br>
    </div>
    <div class="col-sm-4">
      <h3>${{article.price}}</h3>
      <p><a href=""><button class="w3-button w3-block w3-teal">Buy Now</button></a></p>
    </div>
  </div><hr>
</div>
<div>
<button v-for="pageNumber in totalPages" :key="pageNumber.id" class="w3-button" v-bind:key="pageNumber" @click="setPage(pageNumber)" :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber - currentPage) > 3)}">{{ pageNumber }} </button>
</div>
          </div>
        </div>
    </div>
</div>
</div>
  </div>
</template>

Have a look at the following code, it is a data function with a return object which is used for two-way data binding. This object contains the articles array which has all the information about a laptop operating system, price, weight, size, storage, and laptop ram. You can update “itemsPerPage” to any number. If you want to show five items per page, then you can update that to five.

data() {
  return {
    articles: [{
      os: 'Windows',
      price: '500',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    },
    {
      os: 'Chromeos',
      price: '400',
      weight: '7.0 Pounds',
      size: '11.1',
      storage: '256 GB',
      ram: '4',
      company: 'hp',
      title: 'HP Chromebook 14'
    },
    {
      os: 'Windows',
      price: '450',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    },
    {
      os: 'Windows',
      price: '600',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    },
    {
      os: 'Windows',
      price: '700',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    },
    {
      os: 'Windows',
      price: '350',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    },
    {
      os: 'Windows',
      price: '400',
      weight: '3.9',
      size: '11.1',
      storage: '500',
      ram: '8',
      company: 'hp',
      title: 'HP laptop 14'
    }],
 currentPage: 1,
  itemsPerPage: 3,
  resultCount: 0
  }
},

Add the following code inside the methods. “setpage” function is called to update the current page.

methods: {
setPage: function(pageNumber) {
    this.currentPage = pageNumber
  },
},

Here is the computed property. “totalPage” is the logic for total dynamic pages. For example, if itemsperpage is 3 and there are a total of 12 items in the Article array then “totalPage” element will be 4.

computed: {
  /* eslint-disable */
      totalPages: function() {
        if (this.resultCount == 0){
          return 1
        }
        else {
        return Math.ceil(this.resultCount / this.itemsPerPage)
      }
      },
      /* eslint-disable */
      paginate: function() {
          if (!this.articles || this.articles.length != this.articles.length) {
              return
          }
          this.resultCount = this.articles.length
          if (this.currentPage >= this.totalPages) {
            this.currentPage = this.totalPages
          }
          var index = this.currentPage * this.itemsPerPage - this.itemsPerPage
          return this.articles.slice(index, index + this.itemsPerPage)
      }
  },
}

Add some styling to change the color of the current page.

<style lang="css">
.current {
color: teal;
}
</style>

So, that’s a wrap. After implementing this code, if you have any doubts then do not hesitate to reach us by dropping a comment below.