DEV Community: Md. Mizanur Rahaman

Make salary calculator using Chat GPT and Excel

Md. Mizanur Rahaman — Sat, 29 Apr 2023 16:40:36 +0000

In this blog post, we will explore how to make a salary calculator using Chat GPT and Excel. A salary calculator is a tool that can help employees or employers determine their net income after taxes and deductions. With the help of Chat GPT, we can create an interactive and user-friendly salary calculator that can be used by anyone with basic Excel skills.

The first step in making a salary calculator using Chat GPT and Excel is to gather the necessary information. We need to know the employee's gross salary, any pre-tax deductions, and their tax filing status. Once we have this information, we can create a formula in Excel that calculates the employee's net income after taxes and deductions.

Next, we can integrate Chat GPT into Excel using the Power Automate platform. Power Automate allows us to create a chatbot that can interact with users and provide them with personalized results. We can create a chatbot that prompts users for the necessary information and then uses the Excel formula to calculate their net income.

Here the full video tutorial:

https://youtu.be/ab0OWqaLZCo

Finally, we can test and refine our salary calculator to ensure that it is accurate and user-friendly. We can use feedback from users to make improvements and adjustments to the chatbot and formula.

With the help of Chat GPT and Excel, we can create a powerful and interactive salary calculator that can help employees and employers make informed decisions about their finances. To see an example of how to create a salary calculator using Chat GPT and Excel, check out the YouTube video linked above.

Uses of JSON.parse() and JSON.stringify()

Md. Mizanur Rahaman — Thu, 26 May 2022 04:54:42 +0000

Sometimes we confused that when I have to use JSON.parse() and when JSON.stringify. But most of the time we have to use both of these.

Let's talk about these important topics-

JSON.parse()
JSON.parse() takes JSON string and transform it into JavaScript object.

Input

let userStringData = '{"name":"Hamid","email":"hamid@gmail.com","profession":"Doctor"}';

let userObjData = JSON.parse(userStringData);

console.log(userObjData);

Output

{ name: 'Hamid', email: 'hamid@gmail.com', profession: 'Doctor' }

JSON.stringify()
JSON.stringify() is total oposite of JSON.parse(). Where JSON.stringify takes JavaScript object and transform it into JSON string.

Input

let userObjectData = 
{ name: 'Hamid', email: 'hamid@gmail.com', profession: 'Doctor' }

let userJSONData = JSON.stringify(userObjectData);

console.log(userJSONData);

Output

{"name":"Hamid","email":"hamid@gmail.com","profession":"Doctor"}

Follow me on LinkedIn

CRUD app with Node, Express, and MongoDB

Md. Mizanur Rahaman — Fri, 24 Dec 2021 16:42:31 +0000

Let’s clear about some technical words that are used here-

CRUD: CRUD stands for Create, Read, Update and Delete. Here-

C - Create (Post)
R - Read (Get)
U - Update (Put)
D - Delete (Delete)
Express: Express is a framework to communicate with NodeJS with Database.
MongoDB: This is a database where we can store our data.
Node JS: Node.js is an open-source, cross-platform back-end JavaScript runtime environment that uses the V8 engine to execute JavaScript code outside of the web browser.

The whole process of these technologies at a glance in an image.

Before starting our CRUD operation using these technologies we must install all required packages-

NodeJS - From this link, https://nodejs.org/en/download/ download the LTS version and install it.
MongoDB - “npm i mongodb” using this command line without double quote can install MongoDB.
Express JS: “npm install express --save” using this command line we can install Express JS.
Cors: “npm i cors” use this command line

Now Back To The Code

const express = require("express");
const app = express();
const port = process.env.PORT || 5000;
require('dotenv').config();
const { MongoClient } = require('mongodb');
const ObjectId = require('mongodb').ObjectId;
const cors = require('cors');

These codes are used as links with the packages.

app.use(cors());
app.use(express.json());

This middleware is for connecting with clients and servers.
Database configuration with MongoDB

const uri = `mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASS}@cluster0.4b6iz.mongodb.net/myFirstDatabase?retryWrites=true&w=majority`;
console.log(uri);
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });

Before connecting with the Database must create a .env file to store secret data

C - Create (POST) from CRUD

app.post('/order/add', async (req, res) => {
                const cursor = req.body;
            const result = await orderCollection.insertOne(cursor);
                res.json(result);        
});

Here app.post indicates that this method creates a new record in the database.

R - Read (GET) from CRUD

app.get('/order', async (req, res) => {
            const cursor = orderCollection.find({});
            const result = await cursor.toArray();
            res.send(result);
        })

Here app.get indicates that this method reads all orders from the database.

U - Update (PUT) from CRUD

app.put('/', (req, res) => {
        res.send("PUT Request Called")
})

Here app.put indicates that this method updates a record from the database.

