DEV Community: Avnish Jayaswal

Python raw_input

Avnish Jayaswal — Wed, 16 Mar 2022 10:42:27 +0000

Python raw_input() function is removed from Python 3.x versions. But it exists in Python 2.x. Actually, it has the same functionality same as the python input() function of Python 3.x.

The raw_input() function reads a line from input (i.e. the user) and returns a string by stripping a trailing newline.

raw_input syntax Python v2.x

mydata = raw_input('Prompt :')
print (mydata)

raw_input syntax Python v3.x

mydata = input('Prompt :')
print (mydata)

Python raw_input() examples

In this example, read the user name using raw_input() and display it back on the screen using print():

#!/usr/bin/python
name=raw_input('Enter your name : ')
print ("Hi %s, Let us be friends!" % name);

Setting “checked” for a checkbox with jQuery

Avnish Jayaswal — Wed, 16 Mar 2022 10:38:16 +0000

You can check or uncheck a checkbox element or a radio button using the .prop() method:


// Check #x
$( "#x" ).prop( "checked", true );

// Uncheck #x
$( "#x" ).prop( "checked", false );

f you’re working with just one element, you can always just access the underlying HTMLInputElement and modify its .checked property


$('.x')[0].checked = true;
$('.x')[0].checked = false;

jQuery 1.5.x and below

$('.x').attr('checked', true);
$('.x').attr('checked', false);

How to check a checkbox is checked or not using jQuery

Avnish Jayaswal — Mon, 14 Mar 2022 08:44:16 +0000

Answer: Use the jQuery prop() method

To check whether checkboxes are checked or not using the jQuery prop() method as well as the :checked selector.

Example

The jQuery prop() method provides an effective way to track down the current status of a checkbox.

<script>
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true){
                console.log("Checkbox is checked.");
            }
            else if($(this).prop("checked") == false){
                console.log("Checkbox is unchecked.");
            }
        });
    });
</script>

Using the jQuery :checked Selector

<script>
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).is(":checked")){
                console.log("Checkbox is checked.");
            }
            else if($(this).is(":not(:checked)")){
                console.log("Checkbox is unchecked.");
            }
        });
    });
</script>

Using the jQuery is() Method :


<script>
  $(document).ready(function () {
    $("#but").click(function () {
      if ($("input[type=checkbox]").is(":checked")) {
        alert("Check box in Checked");
      } else {
        alert("Check box is Unchecked");
      }
    });
  });
</script>

HTML text input allows only numeric input

Avnish Jayaswal — Mon, 14 Mar 2022 08:36:11 +0000

<h2>JavaScript input filter showcase</h2>
<table>
  <tr>
    <td>Integer</td>
    <td><input id="intTextBox" /></td>
  </tr>
</table>

<script>
  function setInputFilter(textbox, inputFilter) {
    [
      "input",
      "keydown",
      "keyup",
      "mousedown",
      "mouseup",
      "select",
      "contextmenu",
      "drop",
    ].forEach(function (event) {
      textbox.addEventListener(event, function () {
        if (inputFilter(this.value)) {
          this.oldValue = this.value;
          this.oldSelectionStart = this.selectionStart;
          this.oldSelectionEnd = this.selectionEnd;
        } else if (this.hasOwnProperty("oldValue")) {
          this.value = this.oldValue;
          this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
        } else {
          this.value = "";
        }
      });
    });
  }

  setInputFilter(document.getElementById("intTextBox"), function (value) {
    return /^-?\d*$/.test(value);
  });
</script>

How do I check if an array includes a value in JavaScript

Avnish Jayaswal — Wed, 13 Jan 2021 15:03:26 +0000

The includes() method determines whether a javascript array contains a specified element.

This method returns true if the array contains the element, and false if element not exist in array.


var list = ["A", "B", "C", "D", "E"];

console.log(list.includes("A")); // true

 console.log(list.includes("A",1)); //returns false, as "A" is not present at index 1. 

console.log(list.includes("B",1)); //returns True , as "B" is present at index 1. 

