DEV Community: Afzal Imam

Real Time Comment System Using Node.js, Express.js, Socket.io and MongoDB

Afzal Imam — Tue, 26 Jul 2022 11:29:38 +0000

Hey friends, today I am going to show you, how to create a Real time comment system using Node.js, Express.js, Socket.io and MongoDB. This is really a awesome project to learn basics of Websocket and socket.io. If you want to know more about this project, please read this complete article. In this post I'll also share the code that I have written to develop this project.

In this real time comment system, if you write a comment on a post then instantly that comment will appear to the other connected users that are on that post without refreshing the page. I have also used MongoDB to store the comments of users with their name.

Note: If you are interested in reading poetry, you can Download Leaves of Grass by Walt Whitman PDF

When you visit the live demo of this website which is Real time comment system, first of all you have to enter your username in prompt then only you can comment on the blog page. Of course you can do user authentication or login facility by your own which I have not implemented in this project.

I have used Node.js, Express.js for backend and Socket.io package for real time communication and MongoDB to store the data into databases. To create frontend I have used HTML and some basic CSS and JavaScript.

Real time comment system using Express and Socket.io [Source Codes]

To create this project in your system you need to download Node.js and MongoDB. If its all ready in your system then you don't have to download any thing. Otherwise make sure you first of all download Node.js and MongoDB. Which you can download from their website.

After that just visit this Github repo and clone or download the zip file.

Open the downloaded file in VS code or your favorite code editor. Open terminal and run command npm i to download all the packages. After that just run the command npm run dev to run the project. That's all, your project will be live on localhost 3000.

So that's all this friend.
Thank You.

Add Tags Input Box in HTML CSS & JavaScript

Afzal Imam — Thu, 30 Sep 2021 16:28:56 +0000

A tags input is a user interface (UI) component that allows the user to add or insert multiple entries as tags into an input field. In this project (Tags Input in JavaScript), as you can see on the webpage, there is an input box with some tags, button, and tags counter.

Note: If you are a Java Programmer and want to solve HackerRank Java Problems and if you face any difficulty then check HackerRank Java Solutions.

You can remove each tag by clicking on a close icon or remove all tags at once by clicking on the Remove All button. You can insert a maximum of 10 tags only and duplicate tags won’t be added in the input field.

Tags Input Box in JavaScript [Source Codes]