D - Delete (DELETE) from CRUD

 app.delete('/order/:id', async (req, res) => {
            const id = req.params.id;
            const query = { _id: ObjectId(id) };
            const result = await orderCollection.deleteOne(query);
            res.json(result);
        });

Here app.delete indicates that this method deletes a record from the database.

All About Virtual Dom and Context API

Md. Mizanur Rahaman — Wed, 22 Dec 2021 17:57:39 +0000

Virtual Dom

In React, the virtual DOM (Document Object Model) is a programming concept in which a library like ReactDOM keeps an ideal, or "virtual," version of a user interface in memory and syncs it with the "actual" DOM. This is referred to as reconciliation.
Every virtual DOM object is modified when you render a JSX element. After the virtual DOM has been changed, React compares it to a virtual DOM snapshot obtained before the modification.

React detects which virtual DOM objects have changed by comparing the new virtual DOM to a version previous to the update. This process is called "diffing."
Once React has recognized which virtual DOM objects have changed, it updates the actual DOM with only those objects. React will rebuild your single checked-off list item in our previous example while leaving the rest of your list alone.

Context API

What is Context API

With React v.16.3, the new React Context API allows us to transfer data through our component trees, allowing our components to communicate and exchange data at different levels. We'll look at avoiding prop drilling using React Context in this tutorial. First, we'll define prop drilling and why we should avoid it.
React context API: How it works?

How Context API works?
React.createContext() all you need to know must. It will provide you with a customer and a provider. The provider is a component that supplies the state to its children, as its name indicates. It will contain the "store" and serve as the parent of any components that may require it. A component that consumes and utilizes the state is known as a consumer.

Important CSS Properties Must Know

Md. Mizanur Rahaman — Wed, 22 Dec 2021 03:39:00 +0000

Flexbox

The main purpose of flexbox is to manage space, distribute space properly to show in a dynamic way. The flexbox is also known as flex layout. This is also used to align content in a container.

The main part of using flexbox is the best way to proper use of space. Where it will help to respond with devices sizes.

Before using flexbox we must have a clear concept about flexbox and its all properties.

There are two things available in flexbox which are-

Flex container
Flex items

To active flex functionality for inside items, we must use display: flex CSS property.

CSS Variable

CSS variable looks like other programming language variables. We can use CSS variables to make our style more dynamic and effective. We can set a color or font size or any other styles using CSS variables that will help us to change anytime with a few clicks. It actually used to set global style. Where one change affects all styles.

Pseudo Elements

Pseudo-elements are used to provide extra functionality or affect to an element. In short, we can say that A CSS pseudo-element is used to style specified parts of an element.

Where we can use these Pseudo Elements:

To style the first letter of the word, first-line, or a specific word of a paragraph or title.
To set extra words of text before or after a word or a sentence.

.info-bar::before {
  content: url(smiley.gif);
}

Image Sprites

Image Sprites is a collection of images where lots of images are put into a single image.

Why we should use Image Sprites

To reduce load time in a website.
To get all images in a single image

#something {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

CSS Box Model

While there is a question about design and layout the Box Model comes up. This is like a wrapper of HTML elements. CSS Box Model consists of Margin, Border, Padding, and Content.

A short explanation of different parts:

Content: Where text, images, videos appear.
Padding: It creates some spaces around the content.
Border: Border takes parts around the padding.
Margin: It is also like padding. Which takes some spaces outside the border.

< div >
< p >This is something< /p >
< /div >

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

What is an Rest API, the main purpose of API, GET, POST method

Md. Mizanur Rahaman — Tue, 21 Dec 2021 18:12:05 +0000

What is an API?

API stands for Application Programming Interface. It’s like an engine under the hood. It works behind the scene like a ghost. It helps us to add, delete, update or get all data using this API.

In short, users send a request to API that what do want to do? Then the API responds to the user’s requests.

Let’s explain with an example-
API like a waiter in a restaurant. Someone is waiting to place an order to the waiter from the menu.

Then the waiter goes to the kitchen and tells the chafe about the order. Now chafe the dish according to the order. After making the food waiter will carry the food to the customer.

This whole process like an API works.

Purpose of API

The main purpose of API is to connect clients with databases. This is like a middleman or connector. Where it helps both sides to connect with each other.
API gets a request from the client or user and collects data from the database as required by the client. Then it will deliver or respond to the client.

Uses of Get

Get is a method that helps us to get or fetch all data from the server a client or user requested for.
In short Get method loads data from the server as client requests.

app.get('/order', async (req, res) => { const cursor = orderCollection.find({}); const result = await cursor.toArray(); res.send(result); })

Here, all order data loads from the server requested by the client.

Uses of Post

This is also related to the server. Using the POST method we can send data to the server from the client-side.
In short, using POST we can send data to a server to create a resource.

app.post('/order/add', async (req, res) => { const cursor = req.body; const result = await orderCollection.insertOne(cursor); res.json(result); });

In this example, a user sends a new record using the POST method, which will be stored in the database.