console.log(list.indexOf("A") !== -1 ); // true

Array indexOf function

how to check exact position of element using indexOf JS method

indexOf(element) method, which search for element in the specified array and returns the index of its first occurrence, and -1 if the array does not contain element


var JSArr = ["A", "B", "C", "D"];

console.log(JSArr.indexOf("A")) // 0  found at postion 0 
console.log(JSArr.indexOf("B")) // 1  found at postion 1 
console.log(JSArr.indexOf("F")) // -1  not found

Example 2 using function


      var JSArr = ["A", "B", "C", "D"];

      if (JSArr.indexOf("A") !== -1) {
        alert("Value exists");
      } else {
        alert("Value does not exists");
      }

React Card

Avnish Jayaswal — Tue, 22 Dec 2020 14:02:29 +0000

Card is container based user interface use HTML for markup and CSS for styling.

React Card consist of various elements like header footer images multimedia action and buttons. one can construct different card as per requirement like business card, product card, Ad card, etc

React Bootstrap Card

React Bootstrap card are component, Component return a card that built from HTML and bootstrap CSS.

How to create React Card using bootstrap CSS

First one need to create a react app


npx create-react-app reactcard

After that one need to install bootstrap using following command


npm install react-bootstrap bootstrap

one need to import card component and bootstrap css in App.js


import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Card, Button } from 'react-bootstrap';




function App() {
  return (
    <Card style={{ width: '18rem' }}>
      <Card.Img variant="top" src="https://source.unsplash.com/user/erondu/600x400" />
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Some Custom text one can write here
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
  );
}

export default App;

Output looks like

React-bootstrap card image left (Example)


import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <div className="card mb-3" style={{width: '500px'}}>
      <div className="row no-gutters">
        <div className="col-md-4">
          <svg
            className="bd-placeholder-img"
            width="100%"
            height="250"
            xmlns="http://www.w3.org/2000/svg"
            aria-label="Placeholder: Image"
            preserveAspectRatio="xMidYMid slice"
            role="img"
          >
            <title>Placeholder</title>
            <rect width="100%" height="100%" fill="#868e96" />
            <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
              Image
            </text>
          </svg>
        </div>
        <div className="col-md-8">
          <div className="card-body">
            <h5 className="card-title">Card title</h5>
            <p className="card-text">
              Card Text
            </p>
            <p className="card-text">
              <small className="text-muted">Card Text 2</small>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Bootstrap card image left

Card Columns


import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Card, CardColumns } from "react-bootstrap";

function CardDisplay() {
  return (
    <CardColumns>
      <Card>
        <Card.Img variant="top" src="http://askavy.com/demo/img/img-card.jpg" />
        <Card.Body>
          <Card.Title>Card title </Card.Title>
          <Card.Text>
            Card Text This card has supporting text below as a natural lead-in
            to additional content.{" "}
          </Card.Text>
        </Card.Body>
        <Card.Footer>
          <small className="text-muted">Last updated 10 mins ago</small>
        </Card.Footer>
      </Card>

      <Card>
        <Card.Img variant="top" src="http://askavy.com/demo/img/img-card.jpg" />
        <Card.Body>
          <Card.Title>Card title</Card.Title>
          <Card.Text>
            Card Text his card has supporting text below as a natural lead-in to
            additional content.{" "}
          </Card.Text>
        </Card.Body>
        <Card.Footer>
          <small className="text-muted">Last updated 10 mins ago</small>
        </Card.Footer>
      </Card>

      <Card>
        <Card.Img variant="top" src="http://askavy.com/demo/img/img-card.jpg" />
        <Card.Body>
          <Card.Title>Card title</Card.Title>
          <Card.Text>
            Card Text his card has supporting text below as a natural lead-in to
            additional content.{" "}
          </Card.Text>
        </Card.Body>
        <Card.Footer>
          <small className="text-muted">Last updated 11 mins ago</small>
        </Card.Footer>
      </Card>
    </CardColumns>
  );
}
function App() {
  return (
    <div>
      <CardDisplay />
    </div>
  );
}

