Web developer specializing in React, Vue, and front end development.
To append an array to form data in JavaScript, we convert it into a JSON string.
For instance, we write
const tags = ["this", "is", "an", "array"];
formData.append("tags", JSON.stringify(tags));
to call append with the key and the JSON array string converted from the tags array.
Sometimes, we want to get a YouTube thumbnail from a YouTube iframe with JavaScript.
In this article, we’ll look at how to get a YouTube thumbnail from a YouTube iframe with JavaScript.
To get a YouTube thumbnail from a YouTube iframe with JavaScript, we can create the URL with the video ID and quality setting.
For instance, we write
const getYoutubeThumbnail = (url, quality) => {
if (url) {
let videoId, thumbnail, result;
result = url.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/);
if (result) {
videoId = result.pop();
}
result = url.match(/youtu.be\/(.{11})/);
if (result) {
videoId = result.pop();
}
if (videoId) {
if (typeof quality === "undefined") {
quality = "high";
}
let qualityKey = "maxresdefault";
if (quality === "low") {
qualityKey = "sddefault";
} else if (quality == "medium") {
qualityKey = "mqdefault";
} else if (quality == "high") {
qualityKey = "hqdefault";
}
const thumbnail = `http://img.youtube.com/vi/${videoId}/${qualityKey}.jpg`;
return thumbnail;
}
}
return false;
};
to define the getYoutubeThumbnail function.
In it, we get the videoId from the YouTube urlwithmatch`.
We match the patterns for YouTube URLs to get the videoId.
Then we get the qualityKey to get the image file name according to the thumbnail quality.
And then we put the image thumbnail URL together.
To get a YouTube thumbnail from a YouTube iframe with JavaScript, we can create the URL with the video ID and quality setting.
Sometimes, we want to change link color of the current page with CSS.
In this article, we’ll look at how to change link color of the current page with CSS.
To change link color of the current page with CSS, we set the color and background-color properties.
For instance, we write
.currentLink {
color: #640200;
background-color: #000000;
}
to set the text color of the link with the currentLink class to #640200.
And we set the background color to #000000.
To change link color of the current page with CSS, we set the color and background-color properties.
Sometimes, we want to trigger button click from another button click event with JavaScript.
In this article, we’ll look at how to trigger button click from another button click event with JavaScript.
To trigger button click from another button click event with JavaScript, we call the element click method.
For instance, we write
document.getElementById("myBtn").click();
to select the element with getElementById.
Then we call click to trigger a click on the element.
To trigger button click from another button click event with JavaScript, we call the element click method.
Sometimes, we want to fix getFullyear() is not a function with JavaScript.
In this article, we’ll look at how to fix getFullyear() is not a function with JavaScript.
To fix getFullyear() is not a function with JavaScript, we should be called getFullYear instead.
For instance, we write
const start = new Date();
const y = start.getFullYear();
to call start.getFullYear to return the 4 digit year number of the start date.
To fix getFullyear() is not a function with JavaScript, we should be called getFullYear instead.