Forem: Faisal Ahmed

Decimal Value input in angular

Faisal Ahmed — Sun, 16 Mar 2025 06:16:37 +0000

You want to type decimal, but use digitOnly, so you can't. so use step="0.01"

so that after adding, your value is number

`problem`

`html <mat-form-field appearance="outline"> <mat-label>Regular Price</mat-label> <input formControlName="variationRegularPrice" type="number" digitOnly matInput /> <mat-error>This field is required.</mat-error> </mat-form-field> `

solution
`html <mat-form-field appearance="outline"> <mat-label>Regular Price</mat-label> <input formControlName="variationRegularPrice" type="number" step="0.01" matInput /> <mat-error>This field is required.</mat-error> </mat-form-field> `

nvm installation problem

Faisal Ahmed — Thu, 13 Mar 2025 03:22:05 +0000

first: in your computer, search edit the system environment variable,
second: go to environment variables,
third: then add it

node js
Variable Name

C:\Program Files\nodejs

Variable Value

C:\Program Files\nodejs

nvm
Variable Name

C:\Program Files\nvm

Variable Value

C:\Program Files\nvm

npm log path
Variable Name

NPM_LOG_PATH

Variable Value

C:\Users\Softlab IT\AppData\Local\npm-cache\_logs

Throttling Technique in javascript

Faisal Ahmed — Wed, 19 Feb 2025 03:24:19 +0000

let throttleTimer;
const searchBox = document.getElementById('search-box');

searchBox.addEventListener('input', function (event) {
  if (!throttleTimer) { // যদি আগের কল থেকে নির্দিষ্ট সময় (৫০০ms) না কেটে থাকে
    console.log("Searching for:", event.target.value);

    throttleTimer = setTimeout(() => {
      throttleTimer = null; // ৫০০ms পর আবার নতুন কল করার অনুমতি দেবে
    }, 500);
  }
});

Explaination

"h" টাইপ করলে কী হবে?
- শুরুতে throttleTimer ফাঁকা থাকে

let throttleTimer; // undefined

if (!throttleTimer) চেক করবে → যেহেতু throttleTimer ফাঁকা, এটি true হবে
- শুরুতে throttleTimer ফাঁকা থাকে

