Category: JavaScript

Categories
JavaScript Answers

How to add anchor tags dynamically to a div in JavaScript?

Labrador retriever puppy walking on green grass

To add anchor tags dynamically to a div in JavaScript, we use the createElement method.

For instance, we write

const myDiv = document.getElementById("myDiv");
const aTag = document.createElement("a");
aTag.setAttribute("href", "yourlink.html");
aTag.innerText = "link text";
myDiv.appendChild(aTag);

to select the div with getElementById.

Then we create a link with createElement.

Next, we call setAttribute to set the value of the href attribute.

We set the innerText property to set the link text.

Finally, we add the link as the last child of the div with myDiv.appendChild.

Categories
JavaScript Answers

How to resize image with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to resize image with JavaScript.

In this article, we’ll look at how to resize image with JavaScript.

How to resize image with JavaScript?

To resize image with JavaScript, we set the width and height properties.

For instance, we write

image.style.width = "50%";
image.style.height = "auto";

to set the style.width and style.height properties to set the width and height of the image.

Conclusion

To resize image with JavaScript, we set the width and height properties.

Categories
React Answers

How to add export to CSV button in React table with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to add export to CSV button in React table with JavaScript.

In this article, we’ll look at how to add export to CSV button in React table with JavaScript.

How to add export to CSV button in React table with JavaScript?

To add export to CSV button in React table with JavaScript, we use the react-csv package.

To install it, we run

npm i react-csv

Then we use it by writing

import { CSVLink, CSVDownload } from "react-csv";

const csvData = [
  ["firstname", "lastname", "email"],
  ["John", "Doe", "john.doe@xyz.com"],
  ["Jane", "Doe", "jane.doe@xyz.com"],
];

const Comp = () => {
  //...
  return <CSVLink data={csvData}>Download me</CSVLink>;
};

to add the CSVLink component to add a button to let the user export the array data into a csv.

We can also write

import { CSVLink, CSVDownload } from "react-csv";

const csvData = [
  ["firstname", "lastname", "email"],
  ["John", "Doe", "john.doe@xyz.com"],
  ["Jane", "Doe", "jane.doe@xyz.com"],
];

const Comp = () => {
  //...
  return <CSVDownload data={csvData} target="_blank" />;
};

to do the same think by adding a link instead of a button.

Conclusion

To add export to CSV button in React table with JavaScript, we use the react-csv package.

Categories
JavaScript Answers

How to pass an array as a URL parameter with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to pass an array as a URL parameter with JavaScript.

In this article, we’ll look at how to pass an array as a URL parameter with JavaScript.

How to pass an array as a URL parameter with JavaScript?

To pass an array as a URL parameter with JavaScript, we can create our own query string with the values.

For instance, we write

const myArray = ["aaa", "bbb", "ccc"];

const myArrayQry = myArray
  .map((el, idx) => {
    return `myArray['${idx}']=${el}`;
  })
  .join("&");

to call map with a function that returns the query string part with "myArray['${idx}']" as the key and el as its value.

idx is the index of the item in myArray.

Conclusion

To pass an array as a URL parameter with JavaScript, we can create our own query string with the values.

Categories
Angular Answers

How to set Angular background image with TypeScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to set Angular background image with TypeScript.

In this article, we’ll look at how to set Angular background image with TypeScript.

How to set Angular background image with TypeScript?

To set Angular background image with TypeScript, we set the [style.background-image] attribute.

For instance, we write

<div [style.background-image]="'url(/images/' + imgUrl + ')'"></div>

to set the [style.background-image] attribute to the string with the URL of the background image.

Conclusion

To set Angular background image with TypeScript, we set the [style.background-image] attribute.