Posts

Input Mask Using Only Javascript

Image
INTRO Input mask help user in entering correct input. With mask the input is more readable and the user experience get improve. Suppose you open a form to enter credit card information, if there is not input formatting, you will have to check if you have entered 16 digits or not and with input formating, it will be more visible to see if you have entered 16 digits.  Without formating: 1234123412341234 With formatting: (More clear) 1234 1234 1234 1234 <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>     <style>         * {             box-sizing : border-box ;         }                 body ...

Input Mask Using Libraries

Image
  INTRO Input mask help user in entering correct input. With mask the input is more readable and the user experience get improve. Suppose you open a form to enter credit card information, if there is not input formatting, you will have to check if you have entered 16 digits or not and with input formating, it will be more visible to see if you have entered 16 digits.  Without formating: 1234123412341234 With formatting: (More clear) 1234 1234 1234 1234 Using Intl-tel-Input Library https://github.com/jackocnr/intl-tel-input <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>     <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.18/css/intlTelInp...

Clock With Tick Sound

Image
  <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Clock With Tick Sound </title>     <style>         * {             box-sizing : border-box ;         }                 body {             font-family : monospace ;             min-height : 100vh ;             justify-content : center ;             align-items : center ;             display : flex ;         }                 .clock__container {   ...

JS-QR Generator

Image
<html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> QR Code Generator </title>     <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" >     <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity = "sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin = "anonymous" referrerpolicy = "no-referrer"     />     <style>         .none {             display : none ;         }                 .fab { ...