Category: JavaScript

Categories
Express JavaScript Answers

How to Fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” Error in a JavaScript App?

yellow labrador puppies in green plastic container

Sometimes, we may run into the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app.

In this article, we’ll look at how to fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app.

Fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” Error in a JavaScript App

To fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app, we should enable cross-origin resource sharing (CORS) on the server app.

For instance, if we’re using Express to build our server-side web app, we can use the cors middleware.

To use it, we write:

const express = require('express')
const cors = require('cors')
const app = express()
const port = 3000

app.use(cors())

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

to add the cors middleware into our Express app with:

app.use(cors())

We installed the cors package to make it available.

To install it, we run:

npm i cors

Now we should be able to make requests from our JavaScript app to our server-side web app without the No ‘Access-Control-Allow-Origin’ header is present on the requested resource thrown in our JavaScript browser app.

Conclusion

To fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app, we should enable cross-origin resource sharing (CORS) on the server app.

For instance, if we’re using Express to build our server-side web app, we can use the cors middleware.

Categories
JavaScript Answers

How to Push JSON Objects into a JSON Array Stored in Local Storage?

black short coated dog on persons hand

Sometimes, we want to push JSON objects into a JSON array in local storage.

In this article, we’ll look at how to push JSON objects into a JSON array in local storage.

Push JSON Objects into a JSON Array in Local Storage

To push JSON objects into an array in local storage, we can push the object into an array, then we can stringify that array and put it into local storage.

For instance, we can write:

const a = [];
const obj = {
  foo: 'bar'
}
a.push(obj);
localStorage.setItem('session', JSON.stringify(a));

to create the a array.

Then we create the obj object that we put into the a array by calling push on a with obj as the argument.

Finally, we store the a array by putting it in an entry with key set to 'session' and a as the corresponding value with:

localStorage.setItem('session', JSON.stringify(a));

We’ve to convert the a array into a JSON string with JSON.stringify before we can store it in local storage with localStorage.setItem .

Conclusion

To push JSON objects into an array in local storage, we can push the object into an array, then we can stringify that array and put it into local storage.

Categories
JavaScript Answers

How to Let Users Enter Currency Values with HTML Number Inputs?

short-coated white and beige puppy on the floor

Sometimes, we want to let users enter currency values with HTML number inputs.

In this article, we’ll look at how to let users enter currency values with HTML number inputs.

Let Users Enter Currency Values with HTML Number Inputs

To let users enter currency values with HTML number inputs, we can set the step attribute to 0.01 so that users can enter 2 decimal places into the number input.

For instance, we can write:

<input type="number" min="0.01" step="0.01" max="1000" value="25.67" />

to add the number input with the min and max attributes set to the min and max values allowed in the input.

The step attribute is set to 0.01 to let us enter 2 decimal places into the input box.

Conclusion

To let users enter currency values with HTML number inputs, we can set the step attribute to 0.01 so that users can enter 2 decimal places into the number input.

Categories
JavaScript Answers

How to Wrap a Long JavaScript Template Literal Line to Multiple Lines without Creating a New Line in the String?

red and white happy birthday card

Sometimes, we want to wrap a long JavaScript template literal line to multiple lines without creating a new line in the string.

In this article, we’ll look at how to wrap a long JavaScript template literal line to multiple lines without creating a new line in the string.

Wrap a Long JavaScript Template Literal Line to Multiple Lines without Creating a New Line in the String

To wrap a long JavaScript template literal line to multiple lines without creating a new line in the string, we can use the \ character to break up the string code into multiple lines without creating a multi-line string.

For instance, we can write:

const text = `a very long string that just continues \
and continues and continues`;
console.log(text)

to create the text string with a \ between a very long string that just continues and and continues and continues .

Then we see from the console log that text is 'a very long string that just continues and continues and continues’ .

Conclusion

To wrap a long JavaScript template literal line to multiple lines without creating a new line in the string, we can use the “ character to break up the string code into multiple lines without creating a multi-line string.

Categories
JavaScript Answers

How to Disable Text Selection with JavaScript?

dog holding mushroom

Sometimes, we want to disable text selection with JavaScript.

In this article, we’ll look at how to disable text selection with JavaScript.

Disable Text Selection with JavaScript

To disable text selection with JavaScript, we can set the onselectstart and onmousedown properties of the element we want to disable selection for to a function that returns false .

For instance, if we have the following HTML:

<div>  
  hello world  
</div>

Then we write:

const disableselect = (e) => {  
  return false  
}  
document.onselectstart = disableselect  
document.onmousedown = disableselect

to disable select on the whole page.

We create the disableselect function that returns false and set that as the value of the document.onselectstart and document.onmousedown properties to disable text selection on the whole page.

Now when we try to select the text, nothing will happen.

Conclusion

To disable text selection with JavaScript, we can set the onselectstart and onmousedown properties of the element we want to disable selection for to a function that returns false .