CodemySite_Web development

  Use this cool animation library for your next JavaScript project. Typed.js is a JavaScript animation library. Any string can type customer animated with content, speed, and so on. The most common use as I notice is for a landing page that looks modern in style. Official site: Typed.js Another demo made with love by Matt Boldt. # With NPM npm install typed.js # With Yarn yarn add typed.js # With Bower… mattboldt.com Step1: import js library with npm, yarn, bower, or CDN npm install typed.js yarn add typed.js bower install typed.js or <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> Step2: HTML The content is included in the <div> The place content actually is typing is the <span> Step3: JS fire up the library with  new Typed('id',options) Customization: stringsElement: the content want to show typeSpeed: the speed of typing backDelay:backDelay time before backspacing in milliseconds fadeOut: fade out animation instead of ba...

  N progress.js is an alternate way to indicate the loading processing. The progress bar can animate with custom time and animation styles. Official site How to use it? Step1: import CSS and js files from npm or CDN $ npm install --save nprogress or <link rel=”stylesheet” href=” https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css "/> <script src=” https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js "></script> Step2: set a container in HTML Step3: js fire up with  NProgress.start() and end the process with  NProgress.done() ; Documents:(Advanced use) Percentages : To set a progress percentage, call  .set(n) , where  n  is a number between  0..1 . NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done() Incrementing : To increment the progress bar, just use  .inc() . This increments it with a random amount. This will never get to...

  Features: Validate input value with Regular Expressions Hide and show the password Toggle the images according to the validation HTML eyeToggle  includes two images which are toggled in JavaScript. The validation structure has 5 items for validation. onkeyup  validates the function  checkPassword() . CSS When coding the CSS, I find it’s hard to size the image inside  :before . Unable to resize images created using the  ::before  pseudo-element? After searching, I found out it has to set up the  background-size  and also the  block size . Look it up  here . The images are from flaticon: Hydration free icons designed by Flat Icons Free vector icon. Download thousands of free icons of healthcare and medical in SVG, PSD, PNG, EPS format or as ICON… www.flaticon.com Physiology free icons designed by Flat Icons Download now this vector icon in SVG, PSD, PNG, EPS format or as webfonts. Flaticon, the largest database of free… www.flaticon...