Categories
Books Vue 3 Vue 3 Projects

Buy Vue.js 3 By Example Now

Want to learn Vue 3 fast? Vue.js 3 By Example is out now.

Buy it now at https://www.packtpub.com/product/vue-js-3-by-example/9781838826345

Categories
JavaScript Answers

How to truncate a string in JavaScript?

Sometimes, we want to truncate a string in JavaScript.

In this article, we’ll look at how to truncate a string in JavaScript.

How to truncate a string in JavaScript?

To truncate a string in JavaScript, we use the string substring method.

For instance, we write

const truncateString = (str, length) => {
  return str.length > length ? str.substring(0, length - 3) + "..." : str;
};

to define the truncateString function.

In it, we str.substring if str.length is bigger than length to return a truncated substring.

Otherwise, we return str.

Conclusion

To truncate a string in JavaScript, we use the string substring method.

Categories
JavaScript Answers

How to fix JavaScript scrollTo method doing nothing?

Sometimes, we want to fix JavaScript scrollTo method doing nothing.

In this article, we’ll look at how to fix JavaScript scrollTo method doing nothing.

How to fix JavaScript scrollTo method doing nothing?

To fix JavaScript scrollTo method doing nothing, we put it in a setTimeout callback.

For instance, we write

setTimeout(() => {
  window.scrollTo(0, 300);
}, 2);

to call window.scrollTo in the setTimeout callback to delay the scrolling.

Conclusion

To fix JavaScript scrollTo method doing nothing, we put it in a setTimeout callback.

Categories
JavaScript Answers

How to split first name and last name using JavaScript?

Sometimes, we want to split first name and last name using JavaScript.

In this article, we’ll look at how to split first name and last name using JavaScript.

How to split first name and last name using JavaScript?

To split first name and last name using JavaScript, we use the split method.

For instance, we write

const names = "Paul Steve Jones".split(" ");

to call split with ' ' to split the names into an array of name strings.

Conclusion

To split first name and last name using JavaScript, we use the split method.

Categories
JavaScript Answers

How to do fade-in and fade-out with JavaScript and CSS?

Sometimes, we want to do fade-in and fade-out with JavaScript and CSS.

In this article, we’ll look at how to do fade-in and fade-out with JavaScript and CSS.

How to do fade-in and fade-out with JavaScript and CSS?

To do fade-in and fade-out with JavaScript and CSS, we use the transition CSS property.

For instance, we write

<button id="handle">Fade</button>
<div id="slideSource">Whatever you want here - images or text</div>

to add a button and the div we want to element.

Then we write

#slideSource {
  opacity: 1;
  transition: opacity 1s;
}

#slideSource.fade {
  opacity: 0;
}

to add the transition effects with the transition property.

We animate the opacity between 0 and 1.

Then we write

const slideSource = document.getElementById("slideSource");

document.getElementById("handle").onclick = () => {
  slideSource.classList.toggle("fade");
};

to select the div with getElementById.

And then we select the button and set its onclick property to a function that toggles the fade class to animate the opacity between 1 and 0 and vice versa when we click on it.

Conclusion

To do fade-in and fade-out with JavaScript and CSS, we use the transition CSS property.

Categories
JavaScript Answers

How to get path from the request with Node.js and JavaScript?

Sometimes, we want to get path from the request with Node.js and JavaScript.

In this article, we’ll look at how to get path from the request with Node.js and JavaScript.

How to get path from the request with Node.js and JavaScript?

To get path from the request with Node.js and JavaScript, we use the request.url property.

For instance, we write

const http = require("http");
const url = require("url");

const start = () => {
  const onRequest = (request, response) => {
    const pathname = url.parse(request.url).pathname;
    console.log(pathname);
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.write("Hello World");
    response.end();
  };

  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
};

exports.start = start;

to get the path name of the request URL with url.parse(request.url).pathname.

Conclusion

To get path from the request with Node.js and JavaScript, we use the request.url property.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.