Author: John Au-Yeung

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

Categories
React Answers

How to change color of CircularProgress with React Material UI?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to change color and position of CircularProgress with React Material UI.

In this article, we’ll look at how to change color and position of CircularProgress with React Material UI.

How to change color and position of CircularProgress with React Material UI?

To change color and position of CircularProgress with React Material UI, we can set the color CSS property.

For instance, we write:

import React from "react";
import CircularProgress from "@material-ui/core/CircularProgress";

export default function App() {
  return (
    <div>
      <CircularProgress style={{ color: "yellow" }} />
    </div>
  );
}

We add the CircularProgress component with the style prop set to an object with the color property set to 'yellow'.

Therefore, the circular progress ring should be yellow.

Conclusion

To change color and position of CircularProgress with React Material UI, we can set the color CSS property.

Categories
React Answers

How to set the card height with React Material UI?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to set the card height with React Material UI.

In this article, we’ll look at how to set the card height with React Material UI.

How to set the card height with React Material UI?

To set the card height with React Material UI, we can set the style prop of the Card.

For instance, we write:

import React from "react";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";

const cardStyle = {
  display: "block",
  transitionDuration: "0.3s",
  height: "45vw"
};

export default function App() {
  return (
    <div>
      <Card style={cardStyle}>
        <CardHeader
          title="URL Avatar"
          subtitle="Subtitle"
          avatar="https://placeimg.com/800/450/nature"
        />
      </Card>
    </div>
  );
}

to set the style prop of the Card to an object that has the height of the card.

As a result, the card height should be set to 45vw.

Conclusion

To set the card height with React Material UI, we can set the style prop of the Card.

Categories
JavaScript Answers

How to detect Ctrl + A press in a keyup event with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to detect Ctrl + A press in a keyup event with JavaScript.

In this article, we’ll look at how to detect Ctrl + A press in a keyup event with JavaScript.

How to detect Ctrl + A press in a keyup event with JavaScript?

To detect Ctrl + A press in a keyup event with JavaScript, we can set the document.onkeyup property to a function that checks for the pressing ctrl+a key combo.

For instance, we write:

document.onkeyup = (e) => {
  if (e.ctrlKey && (e.keyCode == 65 || e.keyCode == 97)) {
    console.log('ctrl+a pressed')
  }
}

We set document.onkeyup to a function that checks if ctrl is pressed with e.ctrlKey.

And we check if the ‘a’ key is pressed with (e.keyCode == 65 || e.keyCode == 97).

If they’re both true, then we know ctrl+a is pressed.

Conclusion

To detect Ctrl + A press in a keyup event with JavaScript, we can set the document.onkeyup property to a function that checks for the pressing ctrl+a key combo.

Categories
JavaScript Answers

How to replace a text node with HTML text in JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to replace a text node with HTML text in JavaScript.

In this article, we’ll look at how to replace a text node with HTML text in JavaScript.

How to replace a text node with HTML text in JavaScript?

To replace a text node with HTML text in JavaScript, we can set the innerHTML property of the element to the HTML we want.

For instance, we write:

<span>
  https://example.com
</span>

to add a span.

Then we replace the HTML inside the span by writing:

const span = document.querySelector('span')
span.innerHTML = `<a href='${span.textContent}'>${span.textContent}</a>`

We get the span with querySelector.

Then we set the innerHTML property of the span to the HTML we want to replace it with.

As a result, we see the link rendered in the span.

Conclusion

To replace a text node with HTML text in JavaScript, we can set the innerHTML property of the element to the HTML we want.

Categories
JavaScript Answers Nodejs

How to write in a text file without overwriting with Node.js?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to write in a text file without overwriting with Node.js.

In this article, we’ll look at how to write in a text file without overwriting with Node.js.

How to write in a text file without overwriting with Node.js?

To write in a text file without overwriting with Node.js, we can use the appendFile method.

For instance, we write:

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

const write = async () => {
  await fs.appendFile("file.txt", 'abc')
}
write()

to call fs.appendFile with the path of the file to write to and the content to write into the file respectively.

The content will be added after the existing content of the file.

Conclusion

To write in a text file without overwriting with Node.js, we can use the appendFile method.