export default App;

React Card – Bootstrap 4 and Material Design


import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCardImage,
  MDBCardTitle,
  MDBCardText,
  MDBRow,
  MDBCol,
  MDBIcon,
} from "mdbreact";

const CardMaterail = () => {
  return (
    <MDBRow>
      <MDBCol md="4">
        <MDBCard cascade>
          <MDBCardImage
            cascade
            className="img-fluid"
            overlay="white-light"
            hover
            src="http://askavy.com/demo/img/img-card.jpg"
          />
          <MDBBtn
            floating
            tag="a"
            className="ml-auto mr-4 lighten-3 mdb-coalor"
            action
          >
            <MDBIcon icon="chevron-right" />
          </MDBBtn>
          <MDBCardBody cascade>
            <MDBCardTitle>Card title</MDBCardTitle>
            <hr />
            <MDBCardText>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </MDBCardText>
          </MDBCardBody>
          <div className="rounded-bottom mdb-color lighten-3 text-center pt-3">
            <ul className="list-unstyled list-inline font-small">
              <li className="list-inline-item pr-2 white-text">
                <MDBIcon far icon="clock" /> 05/10/2015
              </li>
              <li className="list-inline-item pr-2">
                <a href="#!" className="white-text">
                  <MDBIcon far icon="comments" className="mr-1" />
                  12
                </a>
              </li>
              <li className="list-inline-item pr-2">
                <a href="#!" className="white-text">
                  <MDBIcon fab icon="facebook-f" className="mr-1" />
                  21
                </a>
              </li>
              <li className="list-inline-item">
                <a href="#!" className="white-text">
                  <MDBIcon fab icon="twitter" className="mr-1" />5
                </a>
              </li>
            </ul>
          </div>
        </MDBCard>
      </MDBCol>
    </MDBRow>
  );
};

export default CardMaterail;

javascript maps

Avnish Jayaswal — Tue, 15 Dec 2020 14:21:51 +0000

How to create a map (javascript maps object)


   var map1 = new Map([[1 , 2], [3 ,4 ] ,[5, 6]]);
   console.log(map1) ;

OUT Put
    0: {1 => 2}
    key: 1
    value: 2
    1: {3 => 4}
    key: 3
    value: 4
    2: {5 => 6}
    key: 5
    value: 6


      var map2 = new Map([["firstname" ,"Avy"],  
                         ["lastname", "Jai"], 
                         ["website", "askavy"]]
                         );

        console.log(map2) ;

  out put 
  Map(3) {"firstname" => "Avy", "lastname" => "Jai", "website" => "askavy"}

  0: {"firstname" => "Avy"}
  1: {"lastname" => "Jai"}
  2: {"website" => "askavy"}

How to use Map.set


      var map3 = new Map();

      map3.set('key', 'value');

      console.log(map3) ;

OutPut
  Map(1) {"key" => "value"}
  0: {"key" => "value"}

How to use map.get


      var map3 = new Map();

      map3.set('key', 'value');

      console.log(map3.get('key')) ;

OutPut 
Value

how to use map.has

map.has return true if key found in array

      var map3 = new Map();

      map3.set('key', 'value');

      console.log(map3.has('key')) ;   

OutPut
true

js arr map


      var arr = [1, 2, 3, 4, 5, 6];

      var newArr = arr.map(function (val, index) {
        return { key: index, value: val };
      });

      console.log(newArr);

Output
0: {key: 0, value: 1}
1: {key: 1, value: 2}
2: {key: 2, value: 3}
3: {key: 3, value: 4}
4: {key: 4, value: 5}
5: {key: 5, value: 6}

javascript map array of objects


 var arr = [
        {
          id: 1,
          name: "Avy",
        },
        {
          id: 2,
          name: "Mark",
        },
      ];

      var result = arr.map((person) => ({
        value: person.id,
        text: person.name,
      })); 

---
 result is a array that have following values
    0: {value: 1, text: "Avy"}
    1: {value: 2, text: "Mark"}

