Author: John Au-Yeung

Sometimes, we want to check if text is in a string with JavaScript.

In this article, we’ll look at how to check if text is in a string with JavaScript.

How to check if text is in a string with JavaScript?

To check if text is in a string with JavaScript, we can use the JavaScript string’s includes method.

For instance, we write:

const str = "car, bicycle, bus";
const str2 = "car";
console.log(str.includes(str2));

We call str.includes with str2 to check whether the str2 string’s content is in str1.

Therefore, the console log should log true since 'car' is in 'car, bicycle, bus'.

Conclusion

To check if text is in a string with JavaScript, we can use the JavaScript string’s includes method.

Sometimes, we want to localize a simple HTML web page.

In this article, we’ll look at how to localize a simple HTML web page.

How to localize a simple HTML web page?

To localize a simple HTML web page, we can set the lang attribute of the text elements and then use CSS to show or hide them according to the browser language.

For instance, we write:

<span lang="en">Scale</span>
<span lang="de">Maßstab</span>

to add the spans with text for different languages.

We distinguish them with the lang attribute.

Then we write:

[lang] {
  display: none;
}

[lang=en] {
  display: unset;
}

to select the items with different lang values.

And we set the display CSS property accordingly.

Conclusion

To localize a simple HTML web page, we can set the lang attribute of the text elements and then use CSS to show or hide them according to the browser language.

To set the value of a datetime-local input to a date with JavaScript, we can set the input value to a date string.

For instance, we write:

<input id="dt" type="datetime-local" />

to add the datetime-local input.

Then we write:

const now = new Date();
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
document.getElementById('dt').value = now.toISOString().slice(0, 16);

We create the now date with the Date constructor.

Then we call setMinutes to change the time to local time by calling it with now.getMinutes() - now.getTimezoneOffset().

Next we set the value of the input with:

document.getElementById('dt').value = now.toISOString().slice(0, 16);

We set the value to a date string by taking the first 16 characters of the date time string with now.toISOString().slice(0, 16).

Sometimes, we want to display a loading screen while site content loads with JavaScript.

In this article, we’ll look at how to display a loading screen while site content loads with JavaScript.

How to display a loading screen while site content loads with JavaScript?

To display a loading screen while site content loads with JavaScript, we can use the jQuery on method to watch for the load event to be emitted.

For instance, we write:

$(window).on('load', () => {
  $("#loader").fadeOut("fast");
});

to call select the window with $(window).

Then we call on with 'load' and a function that selects the div and call fadeOut on it to make it disappear with the fade out effect.

We call it with 'fast' to make it fade out fast.

Then we add some styles to the div by writing:

#loader {
  width: 100%;
  height: 100%;
  background-color: white;
  margin: 0;
}

Conclusion

To display a loading screen while site content loads with JavaScript, we can use the jQuery on method to watch for the load event to be emitted.

Sometimes, we want to add a HTML5 Canvas pie chart with JavaScript.

In this article, we’ll look at how to add a HTML5 Canvas pie chart with JavaScript.

How to add a HTML5 Canvas pie chart with JavaScript?

To add a HTML5 Canvas pie chart with JavaScript, we can use the canvas moveTo, arc, lineTo, and fill methods.

For instance, we write:

<canvas id="can" width="200" height="200" />

to add a canvas element.

Then we write:

const canvas = document.getElementById("can");
const ctx = canvas.getContext("2d");
let lastend = 0;
const data = [200, 60, 15];
const myTotal = data.reduce((a, b) => a + b, 0);
const myColor = ['red', 'green', 'blue'];

for (const [i, d] of data.entries()) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, canvas.height / 2);
  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 * (d / myTotal)), false);
  ctx.lineTo(canvas.width / 2, canvas.height / 2);
  ctx.fill();
  lastend += Math.PI * 2 * (d / myTotal);
}

We select the canvas element with document.getElementById.

Then we get the context with getContext.

Next, we loop through the data entries with a for-of loop to add the pie slices.

To add the slice, we call beginPath to start drawing.

Then we call moveTo to move to the coordinates we want to start drawing.

Next, we call arc to draw the arc with the width, height and angle.

Then we call lineTo to move the line to the end of the slice.

Finally, we call fill to fill the chart with the fillStyle color.

And then we repeat this with all the data entries.

Conclusion

To add a HTML5 Canvas pie chart with JavaScript, we can use the canvas moveTo, arc, lineTo, and fill methods.