To create Tags Input in HTML CSS & JavaScript. First, you need to create three Files: HTML, CSS & JavaScript files. After creating these files just paste the following codes into your file.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Add Tags Input Box | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Unicons CDN Link for Icons -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/thinline.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="title">
        <img src="tag.svg" alt="icon">
        <h2>Tags</h2>
      </div>
      <div class="content">
        <p>Press enter or add a comma after each tag</p>
        <ul><input type="text" spellcheck="false"></ul>
      </div>
      <div class="details">
        <p><span>10</span> tags are remaining</p>
        <button>Remove All</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5372F0;
}
::selection{
  color: #fff;
  background: #5372F0;
}
.wrapper{
  width: 496px;
  background: #fff;
  border-radius: 10px;
  padding: 18px 25px 20px;
  box-shadow: 0 0 30px rgba(0,0,0,0.06);
}
.wrapper :where(.title, li, li i, .details){
  display: flex;
  align-items: center;
}
.title img{
  max-width: 21px;
}
.title h2{
  font-size: 21px;
  font-weight: 600;
  margin-left: 8px;
}
.wrapper .content{
  margin: 10px 0;
}
.content p{
  font-size: 15px;
}
.content ul{
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  margin: 12px 0;
  border-radius: 5px;
  border: 1px solid #a6a6a6;
}
.content ul  li{
  color: #333;
  margin: 4px 3px;
  list-style: none;
  border-radius: 5px;
  background: #F2F2F2;
  padding: 5px 8px 5px 10px;
  border: 1px solid #e3e1e1;
}
.content ul li i{
  height: 20px;
  width: 20px;
  color: #808080;
  margin-left: 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
  background: #dfdfdf;
  justify-content: center;
}
.content ul input{
  flex: 1;
  padding: 5px;
  border: none;
  outline: none;
  font-size: 16px;
}
.wrapper .details{
  justify-content: space-between;
}
.details button{
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  padding: 9px 15px;
  border-radius: 5px;
  background: #5372F0;
  transition: background 0.3s ease;
}
.details button:hover{
  background: #2c52ed;
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const ul = document.querySelector("ul"),
input = document.querySelector("input"),
tagNumb = document.querySelector(".details span");

let maxTags = 10,
tags = ["coding", "nepal"];

countTags();
createTag();

function countTags(){
    input.focus();
    tagNumb.innerText = maxTags - tags.length;
}

function createTag(){
    ul.querySelectorAll("li").forEach(li => li.remove());
    tags.slice().reverse().forEach(tag =>{
        let liTag = `<li>${tag} <i class="uit uit-multiply" onclick="remove(this, '${tag}')"></i></li>`;
        ul.insertAdjacentHTML("afterbegin", liTag);
    });
    countTags();
}

function remove(element, tag){
    let index  = tags.indexOf(tag);
    tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
    element.parentElement.remove();
    countTags();
}

function addTag(e){
    if(e.key == "Enter"){
        let tag = e.target.value.replace(/\s+/g, ' ');
        if(tag.length > 1 && !tags.includes(tag)){
            if(tags.length < 10){
                tag.split(',').forEach(tag => {
                    tags.push(tag);
                    createTag();
                });
            }
        }
        e.target.value = "";
    }
}

input.addEventListener("keyup", addTag);

const removeBtn = document.querySelector(".details button");
removeBtn.addEventListener("click", () =>{
    tags.length = 0;
    ul.querySelectorAll("li").forEach(li => li.remove());
    countTags();
});

That’s all, now you’ve successfully created an Add Tags Input Box in HTML CSS & JavaScript.

Note: This post is taken from codingnepal youtube channel.

File Upload with Progress Bar HTML CSS & JavaScript

Afzal Imam — Thu, 05 Aug 2021 11:16:51 +0000

Hey friends, today in this blog you’ll how to Upload File with Progress in HTML CSS & JavaScript.

In this project (File Upload JavaScript with Progress Bar), as you can see in the preview image, there are two pictures of the file uploader. In the first one, there is a dashed border container with an icon and text to browse the file to upload.

Recommended Book: Rich Dad Poor Dad Pdf

When you click on this container an open file window will open and you can select any file to upload. Once you select the file then you can see in the second picture, there is shown your file uploading status with filename, uploaded percent, progress bar, etc. and there is the history of the uploaded files with filename, size, etc.

I hope you want to get source codes or files of this project but don’t worry I have given all to source codes to the bottom of the page. But before copy-paste the codes, let’s talk about the important codes and concepts behind creating this file uploader.

In the JavaScript file, I used the change event to get the user selected filename and then called the uploadFile(filename) function with passing the filename as an argument. Inside uploadFile() function, using Ajax I sent the selected file to the PHP. As you can have seen on the codes, I used upload property and progress event to get file loaded value and file total size.

In the PHP file, I received the file and added the current time before the filename to make the filename dynamic and moved this file to the files folder using PHP inbuilt function move_uploaded_file.

File Upload JavaScript with Progress Bar [Source Codes]

To create this project (File Upload JavaScript). First, you need to create four Files: HTML, CSS, JavaScript & PHP files. After creating these files just paste the following codes into your file. Remember, you’ve to create a folder with php name and inside this folder, you’ve to create php file a name of upload.php and a files folder to saved all uploaded files.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload JavaScript with Progress Ba</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>File Uploader JavaScript</header>
    <form action="#">
      <input class="file-input" type="file" name="file" hidden>
      <i class="fas fa-cloud-upload-alt"></i>
      <p>Browse File to Upload</p>
    </form>
    <section class="progress-area"></section>
    <section class="uploaded-area"></section>
  </div>

  <script src="script.js"></script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #6990F2;
}

::selection{
  color: #fff;
  background: #6990F2;
}
.wrapper{
  width: 430px;
  background: #fff;
  border-radius: 5px;
  padding: 30px;
  box-shadow: 7px 7px 12px rgba(0,0,0,0.05);
}
.wrapper header{
  color: #6990F2;
  font-size: 27px;
  font-weight: 600;
  text-align: center;
}
.wrapper form{
  height: 167px;
  display: flex;
  cursor: pointer;
  margin: 30px 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 5px;
  border: 2px dashed #6990F2;
}
form :where(i, p){
  color: #6990F2;
}
form i{
  font-size: 50px;
}
form p{
  margin-top: 15px;
  font-size: 16px;
}