reformat objects javascript map array of objects


var personsArr = [
        {
          id: 1,
          firstName: "Mark",
          lastName: "Selva",
        },
        {
          id: 2,
          firstName: "Avy",
          lastName: "Jai",
        },
        {
          id: 3,
          firstName: "Aaj",
          lastName: "kaal",
        },
      ];

      var newObj = {};

      let fullname = personsArr.map((person) => {
        newObj = person.firstName + " " + person.lastName;
        return newObj;
      });

      console.log(fullname);

OutPut
0: "Mark Selva"
1: "Avy Jai"
2: "Aaj kaal"

javascript map index


          const ArrayList = ["A", "B", "C", "D", "E"];
      ArrayList.map((currentElement, index) => {
        console.log("The current iteration is: " + index + " The current element is: " + currentElement);
      });

Output
The current iteration is: 0 The current element is: A
The current iteration is: 1 The current element is: B
The current iteration is: 2 The current element is: C
The current iteration is: 3 The current element is: D
The current iteration is: 4 The current element is: E

javascript map reduce
The reduce() method reduces an array of values down to just one value, reducer has mainly 2 arguments first is an accumulator and second on is currentValue (currentValue is the value of array element)

there is four arguments of reduce function

accumulator – the returned value of the previous iteration
currentValue – the current item in the array
index – the index of the current item
array – the original array on which reduce was called


           const numbers = [1, 2, 3, 4];
      const sum = numbers.reduce(function (accumulator, currentValue) {
        console.log(
          "accumulator = " + accumulator + " currentValue = " + currentValue
        );

        return accumulator + currentValue;
      }, 0);  // 0 means accumulator value is set to 0 and currentValue is 1 

Result 
accumulator = 0 currentValue = 1
accumulator = 1 currentValue = 2
accumulator = 3 currentValue = 3
accumulator = 6 currentValue = 4


      const numbers = [1, 2, 3, 4];
      const sum = numbers.reduce(function (accumulator, currentValue) {
        console.log(
          "accumulator = " + accumulator + " currentValue = " + currentValue
        );

        return accumulator + currentValue;
      });  // accumulator is set 1 and  currentValue is set to 2

Result
    accumulator = 1 currentValue = 2
    accumulator = 3 currentValue = 3
    accumulator = 6 currentValue = 4

How to find the sum of an array of numbers


      const numbers = [1, 2, 3, 4];
      const sum = numbers.reduce(function (accumulator, currentValue) {
        return accumulator + currentValue;
      });

      console.log(sum);  // Result 10

ES6 Version


      const numbers = [1, 2, 3, 4];
      const sum = numbers.reduce((accumulator, currentValue) => {
        return accumulator + currentValue;
      });

      console.log(sum);

How to skip over an element in .map()


      const numbers = [1, 2, 3, 4]; // skipping 3rd element
      const sum = numbers.reduce((accumulator, currentValue) => {
        if (currentValue == 3) {
          return false; // skip
        } else {
          return accumulator + currentValue;
        }
      });

      console.log(sum); // result 4

javascript replace string

Avnish Jayaswal — Mon, 14 Dec 2020 13:46:57 +0000

How to use the string method replace() with syntax and examples , How to replace all occurrence from string, How to replace srting using regular expression (regex)

javascript replace string() function used to replace occurrences of a specified string or regular expression with a replacement string.


   var string = "Blue need to replace";
   var result = string.replace(/Blue/g, "red");   //  red need to replace

 console.log(result);

javascript regex replace

  var string = "Blue   need   to          replace";
  var result = string.replace(/\s{2,}/g, ' ');   // Blue need to replace

console.log(result);

JavaScript replace special chars with empty strings Regex

 var string = "This is a <<<<!!!!st st>ring??? What ^^^";
 var result = string.replace(/[^a-zA-Z 0-9]+/g,'');   //  This is a st string What 

 console.log(result);

