Posts

Showing posts from 2022

Apply Pagination To The Existing Table Using Datatable

-
  Complete Example < 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 > Apply Pagination To The Existing Table Using Datatable </ title >     < link rel = "stylesheet" href = "https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" > </ head > < body >     < h1 > Apply Pagination To The Existing Table Using Datatable </ h1 >     < table id = "usersTable" >         < thead >             < tr >                 < th > # </ th >                 < th > Name </ th >         ...
Post a Comment
Read more

Populate Data from Ajax Using Datatable

-
  Complete Example < 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 > Populate Data from Ajax Using Datatable </ title >     < link rel = "stylesheet" href = "https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" > </ head > < body >     < h1 > Populate Data from Ajax Using Datatable </ h1 >     < table id = "usersTable" >         < thead >             < tr >                 < th > # </ th >                 < th > Title </ th >             </ tr > ...
Post a Comment
Read more

Image Carousel Using JS

-
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> Image Carousel </title>     <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>         * {             box-sizing : border-box ;             padding : 0 ;             margin : 0 ;         }                 .carousel__container { ...
Post a Comment
Read more

List and Download files Using Pure Javascript (XAMPP on windows)

-
Image
 List and Download files Using Pure Javascript  (XAMPP on windows) Create a folder inside your project by the name of downloads and add some files to it. HTML CODE <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> List & Download Files Using JS </title>     <style>           :root {             --border : #aaa ;             --padding-1x : 5px ;             --padding-2x : 10px ;         }                 body {             font-family : monospace ;             padding : 10% ; ...
Post a Comment
Read more

Simple Navbar Using CSS Flex

-
Image
HTML CODE <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>         .nav-container {             display : flex ;             flex-direction : row ;             justify-content : space-between ;         }                 .nav-left-container {             display : flex ;             flex-direction : row ;             list-style-type : none ;         }                 .nav-lef...
Post a Comment
Read more

HTML Battery Charge Icon

-
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> Document </title>     <style>         * {             box-sizing : border-box ;         }                 body {             display : flex ;             justify-content : center ;             align-items : center ;         }                 .battery__container {             position : relative ;             width : 150px ;         ...
Post a Comment
Read more

Progress Bar 0 to 100% in 10 sec

-
Image
Progress Bar Example HTML CODE <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 ;         }                 .progressbar__container {             max-width : 350px ;             margin : 0 auto ;             margin-top : 10% ;         }                 .progressbar__bar {             height : 27px ;             width : 100% ; ...
Post a Comment
Read more

PHP -Using Composer (For Beginner)

-
Using Composer First Time Introduction # Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you. Dependency management # Composer is  not  a package manager in the same sense as Yum or Apt are. Yes, it deals with "packages" or libraries, but it manages them on a per-project basis, installing them in a directory (e.g.  vendor ) inside your project. By default, it does not install anything globally. Thus, it is a dependency manager. It does however support a "global" project for convenience via the  global  command. https://getcomposer.org/doc/00-intro.md 1. Download Composer   https://getcomposer.org/Composer-Setup.exe 2. Install Composer Composer will work with PHP so we assume you have installed wamp or xampp (in my case its XAMPP).  Open composer-setup.exe to install composer. During Installation, it will ask you to "choose command line php y...
Post a Comment
Read more