Category: JavaScript

Sometimes, we want to check if an input value is empty and display an alert with JavaScript.

In this article, we’ll look at how to check if an input value is empty and display an alert with JavaScript.

How to check if an input value is empty and display an alert with JavaScript?

To check if an input value is empty and display an alert with JavaScript, we can check the value property of the input to see if it’s blank.

For instance, we write:

<form>
  <input>
  <button type='submit'>submit</button>
</form>

to add a form.

Then we write:

const form = document.querySelector('form')
const input = document.querySelector('input')

form.onsubmit = (e) => {
  e.preventDefault()
  if (!input.value) {
    alert('Input can not be left blank');
  }
}

to select the form and the input with querySelector.

Then we set the form.onsubmit to a function that checks if the input value is blank with !input.value.

If it’s true, then we display the alert.

Conclusion

To check if an input value is empty and display an alert with JavaScript, we can check the value property of the input to see if it’s blank.

Sometimes, we want to make a HTML5 video loop seamlessly with JavaScript.

In this article, we’ll look at how to make a HTML5 video loop seamlessly with JavaScript.

How to make a HTML5 video loop seamlessly with JavaScript?

To make a HTML5 video loop seamlessly with JavaScript, we can watch when the video almost ends and then set its time back to the start time.

For instance, we write:

<video width="300" height="300" controls loop autoplay preload="true">
  <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
</video>

to add a video element.

Then we write:

const vid = document.querySelector("video");
vid.addEventListener("timeupdate", (e) => {
  if (e.target.currentTime >= 29) {
    e.target.currentTime = 0.0;
  }
});

We select the video with querySelector.

Then we call addEventListener with 'timeupdate' to listen for the timeupdate event.

If the currentTime of the video is close to the end, then we set the currentTime back to 0 to restart the video.

Conclusion

To make a HTML5 video loop seamlessly with JavaScript, we can watch when the video almost ends and then set its time back to the start time.

Sometimes, we want to sum all the digits of a number JavaScript.

In this article, we’ll look at how to sum all the digits of a number JavaScript.

How to sum all the digits of a number JavaScript?

To sum all the digits of a number JavaScript, we can use some array methods.

For instance, we write:

const value = 2568;
const sum = value
  .toString()
  .split('')
  .map(Number)
  .reduce((a, b) => a + b, 0);
console.log(sum)

to split the value number into an array of digits.

And then we add the digits together with reduce.

To split the digits, we use toString to convert it to a string.

Then we call split with an empty string to split the string version of value into an array of digit strings.

Next, we call map with Number to map the digit strings back to numbers.

And then we use reduce to add them together.

Therefore, sum is 21.

Conclusion

To sum all the digits of a number JavaScript, we can use some array methods.

Sometimes, we want to allow numbers, backspace, delete, left and right arrow keys in an HTML input with JavaScript.

In this article, we’ll look at how to allow numbers, backspace, delete, left and right arrow keys in an HTML input with JavaScript.

How to allow numbers, backspace, delete, left and right arrow keys in an HTML input with JavaScript?

To allow numbers, backspace, delete, left and right arrow keys in an HTML input with JavaScript, we can add a keypress handler and check for the allowed keys inside.

For instance, we write:

<input>

to add an input.

Then we write:

const input = document.querySelector('input')
input.onkeypress = (e) => {
  if (e.keyCode < 48 || e.keyCode > 57) {
    e.preventDefault()
  } else {
    console.log(e.key)
  }
}

to select the input with querySelector.

Then we set input.onkyepress to a function that checks if the key pressed is any other than numbers, backspace, delete, left and right arrow keys with e.keyCode < 48 || e.keyCode > 57.

If this is true, then we call e.preventDefault to stop the keypress.

Otherwise, we log the key value with e.key.

Conclusion

To allow numbers, backspace, delete, left and right arrow keys in an HTML input with JavaScript, we can add a keypress handler and check for the allowed keys inside.

Sometimes, we want to select an element inside an SVG with D3 and JavaScript.

In this article, we’ll look at how to select an element inside an SVG with D3 and JavaScript.

How to select an element inside an SVG with D3 and JavaScript?

To select an element inside an SVG with D3 and JavaScript, we can use the select and selectAll methods.

For instance, we write:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 

to add an svg with a circle element in it.

Then we select the circle from the svg by writing:

const circle = d3.select("svg").selectAll("circle")
console.log(circle)

We call select to return the svg element.

Then we call selectAll to select all the circle elements.

Conclusion

To select an element inside an SVG with D3 and JavaScript, we can use the select and selectAll methods.