Printing the table on the web page having type effect repeatedly
Syntax: The format for printing the table will be as given below:
n * 1 = n n * 2 = 2n ...
Approach: The below approach will be implemented to print the table with type effect:
- Create a button with id as start & class as common, in order to include the different styling properties.
- Create a div section with id as a message.
- For styling the button, set the margin, width & height of the button, along with adding the background color as green. In order to make rounded corners, add the border-radius property to the button.
- For styling the <div> element, set the display property to flex & the setting the flex-direction as a row. Set the width & height of the div element, along with setting the value for justify-content as the center, in order to make the box shape to print the table inside of that box.
- For printing the table repeatedly, we have used the event Listener concept, along with using the different selectors in HTML DOM. Add the “click” event listener to the button, which will handle the printing of the table when the button is clicked.
- Create a function with the name typeEffect that will print every data of the table from the array in a row in the given interval of time using the setTimeOut() function.
- Call the function by clicking the button that was created in the above step.
Example: This example illustrates printing the table on the web page having a type effect repeatedly using HTML, CSS & JS.