section .row{
  margin-bottom: 10px;
  background: #E9F0FF;
  list-style: none;
  padding: 15px 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
section .row i{
  color: #6990F2;
  font-size: 30px;
}
section .details span{
  font-size: 14px;
}
.progress-area .row .content{
  width: 100%;
  margin-left: 15px;
}
.progress-area .details{
  display: flex;
  align-items: center;
  margin-bottom: 7px;
  justify-content: space-between;
}
.progress-area .content .progress-bar{
  height: 6px;
  width: 100%;
  margin-bottom: 4px;
  background: #fff;
  border-radius: 30px;
}
.content .progress-bar .progress{
  height: 100%;
  width: 0%;
  background: #6990F2;
  border-radius: inherit;
}
.uploaded-area{
  max-height: 232px;
  overflow-y: scroll;
}
.uploaded-area.onprogress{
  max-height: 150px;
}
.uploaded-area::-webkit-scrollbar{
  width: 0px;
}
.uploaded-area .row .content{
  display: flex;
  align-items: center;
}
.uploaded-area .row .details{
  display: flex;
  margin-left: 15px;
  flex-direction: column;
}
.uploaded-area .row .details .size{
  color: #404040;
  font-size: 11px;
}
.uploaded-area i.fa-check{
  font-size: 16px;
}

Third, create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.

const form = document.querySelector("form"),
fileInput = document.querySelector(".file-input"),
progressArea = document.querySelector(".progress-area"),
uploadedArea = document.querySelector(".uploaded-area");

form.addEventListener("click", () =>{
  fileInput.click();
});

fileInput.onchange = ({target})=>{
  let file = target.files[0];
  if(file){
    let fileName = file.name;
    if(fileName.length >= 12){
      let splitName = fileName.split('.');
      fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
    }
    uploadFile(fileName);
  }
}

function uploadFile(name){
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "php/upload.php");
  xhr.upload.addEventListener("progress", ({loaded, total}) =>{
    let fileLoaded = Math.floor((loaded / total) * 100);
    let fileTotal = Math.floor(total / 1000);
    let fileSize;
    (fileTotal < 1024) ? fileSize = fileTotal + " KB" : fileSize = (loaded / (1024*1024)).toFixed(2) + " MB";
    let progressHTML = `<li class="row">
                          <i class="fas fa-file-alt"></i>
                          <div class="content">
                            <div class="details">
                              <span class="name">${name} • Uploading</span>
                              <span class="percent">${fileLoaded}%</span>
                            </div>
                            <div class="progress-bar">
                              <div class="progress" style="width: ${fileLoaded}%"></div>
                            </div>
                          </div>
                        </li>`;
    uploadedArea.classList.add("onprogress");
    progressArea.innerHTML = progressHTML;
    if(loaded == total){
      progressArea.innerHTML = "";
      let uploadedHTML = `<li class="row">
                            <div class="content upload">
                              <i class="fas fa-file-alt"></i>
                              <div class="details">
                                <span class="name">${name} • Uploaded</span>
                                <span class="size">${fileSize}</span>
                              </div>
                            </div>
                            <i class="fas fa-check"></i>
                          </li>`;
      uploadedArea.classList.remove("onprogress");
      uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML);
    }
  });
  let data = new FormData(form);
  xhr.send(data);
}

Last, create a PHP file with the name of message.php and paste the given codes into your PHP file. Remember, you’ve to create a file with .php extension.

<?php
  $file_name =  $_FILES['file']['name'];
  $tmp_name = $_FILES['file']['tmp_name'];
  $file_up_name = time().$file_name;
  move_uploaded_file($tmp_name, "files/".$file_up_name);
?>

So this is all for today. I hope you like this. you can check more useful post at Code With Imam.

All the Best!

Create Custom Captcha in HTML CSS & JavaScript

Afzal Imam — Wed, 04 Aug 2021 03:03:58 +0000

Hey friends, today in this blog, you’ll learn how to create Custom Captcha in HTML CSS & JavaScript. In the earlier blog, I have shared how to Detect User Browser using JavaScript, and it’s time to create a simple captcha program.

Mostly, Captcha is used on the comment or contact form of the websites to restrict robots (bot) from commenting on a blog post or sending a message to the admin. There can be random images or codes in the captcha, and the users must have to select correct images or match the codes to complete their task.

In this small project [Custom Captcha in JavaScript], there is an image with the random 6 characters and numbers. You can also refresh the captcha code and get a new one using the reload button.

