Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to get today’s date in Google Apps Script with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get today’s date in Google Apps Script with JavaScript.

In this article, we’ll look at how to get today’s date in Google Apps Script with JavaScript.

How to get today’s date in Google Apps Script with JavaScript?

To get today’s date in Google Apps Script with JavaScript, we use the Utilities.formatDate method.

For instance, we write

const today = Utilities.formatDate(new Date(), "GMT+1", "dd/MM/yyyy");

to call the Utilities.formatDate to get today’s date in dd/MM/yyyy format with time zone GMT+1 as a string.

Conclusion

To get today’s date in Google Apps Script with JavaScript, we use the Utilities.formatDate method.

Categories
TypeScript Answers

How to add environment variables with dotenv and TypeScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to add environment variables with dotenv and TypeScript.

In this article, we’ll look at how to add environment variables with dotenv and TypeScript.

How to add environment variables with dotenv and TypeScript?

To add environment variables with dotenv and TypeScript, we call the dotenv.config method.

For instance, we write

import * as dotenv from "dotenv";
dotenv.config({ path: __dirname + "/.env" });

to call dotenv.config with an object with the path of the environment variable file to load the key-value pairs into process.env.

Conclusion

To add environment variables with dotenv and TypeScript, we call the dotenv.config method.

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.