Web developer specializing in React, Vue, and front end development.
To set focus on an element in an HTML form using JavaScript, we call the input’s focus method.
For instance, we write
<input type="text" id="myText" />
to add an input.
Then we write
document.getElementById("myText").focus();
to select the input with getElementById.
Then we call focus to set focus on it.
To disable input conditionally with Vue.js, we set the :disabled prop.
For instance, we write
<template>
<input type="text" :disabled="!validated" />
</template>
to set the disabled prop to the negation of the validated reactive property.
The input will then be disabled when validated is false.
To use moment.js to convert date to string in mm/dd/yyyy format with JavaScript, we use the format method.
For instance, we write
const startDate = moment().format("MM/DD/YYYY HH:mm:ss");
to create a moment object with moment with the current datetime.
Then we call format with a format string to return a string in mm/dd/yyyy format with the time in hours:minutes:seconds format.
To read in a local csv file in JavaScript, we can use the FileReader constructor.
For instance, we write:
<input type="file">
to add a file input.
Then we write:
const input = document.querySelector('input')
const fileReader = new FileReader()
fileReader.onload = (e) => {
console.log(e.target.result)
}
input.onchange = (e) => {
const [file] = e.target.files
fileReader.readAsBinaryString(file)
}
to select the input with querySelector.
Next, we create a FileReader instance.
Then we set its onload property to a function that logs the file content.
Next, we set input.onchange to a function that gets the selected file from e.target.files.
And then we call fileReader.readAsBinaryString to read the file.
To create a unique array of objects with JavaScript, we use the array filter method.
For instance, we write
const getUniqueBy = (arr, prop) => {
const set = new Set();
return arr.filter((o) => !set.has(o[prop]) && set.add(o[prop]));
};
to define the getUniqueBy function.
In it, we create a set with the Set constructor.
And then we return the array returned by filter that adds the o[prop] to the set if it doesn’t exist and if the property value doesn’t exist.