Replace multiple characters in one replace (regex OR operator |)

 var string = "#Replace_string-example:";
 var result = string.replace(/#|_|-/g,' ');  // Replace string example: 

        console.log(result);

Array.find Method in JavaScript

Avnish Jayaswal — Mon, 14 Dec 2020 13:41:31 +0000

The JavaScript Array find method is a way to find and return the first occurrence of an element in an array , Array.find only return a single matched element , if nothing is find then it return undefined

  var array = ['cat', 'dog' , 'car']; 


  var found = array.find(function (element) { 
      return element == 'dog'; 
  }); 


  document.write(found);  // return dog


        var array = [10, 20, 30, 40];

        var found = array.find(function (element) {
            return element > 10;  
        });

        document.write(found);  // return 20

Array find with startsWith javascript function


    const vehicles = [
        "car",
        "bus",
        "truck",
        "SUV"
    ];

    const result = vehicles.find(tree => tree.startsWith("c"));

    document.write(result) ;  // car

Array Find using JavaScript object


            const vehicles = [
                { name: "car", count: 4 },
                { name: "bus", count: 5 },
                { name: "SUV", count: 2 }
            ];


            const result = vehicles.find(vehicle => vehicle.name == 'SUV');

            console.log(result);  // {name: "SUV", count: 2}

Array Find on a JavaScript object with index i

                const vehicles = [
                    { name: "car", count: 4 },
                    { name: "bus", count: 5 },
                    { name: "SUV", count: 2 }
                ];

                const result = vehicles.find((vehicle, i) => {
                    if (vehicle.count > 1 && i !== 0) return true;
                });

                console.log(result);  // {name: "bus", count: 5}

javascript array for-each loop

Avnish Jayaswal — Mon, 14 Dec 2020 13:34:57 +0000

javascript forEach() method calls a function once for each element in an array , callback function is not executed for array elements without values.

for each code example

we have a array like

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

The forEach (javascript each) method use a callback function for each element of an array with 3 parameters

1 – array item
2 – array index
3 – array

array item (value) parameter in for each loop


     const numbers = [1, 2, 3, 4, ];
     numbers.forEach((item) => {
       document.write(item) ;      // output 1 2 3 4
       document.write("<br />") ;
     }) ;

optional parameter index in foreach method


      const numbers = [1, 2, 3, 4];
      numbers.forEach((item, index) => {
        console.log("Index: " + index + " Value: " + item);
      });

Output
Index: 0 Value: 1
Index: 1 Value: 2
Index: 2 Value: 3
Index: 3 Value: 4

array parameter in foreach method


      const numb

ers = [1, 2, 3, 4];
      numbers.forEach((item, index , array) => {
        console.log("Index: " + index + " Value: " + item + " array " + array);
      });
OutPut 
Index: 0 Value: 1 array 1,2,3,4
Index: 1 Value: 2 array 1,2,3,4
Index: 2 Value: 3 array 1,2,3,4
Index: 3 Value: 4 array 1,2,3,4

javascript array foreach using key and value


      const numbers = [1, 2, 3, 4];
      numbers.forEach((value, key) => {
        console.log("key: " + key + " Value: " + value );
      });

javascript foreach object

     const obj = {
        name: "value1",
        rank: "value2",
      };

     Object.keys(obj).forEach((key) => {
        console.log(key, obj[key]);
      });

Output
name value1
rank value2

The Object.values() function return an array with index and values


    const obj = {
        name: "Avy",
        rank: "Captain",
      };

      Object.values(obj).forEach((val) => {
        console.log(val);
      });

OutPut
Avy
Captain

The Object.entries() function returns an array of entries. An entry is an array of length 2, where entry[0] is the key and entry[1] is the value


      const obj = {
        name: "Avy",
        rank: "Captain",
      };

      Object.entries(obj).forEach((entry) => {
        const [key, value] = entry;
        console.log(key, value);
      });

OutPut
name Avy
rank Captain

javascript array for-each

Avnish Jayaswal — Fri, 16 Oct 2020 11:15:29 +0000

javascript forEach() method calls a function once for each element in an array , callback function is not executed for array elements without values.

The javascript each method use a callback function for each element of an array with 3 parameters

1 – array item
2 – array index
3 – array

array item (value) parameter in for each loop

     const numbers = [1, 2, 3, 4, ];
     numbers.forEach((item) => {
       document.write(item) ;      // output 1 2 3 4
       document.write("<br />") ;
     }) ;

optional parameter index in foreach method


      const numbers = [1, 2, 3, 4];
      numbers.forEach((item, index) => {
        console.log("Index: " + index + " Value: " + item);
      });

Output
Index: 0 Value: 1
Index: 1 Value: 2
Index: 2 Value: 3
Index: 3 Value: 4

javascript array foreach using key and value

      const numbers = [1, 2, 3, 4];
      numbers.forEach((value, key) => {
        console.log("key: " + key + " Value: " + value );
      });

javascript foreach object

    const obj = {
        name: "value1",
        rank: "value2",
      };

     Object.keys(obj).forEach((key) => {
        console.log(key, obj[key]);
      });

Output
name value1
rank value2

The Object.values() function return an array with index and values


    const obj = {
        name: "Avy",
        rank: "Captain",
      };

      Object.values(obj).forEach((val) => {
        console.log(val);
      });

OutPut
Avy
Captain

The Object.entries() function returns an array of entries. An entry is an array of length 2, where entry[0] is the key and entry[1] is the value


      const obj = {
        name: "Avy",
        rank: "Captain",
      };

      Object.entries(obj).forEach((entry) => {
        const [key, value] = entry;
        console.log(key, value);
      });

OutPut
name Avy
rank Captain

JQuery Each Function


      const yourArray = [1, 2, 3, 4];

      $.each(yourArray, function (key, value) {
        console.log("key: " + key + " Value: " + value);
      });

Output
key: 0 Value: 1
key: 1 Value: 2
key: 2 Value: 3
key: 3 Value: 4

React Bootstrap Table

Avnish Jayaswal — Fri, 25 Sep 2020 14:57:38 +0000

how to use React Bootstrap Table With Pagination and search

in this post, I am using MDBDataTable

Document: https://mdbootstrap.com/docs/react/tables/datatables/

How to install

  npm install mdbreact --save

How to use React Bootstrap Table

   import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { MDBDataTable } from "mdbreact";

const data = {
  columns: [
    {
      label: "Name",
      field: "name",
      sort: "asc",
      width: 150,
    },
    {
      label: "Position",
      field: "position",
      sort: "asc",
      width: 270,
    },
    {
      label: "Office",
      field: "office",
      sort: "asc",
      width: 200,
    },
    {
      label: "Age",
      field: "age",
      sort: "asc",
      width: 100,
    },
    {
      label: "Start date",
      field: "date",
      sort: "asc",
      width: 150,
    },
    {
      label: "Salary",
      field: "salary",
      sort: "asc",
      width: 100,
    },
  ],
  rows: [
    {
      name: "Nix",
      position: "Architect",
      office: "New City",
      age: "34",
      date: "2011/04/25",
      salary: "$220",
    },
    {
      name: "Wix",
      position: "Accountant",
      office: "Tokyo",
      age: "63",
      date: "2011/07/25",
      salary: "$170",
    },
    {
      name: "Ashton Cox",
      position: "Junior Technical Author",
      office: "San Francisco",
      age: "66",
      date: "2009/01/12",
      salary: "$86",
    },
    {
      name: "Cedric Kelly",
      position: "Senior Javascript Developer",
      office: "Edinburgh",
      age: "22",
      date: "2012/03/29",
      salary: "$433",
    },
    {
      name: "Brielle Williamson",
      position: "Integration Specialist",
      office: "New York",
      age: "61",
      date: "2012/12/02",
      salary: "$372",
    },
  ],
};

function App() {
  return (
    <div className="App">
      <MDBDataTable striped bordered small data={data} />
    </div>
  );
}

export default App;

Demo : CodeSandBox Link https://codesandbox.io/s/react-bootstrap-table-askavy-sbdy4