In the input field, you have to enter the captcha codes that are shown on the image. If your codes matched with the captcha codes, then there is appears a success message else there appears an error message. If you’ve matched the codes, then after 4 seconds there will be generated a new one captcha code.

Recommended Book: Rich Dad Poor Dad Pdf

I hope you liked this simple captcha program and want to get source codes but don’t worry I have given codes and source code files at the bottom of this page from where you can copy-paste codes the source code files.

But before copying codes, let’s understand the basic codes and concepts of this program. At first, in the JavaScript file, I have stored all characters and numbers in the array, then inside for loop, using Math.random() function I got 6 random characters from the given array.

And passed these codes or characters in the captcha by adding space between each character. After this, I got user-entered values, split them, and joined them with space (‘ ‘) so users don’t need to enter spaces to match the codes.

Once I joined the user values then I matched this user value with the captcha codes. If the value is not matched I’ve shown an error message, and if the value is matched I’ve shown a success message and generate the new random codes after 4 seconds using the setTimeout() function.

Create Custom Captcha in JavaScript [Source Codes]

To create this program [Custom Captcha in JavaScript]. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the following codes into your file.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. You’ve to create a file with .html extension and remember the image that is used on this program will not appear.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Captcha in JavaScript | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <!-- Font Awesome CDN Link for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>Captcha in JavaScript</header>
    <div class="captcha-area">
      <div class="captcha-img">
        <img src="captcha-bg.png" alt="Captch Background">
        <span class="captcha"></span>
      </div>
      <button class="reload-btn"><i class="fas fa-redo-alt"></i></button>
    </div>
    <form action="#" class="input-area">
      <input type="text" placeholder="Enter captcha" maxlength="6" spellcheck="false" required>
      <button class="check-btn">Check</button>
    </form>
    <div class="status-text"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const captcha = document.querySelector(".captcha"),
reloadBtn = document.querySelector(".reload-btn"),
inputField = document.querySelector(".input-area input"),
checkBtn = document.querySelector(".check-btn"),
statusTxt = document.querySelector(".status-text");

//storing all captcha characters in array
let allCharacters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
                     'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd',
                     'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
                     't', 'u', 'v', 'w', 'x', 'y', 'z', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function getCaptcha(){
  for (let i = 0; i < 6; i++) { //getting 6 random characters from the array
    let randomCharacter = allCharacters[Math.floor(Math.random() * allCharacters.length)];
    captcha.innerText += ` ${randomCharacter}`; //passing 6 random characters inside captcha innerText
  }
}
getCaptcha(); //calling getCaptcha when the page open
//calling getCaptcha & removeContent on the reload btn click
reloadBtn.addEventListener("click", ()=>{
  removeContent();
  getCaptcha();
});

checkBtn.addEventListener("click", e =>{
  e.preventDefault(); //preventing button from it's default behaviour
  statusTxt.style.display = "block";
  //adding space after each character of user entered values because I've added spaces while generating captcha
  let inputVal = inputField.value.split('').join(' ');
  if(inputVal == captcha.innerText){ //if captcha matched
    statusTxt.style.color = "#4db2ec";
    statusTxt.innerText = "Nice! You don't appear to be a robot.";
    setTimeout(()=>{ //calling removeContent & getCaptcha after 2 seconds
      removeContent();
      getCaptcha();
    }, 2000);
  }else{
    statusTxt.style.color = "#ff0000";
    statusTxt.innerText = "Captcha not matched. Please try again!";
  }
});

function removeContent(){
 inputField.value = "";
 captcha.innerText = "";
 statusTxt.style.display = "none";
}

That’s all, now you’ve successfully created a Custom Captcha in HTML CSS & JavaScript. So this is all for today.
Thanks!

Also Read
6 Key Lesson’s to Learn From Rich Dad Poor Dad for Programmers.

For more details please visit Code With Imam.

Draggable Div Element in HTML CSS & JavaScript

Afzal Imam — Wed, 04 Aug 2021 02:49:14 +0000

Hey friends, today in this blog, you’ll learn how to create a Draggable Div Element in HTML CSS & JavaScript. In the earlier blog, I have shared how to create a Custom Captcha in JavaScript, and now it’s time to create an easy draggable div using pure JavaScript.

