Author: John Au-Yeung

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

Categories
JavaScript Answers Nodejs

How to add to an existing JSON file in Node.js?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to add to an existing JSON file in Node.js.

In this article, we’ll look at how to add to an existing JSON file in Node.js.

How to add to an existing JSON file in Node.js?

To add to an existing JSON file in Node.js, we can use the fs.readFile method.

For instance, we have:

["foo","bar"]

in results.json

Then we write:

const { promises: fs } = require("fs");
const currentSearchResult = 'example'

const write = async () => {
  const data = await fs.readFile('results.json')
  const json = JSON.parse(data)
  json.push(currentSearchResult)
  await fs.writeFile("results.json", JSON.stringify(json))
}
write()

to call fs.readFile to read results.json into data.

Then we call JSON.parse with data to parse data into an onject.

Then we call json.push with currentSearchResult to add currentSearchResult to json assuming json is an array.

Finally, we call fs.writeFile with the file path and the content to write to the file.

Now result.json has:

["foo","bar","example"]

Conclusion

To add to an existing JSON file in Node.js, we can use the fs.readFile method.

Categories
JavaScript Answers

How to convert a JavaScript timestamp into UTC format?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to convert a JavaScript timestamp into UTC format.

In this article, we’ll look at how to convert a JavaScript timestamp into UTC format.

How to convert a JavaScript timestamp into UTC format?

To convert a JavaScript timestamp into UTC format, we can call the toUTCString method.

For instance, we write:

const s = (new Date(1291656749000)).toUTCString()
console.log(s)

We create a date with a timestamp.

Then we call toUTCString to return the UTC date string from the date.

As a result, s is 'Mon, 06 Dec 2010 17:32:29 GMT'.

Conclusion

To convert a JavaScript timestamp into UTC format, we can call the toUTCString method.

Categories
JavaScript Answers

How to mute all sound in a page with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to mute all sound in a page with JavaScript.

In this article, we’ll look at how to mute all sound in a page with JavaScript.

How to mute all sound in a page with JavaScript?

To mute all sound in a page with JavaScript, we can set the muted property of each audio element to true.

For instance, we write:

<audio src='https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3' controls></audio>
<audio src='https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3' controls></audio>

to add the audio elements.

Then we write:

const elems = document.querySelectorAll("video, audio");
for (const el of elems) {
  el.muted = true
  el.pause()
}

We select all the audio and video elements with querySelectorAll.

Then we loop through each element in elems and set the muted property of it to true to mute the audio.

We can also call pause to pause the audio.

Conclusion

To mute all sound in a page with JavaScript, we can set the muted property of each audio element to true.

Categories
JavaScript Answers

How to include markdown (.md) files inside HTML files?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to include markdown (.md) files inside HTML files.

In this article, we’ll look at how to include markdown (.md) files inside HTML files.

How to include markdown (.md) files inside HTML files?

To include markdown (.md) files inside HTML files, we can use the zero-md web component.

For instance, we write:

<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>

<zero-md>
  <script type="text/markdown">
    # **This** is my [markdown](https://example.com)
  </script>
</zero-md>

We add the zero-md web component with a script inside that contains the Markdown code.

It’ll be rendered if we set the type attribute to text/markdown.

Conclusion

To include markdown (.md) files inside HTML files, we can use the zero-md web component.

Categories
JavaScript Answers Vue Vue Answers

How to upload an image in Vue.js?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to upload an image in Vue.js.

In this article, we’ll look at how to upload an image in Vue.js.

How to upload an image in Vue.js?

To upload an image in Vue.js, we can add a file input.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <p>
      <input type="file" accept="image/*" @change="uploadImage">
      <img :src="previewImage" />
    </p>
  `,
  data: {
    previewImage: undefined
  },
  methods: {
    uploadImage(e) {
      const [image] = e.target.files;
      const reader = new FileReader();
      reader.readAsDataURL(image);
      reader.onload = e => {
        this.previewImage = e.target.result;
        console.log(this.previewImage);
      };
    }
  }
})

We add the file input and img element to preview the image.

Then we set the change event handler of the input to uploadImage.

In uploadImage, we get the first selected file from e.target.files.

Then we create a new FileReader instance and call readAsDataURL with image to read it into a base64 string.

Then we set this.previewImage to `e.target.result, which has the base64 image string.

As a result, when we select an image with the file input, we see the image displayed.

Conclusion

To upload an image in Vue.js, we can add a file input.