if (!undefined) { // সত্য হবে, তাই ভেতরের কোড চলবে

সার্চ লগ হবে

console.log("Searching for: h");

if (!undefined) { // সত্য হবে, তাই ভেতরের কোড চলবে

throttleTimer সেট হয়ে যাবে, যাতে পরবর্তী ৫০০ms পর্যন্ত নতুন সার্চ না হয়

throttleTimer = setTimeout(() => {
    throttleTimer = null; // ৫০০ms পরে null হয়ে যাবে, যাতে আবার সার্চ চালানো যায়
}, 500);

"he" টাইপ করলে ১০০ms পরে কী হবে?
- এখন throttleTimer তে একটি টাইমার সেট আছে, তাই if (!throttleTimer) FALSE হয়ে যাবে
- ফলে console.log("Searching for: he") চলবে না!

Short explaination

প্রথমবার if (!throttleTimer) true হয়, তাই ফাংশন চলে।
এরপর ৫০০ms এর জন্য এটি false করে রাখা হয়, যাতে একই কোড বারবার না চলে।
৫০০ms পরে throttleTimer = null; সেট হয়, ফলে আবার if (!throttleTimer) true হয়ে যায়, এবং পরবর্তী ইনপুট লগ হয়।

Debounce Technique in javascript

Faisal Ahmed — Wed, 19 Feb 2025 03:11:35 +0000

let debounceTimer;
const searchBox = document.getElementById('search-box');

searchBox.addEventListener('input', function(event) {
  clearTimeout(debounceTimer); // আগের টাইমার বন্ধ করে নতুন টাইমার সেট করা হয়
  debounceTimer = setTimeout(function() {
    console.log("Searching for:", event.target.value);
  }, 500); // ৫০০ মিলিসেকেন্ড (০.৫ সেকেন্ড) পর এক্সিকিউট হবে
});

Explaination

তুমি যখন কোনো অক্ষর টাইপ করো, তখন input ইভেন্ট ট্রিগার হয়, এবং নিচের কোড রান হয়:

clearTimeout(debounceTimer);

Explaination

নতুন টাইমার সেট হয়:

debounceTimer = setTimeout(function() {
    console.log("Searching for:", event.target.value);
}, 500);

Explaination

নতুন টাইমার সেট হয়:

debounceTimer = setTimeout(function() {
    console.log("Searching for:", event.target.value);
}, 500);

এটি বলে: "৫০০ মিলিসেকেন্ড (০.৫ সেকেন্ড) অপেক্ষা করো, তারপর সার্চ করো।"
তুমি যদি আবার টাইপ করো (০.৫ সেকেন্ডের মধ্যে), আগের টাইমার বাতিল হয়
- অর্থাৎ, তুমি যদি দ্রুত টাইপ করতে থাকো, তাহলে প্রতিবার clearTimeout() আগের setTimeout মুছে ফেলে এবং নতুন করে ৫০০ms কাউন্ট শুরু করে।
- সার্চ অপারেশন তখনই হবে, যখন ইউজার শেষ অক্ষর লেখার পর ০.৫ সেকেন্ড থামবে।

linear gradient for text color

Faisal Ahmed — Tue, 18 Feb 2025 04:54:40 +0000

for making gradient from figma

https://cssgradient.io

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            background: linear-gradient(90deg, #68AFFF -3.25%, #5D36FF 18.45%, #B02AAB 100%),
            linear-gradient(90deg, #06D9F1 -3.25%, #5D36FF 99.99%, #B02AAB 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; 
        }
    </style>
</head>
<body>
    <h2>Service Info</h2>
</body>
</html>

Swiper

Faisal Ahmed — Thu, 02 Jan 2025 07:11:13 +0000

if you navigation: false, then the clickable slider button not working

Make it in middle in position

Faisal Ahmed — Wed, 11 Dec 2024 03:20:02 +0000

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Button hover, increase width on right side but left side fixed

Faisal Ahmed — Wed, 27 Nov 2024 06:56:03 +0000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="button-container">
        <button class="btn btn-cancel">
          Cancel
        </button>
        <button class="btn btn-next">
          Next
          <svg class="arrow-icon" fill="#ffffff" height="22px" width="22px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"></path> </g></svg>
        </button>
      </div>
</body>
</html>


.button-container {
    display: flex;
    gap: 16px;
  }

  .btn {
    padding-block: 17px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }

  .btn-cancel {
    background-color: #E4EDF4;
    color: #464646;
    border: 1px solid transparent;
    width: 133px;
  }

  .btn-cancel:hover {
    background-color: #F5F6F8;
    border: 1px solid #3E77AA;
    color: #3E77AA
  }

  .btn-next {
    background-color: #1C9F56;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 133px;
    transition: all 0.3s ease-in-out;
    position: relative; /* Ensure the left side remains fixed */

    .arrow-icon {
      margin-left: 8px;
      transition: transform 0.3s ease-in-out;
    }
  }

  .btn-next::before {
    content: ''; /* Add a pseudo-element to allow width expansion */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 133px; /* Matches the initial button width */
    background-color: inherit;
    transition: width 0.3s ease-in-out;
    border-radius: inherit;
    z-index: -1; /* Keeps it behind the button content */
  }

  .btn-next:hover::before {
    width: 140px; /* Increase the width only on hover */
  }

  .btn-next:hover {
    background-color: #00883C;

    .arrow-icon {
      transform: translateX(5px);
    }
  }

Positionaly vertically & horizontally center

Faisal Ahmed — Thu, 07 Nov 2024 08:55:06 +0000

<!DOCTYPE html>
<html>
<body>

<div class="invoice-print-container" style="width: 100vw; height: 100vh; position: relative;">
  <div class="water-mark" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.1;">
    <img width="300px" height="300px"; src="https://png.pngtree.com/png-vector/20190115/ourmid/pngtree-green-leaf-hand-painted-300-pixel-map-leaf-love-png-image_348692.jpg" alt="">
  </div>
</div>


</body>
</html>

Positionally Center, when use position like fixed, center the container

Faisal Ahmed — Sat, 02 Nov 2024 13:28:18 +0000

.product-scroll-area {
  display: block;
  position: fixed;
  bottom: 20px;
  width: 70%;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s linear;
  z-index: 300;

  /* Changes to center horizontally */
  left: 50%;
  transform: translateX(-50%);
}

dynamic class added based on different route or path, conditional css

Faisal Ahmed — Thu, 10 Oct 2024 12:26:24 +0000

On HTML, Only one class variable added,
On TS, set different class name in different different route in a variable.
On CSS, different different class and style added

dynamicPadding: string = '';

constructor(private router: Router) {}

ngOnInit(): void {
    if (this.router.url.includes('/products/employee-records')) {
      this.dynamicPadding = 'employee-records-page';
    } else if (this.router.url.includes('/products/payroll')) {
      this.dynamicPadding = 'payroll-page';
    } 
     else {
      this.dynamicPadding = '';
    }
  }

<section class="key-benefits" [ngClass]="dynamicPadding">
<h1>Hello World</h1>
</section>

.employee-records-page {
  padding-bottom: 150px !important;
}
.payroll-page {
  padding-bottom: 250px !important;
}

Specific Route/Path, do something

Faisal Ahmed — Thu, 03 Oct 2024 08:27:33 +0000

main route: http://localhost:4200/pricing

problem statement: if you go to pricing url, then set a value true in isShow variable.
Based on this isShow variable, you can hide/unhide the div or others things.

import { Router } from '@angular/router';

isShow = false;

constructor(private router: Router) {}

ngOnInit(): void {
    if (this.router.url.includes('/pricing')) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
  }