The draggable div element means you can move the particular element anywhere on the document or page by dragging it. In our simple project [Draggable Div Element in JavaScript], as you can see in the preview image, there is a modal box with a header, icon, title, and description.

You can move this modal box anywhere on the page by dragging it on the header part. When you start dragging this model, the cursor will change into a “move” icon to inform the user that this div is now dragging. You can only move this modal box by dragging it on the header.

Draggable Div Element in JavaScript [Source Codes]

To create this small project [Draggable Div Element]. First, you need to create two Files: HTML & CSS files. After creating these files just paste the following codes into your file.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

HTML Code

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Draggable Div Element in JavaScipt | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <!-- Linking BoxIcon for Icon -->
 <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
  <div class="wrapper">
    <header>Draggable Div</header>
    <div class="content">
      <div class="icon"><i class='bx bx-move'></i></div>
      <div class="title">Draggable Div</div>
      <p>This is a draggable div which is created using HTML CSS & JavaScript. You can move this div anywhere on the document or page.</p>
    </div>
  </div>

  <script>
    const wrapper = document.querySelector(".wrapper"),
    header = wrapper.querySelector("header");

    function onDrag({movementX, movementY}){
      let getStyle = window.getComputedStyle(wrapper);
      let leftVal = parseInt(getStyle.left);
      let topVal = parseInt(getStyle.top);
      wrapper.style.left = `${leftVal + movementX}px`;
      wrapper.style.top = `${topVal + movementY}px`;
    }

    header.addEventListener("mousedown", ()=>{
      header.classList.add("active");
      header.addEventListener("mousemove", onDrag);
    });

    document.addEventListener("mouseup", ()=>{
      header.classList.remove("active");
      header.removeEventListener("mousemove", onDrag);
    });
  </script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS Code

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  background: #6F36FF;
}
::selection{
  color: #fff;
  background: #6F36FF;
}
.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 450px;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  box-shadow: 10px 10px 15px rgba(0,0,0,0.06);
}
.wrapper header{
  font-size: 23px;
  font-weight: 500;
  padding: 17px 30px;
  border-bottom: 1px solid #ccc;
}
.wrapper header.active{
  cursor: move;
  user-select: none;
}
.wrapper .content{
  display: flex;
  padding: 30px 30px 40px 30px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.content .icon{
  height: 95px;
  width: 95px;
  border-radius: 50%;
  border: 5px solid #6F36FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content .icon i{
  color: #6F36FF;
  font-size: 60px;
}
.content .title{
  margin: 15px 0;
  font-size: 29px;
  font-weight: 500;
}
.content p{
  font-size: 16px;
  text-align: center;
}

Also Read:
6 Key Lesson’s to Learn From Rich Dad Poor Dad for Programmers.

So this was all about today post. For more details visit CodeWithImam.

Thanks!

6 Key Lesson’s to Learn From Rich Dad Poor Dad for Programmers

Afzal Imam — Fri, 30 Jul 2021 04:35:49 +0000

For any person in the world to achieve financial freedom, it is most important to have a strong financial education.

According to experts, the best way to increase financial education is to read books. This is the reason that many books in the world are written on this topic and the most popular book named Rich Dad Poor Dad , written by American author Robert Kiyosaki, is also one of those books. A lot of people read this book to achieve their goals and become successful in life.

That is why it is considered one of the most famous books in the world in terms of financial education. In today's post, I will tell you 6 important lessons and a summary of this book.

The story of the book Rich Dad Poor Dad is based on author Robert Kiyosaki's own life. In this book, he writes about his two fathers, one of whom is his real father, whom he has given the title of Poor Dad, and the other is his mouth-bolt father who is actually his friend's father and he is named Rich Dad in the book.

In fact, his real father is a very educated and hard-working person, a teacher by profession and financially very weak. That's why Robert calls him Poor Dad in the book.

On the other hand, his mouth-bolt father has studied only till class VIII. But due to strong financial education, he is counted among the biggest and richest businessman of his city. That's why Robert calls him Rich Dad in the book.

In this entire story, Robert's rich dad gives him six important lessons at different stages of his life for 30 years which are very important to succeed in life, become rich and stay rich forever.

6 lessons told by Robert's rich dad can make any person rich and successful in the world, no matter how poorly educated is that person. So let us tell you about the same six lessons written by Robert in the book.

Lesson No 1. Rich Don't Work For Money, Money Work For Them

Robert's rich dad explains that most of the people in the world have been trapped in a particular circle for many decades and he calls this circle the Rat Race. In fact, most of the people in the world today only want to study in a good college, find a good job, get married and then keep paying for things like home and car from their salary for the rest of their lives.

People do not realize that they work hard in this kind of life, but only someone else gets the benefit of their hard work. Many people are also unhappy to be a part of this Rat Race. But still, because of the fear, greed and responsibilities of their mind, they compulsively remain a part of it.

Rich Dad says that a person should first get out of this Rat Race by eliminating his fear and then do something in which you should not work for money but make money work for you. There is an old saying that money attracts money. In the same way, you also need to do something in your life in which only your money can earn for you.

Lesson No 2. Keeping Money Is More Important Than Making It

You will get to see many such sportsmen and celebrities in the world who were once very rich. But today they have nothing. In fact, people go from rich to poor in this way because they lack financial education. They do not have the skill to maintain and grow money.

Giving an example of this financial illiteracy, Rich Dad says that all over the world a house is considered an asset, whereas according to him, a house is not an asset but a liability. Because assets are those that increase your money even more over time, whereas in the case of a house you have to pay its EMI and loan for many years. Due to which money does not come in your pocket but only goes.

Rich dad considers only those things as assets that make you earn money sitting at home. They say that only earning money is not enough to become rich, but it is most important to learn how to maintain and grow your money.

Lesson No 3. Get In Your Business Along With Your Job

When a person gets his favourite job, he makes up his mind to do it for the rest of his life and then without thinking anything, he spends his whole life doing that job.

Rich dad says that if any person in the world wants, he can do any other work along with his job and can also become the king of a new business empire without leaving his job.

Now to understand this, we can take the example of Ray Kroc, the founder of the world's largest fast-food chain company McDonald's. If any of us are asked this question, from which business does Ray Kroc earn money? Then the answer of all of us would be that from the fast-food business. But actually, Ray Kroc's main business is not fast food but real estate. Because while expanding the business of McDonald's, he has become the biggest real estate owner in the whole world today. Along with doing fast food business, he has created such an empire of real estate which makes him really rich today.

In the same way, a common man can also create some such assets and source of income along with doing his job, which will earn money for him. Some examples have also been given by the writer, which includes starting a business, investing in the stock market, investing money in real estate, and buying properties that profit.

By adopting any one of these methods, you can create a new source of income for yourself. Even Rich Dad advises every person to do this because only then does a person become really rich.

Lesson No 4. Taxes Are For Only Middle Class And Poors

In this lesson Rich Dad explains the history of tax, he says that the tax was actually a system designed to bridge the gap between the rich and the poor i.e. initially only the rich were taxed and that tax money was used for the poor people facilities.

But gradually the middle and upper-middle class also started paying taxes and if we talk about today, then this matter has been completely reversed. Because today rich people save themselves from paying taxes by using their brains and cunning and the highest tax that is deposited in the account of the government is given by the middle and upper-middle class only.

Rich businessmen and industrialists first earn money and then spend that money to fulfil all their needs and aspirations and in the end, if anything is left then they pay tax with that money. Whereas the middle and upper-middle-class people earn money as well as pay taxes and then spend whatever is left on them in the end.

Lesson No 5. The Rich Invent Money

Jeff Bezos, Bill Gates, Mark Zuckerberg, Elon Musk and if we talk about India, then Dhirubhai Ambani, Shiv Nadar and Azim Premji are some of the names who have brought a business or idea inside the world, about which no one had thought of this before. These people have invested money with the same revolutionary idea.

Before any other person could find any opportunity present in the market, these people found that opportunity and took action on it immediately. That is why it is said that these people did not earn money but invent it. Because it brought things into the world that was not already here. Similarly, you should also think not only about earning money but also about inventing money.

Lesson No 6: Rich Learns All The Time And Know How To Sell Their Ideas

Many such people in America make and sell a much better burger than that of McDonald's at the same price. But not every person understands how one of his products or ideas is sold on a large scale. That's why even after making a good pizza burger than McDonald's, he can sell it only in a limited area or in limited quantity. Whereas McDonald's sells its burgers all over the world without any limit. In fact, through this last lesson, the author explains to us that rich people never stop learning new things and new skills. Because of this habit, they always know how their product or their idea can be sold on a large scale in the world.

So this was all about this post. All the lessons of the book Rich Dad Poor Dad are very useful for a programmer as well as general person.