Author: John Au-Yeung

Sometimes, we want to create circles around a circle with JavaScript.

In this article, we’ll look at how to create circles around a circle with JavaScript.

How to create circles around a circle with JavaScript?

To create circles around a circle with JavaScript, we can use some DOM methods.

For instance, we write:

<div id="parentDiv"></div>

to add a div.

Then we write:

const div = 360 / 6;
const radius = 150;
const parent = document.querySelector('#parentDiv')
const offsetToParentCenter = parseInt(parent.offsetWidth / 2);
const totalOffset = offsetToParentCenter;
for (let i = 1; i <= 6; ++i) {
  const childDiv = document.createElement('div');
  childDiv.className = 'div2';
  childDiv.style.position = 'absolute';
  const y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  const x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  childDiv.style.top = (y + totalOffset).toString() + "px";
  childDiv.style.left = (x + totalOffset).toString() + "px";
  parent.appendChild(childDiv);
}

We get the parent div with querySelector.

Then we add a for loop.

In the loop, we create a div with createElement and assign it to childDiv.

Next, we add a the class name for the childDiv.

Then we set the position of childDiv to 'absolute'.

And then we set the x and y position of the div so that they’re positioned in a circle.

Next, we call appendChild with childDiv to add them.

Finally, we add:

.div2 {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #ac5;
  border-radius: 100px;
}

to add styles to the div.

Now we should see 6 divs arranged in a circle.

Conclusion

To create circles around a circle with JavaScript, we can use some DOM methods.

Sometimes, we want to get the index of an element in JavaScript.

In this article, we’ll look at how to get the index of an element in JavaScript.

How to get the index of an element in JavaScript?

To get the index of an element in JavaScript, we can use the spread operator to spread a node list into an array.

Then we can use the array’s indexOf method to get the index.

For instance, we write:

const nodes = document.getElementsByTagName('*');
const nodesArr = [...nodes]
const index = nodesArr.indexOf(document.body)
console.log(index)

to select all elements with getElementsByTagName.

Then we spread the nodes into an array and assign it to nodesArr.

Next, we call nodesArr.indexOf with the element we’re trying to find the index for.

Then we get that the index is 0 or greater if the element we’re searching for is in the array.

Conclusion

To get the index of an element in JavaScript, we can use the spread operator to spread a node list into an array.

Then we can use the array’s indexOf method to get the index.

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.